Merge pull request #1785 from fdm-monster/fix/printer-list-action-too…

…ltips

feat: add tooltips to printer list actions, fix: printer quick stop alert typo

RELEASE_NOTES.MD

@@ -1,7 +1,14 @@
 # Release notes
 
+## Client 13/12/2024 1.8.4
+
+Features
+
+- Printer list: add tooltips to printer list actions
+
 Fixes
 
+- Printer list - quick stop action: quick stop showed delete in alert, typo fixed
 - YAML dialog wouldn't reset error after re-opening
 
 ## Client 07/12/2024 1.8.3
@@ -50,7 +57,7 @@ Fixes
 Fixes
 
 - First-time setup: background was appearing above first-time-setup, not fixed and below
- 
+
 ## Client 14/11/2024 1.7.0
 
 Features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fdm-monster/client",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "author": "David Zwart",
   "license": "AGPL-3.0-or-later",
   "repository": {

src/components/Generic/Actions/PrinterConnectionAction.vue

@@ -1,18 +1,25 @@
 <template>
-  <v-badge v-if="printer.enabled" :color="isPrinterOperational() ? 'green' : 'red'" overlap>
-    <template v-slot:badge>
-      <v-icon v-if="isPrinterOperational()">check</v-icon>
-      <v-icon v-else>close</v-icon>
+  <v-tooltip top>
+    <template v-slot:activator="{ on, attrs }">
+      <v-badge v-if="printer.enabled" :color="isPrinterOperational() ? 'green' : 'red'" overlap>
+        <template v-slot:badge>
+          <v-icon v-if="isPrinterOperational()">check</v-icon>
+          <v-icon v-else>close</v-icon>
+        </template>
+        <v-btn
+          v-bind="attrs"
+          v-on="on"
+          :disabled="isPrinterPrinting()"
+          fab
+          small
+          @click.c.capture.native.stop="togglePrinterConnection()"
+        >
+          <v-icon>usb</v-icon>
+        </v-btn>
+      </v-badge>
     </template>
-    <v-btn
-      :disabled="isPrinterPrinting()"
-      fab
-      small
-      @click.c.capture.native.stop="togglePrinterConnection()"
-    >
-      <v-icon>usb</v-icon>
-    </v-btn>
-  </v-badge>
+    <template v-slot:default>Connect USB (OctoPrint only)</template>
+  </v-tooltip>
 </template>
 
 <script lang="ts" setup>

src/components/Generic/Actions/PrinterDeleteAction.vue

@@ -1,7 +1,12 @@
 <template>
-  <v-btn class="ma-2" fab small @click.prevent.stop="deletePrinter">
-    <v-icon>delete</v-icon>
-  </v-btn>
+  <v-tooltip top>
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn class="ma-2" fab small @click.prevent.stop="deletePrinter" v-bind="attrs" v-on="on">
+        <v-icon>delete</v-icon>
+      </v-btn>
+    </template>
+    <template v-slot:default>Delete printer</template>
+  </v-tooltip>
 </template>
 
 <script lang="ts" setup>

src/components/Generic/Actions/PrinterQuickStopAction.vue

@@ -1,12 +1,17 @@
 <template>
-  <v-badge v-if="printer.enabled" class="ma-2" overlap>
-    <template #badge>
-      <v-icon>bolt</v-icon>
+  <v-tooltip top>
+    <template v-slot:activator="{ on, attrs }">
+      <v-badge v-if="printer.enabled" class="ma-2" overlap>
+        <template #badge>
+          <v-icon>bolt</v-icon>
+        </template>
+        <v-btn fab small @click.stop="clickQuickStop" v-bind="attrs" v-on="on">
+          <v-icon>dangerous</v-icon>
+        </v-btn>
+      </v-badge>
     </template>
-    <v-btn fab small @click.stop="clickQuickStop">
-      <v-icon>dangerous</v-icon>
-    </v-btn>
-  </v-badge>
+    <template v-slot:default>Perform quick stop of printer</template>
+  </v-tooltip>
 </template>
 
 <script lang="ts" setup>
@@ -18,7 +23,7 @@ const props = defineProps<{
 }>();
 
 async function clickQuickStop() {
-  if (!confirm("Are you sure to delete this printer?")) return;
+  if (!confirm("Are you sure to quick stop this printer?")) return;
 
   await CustomGcodeService.postQuickStopM112Command(props.printer.id);
 }

src/components/Generic/Actions/PrinterSettingsAction.vue

@@ -1,7 +1,12 @@
 <template>
-  <v-btn fab small @click.c.capture.native.stop="openSettings()">
-    <v-icon>settings</v-icon>
-  </v-btn>
+  <v-tooltip top>
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn fab small @click.c.capture.native.stop="openSettings()" v-bind="attrs" v-on="on">
+        <v-icon>settings</v-icon>
+      </v-btn>
+    </template>
+    <template v-slot:default>Update printer settings</template>
+  </v-tooltip>
 </template>
 
 <script lang="ts">

src/components/Generic/Actions/PrinterUrlAction.vue

@@ -1,7 +1,19 @@
 <template>
-  <v-btn class="ma-2" fab small @click.c.capture.native.stop="openPrinterURL()">
-    <v-icon>directions</v-icon>
-  </v-btn>
+  <v-tooltip top>
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn
+        class="ma-2"
+        v-bind="attrs"
+        v-on="on"
+        fab
+        small
+        @click.c.capture.native.stop="openPrinterURL()"
+      >
+        <v-icon>directions</v-icon>
+      </v-btn>
+    </template>
+    <template v-slot:default>Visit printer service</template>
+  </v-tooltip>
 </template>
 
 <script lang="ts" setup>

src/components/PrinterList/PrintersView.vue

@@ -127,7 +127,7 @@
         </template>
         <template v-slot:item.actions="{ item }">
           <PrinterUrlAction :printer="item" />
-          <PrinterConnectionAction :printer="item" />
+          <PrinterConnectionAction :printer="item" v-if="item.printerType === 0" />
           <PrinterQuickStopAction :printer="item" />
           <SyncPrinterNameAction :printer="item" v-if="item.printerType === 0" />
           <PrinterDeleteAction :printer="item" />