monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-21 13:06:01 +08:00
Code Issues Projects Releases Packages Wiki Activity

impr: add button to remove custom theme background (@fehmer) (#5488)

Browse source 
* impr: add button to remove theme background (@fehmer)

* update notification if custom background cannot be loaded. Always update remove button visibility

* update error message
This commit is contained in:
Christian Fehmer 2024-06-16 15:41:36 +02:00 • committed by GitHub
parent 90e234f77a
commit ccd2b1ef28
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 39 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1114,9 +1114,14 @@
tabindex="0"
onClick="this.select();"
/>
<button class="save no-auto-handle">
<i class="fas fa-save fa-fw"></i>
</button>
<span>
<button class="hidden remove no-auto-handle">
<i class="fas fa-trash fa-fw"></i>
</button>
<button class="save no-auto-handle">
<i class="fas fa-save fa-fw"></i>
</button>
</span>
</div>
<div class="buttons">
<button data-config-value="cover">cover</button>

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

@ -57,6 +57,10 @@
gap: 0.5rem;
margin-bottom: 0.5rem;
span {
display: flex;
gap: 0.5rem;
}
.button {
height: auto;

7
frontend/src/ts/controllers/theme-controller.ts
View file

@ -4,7 +4,7 @@ import * as Misc from "../utils/misc";
import * as Arrays from "../utils/arrays";
import * as JSONData from "../utils/json-data";
import { isColorDark, isColorLight } from "../utils/colors";
import Config, { setAutoSwitchTheme, setCustomBackground } from "../config";
import Config, { setAutoSwitchTheme } from "../config";
import * as BackgroundFilter from "../elements/custom-background-filter";
import * as ConfigEvent from "../observables/config-event";
import * as DB from "../db";
@ -428,7 +428,8 @@ ConfigEvent.subscribe(async (eventKey, eventValue, nosave) => {
window.addEventListener("customBackgroundFailed", () => {
Notifications.add(
"The custom background cannot be loaded and will be removed from your configuration."
"Custom background link is either temporairly unavailable or expired. Please make sure the URL is correct or change it",
0,
{ duration: 5 }
);
setCustomBackground("");
});

23
frontend/src/ts/pages/settings.ts
View file

@ -654,6 +654,7 @@ async function fillSettingsPage(): Promise<void> {
$(
".pageSettings .section[data-config-name='customBackgroundSize'] input"
).val(Config.customBackground);
updateCustomBackgroundRemoveButtonVisibility();
$(".pageSettings .section[data-config-name='fontSize'] input").val(
Config.fontSize
@ -950,6 +951,8 @@ export async function update(groupUpdate = true): Promise<void> {
".pageSettings .section[data-config-name='customBackgroundFilter']"
).addClass("hidden");
}
updateCustomBackgroundRemoveButtonVisibility();
$(
".pageSettings .section[data-config-name='customBackgroundSize'] input"
).val(Config.customBackground);
@ -987,6 +990,20 @@ function toggleSettingsGroup(groupName: string): void {
}
}
function updateCustomBackgroundRemoveButtonVisibility(): void {
const button = $(
".pageSettings .section[data-config-name='customBackgroundSize'] button.remove"
);
if (
Config.customBackground !== undefined &&
Config.customBackground.length > 0
) {
button.removeClass("hidden");
} else {
button.addClass("hidden");
}
}
$(".pageSettings .section[data-config-name='paceCaret']").on(
"focusout",
"input.customPaceCaretSpeed",
@ -1175,6 +1192,12 @@ $(
);
});
$(
".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton button.remove"
).on("click", () => {
UpdateConfig.setCustomBackground("");
});
$(
".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton input"
).on("keypress", (e) => {