monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-09-08 07:36:55 +08:00
Code Issues Projects Releases Packages Wiki Activity

impr(settings): use dropdown for custom layoutfluid (@fehmer) (#6445)

Browse source
This commit is contained in:
Christian Fehmer 2025-04-16 16:55:38 +02:00 • committed by GitHub
parent 4abcc8c5cd
commit e1c8e4a226
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 26 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -347,17 +347,7 @@
Select which layouts you want the layoutfluid funbox to cycle through.
</div>
<div class="inputs">
<div class="inputAndButton">
<input
type="text"
placeholder="layouts (separated by space)"
class="input"
tabindex="0"
/>
<button class="save no-auto-handle">
<i class="fas fa-save fa-fw"></i>
</button>
</div>
<select multiple></select>
</div>
</div>
<div class="sectionSpacer"></div>

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

@ -23,7 +23,6 @@ import * as CustomBackgroundFilter from "../elements/custom-background-filter";
import {
ConfigValue,
CustomBackgroundSchema,
CustomLayoutFluid,
} from "@monkeytype/contracts/schemas/configs";
import {
getAllFunboxes,
@ -433,10 +432,6 @@ async function initGroups(): Promise<void> {
UpdateConfig.setCustomBackgroundSize,
"button"
) as SettingsGroup<ConfigValue>;
// groups.customLayoutfluid = new SettingsGroup(
// "customLayoutfluid",
// UpdateConfig.setCustomLayoutfluid
// );
}
function reset(): void {
@ -693,6 +688,31 @@ async function fillSettingsPage(): Promise<void> {
Config.customLayoutfluid.replace(/#/g, " ")
);
const customLayoutfluidActive = Config.customLayoutfluid.split("#");
const customLayoutfluidElement = document.querySelector(
".pageSettings .section[data-config-name='customLayoutfluid'] select"
) as Element;
new SlimSelect({
select: customLayoutfluidElement,
data: [
...customLayoutfluidActive,
...LayoutsList.filter((it) => !customLayoutfluidActive.includes(it)),
].map((layout) => ({
text: layout.replace(/_/g, " "),
value: layout,
selected: customLayoutfluidActive.includes(layout),
})),
settings: { keepOrder: true },
events: {
afterChange: (newVal): void => {
void UpdateConfig.setCustomLayoutfluid(
newVal.map((it) => it.value).join("#")
);
},
},
});
$(".pageSettings .section[data-config-name='tapeMargin'] input").val(
Config.tapeMargin
);
@ -1324,29 +1344,6 @@ $(
}
});
const handleLayoutfluid = (): void => {
if (
UpdateConfig.setCustomLayoutfluid(
$(
".pageSettings .section[data-config-name='customLayoutfluid'] .inputAndButton input"
).val() as CustomLayoutFluid
)
) {
Notifications.add("Custom layoutfluid saved", 1);
}
};
$(
".pageSettings .section[data-config-name='customLayoutfluid'] .inputAndButton button.save"
).on("click", handleLayoutfluid);
$(
".pageSettings .section[data-config-name='customLayoutfluid'] .inputAndButton .input"
).on("keypress", (e) => {
if (e.key === "Enter") {
handleLayoutfluid();
}
});
$(".pageSettings .quickNav .links a").on("click", (e) => {
const settingsGroup = e.target.innerText;
const isClosed = $(`.pageSettings .settingsGroup.${settingsGroup}`).hasClass(