Skip to content

Commit 9aa30a2

Browse files
MiodecMiodec
committed
refactor: rework html/css of custom theme edit section
1 parent d77169a commit 9aa30a2

File tree

8 files changed

+99
-76
lines changed

8 files changed

+99
-76
lines changed

‎frontend/src/html/pages/settings.html‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1502,8 +1502,8 @@
15021502
<!-- Used to convert colors to hex -->
15031503
<div class="colorConverter"></div>
15041504
<div class="allCustomThemes buttons"></div>
1505-
<div class="customThemeEdit">
1506-
<div class="customThemeInputs">
1505+
<div class="customThemeInputs">
1506+
<div class="customThemeInput">
15071507
<label class="colorText">background</label>
15081508
<div class="colorPicker inputAndButton">
15091509
<input
@@ -1529,6 +1529,8 @@
15291529
id="--bg-color"
15301530
/>
15311531
</div>
1532+
</div>
1533+
<div class="customThemeInput">
15321534
<label class="colorText">sub alt</label>
15331535
<div class="colorPicker inputAndButton">
15341536
<input
@@ -1554,6 +1556,8 @@
15541556
id="--sub-alt-color"
15551557
/>
15561558
</div>
1559+
</div>
1560+
<div class="customThemeInput">
15571561
<label class="colorText">main</label>
15581562
<div class="colorPicker inputAndButton">
15591563
<input
@@ -1572,6 +1576,8 @@
15721576
id="--main-color"
15731577
/>
15741578
</div>
1579+
</div>
1580+
<div class="customThemeInput">
15751581
<label class="colorText">sub</label>
15761582
<div class="colorPicker inputAndButton">
15771583
<input
@@ -1590,6 +1596,8 @@
15901596
id="--sub-color"
15911597
/>
15921598
</div>
1599+
</div>
1600+
<div class="customThemeInput">
15931601
<label class="colorText">caret</label>
15941602
<div class="colorPicker inputAndButton">
15951603
<input
@@ -1608,6 +1616,8 @@
16081616
id="--caret-color"
16091617
/>
16101618
</div>
1619+
</div>
1620+
<div class="customThemeInput">
16111621
<label class="colorText">text</label>
16121622
<div class="colorPicker inputAndButton">
16131623
<input
@@ -1626,9 +1636,11 @@
16261636
id="--text-color"
16271637
/>
16281638
</div>
1639+
</div>
16291640

1630-
<span class="spacer"></span>
1641+
<!-- <span class="spacer"></span> -->
16311642

1643+
<div class="customThemeInput">
16321644
<label class="colorText">error</label>
16331645
<div class="colorPicker inputAndButton">
16341646
<input
@@ -1647,6 +1659,8 @@
16471659
id="--error-color"
16481660
/>
16491661
</div>
1662+
</div>
1663+
<div class="customThemeInput">
16501664
<label class="colorText">extra error</label>
16511665
<div class="colorPicker inputAndButton">
16521666
<input
@@ -1665,6 +1679,10 @@
16651679
id="--error-extra-color"
16661680
/>
16671681
</div>
1682+
</div>
1683+
1684+
<span class="colorfulHeader">colorful mode</span>
1685+
<div class="customThemeInput">
16681686
<label class="colorText">error</label>
16691687
<div class="colorPicker inputAndButton">
16701688
<input
@@ -1683,7 +1701,8 @@
16831701
id="--colorful-error-color"
16841702
/>
16851703
</div>
1686-
1704+
</div>
1705+
<div class="customThemeInput">
16871706
<label class="colorText">extra error</label>
16881707
<div class="colorPicker inputAndButton">
16891708
<input
@@ -1703,11 +1722,11 @@
17031722
/>
17041723
</div>
17051724
</div>
1706-
<div class="customThemeButtons">
1707-
<button id="loadCustomColorsFromPreset">load from preset</button>
1708-
<button id="shareCustomThemeButton">share</button>
1709-
<button id="saveCustomThemeButton">save as new</button>
1710-
</div>
1725+
</div>
1726+
<div class="customThemeButtons">
1727+
<button id="loadCustomColorsFromPreset">load from preset</button>
1728+
<button id="shareCustomThemeButton">share</button>
1729+
<button id="saveCustomThemeButton">save as new</button>
17111730
</div>
17121731
</div>
17131732
<div tabContent="preset" class="tabContent">

‎frontend/src/styles/media-queries-blue.scss‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -119,15 +119,20 @@
119119
grid-template-areas:
120120
"title"
121121
"text" "buttons";
122-
.customThemeEdit {
123-
.spacer {
124-
display: none;
125-
}
126-
.customThemeInputs {
127-
grid-template-columns: 1fr 1.5fr;
128-
}
129-
.customThemeButtons {
130-
grid-template-columns: 1fr;
122+
123+
&.themes {
124+
grid-template-columns: 1fr 1fr;
125+
gap: 1em;
126+
.tabContainer .tabContent.customTheme {
127+
.customThemeInputs {
128+
grid-template-columns: 1fr;
129+
.customThemeInput {
130+
grid-template-columns: 1fr 1fr;
131+
}
132+
}
133+
.customThemeButtons {
134+
grid-template-columns: 1fr;
135+
}
131136
}
132137
}
133138
}

‎frontend/src/styles/media-queries-green.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,12 @@
7676
grid-template-columns: 1fr;
7777
}
7878
}
79+
80+
&.themes .tabContainer .tabContent.customTheme {
81+
.customThemeInputs .customThemeInput {
82+
grid-template-columns: 10em 1fr;
83+
}
84+
}
7985
}
8086
.settingsGroup.quickNav {
8187
justify-content: unset;

‎frontend/src/styles/media-queries-yellow.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@
1111
.pageSettings {
1212
.section {
1313
grid-template-columns: 1.5fr 1fr;
14+
&.themes .tabContainer .tabContent.customTheme {
15+
.customThemeInputs .customThemeInput {
16+
grid-template-columns: 15em 1fr;
17+
}
18+
}
1419
}
1520
}
1621
.pageAccountSettings .main {

‎frontend/src/styles/settings.scss‎

Lines changed: 40 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -268,52 +268,6 @@
268268
margin-bottom: 1rem;
269269
}
270270

271-
& .customThemeEdit {
272-
// grid-row: 3;
273-
display: grid;
274-
gap: 1rem;
275-
// grid-template-columns: 1fr 1fr 1fr 1fr;
276-
// justify-items: stretch;
277-
// gap: 0.5rem 1rem;
278-
279-
.customThemeInputs {
280-
display: grid;
281-
grid-template-columns: 1fr 1.5fr 1fr 1.5fr;
282-
gap: 1rem;
283-
}
284-
285-
.customThemeButtons {
286-
display: grid;
287-
gap: 1rem;
288-
grid-template-columns: 1fr 1fr 1fr;
289-
}
290-
291-
.inputAndButton {
292-
grid-template-columns: 1fr auto;
293-
}
294-
295-
input {
296-
width: 100%;
297-
}
298-
299-
label {
300-
display: grid;
301-
place-content: center start;
302-
margin-left: 0.5rem;
303-
}
304-
305-
& .spacer {
306-
grid-column: span 4;
307-
}
308-
309-
& .buttons {
310-
display: grid;
311-
grid-template-columns: 1fr 1fr 1fr;
312-
grid-column: 1/5;
313-
gap: 0.5rem;
314-
}
315-
}
316-
317271
.groupTitle {
318272
font-size: 1rem;
319273
color: var(--sub-color);
@@ -407,13 +361,48 @@
407361

408362
&.customTheme {
409363
grid-template-columns: 1fr;
410-
.colorText {
411-
color: var(--text-color);
364+
365+
.customThemeInputs {
366+
display: grid;
367+
// margin-block: 1em;
368+
margin-bottom: 1em;
369+
grid-template-columns: 1fr 1fr;
370+
gap: 1rem;
371+
372+
.customThemeInput {
373+
display: grid;
374+
color: var(--text-color);
375+
grid-template-columns: 20em 1fr;
376+
align-items: center;
377+
gap: 1em;
378+
379+
.inputAndButton {
380+
margin-bottom: 0;
381+
width: 100%;
382+
input {
383+
width: 100%;
384+
}
385+
386+
.button {
387+
margin-left: 0.5em;
388+
}
389+
}
390+
}
391+
392+
.colorfulHeader {
393+
grid-column: 1/-1;
394+
// margin-left: 0.5em;
395+
color: var(--sub-color);
396+
}
412397
}
413-
}
414398

415-
.text {
416-
align-self: center;
399+
.customThemeButtons {
400+
display: grid;
401+
margin-top: 0.5em;
402+
grid-template-columns: 1fr 1fr 1fr;
403+
grid-column: 1/-1;
404+
gap: 0.5em;
405+
}
417406
}
418407
}
419408
}
@@ -518,7 +507,6 @@
518507
&.themes {
519508
grid-template-areas:
520509
"title tabs"
521-
"text text"
522510
"buttons buttons";
523511
column-gap: 2rem;
524512
// row-gap: 0.5rem;

‎frontend/src/ts/elements/settings/theme-picker.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ export async function fillCustomButtons(): Promise<void> {
218218
).empty();
219219
const addButton = $(".pageSettings .section.themes .addCustomThemeButton");
220220
const saveButton = $(
221-
".pageSettings .section.themes .customThemeEdit #saveCustomThemeButton"
221+
".pageSettings .section.themes .tabContent.customTheme #saveCustomThemeButton"
222222
);
223223

224224
if (!isAuthenticated()) {
@@ -284,9 +284,9 @@ function saveCustomThemeColors(): void {
284284
const newColors: string[] = [];
285285
for (const color of ThemeController.colorVars) {
286286
newColors.push(
287-
$(
288-
`.pageSettings .customTheme .customThemeEdit #${color}[type='color']`
289-
).attr("value") as string
287+
$(`.pageSettings .tabContent.customTheme #${color}[type='color']`).attr(
288+
"value"
289+
) as string
290290
);
291291
}
292292
UpdateConfig.setCustomThemeColors(newColors as CustomThemeColors);

‎frontend/src/ts/modals/share-custom-theme.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ async function generateUrl(): Promise<string> {
3131
c: ThemeController.colorVars.map(
3232
(color) =>
3333
$(
34-
`.pageSettings .customTheme .customThemeEdit #${color}[type='color']`
34+
`.pageSettings .customTheme .tabContent.customTheme #${color}[type='color']`
3535
).attr("value") as string
3636
),
3737
};

‎frontend/src/ts/modals/simple-modals.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1137,7 +1137,7 @@ list.updateCustomTheme = new SimpleModal({
11371137
for (const color of ThemeController.colorVars) {
11381138
newColors.push(
11391139
$(
1140-
`.pageSettings .customTheme .customThemeEdit #${color}[type='color']`
1140+
`.pageSettings .customTheme .tabContent.customTheme #${color}[type='color']`
11411141
).attr("value") as string
11421142
);
11431143
}

0 commit comments

Comments
 (0)