CreatBot/CreatBotMainsail
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Minor changes to menu and settings tab (#411)

Browse Source 
* 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>
This commit is contained in:
steadyjaw 2021-11-14 22:47:25 +01:00 committed by GitHub
parent fb714fc904
commit 19928e3244
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 46 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/TheSettingsMenu.vue
View File

@ -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">

28
src/components/TheSidebar.vue
View File

@ -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 {

27
src/components/settings/SettingsUiSettingsTab.vue
View File

@ -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() {

6
src/locales/en.json
View File

@ -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",

1
src/store/gui/index.ts
View File

@ -32,6 +32,7 @@ export const getDefaultState = (): GuiState => {
boolTempchart: true,
boolBigThumbnail: true,
boolWideNavDrawer: false,
menuStyle: 'iconsOnly',
macroManagement: 'simple',
hiddenMacros: [],
hiddenTempChart: [],