From daf0ff3bf7efde26cfc5033aeab13ac4a14a50fe Mon Sep 17 00:00:00 2001 From: Phillip Kruger Date: Tue, 6 Aug 2024 20:15:24 +1000 Subject: [PATCH] Fix Dev UI Theme switch Signed-off-by: Phillip Kruger (cherry picked from commit 7d1b7ebf2f7a96b3e7048f823d8bb67f113dfa64) --- bom/dev-ui/pom.xml | 2 +- .../main/resources/dev-ui/qwc/qwc-header.js | 118 +----------------- .../resources/dev-ui/qwc/qwc-theme-switch.js | 98 +++++++++++++++ 3 files changed, 103 insertions(+), 115 deletions(-) create mode 100644 extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-theme-switch.js diff --git a/bom/dev-ui/pom.xml b/bom/dev-ui/pom.xml index b84394d0aa67b..343d595627c0b 100644 --- a/bom/dev-ui/pom.xml +++ b/bom/dev-ui/pom.xml @@ -13,7 +13,7 @@ Dependency management for dev-ui. Importable by third party extension developers. - 24.4.4 + 24.4.5 3.1.4 4.0.6 3.1.4 diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-header.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-header.js index b46e5f26a74d6..20805111c7ea1 100644 --- a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-header.js +++ b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-header.js @@ -1,22 +1,18 @@ import { LitElement, html, css } from 'lit'; import { RouterController } from 'router-controller'; -import { StorageController } from 'storage-controller'; import { notifier } from 'notifier'; import { observeState } from 'lit-element-state'; import { themeState } from 'theme-state'; import { devuiState } from 'devui-state'; -import '@vaadin/menu-bar'; import '@vaadin/tabs'; -import '@vaadin/button'; import 'qwc/qwc-extension-link.js'; - +import './qwc-theme-switch.js'; /** * This component represent the Dev UI Header */ export class QwcHeader extends observeState(LitElement) { routerController = new RouterController(this); - storageControl = new StorageController(this); static styles = css` @@ -31,7 +27,7 @@ export class QwcHeader extends observeState(LitElement) { display: flex; justify-content: space-around; align-items: center; - padding-right: 60px; + padding-right: 10px; } .logo-title { @@ -88,13 +84,6 @@ export class QwcHeader extends observeState(LitElement) { align-items: center; } - .themeDropdown { - position: absolute; - right: 0px; - top: 10px; - z-index: 3; - } - .hidden { display:none; } @@ -103,10 +92,7 @@ export class QwcHeader extends observeState(LitElement) { static properties = { _title: {state: true}, _subTitle: {state: true}, - _rightSideNav: {state: true}, - _selectedTheme: {state: true}, - _themeOptions: {state: true}, - _desktopTheme: {state: true} + _rightSideNav: {state: true} }; constructor() { @@ -115,10 +101,6 @@ export class QwcHeader extends observeState(LitElement) { this._subTitle = null; this._rightSideNav = ""; - this._createThemeItems(); - this._restoreThemePreference(); - this._createThemeOptions(); - window.addEventListener('vaadin-router-location-changed', (event) => { this._updateHeader(event); }); @@ -126,34 +108,6 @@ export class QwcHeader extends observeState(LitElement) { connectedCallback() { super.connectedCallback(); - // Get desktop theme setting - this._desktopTheme = "dark"; - if(window.matchMedia){ - if(window.matchMedia('(prefers-color-scheme: light)').matches){ - this._desktopTheme = "light"; - } - - // Change theme setting when OS theme change - window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', e => { - if(e.matches){ - this._desktopTheme = "light"; - }else{ - this._desktopTheme = "dark"; - } - this._changeToSelectedTheme(); - }); - } - - this._changeToSelectedTheme(); - } - - _restoreThemePreference() { - const storedValue = this.storageControl.get("theme-preference"); - if(storedValue){ - this._selectedTheme = storedValue; - }else { - this._selectedTheme = "desktop"; - } } render() { @@ -197,71 +151,7 @@ export class QwcHeader extends observeState(LitElement) { } _renderThemeOptions(){ - return html` - `; - } - - _changeThemeOption(e){ - this._selectedTheme = e.detail.value.name; - this._createThemeOptions(); - this._changeToSelectedTheme(); - this.storageControl.set('theme-preference', this._selectedTheme); - } - - _changeToSelectedTheme(){ - if(this._selectedTheme === "desktop"){ - themeState.changeTo(this._desktopTheme); - }else { - themeState.changeTo(this._selectedTheme); - } - } - - _createThemeOptions(){ - - let selectedComponent = this._desktopThemeItem; - if(this._selectedTheme === "dark"){ - selectedComponent = this._darkThemeItem; - }else if(this._selectedTheme === "light"){ - selectedComponent = this._lightThemeItem; - } - - this._themeOptions = [ - { - component: selectedComponent, - children: [ - { - component: this._darkThemeItem, - name: "dark" - }, - { - component: this._lightThemeItem, - name: "light" - }, - { - component: this._desktopThemeItem, - name: "desktop" - } - ] - } - - ]; - } - - _createThemeItems() { - this._darkThemeItem = this._createThemeItem("moon", "dark"); - this._lightThemeItem = this._createThemeItem("sun", "light"); - this._desktopThemeItem = this._createThemeItem("desktop", "desktop"); - } - - _createThemeItem(iconName, ariaLabel) { - const item = document.createElement('vaadin-context-menu-item'); - const icon = document.createElement('vaadin-icon'); - item.setAttribute('aria-label', ariaLabel); - icon.setAttribute('icon', `font-awesome-solid:${iconName}`); - item.appendChild(icon); - return item; + return html``; } _updateHeader(event){ diff --git a/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-theme-switch.js b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-theme-switch.js new file mode 100644 index 0000000000000..8acb1fde66334 --- /dev/null +++ b/extensions/vertx-http/dev-ui-resources/src/main/resources/dev-ui/qwc/qwc-theme-switch.js @@ -0,0 +1,98 @@ +import { LitElement, html, css } from 'lit'; +import { themeState } from 'theme-state'; +import { StorageController } from 'storage-controller'; +import '@vaadin/button'; + +/** + * Basic theme switch + */ +export class QwcThemeSwitch extends LitElement { + storageControl = new StorageController(this); + + themes = [ + { id: 0, name: 'Desktop', icon: 'font-awesome-solid:desktop' }, + { id: 1, name: 'Light', icon: 'font-awesome-solid:sun' }, + { id: 2, name: 'Dark', icon: 'font-awesome-solid:moon' } + ]; + + static styles = css` + .themeButton { + padding-left: 10px; + } + .button { + --vaadin-button-background: var(--lumo-base-color); + } + `; + + static properties = { + _selectedThemeIndex: {state: true}, + }; + + constructor() { + super(); + this._restoreThemePreference(); + } + + connectedCallback() { + super.connectedCallback(); + this._desktopTheme = "dark"; // default + if(window.matchMedia){ + if(window.matchMedia('(prefers-color-scheme: light)').matches){ + this._desktopTheme = "light"; + } + + // Change theme setting when OS theme change + window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', e => { + if(e.matches){ + this._desktopTheme = "light"; + }else{ + this._desktopTheme = "dark"; + } + if(this._selectedThemeIndex===0){ + this._changeToSelectedThemeIndex(); + } + }); + } + + this._changeToSelectedThemeIndex(); + } + + render() { + let theme = this.themes[this._selectedThemeIndex]; + + return html`
+ + + +
`; + } + + _nextTheme(e){ + this._selectedThemeIndex = (this._selectedThemeIndex + 1) % this.themes.length; + this._changeToSelectedThemeIndex(); + } + + _changeToSelectedThemeIndex(){ + let theme = this.themes[this._selectedThemeIndex]; + this.storageControl.set('theme-preference', theme.id); + + if(theme.id === 0){ // Desktop + themeState.changeTo(this._desktopTheme); + }else { + themeState.changeTo(theme.name.toLowerCase()); + } + + } + + _restoreThemePreference() { + const storedValue = this.storageControl.get("theme-preference"); + if(storedValue){ + this._selectedThemeIndex = storedValue; + } else { + this._selectedThemeIndex = 0; + } + } + + +} +customElements.define('qwc-theme-switch', QwcThemeSwitch); \ No newline at end of file