From 0e1c1b04a0fb15cad5e7e937d5f1daade76a3393 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 1 Dec 2024 21:33:24 +0200 Subject: [PATCH 1/8] fix palette editor in appearace tab + make it expert --- .../settings_modal/tabs/appearance_tab.js | 19 ++++++++++--------- .../settings_modal/tabs/appearance_tab.vue | 3 ++- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js index d314dc78b..1e4e64d62 100644 --- a/src/components/settings_modal/tabs/appearance_tab.js +++ b/src/components/settings_modal/tabs/appearance_tab.js @@ -119,6 +119,8 @@ const AppearanceTab = { })) }) + this.userPalette = this.$store.state.interface.paletteDataUsed || {} + updateIndex('palette').then(bundledPalettes => { bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => { let palette @@ -140,10 +142,6 @@ const AppearanceTab = { palette = { key, ...v } } this.bundledPalettes.push(palette) - - if (this.isPaletteActive(key)) { - this.userPalette = palette - } })) }) @@ -169,7 +167,15 @@ const AppearanceTab = { }) }) }, + watch: { + paletteDataUsed () { + this.userPalette = this.paletteDataUsed || {} + } + }, computed: { + paletteDataUsed () { + return this.$store.state.interface.paletteDataUsed + }, availableStyles () { return [ ...this.availableThemesV3, @@ -184,11 +190,6 @@ const AppearanceTab = { }, stylePalettes () { const ruleset = this.$store.state.interface.styleDataUsed || [] - console.log( - 'ASR', - this.$store.state.interface.paletteDataUsed, - this.$store.state.interface.styleDataUsed - ) if (!ruleset && ruleset.length === 0) return const meta = ruleset.find(x => x.component === '@meta') const result = ruleset.filter(x => x.component.startsWith('@palette')) diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue index 5c1c46fe3..41fda7b7b 100644 --- a/src/components/settings_modal/tabs/appearance_tab.vue +++ b/src/components/settings_modal/tabs/appearance_tab.vue @@ -123,10 +123,11 @@ :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }" /> -

+

{{ $t('settings.style.themes3.palette.user') }}

Date: Sun, 1 Dec 2024 21:34:17 +0200 Subject: [PATCH 2/8] update breezy theme --- static/styles/Breezy DX.piss | 45 +++++++++++++++++++++--------------- 1 file changed, 27 insertions(+), 18 deletions(-) diff --git a/static/styles/Breezy DX.piss b/static/styles/Breezy DX.piss index 06f0cd5f8..033561f94 100644 --- a/static/styles/Breezy DX.piss +++ b/static/styles/Breezy DX.piss @@ -6,28 +6,29 @@ } @palette.Dark { - bg: #121a24; - fg: #182230; - text: #b9b9ba; - link: #d8a070; - accent: #d8a070; - cRed: #FF0000; - cBlue: #0095ff; - cGreen: #0fa00f; - cOrange: #ffa500; + bg: #292C32; + fg: #292C32; + text: #ffffff; + link: #1CA4F3; + accent: #1CA4F3; + cRed: #f41a51; + cBlue: #1CA4F3; + cGreen: #1af46e; + cOrange: #f4af1a; } @palette.Light { - bg: #f2f6f9; - fg: #d6dfed; - text: #304055; + bg: #EFF0F2; + fg: #EFF0F2; + text: #1B1F22; underlay: #5d6086; - accent: #f55b1b; - cBlue: #0095ff; - cRed: #d31014; - cGreen: #0fa00f; - cOrange: #ffa500; + accent: #1CA4F3; + cBlue: #1CA4F3; + cRed: #f41a51; + cGreen: #1af46e; + cOrange: #f4af1a; border: #d8e6f9; + link: #1CA4F3; } Root { @@ -36,7 +37,7 @@ Root { --buttonDefaultFocusGlow: shadow | inset 0 0 0 1 --accent / 1; --buttonDefaultShadow: shadow | inset 0 0 0 1 --text / 0.35, 0 5 5 -5 #000000 / 0.35; --buttonDefaultBevel: shadow | inset 0 14 14 -14 #FFFFFF / 0.1; - --buttonPressedBevel: shadow | inset 0 -20 20 -20 #000000 / 0.05, inset 0 20 0 80 --accent / 0.2; + --buttonPressedBevel: shadow | inset 0 -20 20 -20 #000000 / 0.05; --defaultInputBevel: shadow | inset 0 0 0 1 --text / 0.35; --defaultInputHoverGlow: shadow | 0 0 0 1 --accent / 1; --defaultInputFocusGlow: shadow | 0 0 0 1 --link / 1; @@ -50,6 +51,14 @@ Button:hover { shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow } +Button:toggled { + background: $blend(--bg 0.8 --accent) +} + +Button:pressed { + background: $blend(--bg 0.8 --accent) +} + Input { shadow: --defaultInputBevel } From 7b0f72601be2ea03e76ab2d0b167740daba5c93f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 1 Dec 2024 21:36:58 +0200 Subject: [PATCH 3/8] use relative value so it's more usable on mobile --- src/components/tab_switcher/tab_switcher.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index a4d5aa3ae..dfb23811b 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -130,7 +130,7 @@ &:not(.active) { margin-top: 0; - margin-left: 1.5em; + margin-left: 20%; } @media all and (max-width: 800px) { From 7be1ab53ec6e375f866122d951d5e2242284da97 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 1 Dec 2024 21:51:25 +0200 Subject: [PATCH 4/8] scratch that, just a smaller absolute value --- src/components/tab_switcher/tab_switcher.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index dfb23811b..b78cb7329 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -130,7 +130,7 @@ &:not(.active) { margin-top: 0; - margin-left: 20%; + margin-left: 1.5em; } @media all and (max-width: 800px) { @@ -139,6 +139,11 @@ margin-right: calc(0.25em - 200px); margin-left: 0.25em; + &:not(.active) { + margin-top: 0; + margin-left: 0.5em; + } + .text { display: none; } From 90b2efc6f732cf0a97b20d241cfd287c58b70712 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 1 Dec 2024 21:51:55 +0200 Subject: [PATCH 5/8] better select-multiple --- .../settings_modal/settings_modal_admin_content.scss | 3 +++ src/components/settings_modal/settings_modal_user_content.scss | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/components/settings_modal/settings_modal_admin_content.scss b/src/components/settings_modal/settings_modal_admin_content.scss index a5314fe12..c1a25cf1e 100644 --- a/src/components/settings_modal/settings_modal_admin_content.scss +++ b/src/components/settings_modal/settings_modal_admin_content.scss @@ -17,10 +17,13 @@ } .select-multiple { + margin-top: 0.5em; display: flex; + flex-direction: column; .option-list { margin: 0; + margin-top: 0.5em; padding-left: 0.5em; } } diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss index b7e258fda..25e9bda3a 100644 --- a/src/components/settings_modal/settings_modal_user_content.scss +++ b/src/components/settings_modal/settings_modal_user_content.scss @@ -31,10 +31,13 @@ } .select-multiple { + margin-top: 1em; display: flex; + flex-direction: column; .option-list { margin: 0; + margin-top: 0.5em; padding-left: 0.5em; } } From 098087a7220099576102cc438a692d580b1a29c5 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 1 Dec 2024 22:15:23 +0200 Subject: [PATCH 6/8] mobile-friendly appearance tab --- .../palette_editor/palette_editor.vue | 19 ++++++++ .../settings_modal/tabs/appearance_tab.scss | 26 ++++++++++- .../settings_modal/tabs/appearance_tab.vue | 44 +++++++++++-------- 3 files changed, 69 insertions(+), 20 deletions(-) diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue index be5dee448..d88accf58 100644 --- a/src/components/palette_editor/palette_editor.vue +++ b/src/components/palette_editor/palette_editor.vue @@ -168,6 +168,25 @@ const updatePalette = (paletteKey, value) => { grid-column: 1 / span 2; } } + + .-mobile & { + grid-template-columns: 1fr; + grid-template-rows: repeat(10, 1fr) auto; + + .palette-import-button { + grid-column: 1; + } + + .palette-export-button { + grid-column: 1; + } + + &.-apply { + .palette-apply-button { + grid-column: 1; + } + } + } } } diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss index ede4b3424..596c674fa 100644 --- a/src/components/settings_modal/tabs/appearance_tab.scss +++ b/src/components/settings_modal/tabs/appearance_tab.scss @@ -35,9 +35,11 @@ .palette-entry { display: flex; align-items: center; + justify-content: space-between; + padding: 0 0.5em; - > label { - flex: 1 0 auto; + .palette-label label { + text-align: center; } .palette-square { @@ -60,6 +62,26 @@ margin-top: 0.5em; } + .modal-view.-mobile & { + .palette-entry { + flex-wrap: wrap; + justify-content: center; + } + + .palette-label { + line-height: 1.5em; + margin-top: 0.5em; + width: 100%; + } + + .palette-preview { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1em 1em; + margin-bottom: 0.5em; + } + } + .theme-list { list-style: none; display: flex; diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue index 41fda7b7b..be05fae09 100644 --- a/src/components/settings_modal/tabs/appearance_tab.vue +++ b/src/components/settings_modal/tabs/appearance_tab.vue @@ -93,15 +93,19 @@ :class="{ toggled: isPaletteActive(p.key) }" @click="() => setPalette(p.key, p)" > - - +
+ +
+
+ +

{{ $t('settings.style.themes3.palette.style') }} @@ -113,15 +117,19 @@ :class="{ toggled: isPaletteActive(p.key) }" @click="() => setPaletteCustom(p)" > - - +
+ +
+
+ +

{{ $t('settings.style.themes3.palette.user') }} From 13c482ea2a70bec58eb011910c157c9bf3eadf0a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 1 Dec 2024 22:15:55 +0200 Subject: [PATCH 7/8] hide style tab on mobile --- src/components/settings_modal/settings_modal_user_content.js | 3 +++ src/components/settings_modal/settings_modal_user_content.vue | 3 ++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js index f6b49819a..2e1d99548 100644 --- a/src/components/settings_modal/settings_modal_user_content.js +++ b/src/components/settings_modal/settings_modal_user_content.js @@ -67,6 +67,9 @@ const SettingsModalContent = { }, expertLevel () { return this.$store.state.config.expertLevel + }, + isMobileLayout () { + return this.$store.state.interface.layoutType === 'mobile' } }, methods: { diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue index 06605e7dc..4d8981b29 100644 --- a/src/components/settings_modal/settings_modal_user_content.vue +++ b/src/components/settings_modal/settings_modal_user_content.vue @@ -21,6 +21,7 @@
Date: Sun, 1 Dec 2024 22:20:13 +0200 Subject: [PATCH 8/8] better settings on mobile --- src/App.js | 3 ++ src/App.vue | 2 +- .../settings_modal/helpers/unit_setting.vue | 54 ++++++++++--------- .../settings_modal/settings_modal.scss | 17 ++++++ 4 files changed, 51 insertions(+), 25 deletions(-) diff --git a/src/App.js b/src/App.js index e87108dd9..befcece80 100644 --- a/src/App.js +++ b/src/App.js @@ -67,6 +67,9 @@ export default { themeApplied () { return this.$store.state.interface.themeApplied }, + layoutModalClass () { + return '-' + this.layoutType + }, classes () { return [ { diff --git a/src/App.vue b/src/App.vue index 9d7ad9129..57c32cbd2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -70,7 +70,7 @@ - +
diff --git a/src/components/settings_modal/helpers/unit_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue index 40ab68801..0c0d6a689 100644 --- a/src/components/settings_modal/helpers/unit_setting.vue +++ b/src/components/settings_modal/helpers/unit_setting.vue @@ -10,31 +10,33 @@ {{ ' ' }} - - - {{ getUnitString(option) }} - - + + {{ ' ' }} .UnitSetting { + .no-break { + display: inline-block; + } + .number-input { max-width: 6.5em; text-align: right; diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss index 887a82f58..bd0ed4524 100644 --- a/src/components/settings_modal/settings_modal.scss +++ b/src/components/settings_modal/settings_modal.scss @@ -76,6 +76,23 @@ } } + &.-mobile { + .setting-list, + .option-list { + padding-left: 0.25em; + + > li { + margin: 1em 0; + line-height: 1.5em; + vertical-align: center; + } + + &.two-column { + column-count: 1; + } + } + } + &.peek { .settings-modal-panel { /* Explanation: