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

Render a radio button for default variants

Browse source
This commit is contained in:
RMidhunSuresh 2022-05-26 23:36:37 +05:30
parent 3afbe1148e
commit 0b98473e85
2 changed files with 43 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -131,8 +131,8 @@ export class SettingsViewModel extends ViewModel {
return this._formatBytes(this._estimate?.usage);
}
get themes() {
return this.platform.themeLoader.themes;
get themeMapping() {
return this.platform.themeLoader.themeMapping;
}
get activeTheme() {
@ -185,5 +185,15 @@ export class SettingsViewModel extends ViewModel {
this.emitChange("pushNotifications.serverError");
}
}
themeOptionChanged(themeId) {
if (themeId) {
this.setTheme(themeId);
}
// if there's no themeId, then the theme is going to be set via radio-buttons
// emit so that radio-buttons become displayed/hidden
this.emitChange("themeOption");
}
}

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

@ -142,9 +142,37 @@ export class SettingsView extends TemplateView {
_themeOptions(t, vm) {
const activeTheme = vm.activeTheme;
const optionTags = [];
for (const name of vm.themes) {
optionTags.push(t.option({value: name, selected: name === activeTheme}, name));
let isDarkSelected = null, isLightSelected = null;
for (const [name, details] of Object.entries(vm.themeMapping)) {
let isSelected = null;
if (details.id === activeTheme) {
isSelected = true;
}
else if (details.dark?.id === activeTheme) {
isSelected = true;
isDarkSelected = true;
}
else if (details.light?.id === activeTheme) {
isSelected = true;
isLightSelected = true;
}
optionTags.push( t.option({ value: details.id ?? "", selected: isSelected} , name));
}
return t.select({onChange: (e) => vm.setTheme(e.target.value)}, optionTags);
const select = t.select({ onChange: (e) => vm.themeOptionChanged(e.target.value) }, optionTags);
const radioButtons = t.form({
className: { hidden: () => select.options[select.selectedIndex].value !== "" },
onChange: (e) => {
const selectedThemeName = select.options[select.selectedIndex].text;
const themeId = vm.themeMapping[selectedThemeName][e.target.value].id;
vm.themeOptionChanged(themeId);
}
},
[
t.input({ type: "radio", name: "radio-chooser", value: "dark", id: "dark", checked: isDarkSelected }),
t.label({for: "dark"}, "dark"),
t.input({ type: "radio", name: "radio-chooser", value: "light", id: "light", checked: isLightSelected }),
t.label({for: "light"}, "light"),
]);
return t.div({ className: "theme-chooser" }, [select, radioButtons]);
}
}