From b2fcb8d104a97d54c30ef621845e811616e2ec8f Mon Sep 17 00:00:00 2001 From: Aya Moosa Date: Mon, 8 Apr 2024 15:59:12 -0700 Subject: [PATCH 1/6] started light text for color --- src/UI/Settings/UIWindowSettings.js | 8 ++++++++ src/UI/UIWindowThemeDialog.js | 8 ++++++++ src/css/style.css | 4 ++++ src/services/ThemeService.js | 7 +++++-- 4 files changed, 25 insertions(+), 2 deletions(-) diff --git a/src/UI/Settings/UIWindowSettings.js b/src/UI/Settings/UIWindowSettings.js index 6a8560d4..2dc15fa1 100644 --- a/src/UI/Settings/UIWindowSettings.js +++ b/src/UI/Settings/UIWindowSettings.js @@ -123,6 +123,14 @@ async function UIWindowSettings(options){ h += ``; h += ``; h += ``; + // h += `
` + // h += `${i18n('mode')}:` + // h += `` + // h += `
` h += ``; // Language diff --git a/src/UI/UIWindowThemeDialog.js b/src/UI/UIWindowThemeDialog.js index 6ebcf3d9..c000ad27 100644 --- a/src/UI/UIWindowThemeDialog.js +++ b/src/UI/UIWindowThemeDialog.js @@ -42,6 +42,7 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () { var(--primary-lightness), var(--primary-alpha))`, 'backdrop-filter': 'blur(3px)', + 'color ': `var(--primary-color)` } }); const w_body = w.querySelector('.window-body'); @@ -76,6 +77,7 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () { el.defaultValue = initial ?? min; el.step = step ?? 1; el.classList.add('theme-dialog-slider'); + return { appendTo (parent) { @@ -96,7 +98,13 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () { const slider_ch = (e) => { state[e.meta.name] = e.target.value; + if (e.meta.name === 'lig' && e.target.value < 50) { + state.light_text = true; + } else { + state.light_text = false; + } svc_theme.apply(state); + console.log(state); }; Button({ label: i18n('reset_colors') }) diff --git a/src/css/style.css b/src/css/style.css index b1b349ea..2ba68e74 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -27,21 +27,25 @@ --primary-saturation: 41.18%; --primary-lightness: 93.33%; --primary-alpha: 0.8; + --primary-color: #373e44; --window-head-hue: var(--primary-hue); --window-head-saturation: var(--primary-saturation); --window-head-lightness: var(--primary-lightness); --window-head-alpha: var(--primary-alpha); + --window-head-color: var(--primary-color); --window-sidebar-hue: var(--primary-hue); --window-sidebar-saturation: var(--primary-saturation); --window-sidebar-lightness: var(--primary-lightness); --window-sidebar-alpha: calc(min(1, 0.11 + var(--primary-alpha))); + --window-sidebar-color: var(--primary-color); --taskbar-hue: var(--primary-hue); --taskbar-saturation: var(--primary-saturation); --taskbar-lightness: var(--primary-lightness); --taskbar-alpha: calc(0.73 * var(--primary-alpha)); + --taskbar-color: var(--primary-color); } html, body { diff --git a/src/services/ThemeService.js b/src/services/ThemeService.js index afd6c841..e962a9d1 100644 --- a/src/services/ThemeService.js +++ b/src/services/ThemeService.js @@ -28,6 +28,7 @@ const default_values = { hue: 210, lig: 93.33, alpha: 0.8, + light_text: false, }; export class ThemeService extends Service { @@ -37,6 +38,7 @@ export class ThemeService extends Service { hue: 210, lig: 93.33, alpha: 0.8, + light_text: false, }; this.root = document.querySelector(':root'); // this.ss = new CSSStyleSheet(); @@ -100,7 +102,7 @@ export class ThemeService extends Service { get (key) { return this.state[key]; } - reload_ () { + reload_() { // debugger; const s = this.state; // this.ss.replace(` @@ -113,7 +115,8 @@ export class ThemeService extends Service { this.root.style.setProperty('--primary-saturation', s.sat + '%'); this.root.style.setProperty('--primary-lightness', s.lig + '%'); this.root.style.setProperty('--primary-alpha', s.alpha); - } + this.root.style.setProperty('--primary-color', s.light_text ? 'white' : '#373e44'); + } save_ () { if ( this.save_cooldown_ ) { From 5bf0411015aff1081e15c2ba501200991be537a6 Mon Sep 17 00:00:00 2001 From: Aya Moosa Date: Mon, 8 Apr 2024 21:24:24 -0700 Subject: [PATCH 2/6] got white text working, restets when other silders are used --- src/UI/UIWindowThemeDialog.js | 3 ++- src/css/style.css | 8 ++++++-- src/services/ThemeService.js | 2 +- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/UI/UIWindowThemeDialog.js b/src/UI/UIWindowThemeDialog.js index c000ad27..72e5a843 100644 --- a/src/UI/UIWindowThemeDialog.js +++ b/src/UI/UIWindowThemeDialog.js @@ -42,7 +42,7 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () { var(--primary-lightness), var(--primary-alpha))`, 'backdrop-filter': 'blur(3px)', - 'color ': `var(--primary-color)` + } }); const w_body = w.querySelector('.window-body'); @@ -68,6 +68,7 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () { const wrap = document.createElement('div'); const label_el = document.createElement('label'); label_el.textContent = label; + label_el.style = "color:var(--primary-color)"; wrap.appendChild(label_el); const el = document.createElement('input'); wrap.appendChild(el); diff --git a/src/css/style.css b/src/css/style.css index 2ba68e74..8d0b2976 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -865,6 +865,7 @@ span.header-sort-icon img { flex-flow: row; padding-left: 5px; margin-bottom: -1px; + } .device-phone .window-head { @@ -888,15 +889,18 @@ span.header-sort-icon img { float: left; line-height: 30px; font-size: 14px; - color: #666d74; + /* color: #666d74; */ margin-left: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; + color: var(--window-head-color); + opacity: .8; } .window-active .window-head-title { - color: #373e44; + /* color: #373e44; */ + color: var(--window-head-color) } .window-head-icon { diff --git a/src/services/ThemeService.js b/src/services/ThemeService.js index e962a9d1..8a6e54f7 100644 --- a/src/services/ThemeService.js +++ b/src/services/ThemeService.js @@ -130,7 +130,7 @@ export class ThemeService extends Service { puter.fs.write(PUTER_THEME_DATA_FILENAME, JSON.stringify( { colors: this.state }, undefined, - 4, + 5, )); } } From 626d63c91dea5aabc2ff0f89f31541bcb2937486 Mon Sep 17 00:00:00 2001 From: Aya Moosa Date: Mon, 8 Apr 2024 22:00:12 -0700 Subject: [PATCH 3/6] working white text, not perfect with all colors --- src/UI/UIWindowThemeDialog.js | 6 ++---- src/css/style.css | 1 - 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/UI/UIWindowThemeDialog.js b/src/UI/UIWindowThemeDialog.js index 72e5a843..4ceed5f8 100644 --- a/src/UI/UIWindowThemeDialog.js +++ b/src/UI/UIWindowThemeDialog.js @@ -99,10 +99,8 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () { const slider_ch = (e) => { state[e.meta.name] = e.target.value; - if (e.meta.name === 'lig' && e.target.value < 50) { - state.light_text = true; - } else { - state.light_text = false; + if (e.meta.name === 'lig') { + state.light_text = e.target.value < 70 ? true : false; } svc_theme.apply(state); console.log(state); diff --git a/src/css/style.css b/src/css/style.css index 8d0b2976..a09816a6 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -895,7 +895,6 @@ span.header-sort-icon img { white-space: nowrap; overflow: hidden; color: var(--window-head-color); - opacity: .8; } .window-active .window-head-title { From 80aa87023eee34213c41c36127b2ef171b67a3d2 Mon Sep 17 00:00:00 2001 From: Aya Moosa Date: Mon, 8 Apr 2024 22:01:00 -0700 Subject: [PATCH 4/6] working white text, not perfect with all colors --- src/UI/UIWindowThemeDialog.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/UI/UIWindowThemeDialog.js b/src/UI/UIWindowThemeDialog.js index 4ceed5f8..5f507daa 100644 --- a/src/UI/UIWindowThemeDialog.js +++ b/src/UI/UIWindowThemeDialog.js @@ -100,7 +100,7 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () { const slider_ch = (e) => { state[e.meta.name] = e.target.value; if (e.meta.name === 'lig') { - state.light_text = e.target.value < 70 ? true : false; + state.light_text = e.target.value < 60 ? true : false; } svc_theme.apply(state); console.log(state); From 24e3ec89f3496e19c63e8613bd42b79fb4c9ce6e Mon Sep 17 00:00:00 2001 From: Aya Moosa Date: Fri, 12 Apr 2024 14:28:15 -0700 Subject: [PATCH 5/6] added white text to brodacast --- src/services/ThemeService.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/services/ThemeService.js b/src/services/ThemeService.js index 21038638..24c44422 100644 --- a/src/services/ThemeService.js +++ b/src/services/ThemeService.js @@ -128,6 +128,7 @@ export class ThemeService extends Service { primarySaturation: s.sat + '%', primaryLightness: s.lig + '%', primaryAlpha: s.alpha, + primaryColor: s.light_text ? 'white' : '#373e44', }, }, { sendToNewAppInstances: true }); } From b725c4c7b4f06e7428637b17c1029cdcc6c803d3 Mon Sep 17 00:00:00 2001 From: Aya Moosa Date: Fri, 12 Apr 2024 14:39:46 -0700 Subject: [PATCH 6/6] removed commented code causing translation error --- src/UI/Settings/UIWindowSettings.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/UI/Settings/UIWindowSettings.js b/src/UI/Settings/UIWindowSettings.js index 6806da35..d7ecab01 100644 --- a/src/UI/Settings/UIWindowSettings.js +++ b/src/UI/Settings/UIWindowSettings.js @@ -134,14 +134,6 @@ async function UIWindowSettings(options){ h += ``; h += ``; h += ``; - // h += `
` - // h += `${i18n('mode')}:` - // h += `` - // h += `
` h += ``; // Language