feat: minor adjustments to layout actions

Signed-off-by: Craig Bassett <[email protected]>
fluidd-core · May 22, 2021 · 852d615 · 852d615
1 parent bfba301
commit 852d615
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 30 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -68,6 +68,14 @@ export default class App extends Mixins(StateMixin) {
     return this.$store.state.version.busy
   }
 
+  get inLayout (): boolean {
+    return (this.$store.state.config.layoutMode)
+  }
+
+  get loading () {
+    return this.$store.getters['wait/hasWait'](Waits.onLoadLanguage)
+  }
+
   get progress () {
     let progress = this.$store.getters['printer/getPrintProgress']
     progress = (progress * 100).toFixed()
@@ -155,9 +163,5 @@ export default class App extends Mixins(StateMixin) {
   handleToolsDrawerChange () {
     this.toolsdrawer = !this.toolsdrawer
   }
-
-  get loading () {
-    return this.$store.getters['wait/hasWait'](Waits.onLoadLanguage)
-  }
 }
 </script>
diff --git a/src/components/common/SystemLayout.vue b/src/components/common/SystemLayout.vue
@@ -3,22 +3,12 @@
     <v-subheader>{{ $t('app.general.label.layout') }}</v-subheader>
 
     <v-list-item @click.prevent="layoutMode = !layoutMode">
-      <v-list-item-action>
-        <v-checkbox :input-value="layoutMode"></v-checkbox>
-      </v-list-item-action>
-
-      <v-list-item-content>
-        <v-list-item-title class="text-wrap">{{ $t('app.general.btn.adjust_layout') }}</v-list-item-title>
-      </v-list-item-content>
-    </v-list-item>
-
-    <v-list-item @click="resetLayout">
       <v-list-item-icon>
-        <v-icon>$refresh</v-icon>
+        <v-icon>$apps</v-icon>
       </v-list-item-icon>
 
       <v-list-item-content>
-        <v-list-item-title class="text-wrap">{{ $t('app.general.btn.reset_layout') }}</v-list-item-title>
+        <v-list-item-title class="text-wrap">{{ $t('app.general.btn.adjust_layout') }}</v-list-item-title>
       </v-list-item-content>
     </v-list-item>
   </v-list>
@@ -27,7 +17,6 @@
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
-import { defaultState } from '@/store/layout/index'
 
 @Component({})
 export default class SystemLayout extends Mixins(StateMixin) {
@@ -43,16 +32,5 @@ export default class SystemLayout extends Mixins(StateMixin) {
   close () {
     this.$emit('click')
   }
-
-  resetLayout () {
-    const layout = defaultState()
-    this.$store.dispatch('layout/onLayoutChange', {
-      name: 'dashboard',
-      value: {
-        container1: layout.layouts.dashboard.container1,
-        container2: layout.layouts.dashboard.container2
-      }
-    })
-  }
 }
 </script>
diff --git a/src/components/layout/AppBar.vue b/src/components/layout/AppBar.vue
@@ -2,6 +2,7 @@
   <v-app-bar
     app
     clipped-left
+    extension-height="46"
   >
     <div class="toolbar-title">
       <router-link to="/">
@@ -99,11 +100,31 @@
 
     </div>
 
+    <template v-slot:extension v-if="inLayout">
+      <app-btn
+        @click.stop="handleExitLayout"
+        small
+        class="mx-2"
+        color="primary"
+        v-html="$t('app.general.btn.exit_layout')"
+      >
+      </app-btn>
+      <app-btn
+        @click.stop="handleResetLayout"
+        small
+        class="mx-2"
+        color="primary"
+        v-html="$t('app.general.btn.reset_layout')"
+      >
+      </app-btn>
+    </template>
+
   </v-app-bar>
 </template>
 
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
+import { defaultState } from '@/store/layout/index'
 import StateMixin from '@/mixins/state'
 
 @Component({})
@@ -137,6 +158,25 @@ export default class AppBar extends Mixins(StateMixin) {
   get isMobile () {
     return this.$vuetify.breakpoint.mobile
   }
+
+  get inLayout (): boolean {
+    return (this.$store.state.config.layoutMode)
+  }
+
+  handleExitLayout () {
+    this.$store.commit('config/setLayoutMode', false)
+  }
+
+  handleResetLayout () {
+    const layout = defaultState()
+    this.$store.dispatch('layout/onLayoutChange', {
+      name: 'dashboard',
+      value: {
+        container1: layout.layouts.dashboard.container1,
+        container2: layout.layouts.dashboard.container2
+      }
+    })
+  }
 }
 </script>
 
@@ -182,4 +222,15 @@ export default class AppBar extends Mixins(StateMixin) {
     color: inherit;
     text-decoration: none;
   }
+
+  .v-toolbar--extended ::v-deep .v-toolbar__content {
+    box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
+  }
+
+  ::v-deep .v-toolbar__extension {
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
 </style>
diff --git a/src/globals.ts b/src/globals.ts
@@ -98,7 +98,8 @@ import {
   mdiLockReset,
   mdiCubeScan,
   mdiHandRight,
-  mdiThermometerAlert
+  mdiThermometerAlert,
+  mdiApps
 } from '@mdi/js'
 
 /**
@@ -249,7 +250,8 @@ export const Icons = Object.freeze({
   lock: mdiLock,
   lockOpen: mdiLockOpenVariant,
   lockReset: mdiLockReset,
-  tempError: mdiThermometerAlert
+  tempError: mdiThermometerAlert,
+  apps: mdiApps
 })
 
 export const Waits = Object.freeze({

diff --git a/src/locales/en.yaml b/src/locales/en.yaml
@@ -131,6 +131,7 @@ app:
       config_reference: Config Reference
       download: Download
       edit: Edit
+      exit_layout: Exit layout mode
       extrude: Extrude
       heaters_off: Heaters off
       load_all: Load all