From 19928e32443f1f4cbb9edf5be27a84a6164381a5 Mon Sep 17 00:00:00 2001
From: steadyjaw <36079537+steadyjaw@users.noreply.github.com>
Date: Sun, 14 Nov 2021 22:47:25 +0100
Subject: [PATCH] refactor: Minor changes to menu and settings tab (#411)

* refactor(appbar): change buttons to new design

* refactor(appbar): change height and add pritnername

* refactor: small sidebar

* refactor(vuetify): define parts of the mainsail theme and expose colors to css

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* refactor: ui settings add missing divider

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* refactor: add farm printer selection and menu to new top and sidebar, added icons to version-tooltip

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* refactor: make topbar buttons hideable via ui settings

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* refactor: move miniConsole buttons to toolbar and make'em collapsible

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* refactor: set matching colors for buttons on console page

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* refactor: use colornames from theme and set play/resume button to green

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* fix: correct visibility of hide buttons on collapse

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* feature: add virtual tab button to console-input on touch devices

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* refactor: remove hide e-stop button setting

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* fix: add reactivity to hide upload and print button functionality

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* refactor: move logo to topbar and clip menu under topbar

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* refactor: remove unused TheSidebarPrinterMenu

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* feature: create and add about component to sidebar ...no dialog on click yet

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* fix: correct appearance of the close icon from interface settings dialog

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* Revert "fix: correct appearance of the close icon from interface settings dialog"

This reverts commit f66e29d4f2da5d576bc22c35adfcd26bd1670ff7.

* refactor: close ui settings on ESC and change close icon to tile

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* refactor: change font style in wide sidebar and extend width of wide menu

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* refactor: change menu style ui-settings-entry to dropdown

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* refactor: correct variablenames in locales

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>

* refactor: re-do menuStyle setting implementation

Signed-off-by: steadyjaw <martin.keilaus@gmail.com>
---
 src/components/TheSettingsMenu.vue            |  4 +--
 src/components/TheSidebar.vue                 | 28 ++++++++++++-------
 .../settings/SettingsUiSettingsTab.vue        | 27 ++++++++++++++----
 src/locales/en.json                           |  6 ++--
 src/store/gui/index.ts                        |  1 +
 5 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/src/components/TheSettingsMenu.vue b/src/components/TheSettingsMenu.vue
index a103df3b..84d98f17 100644
--- a/src/components/TheSettingsMenu.vue
+++ b/src/components/TheSettingsMenu.vue
@@ -3,10 +3,10 @@
         <v-btn icon tile large @click="showSettings = true">
             <v-icon>mdi-cogs</v-icon>
         </v-btn>
-        <v-dialog v-model="showSettings" width="900" persistent :fullscreen="isMobile">
+        <v-dialog v-model="showSettings" width="900" persistent :fullscreen="isMobile" @keydown.esc="showSettings = false">
             <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 icon @click="showSettings = false"><v-icon>mdi-close-thick</v-icon></v-btn>
+                    <v-btn icon tile @click="showSettings = false"><v-icon>mdi-close-thick</v-icon></v-btn>
                 </template>
                 <template v-if="isMobile">
                     <v-tabs v-model="activeTab" :center-active="true" :show-arrows="true">
diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index e4c249c6..02e0b7be 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -17,13 +17,20 @@
     .active-nav-item {
         border-right: 4px solid var(--v-primary-base);
     }
-    .nowrap {
-        white-space: nowrap !important;
+    .menu-item-icon {
+        opacity: .85;
+    }
+    .menu-item-title {
+        line-height: 30px;
+        font-size: 14px;
+        font-weight: 600;
+        text-transform: uppercase;
+        opacity: .85;
     }
 </style>
 
 <template>
-    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="!boolWideNavDrawer" :key="boolWideNavDrawer ? 'wide' : 'mini'" width="200px" clipped app> 
+    <v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="(menuStyle === 'iconsOnly')" :key="menuStyle" width="220px" clipped app> 
         <v-list class="pr-0 pt-0 ml-0">
             <v-list-item-group active-class="active-nav-item">
                 <template v-if="countPrinters">
@@ -31,11 +38,11 @@
                         router to="/allPrinters"
                         class="small-list-item mt-1"
                     >
-                        <v-list-item-icon class="my-3 mr-3">
+                        <v-list-item-icon class="my-3 mr-3 menu-item-icon">
                             <v-icon>mdi-view-dashboard-outline</v-icon>
                         </v-list-item-icon>
                         <v-list-item-content>
-                            <v-list-item-title tile>{{ $t("App.Printers")}}</v-list-item-title>
+                            <v-list-item-title tile class="menu-item-title">{{ $t("App.Printers")}}</v-list-item-title>
                         </v-list-item-content>
 
                     </v-list-item>
@@ -47,11 +54,11 @@
                         v-if="showInNavi(category)"
                         class="small-list-item"
                     >
-                        <v-list-item-icon class="my-3 mr-3">
+                        <v-list-item-icon class="my-3 mr-3 menu-item-icon">
                             <v-icon>mdi-{{ category.icon }}</v-icon>
                         </v-list-item-icon>
                         <v-list-item-content>
-                            <v-list-item-title tile>{{ $t(`Router.${category.title}`) }}</v-list-item-title>
+                            <v-list-item-title tile class="menu-item-title">{{ $t(`Router.${category.title}`) }}</v-list-item-title>
                         </v-list-item-content>
                     </v-list-item>
                 </div>
@@ -59,7 +66,7 @@
         </v-list>
         <template v-slot:append>
             <v-list-item class="small-list-item mb-2">
-                <v-list-item-icon>
+                <v-list-item-icon class="menu-item-icon">
                     <about-modal></about-modal>
                 </v-list-item-icon>
             </v-list-item>
@@ -82,6 +89,7 @@ import AboutModal from '@/components/modals/AboutModal.vue'
         AboutModal
     }
 })
+
 export default class TheSidebarAlt extends Mixins(BaseMixin) {
     get naviDrawer(): boolean {
         return this.$store.state.naviDrawer
@@ -91,8 +99,8 @@ export default class TheSidebarAlt extends Mixins(BaseMixin) {
         this.$store.dispatch('setNaviDrawer', newVal)
     }
 
-    get boolWideNavDrawer() {
-        return this.$store.state.gui.dashboard.boolWideNavDrawer ?? false
+    get menuStyle() {
+        return this.$store.state.gui.dashboard.menuStyle
     }
 
     get sidebarBackground(): string {
diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index de982142..1622038f 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -60,8 +60,8 @@
                     <v-switch v-model="confirmOnPowerDeviceChange" hide-details class="mt-0"></v-switch>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
-                <settings-row :title="$t('Settings.UiSettingsTab.BoolWideNavDrawer')" :sub-title="$t('Settings.UiSettingsTab.BoolWideNavDrawerDescription')" :dynamicSlotWidth="true">
-                    <v-switch v-model="boolWideNavDrawer" hide-details class="mt-0"></v-switch>
+                <settings-row :title="$t('Settings.UiSettingsTab.MenuStyle')" :sub-title="$t('Settings.UiSettingsTab.MenuStyleDescription')">
+                    <v-select v-model="menuStyleSetting" :items="menuStyles" outlined dense hide-details class="mt-0"></v-select>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
                 <settings-row :title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButton')" :sub-title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButtonDescription')" :dynamicSlotWidth="true">
@@ -80,9 +80,11 @@ import BaseMixin from '@/components/mixins/base'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import {defaultLogoColor, defaultPrimaryColor} from '@/store/variables'
 import {Debounce} from 'vue-debounce-decorator'
+
 @Component({
     components: {SettingsRow}
 })
+
 export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
     private defaultLogoColor = defaultLogoColor
     private defaultPrimaryColor = defaultPrimaryColor
@@ -151,12 +153,25 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', {name: 'general.confirmOnPowerDeviceChange', value: newVal })
     }
 
-    get boolWideNavDrawer() {
-        return this.$store.state.gui.dashboard.boolWideNavDrawer ?? false
+    get menuStyleSetting() {
+        return this.$store.state.gui.dashboard.menuStyle
     }
 
-    set boolWideNavDrawer(newVal) {
-        this.$store.dispatch('gui/saveSetting', {name: 'dashboard.boolWideNavDrawer', value: newVal })
+    set menuStyleSetting(newVal) {
+        this.$store.dispatch('gui/saveSetting', {name: 'dashboard.menuStyle', value: newVal })
+    }
+
+    get menuStyles() {
+        return [
+            {
+                text: this.$t('Settings.UiSettingsTab.MenuStyleIconsOnly'),
+                value: 'iconsOnly'
+            },
+            {
+                text: this.$t('Settings.UiSettingsTab.MenuStyleIconsAndText'),
+                value: 'iconsAndText'
+            }
+        ]
     }
 
     get boolHideUploadAndPrintButton() {
diff --git a/src/locales/en.json b/src/locales/en.json
index efcf5fa8..5f7700ae 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -670,8 +670,10 @@
 			"ShowWebcamInNavigation": "Show Webcam in navigation",
 			"BoolBigThumbnail": "Large thumbnail",
 			"BoolBigThumbnailDescription": "Display a large thumbnail in the status panel during a print.",
-			"BoolWideNavDrawer": "Wide Navigation Drawer",
-			"BoolWideNavDrawerDescription": "Display a wider Navigation Toolbar",
+			"MenuStyle": "Style of the side menu",
+			"MenuStyleDescription": "Change the appearance of the side menu",
+			"MenuStyleIconsOnly": "Icons only",
+			"MenuStyleIconsAndText": "Icons + Text",
 			"BoolHideUploadAndPrintButton": "Hide Upload and Print Button",
 			"BoolHideUploadAndPrintButtonDescription": "Show or hide the \"Upload and Print\" button in the topbar.",
 			"DisplayCANCEL_PRINT": "Display CANCEL_PRINT",
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index ba3a436a..cb12e5c1 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -32,6 +32,7 @@ export const getDefaultState = (): GuiState => {
             boolTempchart: true,
             boolBigThumbnail: true,
             boolWideNavDrawer: false,
+            menuStyle: 'iconsOnly',
             macroManagement: 'simple',
             hiddenMacros: [],
             hiddenTempChart: [],