Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity

store theme-name and variant in settings

Browse source
This commit is contained in:
RMidhunSuresh 2022-06-05 20:49:05 +05:30
parent 43244fa026
commit 71c3fb39a2
4 changed files with 62 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/domain/session/settings/SettingsViewModel.js
View file

@ -51,7 +51,6 @@ export class SettingsViewModel extends ViewModel {
this.maxSentImageSizeLimit = 4000; this.maxSentImageSizeLimit = 4000;
this.pushNotifications = new PushNotificationStatus(); this.pushNotifications = new PushNotificationStatus();
this._activeTheme = undefined; this._activeTheme = undefined;
this._activeVariant = undefined;
} }
get _session() { get _session() {
@ -80,7 +79,6 @@ export class SettingsViewModel extends ViewModel {
this.pushNotifications.enabled = await this._session.arePushNotificationsEnabled(); this.pushNotifications.enabled = await this._session.arePushNotificationsEnabled();
if (!import.meta.env.DEV) { if (!import.meta.env.DEV) {
this._activeTheme = await this.platform.themeLoader.getActiveTheme(); this._activeTheme = await this.platform.themeLoader.getActiveTheme();
this._activeVariant = await this.platform.themeLoader.getCurrentVariant();
} }
this.emitChange(""); this.emitChange("");
} }
@ -141,14 +139,6 @@ export class SettingsViewModel extends ViewModel {
return this._activeTheme; return this._activeTheme;
} }
get activeVariant() {
return this._activeVariant;
}
setTheme(name) {
this.platform.themeLoader.setTheme(name);
}
_formatBytes(n) { _formatBytes(n) {
if (typeof n === "number") { if (typeof n === "number") {
return Math.round(n / (1024 * 1024)).toFixed(1) + " MB"; return Math.round(n / (1024 * 1024)).toFixed(1) + " MB";
@ -192,9 +182,12 @@ export class SettingsViewModel extends ViewModel {
} }
} }
changeThemeOption(themeId) { changeThemeOption(themeName, themeVariant) {
if (themeId) { if (themeName && "id" in this.themeMapping[themeName]) {
this.setTheme(themeId); this.platform.themeLoader.setTheme(themeName);
}
else {
this.platform.themeLoader.setTheme(themeName, themeVariant);
} }
// if there's no themeId, then the theme is going to be set via radio-buttons // if there's no themeId, then the theme is going to be set via radio-buttons
// emit so that radio-buttons become displayed/hidden // emit so that radio-buttons become displayed/hidden
@ -204,13 +197,5 @@ export class SettingsViewModel extends ViewModel {
get preferredColorScheme() { get preferredColorScheme() {
return this.platform.themeLoader.preferredColorScheme; return this.platform.themeLoader.preferredColorScheme;
} }
persistVariantToStorage(variant) {
this.platform.themeLoader.persistVariantToStorage(variant);
}
removeVariantFromStorage() {
this.platform.themeLoader.removeVariantFromStorage();
}
} }

3
src/platform/web/Platform.js
View file

@ -189,7 +189,8 @@ export class Platform {
); );
const manifests = this.config["themeManifests"]; const manifests = this.config["themeManifests"];
await this._themeLoader?.init(manifests); await this._themeLoader?.init(manifests);
this._themeLoader?.setTheme(await this._themeLoader.getActiveTheme(), log); const { themeName, themeVariant } = await this._themeLoader.getActiveTheme();
this._themeLoader?.setTheme(themeName, themeVariant, log);
}); });
} catch (err) { } catch (err) {
this._container.innerText = err.message; this._container.innerText = err.message;

71
src/platform/web/ThemeLoader.ts
View file

@ -33,6 +33,11 @@ type DefaultVariant = {
cssLocation: string; cssLocation: string;
variantName: string; variantName: string;
}; };
default: {
id: string;
cssLocation: string;
variantName: string;
};
} }
type ThemeInformation = NormalVariant | DefaultVariant; type ThemeInformation = NormalVariant | DefaultVariant;
@ -67,13 +72,12 @@ export class ThemeLoader {
information which includes the location of the CSS file. information which includes the location of the CSS file.
(see type ThemeInformation above) (see type ThemeInformation above)
*/ */
// Object.assign(this._themeMapping, body["source"]["built-assets"]);
//Add the default-theme as an additional option to the mapping //Add the default-theme as an additional option to the mapping
const defaultThemeId = this.getDefaultTheme(); const defaultThemeId = this.getDefaultTheme();
if (defaultThemeId) { if (defaultThemeId) {
const cssLocation = this._findThemeLocationFromId(defaultThemeId); const themeDetails = this._findThemeDetailsFromId(defaultThemeId);
if (cssLocation) { if (themeDetails) {
this._themeMapping["Default"] = { id: "default", cssLocation }; this._themeMapping["Default"] = { id: "default", cssLocation: themeDetails.cssLocation };
} }
} }
} }
@ -115,7 +119,8 @@ export class ThemeLoader {
* As mentioned above, if there's both a default dark and a default light variant, * As mentioned above, if there's both a default dark and a default light variant,
* add them to themeMapping separately. * add them to themeMapping separately.
*/ */
this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant }; const defaultVariant = this.preferredColorScheme === ColorSchemePreference.Dark ? defaultDarkVariant : defaultLightVariant;
this._themeMapping[themeName] = { dark: defaultDarkVariant, light: defaultLightVariant, default: defaultVariant };
} }
else { else {
/** /**
@ -127,14 +132,24 @@ export class ThemeLoader {
} }
} }
setTheme(themeId: string, log?: ILogItem) { setTheme(themeName: string, themeVariant: "light" | "dark" | "default", log?: ILogItem) {
this._platform.logger.wrapOrRun(log, { l: "change theme", id: themeId }, () => { this._platform.logger.wrapOrRun(log, { l: "change theme", name: themeName, variant: themeVariant }, () => {
const themeLocation = this._findThemeLocationFromId(themeId); let cssLocation: string;
if (!themeLocation) { let themeDetails = this._themeMapping[themeName];
throw new Error(`Cannot find theme location for theme "${themeId}"!`); if ("id" in themeDetails) {
cssLocation = themeDetails.cssLocation;
}
else {
cssLocation = themeDetails[themeVariant ?? "default"].cssLocation;
}
this._platform.replaceStylesheet(cssLocation);
this._platform.settingsStorage.setString("theme-name", themeName);
if (themeVariant) {
this._platform.settingsStorage.setString("theme-variant", themeVariant);
}
else {
this._platform.settingsStorage.remove("theme-variant");
} }
this._platform.replaceStylesheet(themeLocation);
this._platform.settingsStorage.setString("theme", themeId);
}); });
} }
@ -142,12 +157,10 @@ export class ThemeLoader {
return this._themeMapping; return this._themeMapping;
} }
async getActiveTheme(): Promise<string> { async getActiveTheme(): Promise<{themeName: string, themeVariant?: string}> {
const theme = await this._platform.settingsStorage.getString("theme") ?? "default"; const themeName = await this._platform.settingsStorage.getString("theme-name") ?? "Default";
if (theme) { const themeVariant = await this._platform.settingsStorage.getString("theme-variant");
return theme; return { themeName, themeVariant };
}
throw new Error("Cannot find active theme!");
} }
getDefaultTheme(): string | undefined { getDefaultTheme(): string | undefined {
@ -159,16 +172,16 @@ export class ThemeLoader {
} }
} }
private _findThemeLocationFromId(themeId: string): string | undefined { private _findThemeDetailsFromId(themeId: string): {themeName: string, cssLocation: string, variant?: string} | undefined {
for (const themeData of Object.values(this._themeMapping)) { for (const [themeName, themeData] of Object.entries(this._themeMapping)) {
if ("id" in themeData && themeData.id === themeId) { if ("id" in themeData && themeData.id === themeId) {
return themeData.cssLocation; return { themeName, cssLocation: themeData.cssLocation };
} }
else if ("light" in themeData && themeData.light?.id === themeId) { else if ("light" in themeData && themeData.light?.id === themeId) {
return themeData.light.cssLocation; return { themeName, cssLocation: themeData.light.cssLocation, variant: "light" };
} }
else if ("dark" in themeData && themeData.dark?.id === themeId) { else if ("dark" in themeData && themeData.dark?.id === themeId) {
return themeData.dark.cssLocation; return { themeName, cssLocation: themeData.dark.cssLocation, variant: "dark" };
} }
} }
} }
@ -182,16 +195,4 @@ export class ThemeLoader {
} }
throw new Error("Cannot find preferred colorscheme!"); throw new Error("Cannot find preferred colorscheme!");
} }
async persistVariantToStorage(variant: string) {
await this._platform.settingsStorage.setString("theme-variant", variant);
}
async getCurrentVariant(): Promise<string> {
return await this._platform.settingsStorage.getString("theme-variant");
}
async removeVariantFromStorage(): Promise<void> {
await this._platform.settingsStorage.remove("theme-variant");
}
} }

45
src/platform/web/ui/session/settings/SettingsView.js
View file

@ -141,56 +141,47 @@ export class SettingsView extends TemplateView {
} }
_themeOptions(t, vm) { _themeOptions(t, vm) {
const activeTheme = vm.activeTheme; const { themeName: activeThemeName, themeVariant: activeThemeVariant } = vm.activeTheme;
const optionTags = []; const optionTags = [];
const isDarkSelected = vm.activeVariant === "dark";
const isLightSelected = vm.activeVariant === "light";
// 1. render the dropdown containing the themes // 1. render the dropdown containing the themes
for (const [name, details] of Object.entries(vm.themeMapping)) { for (const name of Object.keys(vm.themeMapping)) {
const isSelected = details.id === activeTheme || optionTags.push( t.option({ value: name, selected: name === activeThemeName} , name));
details.dark?.id === activeTheme ||
details.light?.id === activeTheme;
optionTags.push( t.option({ value: details.id ?? "", selected: isSelected} , name));
} }
const select = t.select({ const select = t.select({
onChange: (e) => { onChange: (e) => {
const themeId = e.target.value; const themeName = e.target.value;
if (themeId) { if(!("id" in vm.themeMapping[themeName])) {
/* if the <option ..> has a value then this is not a theme
that has dark and light default variants.
remove any stored variant from localStorage.
*/
vm.removeVariantFromStorage();
}
else {
const colorScheme = darkRadioButton.checked ? "dark" : lightRadioButton.checked ? "light" : "default"; const colorScheme = darkRadioButton.checked ? "dark" : lightRadioButton.checked ? "light" : "default";
// execute the radio-button callback so that the theme actually changes! // execute the radio-button callback so that the theme actually changes!
// otherwise the theme would only change when another radio-button is selected. // otherwise the theme would only change when another radio-button is selected.
radioButtonCallback(colorScheme); radioButtonCallback(colorScheme);
return;
} }
vm.changeThemeOption(themeId); vm.changeThemeOption(themeName);
} }
}, optionTags); }, optionTags);
// 2. render the radio-buttons used to choose variant // 2. render the radio-buttons used to choose variant
const radioButtonCallback = (colorScheme) => { const radioButtonCallback = (colorScheme) => {
const selectedThemeName = select.options[select.selectedIndex].text; const selectedThemeName = select.options[select.selectedIndex].value;
vm.persistVariantToStorage(colorScheme); vm.changeThemeOption(selectedThemeName, colorScheme);
if (colorScheme === "default") {
colorScheme = vm.preferredColorScheme === ColorSchemePreference.Dark ? "dark" : "light";
}
const themeId = vm.themeMapping[selectedThemeName][colorScheme].id;
vm.changeThemeOption(themeId);
}; };
const isDarkSelected = activeThemeVariant === "dark";
const isLightSelected = activeThemeVariant === "light";
const darkRadioButton = t.input({ type: "radio", name: "radio-chooser", value: "dark", id: "dark", checked: isDarkSelected }); const darkRadioButton = t.input({ type: "radio", name: "radio-chooser", value: "dark", id: "dark", checked: isDarkSelected });
const defaultRadioButton = t.input({ type: "radio", name: "radio-chooser", value: "default", id: "default", checked: !(isDarkSelected || isLightSelected) }); const defaultRadioButton = t.input({ type: "radio", name: "radio-chooser", value: "default", id: "default", checked: !(isDarkSelected || isLightSelected) });
const lightRadioButton = t.input({ type: "radio", name: "radio-chooser", value: "light", id: "light", checked: isLightSelected }); const lightRadioButton = t.input({ type: "radio", name: "radio-chooser", value: "light", id: "light", checked: isLightSelected });
const radioButtons = t.form({ const radioButtons = t.form({
className: { hidden: () => select.options[select.selectedIndex].value !== "" }, className: {
hidden: () => {
const themeName = select.options[select.selectedIndex].value;
return "id" in vm.themeMapping[themeName];
}
},
onChange: (e) => radioButtonCallback(e.target.value) onChange: (e) => radioButtonCallback(e.target.value)
}, },
[ [
defaultRadioButton, defaultRadioButton,
t.label({for: "default"}, "default"), t.label({for: "default"}, "Match System Theme"),
darkRadioButton, darkRadioButton,
t.label({for: "dark"}, "dark"), t.label({for: "dark"}, "dark"),
lightRadioButton, lightRadioButton,