From 083e922e89e05f34fd1707333099de37f85dd610 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 22 Oct 2023 18:37:39 +0200
Subject: [PATCH 1/4] feat: add option to hide parts of the ToolheadPanel

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../panels/ToolheadControlPanel.vue           | 23 ++++-
 .../panels/ToolheadControls/MoveToControl.vue | 12 ++-
 .../ToolheadPanelSettings.vue                 | 98 +++++++++++++++++++
 src/store/gui/index.ts                        |  7 ++
 src/store/gui/types.ts                        |  7 ++
 5 files changed, 141 insertions(+), 6 deletions(-)
 create mode 100644 src/components/panels/ToolheadControls/ToolheadPanelSettings.vue

diff --git a/src/components/panels/ToolheadControlPanel.vue b/src/components/panels/ToolheadControlPanel.vue
index 25d0277c3..ccb104dea 100644
--- a/src/components/panels/ToolheadControlPanel.vue
+++ b/src/components/panels/ToolheadControlPanel.vue
@@ -82,6 +82,7 @@
                     </v-list-item>
                 </v-list>
             </v-menu>
+            <toolhead-panel-settings />
         </template>
         <!-- MOVE TO CONTROL -->
         <move-to-control class="py-0 pt-3" />
@@ -90,13 +91,13 @@
             <component :is="`${controlStyle}-control`" />
         </v-container>
         <!-- Z-OFFSET CONTROL -->
-        <v-divider :class="{ 'mt-3': !axisControlVisible }" />
-        <v-container>
+        <v-divider v-if="showZOffset" :class="{ 'mt-3': !axisControlVisible }" />
+        <v-container v-if="showZOffset">
             <zoffset-control />
         </v-container>
         <!-- SPEED FACTOR -->
-        <v-divider />
-        <v-container>
+        <v-divider v-if="showSpeedFactor" />
+        <v-container v-if="showSpeedFactor">
             <tool-slider
                 :label="$t('Panels.ToolheadControlPanel.SpeedFactor')"
                 :icon="mdiSpeedometer"
@@ -162,6 +163,8 @@ export default class ToolheadControlPanel extends Mixins(BaseMixin, ControlMixin
     }
 
     get axisControlVisible() {
+        if (!this.showControl) return false
+
         return !(this.isPrinting && (this.$store.state.gui.control.hideDuringPrint ?? false))
     }
 
@@ -170,5 +173,17 @@ export default class ToolheadControlPanel extends Mixins(BaseMixin, ControlMixin
 
         return this.existsBedScrews || this.existsBedTilt || this.existsDeltaCalibrate || this.existsScrewsTilt
     }
+
+    get showControl() {
+        return this.$store.state.gui.view.toolhead.showControl ?? true
+    }
+
+    get showZOffset() {
+        return this.$store.state.gui.view.toolhead.showZOffset ?? true
+    }
+
+    get showSpeedFactor() {
+        return this.$store.state.gui.view.toolhead.showSpeedFactor ?? true
+    }
 }
 </script>
diff --git a/src/components/panels/ToolheadControls/MoveToControl.vue b/src/components/panels/ToolheadControls/MoveToControl.vue
index 22cbb3588..8c4b539b8 100644
--- a/src/components/panels/ToolheadControls/MoveToControl.vue
+++ b/src/components/panels/ToolheadControls/MoveToControl.vue
@@ -8,7 +8,7 @@
         }">
         <template #default="{ el }">
             <v-container class="py-0">
-                <v-row class="flex-nowrap pb-1">
+                <v-row v-if="showPosition" class="flex-nowrap pb-1">
                     <v-col
                         :class="{
                             'col-5': el.is.small,
@@ -35,7 +35,7 @@
                         </span>
                     </v-col>
                 </v-row>
-                <v-row dense>
+                <v-row v-if="showCoordinates" dense>
                     <v-col :class="el.is.xsmall ? 'col-12' : 'col-4'">
                         <move-to-input
                             v-model="input.x.pos"
@@ -153,6 +153,14 @@ export default class MoveToControl extends Mixins(BaseMixin, ControlMixin) {
         return this.bed_mesh?.profile_name ?? ''
     }
 
+    get showPosition() {
+        return this.$store.state.gui.view.toolhead.showPosition ?? true
+    }
+
+    get showCoordinates() {
+        return this.$store.state.gui.view.toolhead.showCoordinates ?? true
+    }
+
     sendCmd(): void {
         const xPos = this.input.x.pos !== this.gcodePositions.x ? ` X${this.input.x.pos}` : ''
         const yPos = this.input.y.pos !== this.gcodePositions.y ? ` Y${this.input.y.pos}` : ''
diff --git a/src/components/panels/ToolheadControls/ToolheadPanelSettings.vue b/src/components/panels/ToolheadControls/ToolheadPanelSettings.vue
new file mode 100644
index 000000000..7e33b8d5c
--- /dev/null
+++ b/src/components/panels/ToolheadControls/ToolheadPanelSettings.vue
@@ -0,0 +1,98 @@
+<template>
+    <v-menu :offset-y="true" :close-on-content-click="false">
+        <template #activator="{ on, attrs }">
+            <v-btn icon tile v-bind="attrs" v-on="on">
+                <v-icon small>{{ mdiCog }}</v-icon>
+            </v-btn>
+        </template>
+        <v-list>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showPosition"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ToolheadPanel.ShowPosition')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showCoordinates"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ToolheadPanel.ShowCoordinates')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showControl"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ToolheadPanel.ShowControl')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showZOffset"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ToolheadPanel.ShowZOffset')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showSpeedFactor"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ToolheadPanel.ShowSpeedFactor')" />
+            </v-list-item>
+        </v-list>
+    </v-menu>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiCog } from '@mdi/js'
+
+@Component
+export default class ToolheadPanelSettings extends Mixins(BaseMixin) {
+    mdiCog = mdiCog
+
+    get showPosition(): boolean {
+        return this.$store.state.gui.view.toolhead.showPosition ?? true
+    }
+
+    set showPosition(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.toolhead.showPosition', value: newVal })
+    }
+
+    get showCoordinates(): boolean {
+        return this.$store.state.gui.view.toolhead.showCoordinates ?? true
+    }
+
+    set showCoordinates(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.toolhead.showCoordinates', value: newVal })
+    }
+
+    get showControl(): boolean {
+        return this.$store.state.gui.view.toolhead.showControl ?? true
+    }
+
+    set showControl(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.toolhead.showControl', value: newVal })
+    }
+
+    get showZOffset(): boolean {
+        return this.$store.state.gui.view.toolhead.showZOffset ?? true
+    }
+
+    set showZOffset(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.toolhead.showZOffset', value: newVal })
+    }
+
+    get showSpeedFactor(): boolean {
+        return this.$store.state.gui.view.toolhead.showSpeedFactor ?? true
+    }
+
+    set showSpeedFactor(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.toolhead.showSpeedFactor', value: newVal })
+    }
+}
+</script>
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index 47512562c..806224056 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -252,6 +252,13 @@ export const getDefaultState = (): GuiState => {
                 currentPath: 'timelapse',
                 selectedFiles: [],
             },
+            toolhead: {
+                showPosition: true,
+                showCoordinates: true,
+                showControl: true,
+                showZOffset: true,
+                showSpeedFactor: true,
+            },
             webcam: {
                 currentCam: {
                     dashboard: 'all',
diff --git a/src/store/gui/types.ts b/src/store/gui/types.ts
index 7ad7e9124..a660abc20 100644
--- a/src/store/gui/types.ts
+++ b/src/store/gui/types.ts
@@ -178,6 +178,13 @@ export interface GuiState {
             currentPath: string
             selectedFiles: FileStateFile[]
         }
+        toolhead: {
+            showPosition: boolean
+            showCoordinates: boolean
+            showControl: boolean
+            showZOffset: boolean
+            showSpeedFactor: boolean
+        }
         webcam: {
             currentCam: {
                 dashboard: string

From 2264e4b8ee6128b414c46c78cead8487c12443f4 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 25 Oct 2023 23:23:33 +0200
Subject: [PATCH 2/4] fix: display issues with different open sections

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../panels/ToolheadControlPanel.vue           | 10 +++---
 .../panels/ToolheadControls/MoveToControl.vue | 32 ++++++++++++-------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/components/panels/ToolheadControlPanel.vue b/src/components/panels/ToolheadControlPanel.vue
index ccb104dea..910063e30 100644
--- a/src/components/panels/ToolheadControlPanel.vue
+++ b/src/components/panels/ToolheadControlPanel.vue
@@ -85,13 +85,13 @@
             <toolhead-panel-settings />
         </template>
         <!-- MOVE TO CONTROL -->
-        <move-to-control class="py-0 pt-3" />
+        <move-to-control />
         <!-- AXIS CONTROL -->
         <v-container v-if="axisControlVisible">
             <component :is="`${controlStyle}-control`" />
         </v-container>
         <!-- Z-OFFSET CONTROL -->
-        <v-divider v-if="showZOffset" :class="{ 'mt-3': !axisControlVisible }" />
+        <v-divider v-if="showZOffset" />
         <v-container v-if="showZOffset">
             <zoffset-control />
         </v-container>
@@ -174,15 +174,15 @@ export default class ToolheadControlPanel extends Mixins(BaseMixin, ControlMixin
         return this.existsBedScrews || this.existsBedTilt || this.existsDeltaCalibrate || this.existsScrewsTilt
     }
 
-    get showControl() {
+    get showControl(): boolean {
         return this.$store.state.gui.view.toolhead.showControl ?? true
     }
 
-    get showZOffset() {
+    get showZOffset(): boolean {
         return this.$store.state.gui.view.toolhead.showZOffset ?? true
     }
 
-    get showSpeedFactor() {
+    get showSpeedFactor(): boolean {
         return this.$store.state.gui.view.toolhead.showSpeedFactor ?? true
     }
 }
diff --git a/src/components/panels/ToolheadControls/MoveToControl.vue b/src/components/panels/ToolheadControls/MoveToControl.vue
index 8c4b539b8..7188be5c9 100644
--- a/src/components/panels/ToolheadControls/MoveToControl.vue
+++ b/src/components/panels/ToolheadControls/MoveToControl.vue
@@ -1,13 +1,13 @@
 <template>
-    <responsive
-        :breakpoints="{
-            xsmall: (el) => el.width <= 320,
-            small: (el) => el.width > 320 && el.width <= 460,
-            medium: (el) => el.width > 460 && el.width <= 560,
-            large: (el) => el.width > 560,
-        }">
-        <template #default="{ el }">
-            <v-container class="py-0">
+    <v-container v-if="showCoordinates || showPosition" :class="containerClass">
+        <responsive
+            :breakpoints="{
+                xsmall: (el) => el.width <= 320,
+                small: (el) => el.width > 320 && el.width <= 460,
+                medium: (el) => el.width > 460 && el.width <= 560,
+                large: (el) => el.width > 560,
+            }">
+            <template #default="{ el }">
                 <v-row v-if="showPosition" class="flex-nowrap pb-1">
                     <v-col
                         :class="{
@@ -70,9 +70,9 @@
                             @submit="sendCmd"></move-to-input>
                     </v-col>
                 </v-row>
-            </v-container>
-        </template>
-    </responsive>
+            </template>
+        </responsive>
+    </v-container>
 </template>
 
 <script lang="ts">
@@ -161,6 +161,14 @@ export default class MoveToControl extends Mixins(BaseMixin, ControlMixin) {
         return this.$store.state.gui.view.toolhead.showCoordinates ?? true
     }
 
+    get showControl() {
+        return this.$store.state.gui.view.toolhead.showControl ?? true
+    }
+
+    get containerClass() {
+        return this.showControl ? 'pb-0' : ''
+    }
+
     sendCmd(): void {
         const xPos = this.input.x.pos !== this.gcodePositions.x ? ` X${this.input.x.pos}` : ''
         const yPos = this.input.y.pos !== this.gcodePositions.y ? ` Y${this.input.y.pos}` : ''

From 72af0c778dd70e19fe27025834b7252020e61d33 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 25 Oct 2023 23:23:47 +0200
Subject: [PATCH 3/4] locale: add locale and fix some names

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../ToolheadControls/ToolheadPanelSettings.vue       | 12 ++++++------
 src/locales/en.json                                  |  4 ++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/panels/ToolheadControls/ToolheadPanelSettings.vue b/src/components/panels/ToolheadControls/ToolheadPanelSettings.vue
index 7e33b8d5c..b201e3f4b 100644
--- a/src/components/panels/ToolheadControls/ToolheadPanelSettings.vue
+++ b/src/components/panels/ToolheadControls/ToolheadPanelSettings.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-menu :offset-y="true" :close-on-content-click="false">
+    <v-menu :offset-y="true" :left="true" :close-on-content-click="false">
         <template #activator="{ on, attrs }">
             <v-btn icon tile v-bind="attrs" v-on="on">
                 <v-icon small>{{ mdiCog }}</v-icon>
@@ -11,35 +11,35 @@
                     v-model="showPosition"
                     class="mt-0"
                     hide-details
-                    :label="$t('Panels.ToolheadPanel.ShowPosition')" />
+                    :label="$t('Panels.ToolheadControlPanel.PositionOutput')" />
             </v-list-item>
             <v-list-item class="minHeight36">
                 <v-checkbox
                     v-model="showCoordinates"
                     class="mt-0"
                     hide-details
-                    :label="$t('Panels.ToolheadPanel.ShowCoordinates')" />
+                    :label="$t('Panels.ToolheadControlPanel.CoordinateFields')" />
             </v-list-item>
             <v-list-item class="minHeight36">
                 <v-checkbox
                     v-model="showControl"
                     class="mt-0"
                     hide-details
-                    :label="$t('Panels.ToolheadPanel.ShowControl')" />
+                    :label="$t('Panels.ToolheadControlPanel.ControlButtons')" />
             </v-list-item>
             <v-list-item class="minHeight36">
                 <v-checkbox
                     v-model="showZOffset"
                     class="mt-0"
                     hide-details
-                    :label="$t('Panels.ToolheadPanel.ShowZOffset')" />
+                    :label="$t('Panels.ToolheadControlPanel.ZOffset')" />
             </v-list-item>
             <v-list-item class="minHeight36">
                 <v-checkbox
                     v-model="showSpeedFactor"
                     class="mt-0"
                     hide-details
-                    :label="$t('Panels.ToolheadPanel.ShowSpeedFactor')" />
+                    :label="$t('Panels.ToolheadControlPanel.SpeedFactor')" />
             </v-list-item>
         </v-list>
     </v-menu>
diff --git a/src/locales/en.json b/src/locales/en.json
index d37a31640..73dcf1bb0 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -728,13 +728,17 @@
         "ToolheadControlPanel": {
             "Absolute": "absolute",
             "ALL": "ALL",
+            "ControlButtons": "Control buttons",
+            "CoordinateFields": "Coordinate fields",
             "Headline": "Toolhead",
             "PleaseConfigureSteps": "Please configure steps",
             "Position": "Position",
+            "PositionOutput": "Position output",
             "QGL": "QGL",
             "Relative": "relative",
             "SettingsInterfaceControl": "Settings > Interface > Control",
             "SpeedFactor": "Speed factor",
+            "ZOffset": "Z-Offset",
             "ZTilt": "Z-Tilt"
         },
         "WebcamPanel": {

From 309efde7ed44cce7fca2872e6cccd2de5e00398c Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 27 Oct 2023 21:34:00 +0200
Subject: [PATCH 4/4] fix: move showButtons to 3-dots menu

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/ToolheadControlPanel.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/panels/ToolheadControlPanel.vue b/src/components/panels/ToolheadControlPanel.vue
index 910063e30..dd1cd7e63 100644
--- a/src/components/panels/ToolheadControlPanel.vue
+++ b/src/components/panels/ToolheadControlPanel.vue
@@ -6,8 +6,8 @@
         :collapsible="true"
         card-class="toolhead-control-panel">
         <!-- PANEL-HEADER 3-DOT-MENU -->
-        <template v-if="showButtons" #buttons>
-            <v-menu left offset-y :close-on-content-click="false" class="pa-0">
+        <template #buttons>
+            <v-menu v-if="showButtons" 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">
                         <v-icon>{{ mdiDotsVertical }}</v-icon>