Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 12 commits into from
Mar 23, 2022
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
7d3ebca
feat(ui): Optional tabs navigation
floutchito Feb 25, 2022
83ad56e
feat(ui): Flatten style and unnest elevation when necessary
floutchito Feb 25, 2022
e100568
Merge branch 'master' into feat/ui-flattened-proposal
robertsLando Mar 18, 2022
2d58cf3
feat(ui): StatisticsCard.vue use computed structure to hold statistics
floutchito Mar 19, 2022
eaea6d3
feat(ui): HA mode navigation tabs small fixes
floutchito Mar 19, 2022
e85b343
feat(ui): Outline StatisticsCard in Node detailed view
floutchito Mar 19, 2022
b0480f8
feat(ui): Reworked Store view, two-panes layout using full available …
floutchito Mar 20, 2022
671791c
feat(ui): Reworked Node views
floutchito Mar 20, 2022
60bb4b1
fix(ui): Prevent auth buttons wrapping in AppBar
floutchito Mar 20, 2022
8b12ae0
feat(ui): Controller statistics toggle is now 'primary'
florent-izypay Mar 22, 2022
d645069
feat(ui): Statistics toggle for each node
florent-izypay Mar 22, 2022
4590e4e
feat(ui): Node detailed view Tabs are horizontal on smaller screens
florent-izypay Mar 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 47 additions & 26 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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
: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>

Expand Down Expand Up @@ -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'
Expand All @@ -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
},
Expand All @@ -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 {
Expand Down Expand Up @@ -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,
Expand All @@ -388,7 +399,6 @@ export default {
title: '',
snackbar: false,
snackbarText: '',
dark: undefined,
baseURI: ConfigApis.getBasePath(),
}
},
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -828,7 +844,6 @@ export default {
this.hideTopbar = true
}

this.dark = this.settings.load('dark', false)
this.changeThemeColor()

this.$store.subscribe((mutation) => {
Expand All @@ -845,3 +860,9 @@ export default {
},
}
</script>

<style scoped>
.smaller-min-width-tabs {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In order to make this working with scoped you should use >>> operator

.v-tabs >>> .smaller-min-width-tabs

min-width: 60px;
}
</style>
207 changes: 118 additions & 89 deletions src/components/ControlPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,102 +1,127 @@
<template>
<v-container fluid>
<v-card>
<v-card-text>
<v-container fluid>
<v-row justify="center">
<v-col cols="12" sm="6">
<v-expansion-panels style="justify-content: start">
<v-expansion-panel
class="ma-3"
style="max-width: 600px"
<div>
<v-container fluid class="pa-4">
<v-row class="py-4 align-center" no-gutters>
<v-col class="text-end">
<v-menu>
<template #activator="{ on }">
<v-item-group class="v-btn-toggle">
<v-btn
:color="
showControllerStatistics
? 'green'
: 'grey'
"
outlined
@click="toggleControllerStatistics"
>
<v-expansion-panel-header
>Actions</v-expansion-panel-header
Controller statistics
<v-icon
:color="
showControllerStatistics
? 'green'
: 'grey'
"
right
v-on="on"
>
<v-expansion-panel-content>
<v-card flat>
<v-card-text>
<v-row>
<v-col
cols="12"
md="6"
style="
text-align: center;
"
>
<v-btn
depressed
color="primary"
@click="
addRemoveShowDialog = true
"
>
Manage nodes
</v-btn>
</v-col>
<v-col
cols="12"
md="6"
style="
text-align: center;
"
>
<v-btn
dark
color="green"
depressed
@click="
advancedShowDialog = true
"
>
Advanced
</v-btn>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-col>
multiline_chart
</v-icon>
</v-btn>
<v-btn color="primary" outlined v-on="on">
Actions
<v-icon right>arrow_drop_down</v-icon>
</v-btn>
</v-item-group>
</template>

<v-col
v-if="controllerNode"
cols="12"
sm="6"
style="text-align: center"
>
<v-list>
<v-list-item @click="addRemoveShowDialog = true">
<v-list-item-content
class="d-none d-sm-inline-flex"
>
<v-list-item-title>
Manage nodes
</v-list-item-title>
<v-list-item-subtitle>
Include, replace or exclude devices
</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn
depressed
outlined
color="primary"
@click="addRemoveShowDialog = true"
>
Manage nodes
</v-btn>
</v-list-item-action>
</v-list-item>
<v-divider />
<v-list-item @click="advancedShowDialog = true">
<v-list-item-content
class="d-none d-sm-inline-flex"
>
<v-list-item-title>
Advanced actions
</v-list-item-title>
<v-list-item-subtitle>
Maintainance, troubleshooting and other
advanced actions
</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-btn
dark
color="green"
depressed
outlined
@click="advancedShowDialog = true"
>
Advanced actions
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list>
</v-menu>
</v-col>
</v-row>
<v-expand-transition>
<v-row v-show="showControllerStatistics">
<v-col class="mb-8">
<v-sheet outlined rounded>
<StatisticsCard
v-if="true || controllerNode"
title="Controller Statistics"
:node="this.controllerNode"
/>
</v-col>
</v-row>
</v-container>

<DialogAddRemove
v-model="addRemoveShowDialog"
:socket="socket"
@close="onAddRemoveClose"
@apiRequest="apiRequest"
v-on="{ showConfirm: $listeners.showConfirm }"
/>
</v-sheet>
</v-col>
</v-row>
</v-expand-transition>
<nodes-table
:socket="socket"
v-on="$listeners"
@action="sendAction"
/>
</v-container>

<DialogAdvanced
v-model="advancedShowDialog"
@close="advancedShowDialog = false"
:actions="actions"
@action="onAction"
/>
<DialogAddRemove
v-model="addRemoveShowDialog"
:socket="socket"
@close="onAddRemoveClose"
@apiRequest="apiRequest"
v-on="{ showConfirm: $listeners.showConfirm }"
/>

<nodes-table
:socket="socket"
v-on="$listeners"
@action="sendAction"
/>
</v-card-text>
</v-card>
</v-container>
<DialogAdvanced
v-model="advancedShowDialog"
@close="advancedShowDialog = false"
:actions="actions"
@action="onAction"
/>
</div>
</template>

<script>
Expand Down Expand Up @@ -260,6 +285,7 @@ export default {
return valid || 'This field is required.'
},
},
showControllerStatistics: false,
}
},
methods: {
Expand Down Expand Up @@ -572,6 +598,9 @@ export default {
)
}
},
toggleControllerStatistics() {
this.showControllerStatistics = !this.showControllerStatistics
},
},
mounted() {
const onApiResponse = this.onApiResponse.bind(this)
Expand Down
Loading