Merge pull request #611 from fdm-monster/fix/printer-list-action-tool…

…tips Terminal feat: add tooltips to printer list actions, fix: printer quick stop alert typo
fdm-monster · Dec 13, 2024 · 052b4a1 · 052b4a1
2 parents a2e7b24 + 0624e18
commit 052b4a1
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 64 deletions.
diff --git a/RELEASE_NOTES.MD b/RELEASE_NOTES.MD
@@ -1,8 +1,15 @@
 # Develop
 
+# Client 0.0.14
+
+## Features
+
+- Printer list: add tooltips to printer list actions
+
 ## Fixes
- 
+
 - YAML dialog wouldn't reset error after re-opening
+- Printer list - quick stop action: quick stop showed delete in alert, typo fixed
 
 # Client 0.0.13
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fdm-monster/client-next",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/fdm-monster/fdm-monster-client-next.git"

diff --git a/src/components/Generic/Actions/PrinterConnectionAction.vue b/src/components/Generic/Actions/PrinterConnectionAction.vue
@@ -1,23 +1,29 @@
 <template>
-  <v-badge
-    v-if="printer.enabled"
-    :color="isPrinterOperational() ? 'green' : 'red'"
-    class="pa-2"
-  >
-    <template #badge>
-      <v-icon v-if="isPrinterOperational()">check</v-icon>
-      <v-icon v-else>close</v-icon>
+  <v-tooltip location="top">
+    <template v-slot:activator="{ props }">
+      <v-badge
+        v-if="printer.enabled"
+        :color="isPrinterOperational() ? 'green' : 'red'"
+        class="pa-2"
+      >
+        <template #badge>
+          <v-icon v-if="isPrinterOperational()">check</v-icon>
+          <v-icon v-else>close</v-icon>
+        </template>
+        <v-btn
+          :disabled="isPrinterPrinting()"
+          v-bind="props"
+          color="secondary"
+          rounded
+          size="small"
+          @click.stop="togglePrinterConnection"
+        >
+          <v-icon>usb</v-icon>
+        </v-btn>
+      </v-badge>
     </template>
-    <v-btn
-      :disabled="isPrinterPrinting()"
-      color="secondary"
-      rounded
-      size="small"
-      @click.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>

diff --git a/src/components/Generic/Actions/PrinterDeleteAction.vue b/src/components/Generic/Actions/PrinterDeleteAction.vue
@@ -1,13 +1,19 @@
 <template>
-  <v-btn
-    class="ms-4"
-    color="secondary"
-    size="small"
-    rounded
-    @click.prevent.stop="deletePrinter"
-  >
-    <v-icon>delete</v-icon>
-  </v-btn>
+  <v-tooltip location="top">
+    <template v-slot:activator="{ props }">
+      <v-btn
+        v-bind="props"
+        class="ms-4"
+        color="secondary"
+        size="small"
+        rounded
+        @click.prevent.stop="deletePrinter"
+      >
+        <v-icon>delete</v-icon>
+      </v-btn>
+    </template>
+    <template v-slot:default>Delete printer</template>
+  </v-tooltip>
 </template>
 
 <script lang="ts" setup>

diff --git a/src/components/Generic/Actions/PrinterQuickStopAction.vue b/src/components/Generic/Actions/PrinterQuickStopAction.vue
@@ -1,20 +1,26 @@
 <template>
-  <v-badge
-    v-if="printer.enabled"
-    class="ma-2"
-  >
-    <template #badge>
-      <v-icon>bolt</v-icon>
+  <v-tooltip location="top">
+    <template v-slot:activator="{ props }">
+      <v-badge
+        v-if="printer.enabled"
+        class="ma-2"
+      >
+        <template #badge>
+          <v-icon>bolt</v-icon>
+        </template>
+        <v-btn
+          v-bind="props"
+          color="secondary"
+          size="small"
+          rounded
+          @click.stop="clickQuickStop"
+        >
+          <v-icon>dangerous</v-icon>
+        </v-btn>
+      </v-badge>
     </template>
-    <v-btn
-      color="secondary"
-      size="small"
-      rounded
-      @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>
@@ -26,8 +32,8 @@ const props = defineProps<{
 }>()
 
 async function clickQuickStop() {
-  if (confirm('Are you sure to abort the print? Please reconnect after.')) {
-    await CustomGcodeService.postQuickStopM112Command(props.printer.id)
-  }
+  if (!confirm('Are you sure to quick stop this printer?')) return
+
+  await CustomGcodeService.postQuickStopM112Command(props.printer.id)
 }
 </script>
diff --git a/src/components/Generic/Actions/PrinterSettingsAction.vue b/src/components/Generic/Actions/PrinterSettingsAction.vue
@@ -1,13 +1,19 @@
 <template>
-  <v-btn
-    color="secondary"
-    class="ma-2"
-    size="small"
-    rounded
-    @click.c.capture.native.stop="openSettings()"
-  >
-    <v-icon>settings</v-icon>
-  </v-btn>
+  <v-tooltip location="top">
+    <template v-slot:activator="{ props }">
+      <v-btn
+        v-bind="props"
+        color="secondary"
+        class="ma-2"
+        size="small"
+        rounded
+        @click.c.capture.native.stop="openSettings()"
+      >
+        <v-icon>settings</v-icon>
+      </v-btn>
+    </template>
+    <template v-slot:default>Update printer settings</template>
+  </v-tooltip>
 </template>
 
 <script lang="ts">

diff --git a/src/components/Generic/Actions/PrinterUrlAction.vue b/src/components/Generic/Actions/PrinterUrlAction.vue
@@ -1,12 +1,18 @@
 <template>
-  <v-btn
-    color="secondary"
-    rounded
-    size="small"
-    @click.c.capture.native.stop="openPrinterURL()"
-  >
-    <v-icon>directions</v-icon>
-  </v-btn>
+  <v-tooltip location="top">
+    <template v-slot:activator="{ props }">
+      <v-btn
+        v-bind="props"
+        color="secondary"
+        rounded
+        size="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>