refactor: button overhaul and minor changes to the ui

src/App.vue

@@ -55,6 +55,7 @@ import TheUpdateDialog from '@/components/TheUpdateDialog.vue'
 import TheConnectingDialog from '@/components/TheConnectingDialog.vue'
 import TheSelectPrinterDialog from '@/components/TheSelectPrinterDialog.vue'
 import TheEditor from '@/components/TheEditor.vue'
+import {panelToolbarHeight, topbarHeight, navigationItemHeight} from '@/store/variables'
 
 @Component({
     components: {
@@ -67,6 +68,9 @@ import TheEditor from '@/components/TheEditor.vue'
     }
 })
 export default class App extends Mixins(BaseMixin) {
+    panelToolbarHeight = panelToolbarHeight
+    topbarHeight = topbarHeight
+    navigationItemHeight = navigationItemHeight
 
     get title(): string {
         return this.$store.getters['getTitle']
@@ -136,7 +140,11 @@ export default class App extends Mixins(BaseMixin) {
         return {
             '--v-btn-text-primary': this.primaryTextColor,
             '--color-primary': this.primaryColor,
-            '--color-warning': this.warningColor
+            '--color-warning': this.warningColor,
+            '--panel-toolbar-icon-btn-width': panelToolbarHeight + 'px',
+            '--panel-toolbar-text-btn-height': panelToolbarHeight + 'px',
+            '--topbar-icon-btn-width': topbarHeight + 'px',
+            '--sidebar-menu-item-height': navigationItemHeight + 'px'
         }
     }
 

src/components/CommandHelpModal.vue

@@ -8,7 +8,7 @@
     >
         <template #activator="{ on, attrs }">
             <template v-if="inToolbar">
-                <v-btn icon v-bind="attrs" v-on="on"><v-icon small>mdi-help</v-icon></v-btn>
+                <v-btn icon tile v-bind="attrs" v-on="on"><v-icon small>mdi-help</v-icon></v-btn>
             </template>
             <template v-else>
                 <v-btn
@@ -24,7 +24,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 icon @click="isOpen = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="isOpen = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-title>
                     <v-row>
@@ -72,9 +72,11 @@ import {CommandHelp} from '@/store/printer/types'
 import {Mixins, Prop, Watch} from 'vue-property-decorator'
 import Component from 'vue-class-component'
 import Panel from '@/components/ui/Panel.vue'
+
 @Component({
     components: {Panel}
 })
+
 export default class CommandHelpModal extends Mixins(BaseMixin) {
     @Prop({ required: false, default: false }) isMini!: boolean;
     @Prop({ required: false, default: false }) inToolbar!: boolean;

src/components/TheConnectingDialog.vue

@@ -5,7 +5,7 @@
 <template>
     <v-dialog v-model="showDialog" persistent :width="400">
         <v-card dark>
-            <v-toolbar flat dense color="primary">
+            <v-toolbar flat dense>
                 <v-toolbar-title>
                     <span class="subheading">
                         <v-icon class="mdi mdi-connection" left></v-icon>
@@ -31,7 +31,7 @@
                     <v-divider class="mt-4 mb-5"></v-divider>
                 </template>
                 <div class="text-center">
-                    <v-btn @click="reconnect" color="primary">{{ $t("ConnectionDialog.TryAgain") }}</v-btn>
+                    <v-btn @click="reconnect" class="primary--text">{{ $t("ConnectionDialog.TryAgain") }}</v-btn>
                 </div>
             </v-card-text>
         </v-card>

src/components/TheEditor.vue

@@ -13,10 +13,10 @@
         >
             <panel card-class="editor-dialog" icon="mdi-file-document-edit-outline" :title="(filepath ? filepath.slice(1)+'/': '')+filename+' '+changed">
                 <template v-slot:buttons>
-                    <v-btn dark text href="https://www.klipper3d.org/Config_Reference.html" v-if="restartServiceName === 'klipper'" target="_blank" class="d-none d-md-flex"><v-icon small class="mr-1">mdi-help</v-icon>{{ $t('Editor.ConfigReference') }}</v-btn>
-                    <v-btn  v-if="isWriteable" text :color="restartServiceName === null ? 'primary' : ''" @click="save(null)" ><v-icon small class="mr-1">mdi-content-save</v-icon><span class="d-none d-sm-inline">{{ $t('Editor.SaveClose') }}</span></v-btn>
-                    <v-btn v-if="restartServiceName !== null" color="primary" text @click="save(restartServiceName)" class="d-none d-sm-flex"><v-icon small class="mr-1">mdi-restart</v-icon>{{ $t('Editor.SaveRestart') }}</v-btn>
-                    <v-btn icon @click="close"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn text tile href="https://www.klipper3d.org/Config_Reference.html" v-if="restartServiceName === 'klipper'" target="_blank" class="d-none d-md-flex"><v-icon small class="mr-1">mdi-help</v-icon>{{ $t('Editor.ConfigReference') }}</v-btn>
+                    <v-btn v-if="isWriteable" text tile :color="restartServiceName === null ? 'primary' : ''" @click="save(null)" ><v-icon small class="mr-1">mdi-content-save</v-icon><span class="d-none d-sm-inline">{{ $t('Editor.SaveClose') }}</span></v-btn>
+                    <v-btn v-if="restartServiceName !== null" color="primary" text tile  @click="save(restartServiceName)" class="d-none d-sm-flex"><v-icon small class="mr-1">mdi-restart</v-icon>{{ $t('Editor.SaveRestart') }}</v-btn>
+                    <v-btn icon tile @click="close"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text class="pa-0">
                     <overlay-scrollbars style="height: calc(var(--app-height) - 48px)" :options="{  }">
@@ -40,6 +40,7 @@
                     v-bind="attrs"
                     @click="cancelDownload"
                     style="min-width: auto;"
+                    tile
                 >
                     <v-icon class="0">mdi-close</v-icon>
                 </v-btn>
@@ -48,7 +49,7 @@
         <v-dialog v-model="dialogConfirmChange" persistent :width="600">
             <panel card-class="editor-confirm-change-dialog" icon="mdi-help-circle" :title="$t('Editor.UnsavedChanges')" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="dialogConfirmChange = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="dialogConfirmChange = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text class="pt-3">
                     <v-row>
@@ -87,6 +88,7 @@ import Panel from '@/components/ui/Panel.vue'
 @Component({
     components: {Panel, Codemirror}
 })
+
 export default class TheEditor extends Mixins(BaseMixin) {
     private dialogConfirmChange = false
 

src/components/TheSelectPrinterDialog.vue

@@ -7,9 +7,9 @@
         <panel card-class="select-printer-dialog" icon="mdi-connection" :title="panelTitle" :margin-bottom="false" toolbar-color="primary">
             <template v-slot:buttons>
                 <template v-if="!isConnecting && !connectingFailed">
-                    <template v-if="dialogEditPrinter.bool"><v-btn text class="minwidth-0" @click="dialogEditPrinter.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn></template>
-                    <template v-else-if="dialogAddPrinter.bool"><v-btn text class="minwidth-0" v-if="dialogAddPrinter.bool" @click="dialogAddPrinter.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn></template>
-                    <template v-else-if="printers.length > 0"><v-btn text class="minwidth-0" @click="checkPrinters"><v-icon>mdi-sync</v-icon></v-btn></template>
+                    <template v-if="dialogEditPrinter.bool"><v-btn icon tile class="minwidth-0" @click="dialogEditPrinter.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn></template>
+                    <template v-else-if="dialogAddPrinter.bool"><v-btn icon tile class="minwidth-0" v-if="dialogAddPrinter.bool" @click="dialogAddPrinter.bool = false"><v-icon>mdi-close-thick</v-icon></v-btn></template>
+                    <template v-else-if="printers.length > 0"><v-btn icon tile class="minwidth-0" @click="checkPrinters"><v-icon>mdi-sync</v-icon></v-btn></template>
                 </template>
             </template>
             <template v-if="isConnecting">
@@ -21,8 +21,8 @@
                 <v-card-text>
                     <p>{{ $t("SelectPrinterDialog.CannotConnectTo", {'host': parseInt(port) !== 80 ? hostname+":"+port : hostname}) }}</p>
                     <div class="text-center">
-                        <v-btn @click="switchToChangePrinter" color="white" outlined class="mr-3">{{ $t("SelectPrinterDialog.ChangePrinter") }}</v-btn>
-                        <v-btn @click="reconnect" color="primary">{{ $t("SelectPrinterDialog.TryAgain") }}</v-btn>
+                        <v-btn text @click="switchToChangePrinter" color="white" class="mr-3">{{ $t("SelectPrinterDialog.ChangePrinter") }}</v-btn>
+                        <v-btn text @click="reconnect" color="primary">{{ $t("SelectPrinterDialog.TryAgain") }}</v-btn>
                     </div>
                 </v-card-text>
             </template>
@@ -169,11 +169,13 @@ import BaseMixin from './mixins/base'
 import {FarmPrinterState} from '@/store/farm/printer/types'
 import Panel from '@/components/ui/Panel.vue'
 import { GuiRemoteprintersStatePrinter } from '@/store/gui/remoteprinters/types'
+
 @Component({
     components: {Panel}
 })
-export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
 
+export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
+
     private dialogAddPrinter = {
         bool: false,
         hostname: '',

src/components/TheSettingsMenu.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-btn icon tile large @click="showSettings = true">
+        <v-btn icon tile @click="showSettings = true">
             <v-icon>mdi-cogs</v-icon>
         </v-btn>
         <v-dialog v-model="showSettings" width="900" persistent :fullscreen="isMobile" @keydown.esc="showSettings = false">

src/components/TheSidebar.vue

@@ -3,7 +3,7 @@
         height: 32px;
     }
     .small-list-item {
-        height: 48px;
+        height: var(--sidebar-menu-item-height);
     }
     .no-text-decoration {
         text-decoration: none;
@@ -30,7 +30,7 @@
 </style>
 
 <template>
-    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="(navigationStyle === 'iconsOnly')" :key="navigationStyle" width="220px" clipped app> 
+    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="(navigationStyle === 'iconsOnly')" :key="navigationStyle" :width="navigationWidth" clipped app> 
         <v-list class="pr-0 pt-0 ml-0">
             <v-list-item-group active-class="active-nav-item">
                 <template v-if="countPrinters">
@@ -82,6 +82,7 @@ import BaseMixin from '@/components/mixins/base'
 import {PrinterStateKlipperConfig} from '@/store/printer/types'
 import TheSelectPrinterDialog from '@/components/TheSelectPrinterDialog.vue'
 import AboutModal from '@/components/modals/AboutModal.vue'
+import {navigationWidth} from '@/store/variables'
 
 @Component({
     components: {
@@ -91,6 +92,8 @@ import AboutModal from '@/components/modals/AboutModal.vue'
 })
 
 export default class TheSidebarAlt extends Mixins(BaseMixin) {
+    navigationWidth = navigationWidth
+
     get naviDrawer(): boolean {
         return this.$store.state.naviDrawer
     }

src/components/TheThrottledStates.vue

@@ -3,14 +3,14 @@
 </style>
 
 <template>
-    <v-menu bottom left :offset-y="true" :close-on-content-click="false" v-model="showMenu" v-if="throttledStateFlags.length">
+    <v-menu bottom :offset-y="true" :close-on-content-click="false" v-model="showMenu" v-if="throttledStateFlags.length">
         <template v-slot:activator="{ on, attrs }">
-            <v-btn :color="currentFlags.length ? 'error' : 'warning'" icon class="mr-3" v-bind="attrs" v-on="on">
+            <v-btn :color="currentFlags.length ? 'error' : 'warning'" icon tile class="mr-3" v-bind="attrs" v-on="on">
                 <v-icon>mdi-raspberry-pi</v-icon>
             </v-btn>
         </template>
 
-        <v-list width="300">
+        <v-list min-width="300" max-width="600">
             <template v-if="currentFlags.length">
                 <v-subheader class="" style="height: auto;">{{ $t("App.ThrottledStates.HeadlineCurrentFlags") }}</v-subheader>
                 <v-list-item v-for="(flag) in currentFlags" :key="flag" two-line>

src/components/TheTopCornerMenu.vue

@@ -8,7 +8,7 @@
     <div>
         <v-menu bottom left :offset-y="true" :close-on-content-click="false" v-model="showMenu">
             <template v-slot:activator="{ on, attrs }">
-                <v-btn icon tile large v-bind="attrs" v-on="on">
+                <v-btn icon tile v-bind="attrs" v-on="on">
                     <v-icon>mdi-power-standby</v-icon>
                 </v-btn>
             </template>
@@ -102,6 +102,7 @@ interface dialogPowerDeviceChange {
 
 @Component
 export default class TheTopCornerMenu extends Mixins(BaseMixin) {
+
     showMenu = false
     dialogPowerDeviceChange : dialogPowerDeviceChange = {
         show: false,

src/components/TheTopbar.vue

@@ -1,13 +1,26 @@
+<style>
+    .topbar .v-toolbar__content {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+    }
+</style>
 <style scoped>
     .button-min-width-auto {
         min-width: auto !important;
     }
+    .topbar .v-btn {
+        height: 100% !important;
+        max-height: none;
+    }
+    .topbar .v-btn.v-btn--icon {
+        width: var(--topbar-icon-btn-width) !important;
+    }
 </style>
 
 <template>
     <div>
-        <v-app-bar app elevate-on-scroll height="48px" clipped-left>
-            <v-app-bar-nav-icon @click.stop="naviDrawer = !naviDrawer"></v-app-bar-nav-icon>
+        <v-app-bar app elevate-on-scroll :height="topbarHeight" class="topbar pa-0" clipped-left>
+            <v-app-bar-nav-icon tile @click.stop="naviDrawer = !naviDrawer"></v-app-bar-nav-icon>
             <router-link to="/">
                 <template v-if="sidebarLogo">
                     <img :src="sidebarLogo" style="height: 32px;" class="nav-logo ml-4 mr-1 d-none d-sm-flex" alt="Logo" />
@@ -21,7 +34,7 @@
             <v-spacer></v-spacer>
             <the-throttled-states></the-throttled-states>
             <input type="file" ref="fileUploadAndStart" :accept="validGcodeExtensions.join(', ')" style="display: none" @change="uploadAndStart" />
-            <v-btn tile large
+            <v-btn tile
                 :icon="$vuetify.breakpoint.smAndDown"
                 :text="$vuetify.breakpoint.mdAndUp"
                 color="primary"
@@ -32,7 +45,7 @@
                 @click="saveConfig">
                 <v-icon class="d-md-none">mdi-content-save</v-icon><span class="d-none d-md-inline">{{ $t("App.TopBar.SAVE_CONFIG") }}</span>
             </v-btn>
-            <v-btn tile large
+            <v-btn tile
                 :icon="$vuetify.breakpoint.smAndDown"
                 :text="$vuetify.breakpoint.mdAndUp"
                 color="primary"
@@ -42,7 +55,7 @@
                 @click="btnUploadAndStart">
                 <v-icon class="mr-md-2">mdi-file-upload</v-icon><span class="d-none d-md-inline">{{ $t("App.TopBar.UploadPrint") }}</span>
             </v-btn>
-            <v-btn tile large
+            <v-btn tile
                 :icon="$vuetify.breakpoint.smAndDown"
                 :text="$vuetify.breakpoint.mdAndUp"
                 color="error"
@@ -82,7 +95,7 @@
         <v-dialog v-model="showEmergencyStopDialog" width="400" :fullscreen="isMobile">
             <panel :title="$t('EmergencyStopDialog.EmergencyStop')" toolbar-color="error" card-class="emergency-stop-dialog" icon="mdi-alert-circle-outline" :margin-bottom="false">
                 <template v-slot:buttons>
-                    <v-btn icon @click="showEmergencyStopDialog = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="showEmergencyStopDialog = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <v-card-text>{{ $t('EmergencyStopDialog.AreYouSure') }}</v-card-text>
                 <v-card-actions>
@@ -108,6 +121,7 @@ import TheThrottledStates from '@/components/TheThrottledStates.vue'
 import Panel from '@/components/ui/Panel.vue'
 import PrinterSelector from '@/components/ui/PrinterSelector.vue'
 import MainsailLogo from '@/components/ui/MainsailLogo.vue'
+import {topbarHeight} from '@/store/variables'
 
 type uploadSnackbar = {
     status: boolean
@@ -133,6 +147,8 @@ type uploadSnackbar = {
     }
 })
 export default class TheTopbar extends Mixins(BaseMixin) {
+    topbarHeight = topbarHeight
+
     showEmergencyStopDialog = false
 
     uploadSnackbar: uploadSnackbar = {

src/components/TheUpdateDialog.vue

@@ -81,7 +81,7 @@
                 </v-row>
                 <v-row>
                     <v-col class="text-center pt-5">
-                        <v-btn @click="close" :disabled="!complete" color="primary">{{ $t("App.UpdateDialog.Close")}}</v-btn>
+                        <v-btn text @click="close" :disabled="!complete" color="primary">{{ $t("App.UpdateDialog.Close")}}</v-btn>
                     </v-col>
                 </v-row>
             </v-card-text>

src/components/gcodeviewer/Viewer.vue

@@ -41,8 +41,19 @@
     <div>
         <panel :title="$t('GCodeViewer.Title')" icon="mdi-video-3d" card-class="gcode-viewer-panel">
             <template v-slot:buttons>
-                <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>
+                <v-btn 
+                    :icon="$vuetify.breakpoint.xs"
+                    :text="$vuetify.breakpoint.smAndUp"
+                    tile
+                    @click="reloadViewer"
+                    color="info"
+                    class="ml-3"
+                    v-show="reloadRequired"
+                >
+                    <span v-show="$vuetify.breakpoint.smAndUp">{{$t("GCodeViewer.ReloadRequired")}}</span>
+                    <v-icon v-show="$vuetify.breakpoint.xs">mdi-reload-alert</v-icon>
+                </v-btn>
+                <v-btn icon tile @click="resetCamera"><v-icon>mdi-camera-retake</v-icon></v-btn>
             </template>
             <v-card-text>
                 <v-row>
@@ -175,6 +186,7 @@ let viewer: any = null
 })
 export default class Viewer extends Mixins(BaseMixin) {
     formatFilesize = formatFilesize
+
     private isBusy = false
     private loading = false
     private loadingPercent = 0

src/components/panels/FarmPrinterPanel.vue

@@ -33,7 +33,7 @@
         :loading="printer.socket.isConnecting"
         :toolbar-color="isCurrentPrinter ? 'primary' : ''"
     >
-        <template v-slot:buttons v-show="printer.socket.isConnected && printer_webcams.length">
+        <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">