feat(ui): flatten UI when elevation is not necessary (#2317) by @flou…

…tchito * feat(ui): Optional tabs navigation Add a UI section in settings Move dark mode switch to UI Settings section Add UI setting to replace Navigation Drawer with tabs, useful when app is embedded in another one, typically Home Assistant integration * feat(ui): Flatten style and unnest elevation when necessary Remove cards nesting when unnecessary Flatten elevation when unnecessary Use buttons instead of ExpansionPanels for actions and statistics on ControlPanel Refactored StatisticsCard.vue * feat(ui): StatisticsCard.vue use computed structure to hold statistics * feat(ui): HA mode navigation tabs small fixes * feat(ui): Outline StatisticsCard in Node detailed view * feat(ui): Reworked Store view, two-panes layout using full available space Removed wrapping VCard Positioned file browser sticky to the top of the view Moved file selection VSpeedDial to file browser view Positioned file content actions sticky to the bottom of the file content view Vertically centered placeholder text and progress Small typographic styling * feat(ui): Reworked Node views Pulled Ping / Advanced node actions out of NodeDetails Using vertical tabs Unwrapped manual instructions from tabs Flattened values expansion panels * fix(ui): Prevent auth buttons wrapping in AppBar * feat(ui): Controller statistics toggle is now 'primary' * feat(ui): Statistics toggle for each node * feat(ui): Node detailed view Tabs are horizontal on smaller screens Co-authored-by: Daniel Lando <[email protected]> Co-authored-by: Florent Limandas <[email protected]>
zwave-js · Mar 23, 2022 · 97ec643 · 97ec643
1 parent da4d60d
commit 97ec643
Show file tree

Hide file tree

Showing 13 changed files with 1,963 additions and 1,864 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,10 @@
 <template>
-	<v-app :dark="dark">
+	<v-app :dark="darkMode">
 		<div
 			v-if="$route.meta.requiresAuth && auth !== undefined && !hideTopbar"
 		>
 			<v-navigation-drawer
+				v-if="!navTabs || $vuetify.breakpoint.smAndDown"
 				clipped-left
 				:mini-variant="mini"
 				v-model="drawer"
@@ -29,7 +30,7 @@
 					<v-list-item
 						v-for="item in pages"
 						:key="item.title"
-						:to="item.path == '#' ? '' : item.path"
+						:to="item.path === '#' ? '' : item.path"
 						:color="item.path === $route.path ? 'primary' : ''"
 					>
 						<v-list-item-action>
@@ -42,13 +43,6 @@
 							>
 						</v-list-item-content>
 					</v-list-item>
-					<v-list-item v-if="!mini">
-						<v-switch
-							label="Dark theme"
-							hide-details
-							v-model="dark"
-						></v-switch>
-					</v-list-item>
 				</v-list>
 				<v-footer absolute v-if="!mini" class="pa-3">
 					<div>
@@ -58,10 +52,35 @@
 			</v-navigation-drawer>
 
 			<v-app-bar app>
-				<v-app-bar-nav-icon @click.stop="toggleDrawer" />
-				<v-toolbar-title v-if="$vuetify.breakpoint.smAndUp">{{
-					title
-				}}</v-toolbar-title>
+				<template v-if="!navTabs || $vuetify.breakpoint.smAndDown">
+					<v-app-bar-nav-icon @click.stop="toggleDrawer" />
+					<v-toolbar-title v-if="$vuetify.breakpoint.smAndUp">
+						{{ title }}
+					</v-toolbar-title>
+				</template>
+				<template v-else>
+					<v-tabs>
+						<v-tab
+							v-for="item in pages"
+							:key="item.title"
+							:to="item.path === '#' ? '' : item.path"
+							class="smaller-min-width-tabs"
+						>
+							<v-icon
+								:left="item.path === $router.currentRoute.path"
+								:small="item.path === $router.currentRoute.path"
+							>
+								{{ item.icon }}
+							</v-icon>
+							<span
+								v-if="item.path === $router.currentRoute.path"
+								class="subtitle-2"
+							>
+								{{ item.title }}
+							</span>
+						</v-tab>
+					</v-tabs>
+				</template>
 
 				<v-spacer></v-spacer>
 
@@ -157,7 +176,7 @@
 					</template>
 				</v-tooltip>
 
-				<div v-if="auth">
+				<span v-if="auth">
 					<v-menu v-if="$vuetify.breakpoint.xsOnly" bottom left>
 						<template v-slot:activator="{ on }">
 							<v-btn small v-on="on" icon>
@@ -181,7 +200,7 @@
 						</v-list>
 					</v-menu>
 
-					<div v-else>
+					<span v-else class="text-no-wrap">
 						<v-menu
 							v-for="item in menu"
 							:key="item.text"
@@ -222,8 +241,8 @@
 								</v-list-item>
 							</v-list>
 						</v-menu>
-					</div>
-				</div>
+					</span>
+				</span>
 			</v-app-bar>
 		</div>
 		<main style="height: 100%">
@@ -312,7 +331,6 @@ import io from 'socket.io-client'
 import ConfigApis from '@/apis/ConfigApis'
 import Confirm from '@/components/Confirm'
 import PasswordDialog from '@/components/dialogs/Password'
-import { Settings } from '@/modules/Settings'
 import { Routes } from '@/router'
 
 import { mapActions, mapMutations, mapGetters } from 'vuex'
@@ -326,7 +344,7 @@ export default {
 	},
 	name: 'app',
 	computed: {
-		...mapGetters(['user', 'auth', 'appInfo']),
+		...mapGetters(['user', 'auth', 'appInfo', 'navTabs', 'darkMode']),
 		updateAvailable() {
 			return this.appInfo.newConfigVersion ? 1 : 0
 		},
@@ -336,12 +354,6 @@ export default {
 			this.title = value.name || ''
 			this.startSocket()
 		},
-		dark(v) {
-			this.settings.store('dark', this.dark)
-
-			this.$vuetify.theme.dark = v
-			this.changeThemeColor()
-		},
 	},
 	data() {
 		return {
@@ -378,7 +390,6 @@ export default {
 				{ icon: 'folder', title: 'Store', path: Routes.store },
 				{ icon: 'share', title: 'Network graph', path: Routes.mesh },
 			],
-			settings: new Settings(localStorage),
 			status: '',
 			statusColor: '',
 			drawer: false,
@@ -388,7 +399,6 @@ export default {
 			title: '',
 			snackbar: false,
 			snackbarText: '',
-			dark: undefined,
 			baseURI: ConfigApis.getBasePath(),
 		}
 	},
@@ -535,8 +545,14 @@ export default {
 				'meta[name=msapplication-TileColor]'
 			)
 
-			metaThemeColor.setAttribute('content', this.dark ? '#000' : '#fff')
-			metaThemeColor2.setAttribute('content', this.dark ? '#000' : '#fff')
+			metaThemeColor.setAttribute(
+				'content',
+				this.darkMode ? '#000' : '#fff'
+			)
+			metaThemeColor2.setAttribute(
+				'content',
+				this.darkMode ? '#000' : '#fff'
+			)
 		},
 		importFile: function (ext) {
 			const self = this
@@ -828,7 +844,6 @@ export default {
 			this.hideTopbar = true
 		}
 
-		this.dark = this.settings.load('dark', false)
 		this.changeThemeColor()
 
 		this.$store.subscribe((mutation) => {
@@ -845,3 +860,9 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+.v-tabs >>> .smaller-min-width-tabs {
+	min-width: 60px;
+}
+</style>