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

Change UI

Browse source
This commit is contained in:
RMidhunSuresh 2022-06-02 15:06:20 +05:30
parent 8de91291dd
commit b74f4b612b
2 changed files with 51 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -51,6 +51,7 @@ export class SettingsViewModel extends ViewModel {
this.maxSentImageSizeLimit = 4000;
this.pushNotifications = new PushNotificationStatus();
this._activeTheme = undefined;
this._activeVariant = undefined;
}
get _session() {
@ -79,6 +80,7 @@ export class SettingsViewModel extends ViewModel {
this.pushNotifications.enabled = await this._session.arePushNotificationsEnabled();
if (!import.meta.env.DEV) {
this._activeTheme = await this.platform.themeLoader.getActiveTheme();
this._activeVariant = await this.platform.themeLoader.getCurrentVariant();
}
this.emitChange("");
}
@ -139,6 +141,10 @@ export class SettingsViewModel extends ViewModel {
return this._activeTheme;
}
get activeVariant() {
return this._activeVariant;
}
setTheme(name) {
this.platform.themeLoader.setTheme(name);
}
@ -195,5 +201,16 @@ export class SettingsViewModel extends ViewModel {
this.emitChange("themeOption");
}
get preferredColorScheme() {
return this.platform.themeLoader.preferredColorScheme;
}
persistVariantToStorage(variant) {
this.platform.themeLoader.persistVariantToStorage(variant);
}
removeVariantFromStorage() {
this.platform.themeLoader.removeVariantFromStorage();
}
}

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

@ -16,6 +16,7 @@ limitations under the License.
import {TemplateView} from "../../general/TemplateView";
import {KeyBackupSettingsView} from "./KeyBackupSettingsView.js"
import {ColorSchemePreference} from "../../../ThemeLoader";
export class SettingsView extends TemplateView {
render(t, vm) {
@ -142,38 +143,49 @@ export class SettingsView extends TemplateView {
_themeOptions(t, vm) {
const activeTheme = vm.activeTheme;
const optionTags = [];
let isDarkSelected = null, isLightSelected = null;
const isDarkSelected = vm.activeVariant === "dark";
const isLightSelected = vm.activeVariant === "light";
// 1. render the dropdown containing the themes
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;
}
const isSelected = (details.id ?? details.dark?.id ?? details.light?.id) === activeTheme;
optionTags.push( t.option({ value: details.id ?? "", selected: isSelected} , name));
}
const select = t.select({
onChange: (e) => {
const themeId = e.target.value;
vm.changeThemeOption(themeId)
if (themeId) {
/* 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 = isDarkSelected ? "dark" : isLightSelected ? "light" : "default";
// execute the radio-button callback so that the theme actually changes!
// otherwise the theme would only change when another radio-button is selected.
radioButtonCallback(colorScheme);
}
}, optionTags);
const radioButtons = t.form({
className: { hidden: () => select.options[select.selectedIndex].value !== "" },
onChange: (e) => {
const selectedThemeName = select.options[select.selectedIndex].text;
const colorScheme = e.target.value;
const themeId = vm.themeMapping[selectedThemeName][colorScheme].id;
vm.changeThemeOption(themeId);
}
}, optionTags);
// 2. render the radio-buttons used to choose variant
const radioButtonCallback = (colorScheme) => {
const selectedThemeName = select.options[select.selectedIndex].text;
vm.persistVariantToStorage(colorScheme);
if (colorScheme === "default") {
colorScheme = vm.preferredColorScheme === ColorSchemePreference.Dark ? "dark" : "light";
}
const themeId = vm.themeMapping[selectedThemeName][colorScheme].id;
vm.changeThemeOption(themeId);
};
const radioButtons = t.form({
className: { hidden: () => select.options[select.selectedIndex].value !== "" },
onChange: (e) => radioButtonCallback(e.target.value)
},
[
t.input({ type: "radio", name: "radio-chooser", value: "default", id: "default", checked: !(isDarkSelected || isLightSelected)}),
t.label({for: "default"}, "default"),
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 }),