From 9aa30a2a41d7b1e1164260f6dce95bbd14c21e69 Mon Sep 17 00:00:00 2001 From: Miodec Date: Tue, 28 Oct 2025 09:38:06 +0100 Subject: [PATCH] refactor: rework html/css of custom theme edit section --- frontend/src/html/pages/settings.html | 37 ++++++-- frontend/src/styles/media-queries-blue.scss | 23 +++-- frontend/src/styles/media-queries-green.scss | 6 ++ frontend/src/styles/media-queries-yellow.scss | 5 + frontend/src/styles/settings.scss | 92 ++++++++----------- .../src/ts/elements/settings/theme-picker.ts | 8 +- frontend/src/ts/modals/share-custom-theme.ts | 2 +- frontend/src/ts/modals/simple-modals.ts | 2 +- 8 files changed, 99 insertions(+), 76 deletions(-) diff --git a/frontend/src/html/pages/settings.html b/frontend/src/html/pages/settings.html index 28fb1dacec1b..8b232477b7fe 100644 --- a/frontend/src/html/pages/settings.html +++ b/frontend/src/html/pages/settings.html @@ -1502,8 +1502,8 @@
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
- + +
+
+
+
+ + colorful mode +
- +
+
-
- - - -
+
+
+ + +
diff --git a/frontend/src/styles/media-queries-blue.scss b/frontend/src/styles/media-queries-blue.scss index 9d725f05c3b0..45bae3ea5868 100644 --- a/frontend/src/styles/media-queries-blue.scss +++ b/frontend/src/styles/media-queries-blue.scss @@ -119,15 +119,20 @@ grid-template-areas: "title" "text" "buttons"; - .customThemeEdit { - .spacer { - display: none; - } - .customThemeInputs { - grid-template-columns: 1fr 1.5fr; - } - .customThemeButtons { - grid-template-columns: 1fr; + + &.themes { + grid-template-columns: 1fr 1fr; + gap: 1em; + .tabContainer .tabContent.customTheme { + .customThemeInputs { + grid-template-columns: 1fr; + .customThemeInput { + grid-template-columns: 1fr 1fr; + } + } + .customThemeButtons { + grid-template-columns: 1fr; + } } } } diff --git a/frontend/src/styles/media-queries-green.scss b/frontend/src/styles/media-queries-green.scss index 563a3e547592..2080e20547a2 100644 --- a/frontend/src/styles/media-queries-green.scss +++ b/frontend/src/styles/media-queries-green.scss @@ -76,6 +76,12 @@ grid-template-columns: 1fr; } } + + &.themes .tabContainer .tabContent.customTheme { + .customThemeInputs .customThemeInput { + grid-template-columns: 10em 1fr; + } + } } .settingsGroup.quickNav { justify-content: unset; diff --git a/frontend/src/styles/media-queries-yellow.scss b/frontend/src/styles/media-queries-yellow.scss index 403311e15877..8b2183a4e960 100644 --- a/frontend/src/styles/media-queries-yellow.scss +++ b/frontend/src/styles/media-queries-yellow.scss @@ -11,6 +11,11 @@ .pageSettings { .section { grid-template-columns: 1.5fr 1fr; + &.themes .tabContainer .tabContent.customTheme { + .customThemeInputs .customThemeInput { + grid-template-columns: 15em 1fr; + } + } } } .pageAccountSettings .main { diff --git a/frontend/src/styles/settings.scss b/frontend/src/styles/settings.scss index f1a923d2722f..f74bc242a16e 100644 --- a/frontend/src/styles/settings.scss +++ b/frontend/src/styles/settings.scss @@ -268,52 +268,6 @@ margin-bottom: 1rem; } - & .customThemeEdit { - // grid-row: 3; - display: grid; - gap: 1rem; - // grid-template-columns: 1fr 1fr 1fr 1fr; - // justify-items: stretch; - // gap: 0.5rem 1rem; - - .customThemeInputs { - display: grid; - grid-template-columns: 1fr 1.5fr 1fr 1.5fr; - gap: 1rem; - } - - .customThemeButtons { - display: grid; - gap: 1rem; - grid-template-columns: 1fr 1fr 1fr; - } - - .inputAndButton { - grid-template-columns: 1fr auto; - } - - input { - width: 100%; - } - - label { - display: grid; - place-content: center start; - margin-left: 0.5rem; - } - - & .spacer { - grid-column: span 4; - } - - & .buttons { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-column: 1/5; - gap: 0.5rem; - } - } - .groupTitle { font-size: 1rem; color: var(--sub-color); @@ -407,13 +361,48 @@ &.customTheme { grid-template-columns: 1fr; - .colorText { - color: var(--text-color); + + .customThemeInputs { + display: grid; + // margin-block: 1em; + margin-bottom: 1em; + grid-template-columns: 1fr 1fr; + gap: 1rem; + + .customThemeInput { + display: grid; + color: var(--text-color); + grid-template-columns: 20em 1fr; + align-items: center; + gap: 1em; + + .inputAndButton { + margin-bottom: 0; + width: 100%; + input { + width: 100%; + } + + .button { + margin-left: 0.5em; + } + } + } + + .colorfulHeader { + grid-column: 1/-1; + // margin-left: 0.5em; + color: var(--sub-color); + } } - } - .text { - align-self: center; + .customThemeButtons { + display: grid; + margin-top: 0.5em; + grid-template-columns: 1fr 1fr 1fr; + grid-column: 1/-1; + gap: 0.5em; + } } } } @@ -518,7 +507,6 @@ &.themes { grid-template-areas: "title tabs" - "text text" "buttons buttons"; column-gap: 2rem; // row-gap: 0.5rem; diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts index 1f536a87bf52..479f21d6dade 100644 --- a/frontend/src/ts/elements/settings/theme-picker.ts +++ b/frontend/src/ts/elements/settings/theme-picker.ts @@ -218,7 +218,7 @@ export async function fillCustomButtons(): Promise { ).empty(); const addButton = $(".pageSettings .section.themes .addCustomThemeButton"); const saveButton = $( - ".pageSettings .section.themes .customThemeEdit #saveCustomThemeButton" + ".pageSettings .section.themes .tabContent.customTheme #saveCustomThemeButton" ); if (!isAuthenticated()) { @@ -284,9 +284,9 @@ function saveCustomThemeColors(): void { const newColors: string[] = []; for (const color of ThemeController.colorVars) { newColors.push( - $( - `.pageSettings .customTheme .customThemeEdit #${color}[type='color']` - ).attr("value") as string + $(`.pageSettings .tabContent.customTheme #${color}[type='color']`).attr( + "value" + ) as string ); } UpdateConfig.setCustomThemeColors(newColors as CustomThemeColors); diff --git a/frontend/src/ts/modals/share-custom-theme.ts b/frontend/src/ts/modals/share-custom-theme.ts index 13d95d7f7051..f05129eab06b 100644 --- a/frontend/src/ts/modals/share-custom-theme.ts +++ b/frontend/src/ts/modals/share-custom-theme.ts @@ -31,7 +31,7 @@ async function generateUrl(): Promise { c: ThemeController.colorVars.map( (color) => $( - `.pageSettings .customTheme .customThemeEdit #${color}[type='color']` + `.pageSettings .customTheme .tabContent.customTheme #${color}[type='color']` ).attr("value") as string ), }; diff --git a/frontend/src/ts/modals/simple-modals.ts b/frontend/src/ts/modals/simple-modals.ts index f73c4fa775c6..3d3c38d86b90 100644 --- a/frontend/src/ts/modals/simple-modals.ts +++ b/frontend/src/ts/modals/simple-modals.ts @@ -1137,7 +1137,7 @@ list.updateCustomTheme = new SimpleModal({ for (const color of ThemeController.colorVars) { newColors.push( $( - `.pageSettings .customTheme .customThemeEdit #${color}[type='color']` + `.pageSettings .customTheme .tabContent.customTheme #${color}[type='color']` ).attr("value") as string ); }