VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move name to settings modal

Browse Source
This commit is contained in:
marlon-erler
2026-09-28 15:21:50 +02:00
parent 0afbfc2d0b
commit 22acf7f7d8
22 changed files with 743 additions and 589 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ViewModel/Global/settingsViewModel.ts
+107 -100
View File
@@ -1,7 +1,10 @@
import CoreViewModel, { Context } from "./coreViewModel";
import * as React from "../../react";
import { CommonKeys } from "../../View/keystrokes";
import SettingsModel, { Languages, ThemeSettings } from "../../Model/Global/settingsModel";
import SettingsModel, {
Languages,
ThemeSettings,
} from "../../Model/Global/settingsModel";
export default class SettingsViewModel extends Context {
// state
@@ -31,154 +34,158 @@ export default class SettingsViewModel extends Context {
// methods
setName = (name?: string): void => {
if (typeof name == "string") {
this.usernameInput.value = name;
}
this.coreViewModel.settingsModel.setName(this.usernameInput.value);
this.username.value = this.coreViewModel.settingsModel.username;
this.usernameInput.callSubscriptions();
if (typeof name == "string") {
this.usernameInput.value = name;
}
this.coreViewModel.settingsModel.setName(this.usernameInput.value);
this.username.value = this.coreViewModel.settingsModel.username;
this.usernameInput.callSubscriptions();
};
setFirstDayofWeek = (): void => {
this.coreViewModel.settingsModel.setFirstDayOfWeek(
this.firstDayOfWeek.value,
);
this.coreViewModel.settingsModel.setFirstDayOfWeek(
this.firstDayOfWeek.value,
);
};
showSettingsModal = (): void => {
this.coreViewModel.context = this;
this.isShowingSettingsModal.value = true;
this.coreViewModel.context = this;
this.isShowingSettingsModal.value = true;
};
showModalPage = (page: SettingsModalPages): void => {
this.selectedModalPage.value = page;
this.selectedModalPage.value = page;
};
// view
applyTheme = (): void => {
let theme: string = this.theme.value;
let theme: string = this.theme.value;
if (theme == ThemeSettings.System)
theme = SettingsViewModel.getSystemTheme();
if (theme == ThemeSettings.System)
theme = SettingsViewModel.getSystemTheme();
switch (theme) {
case ThemeSettings.Dynamic:
const scene = this.selectDynamicScene();
this.setScene(scene);
break;
case ThemeSettings.Dark:
this.setScene(DynamicSceneNight);
break;
case ThemeSettings.Black:
this.setScene(DynamicSceneBlack);
break;
default:
this.setScene(DynamicSceneDay);
}
switch (theme) {
case ThemeSettings.Dynamic:
const scene = this.selectDynamicScene();
this.setScene(scene);
break;
case ThemeSettings.Dark:
this.setScene(DynamicSceneNight);
break;
case ThemeSettings.Black:
this.setScene(DynamicSceneBlack);
break;
default:
this.setScene(DynamicSceneDay);
}
};
selectDynamicScene = (): DynamicScene => {
let hour = new Date().getHours();
let hour = new Date().getHours();
if (hour >= 21 || hour <= 6) {
return DynamicSceneNight;
} else if (hour > 6 && hour < 10) {
return DynamicSceneSunrise;
} else if (hour < 14) {
return DynamicSceneDay;
} else if (hour < 17) {
return DynamicSceneAfternoon;
} else {
return DynamicSceneSunset;
}
if (hour >= 21 || hour <= 6) {
return DynamicSceneNight;
} else if (hour > 6 && hour < 10) {
return DynamicSceneSunrise;
} else if (hour < 14) {
return DynamicSceneDay;
} else if (hour < 17) {
return DynamicSceneAfternoon;
} else {
return DynamicSceneSunset;
}
};
setScene = (scene: DynamicScene): void => {
document.body.style.setProperty(
"--backdrop-grass-filter",
`brightness(${scene.brightness})`,
);
document.body.style.setProperty(
"--backdrop-grass-filter",
`brightness(${scene.brightness})`,
);
function setSkyColor(
tone: 1 | 2,
hue: number,
saturation: number,
luma: number,
) {
document.body.style.setProperty(
`--sky-${tone}`,
`hsl(${hue}, ${saturation}%, ${luma}%)`,
);
}
setSkyColor(1, scene.hue1, scene.saturation, scene.luma);
setSkyColor(2, scene.hue2, scene.saturation - 10, scene.luma - 10);
function setSkyColor(
tone: 1 | 2,
hue: number,
saturation: number,
luma: number,
) {
document.body.style.setProperty(
`--sky-${tone}`,
`hsl(${hue}, ${saturation}%, ${luma}%)`,
);
}
setSkyColor(1, scene.hue1, scene.saturation, scene.luma);
setSkyColor(2, scene.hue2, scene.saturation - 10, scene.luma - 10);
document.body.setAttribute("theme", scene.baseTheme);
document.body.setAttribute("theme", scene.baseTheme);
};
// exit
close = (): void => {
this.coreViewModel.closeContext(this.contextId);
this.coreViewModel.closeContext(this.contextId);
};
handleContextClose = (): void => {
this.isShowingSettingsModal.value = false;
if (this.requiresReload.value == true) {
window.location.reload();
}
this.isShowingSettingsModal.value = false;
if (this.requiresReload.value == true) {
window.location.reload();
}
};
// init
constructor(public readonly coreViewModel: CoreViewModel, public readonly settingsModel: SettingsModel) {
super("settings");
constructor(
public readonly coreViewModel: CoreViewModel,
public readonly settingsModel: SettingsModel,
) {
super("settings");
this.username.value = coreViewModel.settingsModel.username;
this.usernameInput.value = coreViewModel.settingsModel.username;
this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
this.language.value = coreViewModel.settingsModel.language;
this.theme.value = coreViewModel.settingsModel.theme;
this.username.value = coreViewModel.settingsModel.username;
this.usernameInput.value = coreViewModel.settingsModel.username;
this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
this.language.value = coreViewModel.settingsModel.language;
this.theme.value = coreViewModel.settingsModel.theme;
// subscriptions
this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
this.language.subscribeSilent((newValue) => {
this.coreViewModel.settingsModel.setLanguage(newValue);
this.requiresReload.value = true;
});
this.theme.subscribeSilent((newValue) => {
this.coreViewModel.settingsModel.setTheme(newValue);
});
// subscriptions
this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
this.language.subscribeSilent((newValue) => {
this.coreViewModel.settingsModel.setLanguage(newValue);
this.requiresReload.value = true;
});
this.theme.subscribeSilent((newValue) => {
this.coreViewModel.settingsModel.setTheme(newValue);
});
// set theme
this.theme.subscribe(() => {
this.applyTheme();
});
SettingsViewModel.generateThemeMedia().addEventListener("change", () =>
this.applyTheme(),
);
const seconds = new Date().getSeconds();
const secondsUntilNewMinute = 60 - seconds;
setTimeout(() => {
setInterval(this.applyTheme, 1000 * 60);
}, secondsUntilNewMinute);
// set theme
this.theme.subscribe(() => {
this.applyTheme();
});
SettingsViewModel.generateThemeMedia().addEventListener("change", () =>
this.applyTheme(),
);
const seconds = new Date().getSeconds();
const secondsUntilNewMinute = 60 - seconds;
setTimeout(() => {
setInterval(this.applyTheme, 1000 * 60);
}, secondsUntilNewMinute);
// keystrokes
this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
// keystrokes
this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
}
static generateThemeMedia(): MediaQueryList {
return window.matchMedia("(prefers-color-scheme: dark)");
return window.matchMedia("(prefers-color-scheme: dark)");
}
static getSystemTheme(): string {
const media = SettingsViewModel.generateThemeMedia();
return media.matches == true ? ThemeSettings.Dark : ThemeSettings.Light;
const media = SettingsViewModel.generateThemeMedia();
return media.matches == true ? ThemeSettings.Dark : ThemeSettings.Light;
}
}
export enum SettingsModalPages {
Appearance,
Regional,
Info,
Account,
Regional,
Info,
}
export interface DynamicScene {