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

[mobile] added dark theme switch to DE

Browse source
This commit is contained in:
Maxim Kadushkin 2021-11-01 23:31:32 +03:00
parent 8bef7f6c15
commit fbd70b7b7b
2 changed files with 23 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx
View file

@ -24,6 +24,20 @@ class ApplicationSettingsController extends Component {
Common.EditorApi.get().asc_setSpellCheck(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').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;
}
switchNoCharacters(value) {
LocalStorage.setBool("de-mobile-no-characters", value);
Common.EditorApi.get().put_ShowParaMarks(value);
@ -67,11 +81,13 @@ class ApplicationSettingsController extends Component {
<ApplicationSettings
setUnitMeasurement={this.setUnitMeasurement}
switchSpellCheck={this.switchSpellCheck}
switchDarkTheme={this.switchDarkTheme}
switchNoCharacters={this.switchNoCharacters}
switchShowTableEmptyLine={this.switchShowTableEmptyLine}
switchDisplayComments={this.switchDisplayComments}
switchDisplayResolved={this.switchDisplayResolved}
setMacrosSettings={this.setMacrosSettings}
isThemeDark={this.isThemeDark}
/>
)
}

8
apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx
View file

@ -1,4 +1,4 @@
import React, {Fragment} from "react";
import React, {Fragment, useState} from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
import { useTranslation } from "react-i18next";
@ -14,6 +14,7 @@ const PageApplicationSettings = props => {
const isHiddenTableBorders = store.isHiddenTableBorders;
const isComments = store.isComments;
const isResolvedComments = store.isResolvedComments;
const [isThemeDark, setIsThemeDark] = useState(props.isThemeDark);
const changeMeasureSettings = value => {
store.changeUnitMeasurement(value);
@ -48,6 +49,11 @@ const PageApplicationSettings = props => {
}}
/>
</ListItem>
<ListItem title={'Dark theme'}>
<Toggle checked={isThemeDark}
onToggleChange={toggle => {props.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}>
</Toggle>
</ListItem>
</List>
<List>
<ListItem title={_t.textNoCharacters} disabled={displayMode !== 'markup'}>{/*ToDo: if (DisplayMode == "final" || DisplayMode == "original") {disabled} */}