From 2a52154a70c737c7594dfc569cb6670f9345a180 Mon Sep 17 00:00:00 2001 From: Daniel Lando Date: Mon, 23 Oct 2023 13:37:39 +0200 Subject: [PATCH 1/4] feat(ui): persist ui settings and use system theme as default --- src/App.vue | 30 +++++++++++------------------- src/modules/Settings.js | 3 +++ src/stores/base.js | 16 +++++++++++++++- src/views/Settings.vue | 2 ++ 4 files changed, 31 insertions(+), 20 deletions(-) diff --git a/src/App.vue b/src/App.vue index e80d444fc1..9307e62656 100644 --- a/src/App.vue +++ b/src/App.vue @@ -729,23 +729,6 @@ export default { ) } }, - changeThemeColor: function () { - const metaThemeColor = document.querySelector( - 'meta[name=theme-color]', - ) - const metaThemeColor2 = document.querySelector( - 'meta[name=msapplication-TileColor]', - ) - - metaThemeColor.setAttribute( - 'content', - this.darkMode ? '#000' : '#fff', - ) - metaThemeColor2.setAttribute( - 'content', - this.darkMode ? '#000' : '#fff', - ) - }, importFile: function (ext) { const self = this // Check for the various File API support. @@ -1394,9 +1377,18 @@ export default { this.hideTopbar = true } - this.$vuetify.theme.dark = this.darkMode + const settings = useBaseStore().settings - this.changeThemeColor() + // set the dark mode to the system dark mode if it's different + if (settings.load('dark') === undefined) { + // system dark mode + const systemThemeDark = !!window.matchMedia( + '(prefers-color-scheme: dark)', + ).matches + useBaseStore().setDarkMode(systemThemeDark) + } + + this.$vuetify.theme.dark = this.darkMode useBaseStore().$onAction(({ name, args }) => { if (name === 'showSnackbar') { diff --git a/src/modules/Settings.js b/src/modules/Settings.js index b07db03ce9..27d2378ca2 100644 --- a/src/modules/Settings.js +++ b/src/modules/Settings.js @@ -45,6 +45,9 @@ export class Settings { ? val : defaultVal break + case 'undefined': + val = valStr || valStr === '' ? valStr : defaultVal + break } return val } diff --git a/src/stores/base.js b/src/stores/base.js index 1846b1bd2d..1b07ff3cc6 100644 --- a/src/stores/base.js +++ b/src/stores/base.js @@ -2,7 +2,7 @@ import { defineStore } from 'pinia' import { $set, deepEqual } from '../lib/utils' import logger from '../lib/logger' -import { Settings } from '@/modules/Settings' +import { Settings } from '../modules/Settings' const settings = new Settings(localStorage) @@ -106,6 +106,9 @@ const useBaseStore = defineStore('base', { controllerNode() { return this.controllerId ? this.getNode(this.controllerId) : null }, + settings() { + return settings + }, }, actions: { getNode(id) { @@ -445,6 +448,7 @@ const useBaseStore = defineStore('base', { Object.assign(this.mqtt, conf.mqtt || {}) Object.assign(this.gateway, conf.gateway || {}) Object.assign(this.backup, conf.backup || {}) + Object.assign(this.ui, conf.ui || {}) } }, initPorts(ports) { @@ -493,6 +497,16 @@ const useBaseStore = defineStore('base', { setDarkMode(value) { settings.store('dark', value) this.ui.darkMode = value + + const metaThemeColor = document.querySelector( + 'meta[name=theme-color]', + ) + const metaThemeColor2 = document.querySelector( + 'meta[name=msapplication-TileColor]', + ) + + metaThemeColor.setAttribute('content', value ? '#000' : '#fff') + metaThemeColor2.setAttribute('content', value ? '#000' : '#fff') }, setNavTabs(value) { settings.store('navTabs', value) diff --git a/src/views/Settings.vue b/src/views/Settings.vue index a49d28f12a..6e48318978 100644 --- a/src/views/Settings.vue +++ b/src/views/Settings.vue @@ -1505,6 +1505,7 @@ export default { 'devices', 'serial_ports', 'scales', + 'ui', ]), ...mapState(useBaseStore, { darkMode: (store) => store.ui.darkMode, @@ -1790,6 +1791,7 @@ export default { gateway: this.newGateway, zwave: this.newZwave, backup: this.newBackup, + ui: this.ui, } }, async editJob(item) { From 82c4a07b0c284726343c508349add3d93332b7e8 Mon Sep 17 00:00:00 2001 From: Daniel Lando Date: Mon, 23 Oct 2023 13:51:05 +0200 Subject: [PATCH 2/4] fix: add watcher --- src/App.vue | 14 ++++++++------ src/router/index.js | 2 +- src/stores/base.js | 4 ++-- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/App.vue b/src/App.vue index 9307e62656..3f155031f2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -432,6 +432,9 @@ export default { this.title = value.name || '' this.startSocket() }, + darkMode(val) { + this.$vuetify.theme.dark = val || false + }, controllerNode(node) { if (!node) return @@ -1379,17 +1382,16 @@ export default { const settings = useBaseStore().settings + // system dark mode + const systemThemeDark = !!window.matchMedia( + '(prefers-color-scheme: dark)', + ).matches + // set the dark mode to the system dark mode if it's different if (settings.load('dark') === undefined) { - // system dark mode - const systemThemeDark = !!window.matchMedia( - '(prefers-color-scheme: dark)', - ).matches useBaseStore().setDarkMode(systemThemeDark) } - this.$vuetify.theme.dark = this.darkMode - useBaseStore().$onAction(({ name, args }) => { if (name === 'showSnackbar') { this.showSnackbar(...args) diff --git a/src/router/index.js b/src/router/index.js index d6bcdc35af..e1709120a1 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -167,7 +167,7 @@ router.beforeEach(async (to, from, next) => { logged = false localStorage.removeItem('logged') } else { - store.setUser(response.user) + store.onUserLogged(response.user) } } else user = {} } catch (error) { diff --git a/src/stores/base.js b/src/stores/base.js index 1b07ff3cc6..b6bf870701 100644 --- a/src/stores/base.js +++ b/src/stores/base.js @@ -135,8 +135,8 @@ const useBaseStore = defineStore('base', { updateMeshGraph(node) { // empty mutation, will be caught in Mesh.vue $onAction }, - setUser(data) { - Object.assign(this.user, data) + onUserLogged(user) { + Object.assign(this.user, user) }, setControllerStatus(data) { this.appInfo.controllerStatus = data From 3a73d01d2a66069c80ea5b85263460f26c1666af Mon Sep 17 00:00:00 2001 From: Daniel Lando Date: Mon, 23 Oct 2023 13:57:37 +0200 Subject: [PATCH 3/4] fix: missing `setUser` refactor --- src/App.vue | 4 ++-- src/stores/base.js | 1 + src/views/Login.vue | 3 +-- src/views/Settings.vue | 1 - 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/App.vue b/src/App.vue index 3f155031f2..683bde6741 100644 --- a/src/App.vue +++ b/src/App.vue @@ -538,7 +538,7 @@ export default { 'init', 'initNodes', 'setAppInfo', - 'setUser', + 'onUserLogged', 'updateValue', 'setValue', 'removeValue', @@ -569,7 +569,7 @@ export default { ) if (response.success) { this.closePasswordDialog() - this.setUser(response.user) + this.onUserLogged(response.user) } } catch (error) { this.showSnackbar( diff --git a/src/stores/base.js b/src/stores/base.js index b6bf870701..e09c4731e9 100644 --- a/src/stores/base.js +++ b/src/stores/base.js @@ -496,6 +496,7 @@ const useBaseStore = defineStore('base', { }, setDarkMode(value) { settings.store('dark', value) + // the `darkMode` watcher in App.vue will change vuetify theme this.ui.darkMode = value const metaThemeColor = document.querySelector( diff --git a/src/views/Login.vue b/src/views/Login.vue index 5540814617..4f3bc72ced 100644 --- a/src/views/Login.vue +++ b/src/views/Login.vue @@ -131,7 +131,6 @@ export default { }, set(value) { this.setDarkMode(value) - this.$vuetify.theme.dark = value }, }, }, @@ -204,7 +203,7 @@ export default { user.rememberMe = this.rememberMe localStorage.setItem('user', JSON.stringify(user)) localStorage.setItem('logged', 'true') - useBaseStore().setUser(user) + useBaseStore().onUserLogged(user) if (this.$route.params.nextUrl != null) { this.$router.push(this.$route.params.nextUrl) diff --git a/src/views/Settings.vue b/src/views/Settings.vue index 6e48318978..7a15bc3d49 100644 --- a/src/views/Settings.vue +++ b/src/views/Settings.vue @@ -1425,7 +1425,6 @@ export default { }, set(value) { this.setDarkMode(value) - this.$vuetify.theme.dark = value }, }, internalNavTabs: { From 5903af6fd2de7bb7d0fdc87cc78774789e5972a3 Mon Sep 17 00:00:00 2001 From: Daniel Lando Date: Mon, 23 Oct 2023 14:16:30 +0200 Subject: [PATCH 4/4] chore: use node 16.20.2 for armv7 pkg --- .github/workflows/package_armv7.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/package_armv7.yml b/.github/workflows/package_armv7.yml index 182440be29..e56e0f4522 100644 --- a/.github/workflows/package_armv7.yml +++ b/.github/workflows/package_armv7.yml @@ -55,8 +55,8 @@ jobs: mkdir -p ~/.cache/pkg export PKG_CACHE_PATH=~/.cache/pkg export PKG_IGNORE_TAG=true - curl https://github.com/yao-pkg/pkg-binaries/releases/download/node16/built-v16.16.0-linux-armv7 -LOJ - mv built-v16.16.0-linux-armv7 $PKG_CACHE_PATH/built-v${{ matrix.node-version }}-linux-armv7 + curl https://github.com/yao-pkg/pkg-binaries/releases/download/node16/built-v16.20.2-linux-armv7 -LOJ + mv built-v16.20.2-linux-armv7 $PKG_CACHE_PATH/built-v${{ matrix.node-version }}-linux-armv7 yarn pkg --skip-build --arch=armv7 - name: Upload artifacts