From ecaa894fbb7ae9cb2ebc1dbb9688b7eef312b740 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 5 Sep 2023 07:34:18 +0200
Subject: [PATCH] refactor: refactor ToolheadControlPanel (#1530)

---
 src/components/inputs/ToolSlider.vue          |  3 +-
 .../panels/ToolheadControlPanel.vue           | 32 +++++++++----------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/inputs/ToolSlider.vue b/src/components/inputs/ToolSlider.vue
index 9b61a65b6..ba30623da 100644
--- a/src/components/inputs/ToolSlider.vue
+++ b/src/components/inputs/ToolSlider.vue
@@ -85,6 +85,7 @@ import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import { Debounce } from 'vue-debounce-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { mdiLockOpenVariantOutline, mdiLockOutline, mdiMinus, mdiPlus, mdiRestart } from '@mdi/js'
+import { TranslateResult } from 'vue-i18n'
 
 @Component
 export default class ToolSlider extends Mixins(BaseMixin) {
@@ -107,7 +108,7 @@ export default class ToolSlider extends Mixins(BaseMixin) {
     @Prop({ type: Number, required: true }) declare readonly target: number
     @Prop({ type: String, required: true }) declare readonly command: string
     @Prop({ type: String, default: '' }) declare readonly attributeName: string
-    @Prop({ type: String, default: '' }) declare readonly label: string
+    @Prop({ default: '' }) declare readonly label: string | TranslateResult
     @Prop({ type: String, default: '' }) declare readonly icon: string
     @Prop({ type: String, default: '%' }) declare readonly unit: string
     @Prop({ type: Number, default: 1 }) declare readonly attributeScale: number
diff --git a/src/components/panels/ToolheadControlPanel.vue b/src/components/panels/ToolheadControlPanel.vue
index 1a2c3a814..25d0277c3 100644
--- a/src/components/panels/ToolheadControlPanel.vue
+++ b/src/components/panels/ToolheadControlPanel.vue
@@ -2,19 +2,11 @@
     <panel
         v-if="klipperReadyForGui"
         :icon="mdiGamepad"
-        :title="$t('Panels.ToolheadControlPanel.Headline').toString()"
+        :title="$t('Panels.ToolheadControlPanel.Headline')"
         :collapsible="true"
         card-class="toolhead-control-panel">
         <!-- PANEL-HEADER 3-DOT-MENU -->
-        <template
-            v-if="
-                (controlStyle !== 'bars' && (existsZtilt || existsQGL)) ||
-                existsBedScrews ||
-                existsBedTilt ||
-                existsDeltaCalibrate ||
-                existsScrewsTilt
-            "
-            #buttons>
+        <template v-if="showButtons" #buttons>
             <v-menu left offset-y :close-on-content-click="false" class="pa-0">
                 <template #activator="{ on, attrs }">
                     <v-btn icon tile v-bind="attrs" :disabled="['printing'].includes(printer_state)" v-on="on">
@@ -92,21 +84,21 @@
             </v-menu>
         </template>
         <!-- MOVE TO CONTROL -->
-        <move-to-control class="py-0 pt-3"></move-to-control>
+        <move-to-control class="py-0 pt-3" />
         <!-- AXIS CONTROL -->
         <v-container v-if="axisControlVisible">
-            <component :is="`${controlStyle}-control`"></component>
+            <component :is="`${controlStyle}-control`" />
         </v-container>
         <!-- Z-OFFSET CONTROL -->
-        <v-divider :class="{ 'mt-3': !axisControlVisible }"></v-divider>
+        <v-divider :class="{ 'mt-3': !axisControlVisible }" />
         <v-container>
-            <zoffset-control></zoffset-control>
+            <zoffset-control />
         </v-container>
         <!-- SPEED FACTOR -->
-        <v-divider></v-divider>
+        <v-divider />
         <v-container>
             <tool-slider
-                :label="$t('Panels.ToolheadControlPanel.SpeedFactor').toString()"
+                :label="$t('Panels.ToolheadControlPanel.SpeedFactor')"
                 :icon="mdiSpeedometer"
                 :target="speedFactor"
                 :min="1"
@@ -116,7 +108,7 @@
                 :dynamic-range="true"
                 :has-input-field="true"
                 command="M220"
-                attribute-name="S"></tool-slider>
+                attribute-name="S" />
         </v-container>
     </panel>
 </template>
@@ -172,5 +164,11 @@ export default class ToolheadControlPanel extends Mixins(BaseMixin, ControlMixin
     get axisControlVisible() {
         return !(this.isPrinting && (this.$store.state.gui.control.hideDuringPrint ?? false))
     }
+
+    get showButtons() {
+        if (this.controlStyle !== 'bars' && (this.existsZtilt || this.existsQGL)) return true
+
+        return this.existsBedScrews || this.existsBedTilt || this.existsDeltaCalibrate || this.existsScrewsTilt
+    }
 }
 </script>