monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2026-02-04 14:39:02 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor: rework html/css of custom theme edit section

Browse source
This commit is contained in:
Miodec 2025-10-28 09:38:06 +01:00
parent d77169ae2b
commit 9aa30a2a41
8 changed files with 100 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
frontend/src/html/pages/settings.html
View file

@ -1502,8 +1502,8 @@
<!-- Used to convert colors to hex -->
<div class="colorConverter"></div>
<div class="allCustomThemes buttons"></div>
<div class="customThemeEdit">
<div class="customThemeInputs">
<div class="customThemeInputs">
<div class="customThemeInput">
<label class="colorText">background</label>
<div class="colorPicker inputAndButton">
<input
@ -1529,6 +1529,8 @@
id="--bg-color"
/>
</div>
</div>
<div class="customThemeInput">
<label class="colorText">sub alt</label>
<div class="colorPicker inputAndButton">
<input
@ -1554,6 +1556,8 @@
id="--sub-alt-color"
/>
</div>
</div>
<div class="customThemeInput">
<label class="colorText">main</label>
<div class="colorPicker inputAndButton">
<input
@ -1572,6 +1576,8 @@
id="--main-color"
/>
</div>
</div>
<div class="customThemeInput">
<label class="colorText">sub</label>
<div class="colorPicker inputAndButton">
<input
@ -1590,6 +1596,8 @@
id="--sub-color"
/>
</div>
</div>
<div class="customThemeInput">
<label class="colorText">caret</label>
<div class="colorPicker inputAndButton">
<input
@ -1608,6 +1616,8 @@
id="--caret-color"
/>
</div>
</div>
<div class="customThemeInput">
<label class="colorText">text</label>
<div class="colorPicker inputAndButton">
<input
@ -1626,9 +1636,11 @@
id="--text-color"
/>
</div>
</div>
<span class="spacer"></span>
<!-- <span class="spacer"></span> -->
<div class="customThemeInput">
<label class="colorText">error</label>
<div class="colorPicker inputAndButton">
<input
@ -1647,6 +1659,8 @@
id="--error-color"
/>
</div>
</div>
<div class="customThemeInput">
<label class="colorText">extra error</label>
<div class="colorPicker inputAndButton">
<input
@ -1665,6 +1679,10 @@
id="--error-extra-color"
/>
</div>
</div>
<span class="colorfulHeader">colorful mode</span>
<div class="customThemeInput">
<label class="colorText">error</label>
<div class="colorPicker inputAndButton">
<input
@ -1683,7 +1701,8 @@
id="--colorful-error-color"
/>
</div>
</div>
<div class="customThemeInput">
<label class="colorText">extra error</label>
<div class="colorPicker inputAndButton">
<input
@ -1703,11 +1722,11 @@
/>
</div>
</div>
<div class="customThemeButtons">
<button id="loadCustomColorsFromPreset">load from preset</button>
<button id="shareCustomThemeButton">share</button>
<button id="saveCustomThemeButton">save as new</button>
</div>
</div>
<div class="customThemeButtons">
<button id="loadCustomColorsFromPreset">load from preset</button>
<button id="shareCustomThemeButton">share</button>
<button id="saveCustomThemeButton">save as new</button>
</div>
</div>
<div tabContent="preset" class="tabContent">

23
frontend/src/styles/media-queries-blue.scss
View file

@ -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;
}
}
}
}

6
frontend/src/styles/media-queries-green.scss
View file

@ -76,6 +76,12 @@
grid-template-columns: 1fr;
}
}
&.themes .tabContainer .tabContent.customTheme {
.customThemeInputs .customThemeInput {
grid-template-columns: 10em 1fr;
}
}
}
.settingsGroup.quickNav {
justify-content: unset;

5
frontend/src/styles/media-queries-yellow.scss
View file

@ -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 {

94
frontend/src/styles/settings.scss
View file

@ -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);
}
}
.text {
align-self: center;
.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);
}
}
.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;

8
frontend/src/ts/elements/settings/theme-picker.ts
View file

@ -218,7 +218,7 @@ export async function fillCustomButtons(): Promise<void> {
).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);

2
frontend/src/ts/modals/share-custom-theme.ts
View file

@ -31,7 +31,7 @@ async function generateUrl(): Promise<string> {
c: ThemeController.colorVars.map(
(color) =>
$(
`.pageSettings .customTheme .customThemeEdit #${color}[type='color']`
`.pageSettings .customTheme .tabContent.customTheme #${color}[type='color']`
).attr("value") as string
),
};

2
frontend/src/ts/modals/simple-modals.ts
View file

@ -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
);
}