Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[PE mobile] keep current theme type for next launch

Browse source
This commit is contained in:
Maxim Kadushkin 2021-11-18 22:40:59 +03:00
parent d1bd1c67fa
commit f0b21727cb
2 changed files with 5 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
apps/presentationeditor/mobile/src/controller/settings/ApplicationSettings.jsx
View file

@ -2,6 +2,7 @@ import React, { Component } from "react";
import { ApplicationSettings } from "../../view/settings/ApplicationSettings"; import { ApplicationSettings } from "../../view/settings/ApplicationSettings";
import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage'; import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
import {observer, inject} from "mobx-react"; import {observer, inject} from "mobx-react";
import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js';
class ApplicationSettingsController extends Component { class ApplicationSettingsController extends Component {
constructor(props) { constructor(props) {
@ -26,29 +27,12 @@ class ApplicationSettingsController extends Component {
LocalStorage.setItem("pe-mobile-macros-mode", value); LocalStorage.setItem("pe-mobile-macros-mode", value);
} }
switchDarkTheme(value) {
const theme = value ? {id:'theme-dark', type:'dark'} : {id:'theme-light', type:'light'};
LocalStorage.setItem("ui-theme", JSON.stringify(theme));
const $body = $$('body');
$body.attr('class') && $body.attr('class', $body.attr('class').replace(/\s?theme-type-(?:dark|light)/, ''));
$body.addClass(`theme-type-${theme.type}`);
}
isThemeDark() {
const obj = LocalStorage.getItem("ui-theme");
return !!obj ? JSON.parse(obj).type === 'dark' : false;
}
render() { render() {
return ( return (
<ApplicationSettings <ApplicationSettings
setUnitMeasurement={this.setUnitMeasurement} setUnitMeasurement={this.setUnitMeasurement}
switchSpellCheck={this.switchSpellCheck} switchSpellCheck={this.switchSpellCheck}
setMacrosSettings={this.setMacrosSettings} setMacrosSettings={this.setMacrosSettings}
isThemeDark={this.isThemeDark}
switchDarkTheme={this.switchDarkTheme}
/> />
) )
} }

5
apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx
View file

@ -2,6 +2,7 @@ import React, {Fragment, useState} from "react";
import { observer, inject } from "mobx-react"; import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react"; import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js';
const PageApplicationSettings = props => { const PageApplicationSettings = props => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -9,7 +10,7 @@ const PageApplicationSettings = props => {
const store = props.storeApplicationSettings; const store = props.storeApplicationSettings;
const unitMeasurement = store.unitMeasurement; const unitMeasurement = store.unitMeasurement;
const isSpellChecking = store.isSpellChecking; const isSpellChecking = store.isSpellChecking;
const [isThemeDark, setIsThemeDark] = useState(props.isThemeDark); const [isThemeDark, setIsThemeDark] = useState(Themes.isCurrentDark);
const changeMeasureSettings = value => { const changeMeasureSettings = value => {
store.changeUnitMeasurement(value); store.changeUnitMeasurement(value);
@ -47,7 +48,7 @@ const PageApplicationSettings = props => {
</ListItem> </ListItem>
<ListItem title={'Dark theme'}> <ListItem title={'Dark theme'}>
<Toggle checked={isThemeDark} <Toggle checked={isThemeDark}
onToggleChange={toggle => {props.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}> onToggleChange={toggle => {Themes.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}>
</Toggle> </Toggle>
</ListItem> </ListItem>
</List> </List>