monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-11-17 22:29:52 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix(settings): Update layoutfluid on config change (@fehmer) (#6462)

Browse source 
When changing the layoutfluid settings via cmdline the settings page did
not update.
This also happens on prod so it is not directly related to the change
#6445
This commit is contained in:
Christian Fehmer 2025-04-17 14:20:53 +02:00 • committed by GitHub
parent 55e7de7425
commit 312813c1ba
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 35 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -32,9 +32,12 @@ import {
import { getActiveFunboxNames } from "../test/funbox/list";
import { SnapshotPreset } from "../constants/default-snapshot";
import { LayoutsList } from "../constants/layouts";
import { DataArrayPartial } from "slim-select/store";
type SettingsGroups<T extends ConfigValue> = Record<string, SettingsGroup<T>>;
let customLayoutFluidSelect: SlimSelect | undefined;
export const groups: SettingsGroups<ConfigValue> = {};
async function initGroups(): Promise<void> {
@ -684,34 +687,24 @@ async function fillSettingsPage(): Promise<void> {
Config.keymapSize
);
$(".pageSettings .section[data-config-name='customLayoutfluid'] input").val(
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("#")
);
if (customLayoutFluidSelect === undefined) {
customLayoutFluidSelect = new SlimSelect({
select: customLayoutfluidElement,
settings: { keepOrder: true },
events: {
afterChange: (newVal): void => {
const customLayoutfluid = newVal.map((it) => it.value).join("#");
if (customLayoutfluid !== Config.customLayoutfluid) {
void UpdateConfig.setCustomLayoutfluid(customLayoutfluid);
}
},
},
},
});
});
}
$(".pageSettings .section[data-config-name='tapeMargin'] input").val(
Config.tapeMargin
@ -911,6 +904,13 @@ export async function update(groupUpdate = true): Promise<void> {
$(".pageSettings .tip").html(`
tip: You can also change all these settings quickly using the
command line (<key>${commandKey}</key> or <key>${modifierKey}</key> + <key>shift</key> + <key>p</key>)`);
if (
customLayoutFluidSelect !== undefined &&
customLayoutFluidSelect.getSelected().join("#") !== Config.customLayoutfluid
) {
customLayoutFluidSelect.setData(getLayoutfluidDropdownData());
}
}
function toggleSettingsGroup(groupName: string): void {
const groupEl = $(`.pageSettings .settingsGroup.${groupName}`);
@ -1359,6 +1359,18 @@ export function setEventDisabled(value: boolean): void {
configEventDisabled = value;
}
function getLayoutfluidDropdownData(): DataArrayPartial {
const customLayoutfluidActive = Config.customLayoutfluid.split("#");
return [
...customLayoutfluidActive,
...LayoutsList.filter((it) => !customLayoutfluidActive.includes(it)),
].map((layout) => ({
text: layout.replace(/_/g, " "),
value: layout,
selected: customLayoutfluidActive.includes(layout),
}));
}
ConfigEvent.subscribe((eventKey, eventValue) => {
if (eventKey === "fullConfigChange") setEventDisabled(true);
if (eventKey === "fullConfigChangeFinished") setEventDisabled(false);