From 7ce9dc30a69a1e7eb520a08bb3e5bf5572ebba6c Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 10 Oct 2021 14:04:11 +0200
Subject: [PATCH] refactor: change panel buttons to toolbar text/icon buttons

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/CommandHelpModal.vue           |  2 +-
 src/components/TheSettingsMenu.vue            |  2 +-
 src/components/gcodeviewer/Viewer.vue         |  4 +-
 src/components/panels/FarmPrinterPanel.vue    | 56 +++++++++---------
 src/components/panels/HistoryListPanel.vue    |  2 +-
 src/components/panels/Machine/SystemPanel.vue |  4 +-
 src/components/panels/Machine/UpdatePanel.vue |  4 +-
 src/components/panels/StatusPanel.vue         |  5 +-
 .../panels/StatusPanelExcludeObjectDialog.vue |  2 +-
 src/components/panels/ToolsPanel.vue          | 23 +++-----
 src/components/panels/WebcamPanel.vue         | 58 +++++++++----------
 src/components/panels/ZoffsetPanel.vue        |  4 +-
 src/pages/Heightmap.vue                       |  6 +-
 13 files changed, 80 insertions(+), 92 deletions(-)

diff --git a/src/components/CommandHelpModal.vue b/src/components/CommandHelpModal.vue
index 635df16e..bfe98f30 100644
--- a/src/components/CommandHelpModal.vue
+++ b/src/components/CommandHelpModal.vue
@@ -19,7 +19,7 @@
         <template #default>
             <panel :title="$t('Console.CommandList')" icon="mdi-help" card-class="command-help-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn small class="minwidth-0 px-2" text @click="isOpen = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon @click="isOpen = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-title>
                     <v-row>
diff --git a/src/components/TheSettingsMenu.vue b/src/components/TheSettingsMenu.vue
index 6fdcfecc..3e11789c 100644
--- a/src/components/TheSettingsMenu.vue
+++ b/src/components/TheSettingsMenu.vue
@@ -6,7 +6,7 @@
         <v-dialog v-model="showSettings" width="900" persistent :fullscreen="isMobile">
             <panel :title="$t('Settings.InterfaceSettings')" icon="mdi-cogs" card-class="settings-menu-dialog" :margin-bottom="false" style="overflow: hidden;" :height="isMobile ? 0 : 548">
                 <template v-slot:buttons>
-                    <v-btn small class="minwidth-0 px-2" text @click="showSettings = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon @click="showSettings = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                     <template v-if="isMobile">
                         <v-tabs v-model="activeTab" :center-active="true" :show-arrows="true">
                             <v-tab
diff --git a/src/components/gcodeviewer/Viewer.vue b/src/components/gcodeviewer/Viewer.vue
index 35ec7a12..ff5ffa55 100644
--- a/src/components/gcodeviewer/Viewer.vue
+++ b/src/components/gcodeviewer/Viewer.vue
@@ -41,8 +41,8 @@
     <div>
         <panel :title="$t('GCodeViewer.Title')" icon="mdi-video-3d" card-class="gcode-viewer-panel">
             <template v-slot:buttons>
-                <v-btn @click="reloadViewer" color="info" class="ml-3" v-show="reloadRequired" small>{{$t("GCodeViewer.ReloadRequired")}}</v-btn>
-                <v-btn @click="resetCamera" class="px-2 minwidth-0 ml-3" color="grey darken-3" small dense><v-icon small>mdi-camera-retake</v-icon></v-btn>
+                <v-btn text @click="reloadViewer" color="info" class="ml-3" v-show="reloadRequired">{{$t("GCodeViewer.ReloadRequired")}}</v-btn>
+                <v-btn icon @click="resetCamera"><v-icon>mdi-camera-retake</v-icon></v-btn>
             </template>
             <v-card-text>
                 <v-row>
diff --git a/src/components/panels/FarmPrinterPanel.vue b/src/components/panels/FarmPrinterPanel.vue
index a1b5d52f..bae34646 100644
--- a/src/components/panels/FarmPrinterPanel.vue
+++ b/src/components/panels/FarmPrinterPanel.vue
@@ -33,35 +33,33 @@
         :loading="printer.socket.isConnecting"
         :toolbar-color="isCurrentPrinter ? 'primary' : ''"
     >
-        <template v-slot:buttons>
-            <v-item-group v-if="printer.socket.isConnected && printer_webcams.length">
-                <v-menu :offset-y="true" title="Webcam">
-                    <template v-slot:activator="{ on, attrs }">
-                        <v-btn small class="px-2 minwidth-0" color="grey darken-3" v-bind="attrs" v-on="on">
-                            <v-icon small>mdi-webcam</v-icon>
-                            <v-icon small>mdi-menu-down</v-icon>
-                        </v-btn>
-                    </template>
-                    <v-list dense class="py-0">
-                        <v-list-item link @click="currentCamName = 'off'">
-                            <v-list-item-icon class="mr-0">
-                                <v-icon small>mdi-webcam-off</v-icon>
-                            </v-list-item-icon>
-                            <v-list-item-content>
-                                <v-list-item-title>{{ $t('Panels.FarmPrinterPanel.WebcamOff') }}</v-list-item-title>
-                            </v-list-item-content>
-                        </v-list-item>
-                        <v-list-item v-for="webcam of printer_webcams" v-bind:key="webcam.index" link @click="currentCamName = webcam.name">
-                            <v-list-item-icon class="mr-0">
-                                <v-icon small>{{ webcam.icon }}</v-icon>
-                            </v-list-item-icon>
-                            <v-list-item-content>
-                                <v-list-item-title v-text="webcam.name"></v-list-item-title>
-                            </v-list-item-content>
-                        </v-list-item>
-                    </v-list>
-                </v-menu>
-            </v-item-group>
+        <template v-slot:buttons v-if="printer.socket.isConnected && printer_webcams.length">
+            <v-menu :offset-y="true" title="Webcam">
+                <template v-slot:activator="{ on, attrs }">
+                    <v-btn text v-bind="attrs" v-on="on">
+                        <v-icon small>mdi-webcam</v-icon>
+                        <v-icon small>mdi-menu-down</v-icon>
+                    </v-btn>
+                </template>
+                <v-list dense class="py-0">
+                    <v-list-item link @click="currentCamName = 'off'">
+                        <v-list-item-icon class="mr-0">
+                            <v-icon small>mdi-webcam-off</v-icon>
+                        </v-list-item-icon>
+                        <v-list-item-content>
+                            <v-list-item-title>{{ $t('Panels.FarmPrinterPanel.WebcamOff') }}</v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+                    <v-list-item v-for="webcam of printer_webcams" v-bind:key="webcam.index" link @click="currentCamName = webcam.name">
+                        <v-list-item-icon class="mr-0">
+                            <v-icon small>{{ webcam.icon }}</v-icon>
+                        </v-list-item-icon>
+                        <v-list-item-content>
+                            <v-list-item-title v-text="webcam.name"></v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+                </v-list>
+            </v-menu>
         </template>
         <v-hover>
             <template v-slot:default="{ hover }">
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index 6a2f240b..7dcd402c 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -142,7 +142,7 @@
         <v-dialog v-model="detailsDialog.boolShow" :max-width="600" persistent>
             <panel :title="$t('History.JobDetails')" icon="mdi-update" card-class="history-detail-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn small class="minwidth-0 px-2" color="grey darken-3" @click="detailsDialog.boolShow = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon @click="detailsDialog.boolShow = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text class="px-0">
                     <perfect-scrollbar style="height: 350px;" :options="{ suppressScrollX: true }" class="px-6">
diff --git a/src/components/panels/Machine/SystemPanel.vue b/src/components/panels/Machine/SystemPanel.vue
index f5192424..45622c6f 100644
--- a/src/components/panels/Machine/SystemPanel.vue
+++ b/src/components/panels/Machine/SystemPanel.vue
@@ -100,7 +100,7 @@
         <v-dialog v-model="mcuDetailsDialog.bool" :max-width="400" :max-height="500" scrollable>
             <panel :title="mcuDetailsDialog.headline" icon="mdi-text-box-search-outline" card-class="machine-systemload-mcu-details-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn small class="minwidth-0 px-2" color="grey darken-3" @click="mcuDetailsDialog.bool = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon @click="mcuDetailsDialog.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text class="pt-5 px-0">
                     <perfect-scrollbar style="height: 350px;" :options="{ suppressScrollX: true }" class="px-6">
@@ -135,7 +135,7 @@
         <v-dialog v-model="hostDetailsDialog.bool" :max-width="600" :max-height="500" scrollable>
             <panel :title="$t('Machine.SystemPanel.HostDetails')" icon="mdi-text-box-search-outline" card-class="machine-systemload-host-details-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn small class="minwidth-0 px-2" color="grey darken-3" @click="hostDetailsDialog.bool = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon @click="hostDetailsDialog.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text class="pt-5 px-0">
                     <perfect-scrollbar style="height: 350px;" :options="{ suppressScrollX: true }" class="px-6">
diff --git a/src/components/panels/Machine/UpdatePanel.vue b/src/components/panels/Machine/UpdatePanel.vue
index 95514536..f875c07c 100644
--- a/src/components/panels/Machine/UpdatePanel.vue
+++ b/src/components/panels/Machine/UpdatePanel.vue
@@ -10,7 +10,7 @@
             <template v-slot:buttons>
                 <v-tooltip top>
                     <template v-slot:activator="{ on, attrs }">
-                        <v-btn small class="px-2 minwidth-0" color="primary" :loading="loadings.includes('loadingBtnSyncUpdateManager')" :disabled="['printing', 'paused'].includes(printer_state)" @click="btnSync" v-bind="attrs" v-on="on"><v-icon small>mdi-refresh</v-icon></v-btn>
+                        <v-btn icon color="primary" :loading="loadings.includes('loadingBtnSyncUpdateManager')" :disabled="['printing', 'paused'].includes(printer_state)" @click="btnSync" v-bind="attrs" v-on="on"><v-icon>mdi-refresh</v-icon></v-btn>
                     </template>
                     <span>{{ $t('Machine.UpdatePanel.CheckForUpdates') }}</span>
                 </v-tooltip>
@@ -110,7 +110,7 @@
         <v-dialog v-model="commitsOverlay.bool" persistent max-width="800">
             <panel :title="$t('Machine.UpdatePanel.Commits')" icon="mdi-update" :margin-bottom="false" card-class="machine-update-commits-dialog">
                 <template v-slot:buttons>
-                    <v-btn small class="minwidth-0 px-2" color="grey darken-3" @click="commitsOverlay.bool = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon @click="commitsOverlay.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text class="py-0 px-0">
                     <perfect-scrollbar style="max-height: 400px;" :options="{ suppressScrollX: true }">
diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index 49747d49..c234c116 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/src/components/panels/StatusPanel.vue
@@ -33,15 +33,14 @@
                 <v-btn
                     v-for="button in filteredToolbarButtons"
                     v-bind:key="button.loadingName"
-                    class="px-2 minwidth-0 ml-3"
                     :color="button.color"
                     @click="button.click"
                     :loading="loadings.includes(button.loadingName)"
-                    small
+                    icon
                 >
                     <v-tooltip top>
                         <template v-slot:activator="{ on, attrs }">
-                            <v-icon v-bind="attrs" v-on="on" small>{{ button.icon }}</v-icon>
+                            <v-icon v-bind="attrs" v-on="on">{{ button.icon }}</v-icon>
                         </template>
                         <span>{{ button.text }}</span>
                     </v-tooltip>
diff --git a/src/components/panels/StatusPanelExcludeObjectDialog.vue b/src/components/panels/StatusPanelExcludeObjectDialog.vue
index b7d5e55f..e8e1f252 100644
--- a/src/components/panels/StatusPanelExcludeObjectDialog.vue
+++ b/src/components/panels/StatusPanelExcludeObjectDialog.vue
@@ -7,7 +7,7 @@
         <v-dialog v-model="showDialog" width="900" persistent :fullscreen="isMobile">
             <panel :title="$t('Panels.StatusPanel.ExcludeObject.ExcludeObject')" icon="mdi-selection-remove" card-class="exclude-object-dialog" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn small class="minwidth-0 px-2" text @click="hideDialog"><v-icon small>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon @click="hideDialog"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-container>
                     <v-row>
diff --git a/src/components/panels/ToolsPanel.vue b/src/components/panels/ToolsPanel.vue
index d6e26a78..04f5c441 100644
--- a/src/components/panels/ToolsPanel.vue
+++ b/src/components/panels/ToolsPanel.vue
@@ -33,7 +33,7 @@
         <template v-slot:buttons>
             <v-menu :offset-y="true" title="Preheat" v-if="presets.length">
                 <template v-slot:activator="{ on, attrs }">
-                    <v-btn text small class="px-2 minwidth-0" v-bind="attrs" v-on="on" :disabled="['printing', 'paused'].includes(printer_state)">{{ $t("Panels.ToolsPanel.Presets") }} <v-icon small>mdi-menu-down</v-icon></v-btn>
+                    <v-btn text v-bind="attrs" v-on="on" :disabled="['printing', 'paused'].includes(printer_state)">{{ $t("Panels.ToolsPanel.Presets") }} <v-icon>mdi-menu-down</v-icon></v-btn>
                 </template>
                 <v-list dense class="py-0">
                     <v-list-item v-for="preset of presets" v-bind:key="preset.index" link @click="preheat(preset)">
@@ -57,10 +57,10 @@
                     </v-list-item>
                 </v-list>
             </v-menu>
-            <v-btn small class="px-2 minwidth-0" text @click="cooldown()" v-if="presets.length === 0"><v-icon small class="mr-1">mdi-snowflake</v-icon>{{ $t("Panels.ToolsPanel.Cooldown") }}</v-btn>
+            <v-btn text @click="cooldown()" v-if="presets.length === 0"><v-icon small class="mr-1">mdi-snowflake</v-icon>{{ $t("Panels.ToolsPanel.Cooldown") }}</v-btn>
             <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Panels.ToolsPanel.SetupTemperatures')">
                 <template v-slot:activator="{ on, attrs }">
-                    <v-btn small class="px-2 minwidth-0" text v-bind="attrs" v-on="on"><v-icon small>mdi-cog</v-icon></v-btn>
+                    <v-btn icon v-bind="attrs" v-on="on"><v-icon small>mdi-cog</v-icon></v-btn>
                 </template>
                 <v-list>
                     <v-list-item class="minHeight36">
@@ -197,17 +197,10 @@
             </v-container>
         </v-card-text>
         <v-dialog v-model="editHeater.bool" persistent :width="400">
-            <v-card dark>
-                <v-toolbar flat dense color="primary">
-                    <v-toolbar-title>
-                    <span class="subheading">
-                        <v-icon left>mdi-{{ editHeater.icon }}</v-icon>
-                        {{ convertName(editHeater.name) }}
-                    </span>
-                    </v-toolbar-title>
-                    <v-spacer></v-spacer>
-                    <v-btn small class="minwidth-0" @click="editHeater.bool = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
-                </v-toolbar>
+            <panel :title="convertName(editHeater.name)" :icon="'mdi-'+editHeater.icon" card-class="tools-edit-heater-dialog" :margin-bottom="false">
+                <template v-slot:buttons>
+                    <v-btn icon @click="editHeater.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                </template>
                 <v-card-text class="pt-6">
                     <v-row v-for="dataset in editHeater.chartSeries" v-bind:key="dataset">
                         <v-col class="col-12 py-1">
@@ -243,7 +236,7 @@
                         </v-col>
                     </v-row>
                 </v-card-text>
-            </v-card>
+            </panel>
         </v-dialog>
     </panel>
 </template>
diff --git a/src/components/panels/WebcamPanel.vue b/src/components/panels/WebcamPanel.vue
index 850cb6a2..d86dc8de 100644
--- a/src/components/panels/WebcamPanel.vue
+++ b/src/components/panels/WebcamPanel.vue
@@ -10,36 +10,34 @@
         :collapsible="true"
         card-class="webcam-panel"
     >
-        <template v-slot:buttons>
-            <v-item-group v-if="webcams.length > 1">
-                <v-menu :offset-y="true" title="Webcam">
-                    <template v-slot:activator="{ on, attrs }">
-                        <v-btn small class="px-2 minwidth-0" text v-bind="attrs" v-on="on">
-                            <v-icon small v-if="'icon' in currentCam" class="mr-2">{{ currentCam.icon }}</v-icon>
-                            {{ 'name' in currentCam ? currentCam.name : "unknown" }}
-                            <v-icon small>mdi-menu-down</v-icon>
-                        </v-btn>
-                    </template>
-                    <v-list dense class="py-0">
-                        <v-list-item link @click="currentCamName = 'all'">
-                            <v-list-item-icon class="mr-0">
-                                <v-icon small>mdi-view-grid</v-icon>
-                            </v-list-item-icon>
-                            <v-list-item-content>
-                                <v-list-item-title>{{ $t('Panels.WebcamPanel.All') }}</v-list-item-title>
-                            </v-list-item-content>
-                        </v-list-item>
-                        <v-list-item v-for="webcam of webcams" v-bind:key="webcam.name" link @click="currentCamName = webcam.name">
-                            <v-list-item-icon class="mr-0">
-                                <v-icon small>{{ webcam.icon }}</v-icon>
-                            </v-list-item-icon>
-                            <v-list-item-content>
-                                <v-list-item-title v-text="webcam.name"></v-list-item-title>
-                            </v-list-item-content>
-                        </v-list-item>
-                    </v-list>
-                </v-menu>
-            </v-item-group>
+        <template v-slot:buttons v-if="webcams.length > 1">
+            <v-menu :offset-y="true" title="Webcam">
+                <template v-slot:activator="{ on, attrs }">
+                    <v-btn text v-bind="attrs" v-on="on">
+                        <v-icon small v-if="'icon' in currentCam" class="mr-2">{{ currentCam.icon }}</v-icon>
+                        {{ 'name' in currentCam ? currentCam.name : "unknown" }}
+                        <v-icon small>mdi-menu-down</v-icon>
+                    </v-btn>
+                </template>
+                <v-list dense class="py-0">
+                    <v-list-item link @click="currentCamName = 'all'">
+                        <v-list-item-icon class="mr-0">
+                            <v-icon small>mdi-view-grid</v-icon>
+                        </v-list-item-icon>
+                        <v-list-item-content>
+                            <v-list-item-title>{{ $t('Panels.WebcamPanel.All') }}</v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+                    <v-list-item v-for="webcam of webcams" v-bind:key="webcam.name" link @click="currentCamName = webcam.name">
+                        <v-list-item-icon class="mr-0">
+                            <v-icon small>{{ webcam.icon }}</v-icon>
+                        </v-list-item-icon>
+                        <v-list-item-content>
+                            <v-list-item-title v-text="webcam.name"></v-list-item-title>
+                        </v-list-item-content>
+                    </v-list-item>
+                </v-list>
+            </v-menu>
         </template>
         <v-card-text class="px-0 py-0 content d-inline-block">
             <v-row>
diff --git a/src/components/panels/ZoffsetPanel.vue b/src/components/panels/ZoffsetPanel.vue
index 81cb0594..96adfc1c 100644
--- a/src/components/panels/ZoffsetPanel.vue
+++ b/src/components/panels/ZoffsetPanel.vue
@@ -13,10 +13,10 @@
         >
             <template v-slot:buttons>
                 <template v-if="z_gcode_offset !== 0">
-                    <v-btn small class="px-2 minwidth-0" color="grey darken-3" @click="clearZOffset()" :loading="loadings.includes('babySteppingClear')"><v-icon small>mdi-broom</v-icon></v-btn>
+                    <v-btn icon @click="clearZOffset()" :loading="loadings.includes('babySteppingClear')"><v-icon>mdi-broom</v-icon></v-btn>
                     <v-menu offset-y left v-if="existZOffsetApplyProbe && existZOffsetApplyEndstop">
                         <template v-slot:activator="{ on, attrs }">
-                            <v-btn small class="px-2 minwidth-0 ml-3" color="primary" v-bind="attrs" v-on="on">{{ $t("Panels.ZoffsetPanel.Save") }} <v-icon small>mdi-menu-down</v-icon></v-btn>
+                            <v-btn text color="primary" v-bind="attrs" v-on="on">{{ $t("Panels.ZoffsetPanel.Save") }} <v-icon small>mdi-menu-down</v-icon></v-btn>
                         </template>
                         <v-list dense class="py-0">
                             <v-list-item link @click="saveZOffsetToEndstop">
diff --git a/src/pages/Heightmap.vue b/src/pages/Heightmap.vue
index 86e34cfe..a6780e7e 100644
--- a/src/pages/Heightmap.vue
+++ b/src/pages/Heightmap.vue
@@ -12,9 +12,9 @@
                     </template>
                     <template v-slot:buttons>
                         <v-btn text color="primary" class=" d-sm-none" @click="openRenameProfile()">{{ bed_mesh ? bed_mesh.profile_name : "" }}</v-btn>
-                        <v-btn small class="px-2 minwidth-0 ml-3" color="primary" @click="homePrinter" :loading="loadings.includes('homeAll')" :title="$t('Heightmap.TitleHomeAll')"><v-icon small>mdi-home</v-icon></v-btn>
-                        <v-btn small class="px-2 minwidth-0 ml-3" color="primary" @click="clearBedMesh" :loading="loadings.includes('bedMeshClear')" v-if="bed_mesh" :title="$t('Heightmap.TitleClear')">{{ $t('Heightmap.Clear') }}</v-btn>
-                        <v-btn small class="px-2 minwidth-0 ml-3" color="primary" @click="calibrateDialog = true" :loading="loadings.includes('bedMeshCalibrate')" :disabled="printerIsPrinting" :title="$t('Heightmap.TitleCalibrate')">{{ $t('Heightmap.Calibrate') }}</v-btn>
+                        <v-btn icon @click="homePrinter" :loading="loadings.includes('homeAll')" :title="$t('Heightmap.TitleHomeAll')"><v-icon>mdi-home</v-icon></v-btn>
+                        <v-btn text @click="clearBedMesh" :loading="loadings.includes('bedMeshClear')" v-if="bed_mesh" :title="$t('Heightmap.TitleClear')">{{ $t('Heightmap.Clear') }}</v-btn>
+                        <v-btn text @click="calibrateDialog = true" :loading="loadings.includes('bedMeshCalibrate')" :disabled="printerIsPrinting" :title="$t('Heightmap.TitleCalibrate')">{{ $t('Heightmap.Calibrate') }}</v-btn>
                     </template>
                     <v-card-text class="d-sm-none text-center pb-0">
                         <v-item-group class="v-btn-toggle" name="controllers">