mirror of
https://github.com/ONLYOFFICE/web-apps.git
synced 2026-07-24 01:13:22 +08:00
[DE mobile] Change themes controller
This commit is contained in:
SergeyEzhin
@ -1,81 +1,33 @@
|
||||
import React from 'react';
|
||||
import React, { createContext, useCallback, useEffect } from 'react';
|
||||
import { LocalStorage } from "../../utils/LocalStorage.mjs";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
class ThemesController extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.themes_map = {
|
||||
dark : {
|
||||
id: 'theme-dark',
|
||||
type: 'dark'
|
||||
},
|
||||
light: {
|
||||
id: 'theme-light',
|
||||
type: 'light'
|
||||
},
|
||||
system: {
|
||||
id: 'theme-system',
|
||||
type: 'system'
|
||||
}
|
||||
}
|
||||
export const ThemesContext = createContext();
|
||||
export const ThemesProvider = props => {
|
||||
const { t } = useTranslation();
|
||||
const storeThemes = props.storeThemes;
|
||||
const themes = storeThemes.themes;
|
||||
const nameColors = storeThemes.nameColors;
|
||||
const translationThemes = getTranslationThemes();
|
||||
|
||||
this.name_colors = [
|
||||
"canvas-background",
|
||||
"canvas-content-background",
|
||||
"canvas-page-border",
|
||||
useEffect(() => {
|
||||
initTheme();
|
||||
}, []);
|
||||
|
||||
"canvas-ruler-background",
|
||||
"canvas-ruler-border",
|
||||
"canvas-ruler-margins-background",
|
||||
"canvas-ruler-mark",
|
||||
"canvas-ruler-handle-border",
|
||||
"canvas-ruler-handle-border-disabled",
|
||||
|
||||
"canvas-high-contrast",
|
||||
"canvas-high-contrast-disabled",
|
||||
|
||||
"canvas-cell-border",
|
||||
"canvas-cell-title-border",
|
||||
"canvas-cell-title-border-hover",
|
||||
"canvas-cell-title-border-selected",
|
||||
"canvas-cell-title-hover",
|
||||
"canvas-cell-title-selected",
|
||||
|
||||
"canvas-dark-cell-title",
|
||||
"canvas-dark-cell-title-hover",
|
||||
"canvas-dark-cell-title-selected",
|
||||
"canvas-dark-cell-title-border",
|
||||
"canvas-dark-cell-title-border-hover",
|
||||
"canvas-dark-cell-title-border-selected",
|
||||
"canvas-dark-content-background",
|
||||
"canvas-dark-page-border",
|
||||
|
||||
"canvas-scroll-thumb",
|
||||
"canvas-scroll-thumb-hover",
|
||||
"canvas-scroll-thumb-pressed",
|
||||
"canvas-scroll-thumb-border",
|
||||
"canvas-scroll-thumb-border-hover",
|
||||
"canvas-scroll-thumb-border-pressed",
|
||||
"canvas-scroll-arrow",
|
||||
"canvas-scroll-arrow-hover",
|
||||
"canvas-scroll-arrow-pressed",
|
||||
"canvas-scroll-thumb-target",
|
||||
"canvas-scroll-thumb-target-hover",
|
||||
"canvas-scroll-thumb-target-pressed",
|
||||
];
|
||||
|
||||
this.setClientTheme = this.setClientTheme.bind(this);
|
||||
this.checkConfigTheme = this.checkConfigTheme.bind(this);
|
||||
this.checkSystemDarkTheme = this.checkSystemDarkTheme.bind(this);
|
||||
function getTranslationThemes() {
|
||||
return Object.keys(themes).reduce((acc, theme) => {
|
||||
acc[theme] = (t(`Common.Themes.${theme}`));
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
init() {
|
||||
const appOptions = this.props.storeAppOptions;
|
||||
const initTheme = () => {
|
||||
// localStorage.clear();
|
||||
const editorConfig = window.native?.editorConfig;
|
||||
const obj = LocalStorage.getItem("ui-theme");
|
||||
|
||||
let theme = this.themes_map.light;
|
||||
let theme = themes.light;
|
||||
|
||||
if(editorConfig) {
|
||||
const themeConfig = editorConfig.theme;
|
||||
@ -84,81 +36,77 @@ class ThemesController extends React.Component {
|
||||
|
||||
if(isSelectTheme) {
|
||||
if(!!obj) {
|
||||
theme = this.setClientTheme(theme, obj);
|
||||
theme = setClientTheme(theme, obj);
|
||||
} else {
|
||||
theme = this.checkConfigTheme(theme, typeTheme);
|
||||
theme = checkConfigTheme(theme, typeTheme);
|
||||
}
|
||||
} else {
|
||||
theme = this.checkConfigTheme(theme, typeTheme);
|
||||
theme = checkConfigTheme(theme, typeTheme);
|
||||
}
|
||||
|
||||
appOptions.setConfigSelectTheme(isSelectTheme);
|
||||
storeThemes.setConfigSelectTheme(isSelectTheme);
|
||||
} else {
|
||||
if (!!obj) {
|
||||
theme = this.setClientTheme(theme, obj);
|
||||
theme = setClientTheme(theme, obj);
|
||||
} else {
|
||||
theme = this.checkSystemDarkTheme(theme);
|
||||
theme = checkSystemDarkTheme(theme);
|
||||
}
|
||||
}
|
||||
|
||||
this.changeColorTheme(theme);
|
||||
changeColorTheme(theme);
|
||||
|
||||
$$(window).on('storage', e => {
|
||||
if ( e.key == LocalStorage.prefix + 'ui-theme' ) {
|
||||
if ( !!e.newValue ) {
|
||||
this.changeColorTheme(JSON.parse(e.newValue), true);
|
||||
if (e.key == LocalStorage.prefix + 'ui-theme') {
|
||||
if (!!e.newValue) {
|
||||
changeColorTheme(JSON.parse(e.newValue));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setClientTheme(theme, obj) {
|
||||
const setClientTheme = (theme, obj) => {
|
||||
const type = JSON.parse(obj).type;
|
||||
const appOptions = this.props.storeAppOptions;
|
||||
|
||||
if(type !== 'system') {
|
||||
theme = this.themes_map[JSON.parse(obj).type];
|
||||
theme = themes[JSON.parse(obj).type];
|
||||
|
||||
LocalStorage.setItem("ui-theme", JSON.stringify(theme));
|
||||
appOptions.setColorTheme(theme);
|
||||
storeThemes.setColorTheme(theme);
|
||||
} else {
|
||||
theme = this.checkSystemDarkTheme(theme);
|
||||
theme = checkSystemDarkTheme(theme);
|
||||
}
|
||||
|
||||
return theme;
|
||||
}
|
||||
|
||||
checkConfigTheme(theme, typeTheme) {
|
||||
const appOptions = this.props.storeAppOptions;
|
||||
|
||||
const checkConfigTheme = (theme, typeTheme) => {
|
||||
if(typeTheme && typeTheme !== 'system') {
|
||||
theme = this.themes_map[typeTheme];
|
||||
theme = themes[typeTheme];
|
||||
|
||||
LocalStorage.setItem("ui-theme", JSON.stringify(theme));
|
||||
appOptions.setColorTheme(theme);
|
||||
storeThemes.setColorTheme(theme);
|
||||
} else {
|
||||
theme = this.checkSystemDarkTheme(theme);
|
||||
theme = checkSystemDarkTheme(theme);
|
||||
}
|
||||
|
||||
return theme;
|
||||
}
|
||||
|
||||
checkSystemDarkTheme(theme) {
|
||||
const appOptions = this.props.storeAppOptions;
|
||||
|
||||
const checkSystemDarkTheme = (theme) => {
|
||||
if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
theme = this.themes_map['dark'];
|
||||
theme = themes['dark'];
|
||||
|
||||
LocalStorage.setItem("ui-theme", JSON.stringify(this.themes_map["system"]));
|
||||
appOptions.setColorTheme(this.themes_map["system"]);
|
||||
LocalStorage.setItem("ui-theme", JSON.stringify(themes["system"]));
|
||||
storeThemes.setColorTheme(themes["system"]);
|
||||
}
|
||||
|
||||
return theme;
|
||||
}
|
||||
|
||||
get_current_theme_colors(colors) {
|
||||
const getCurrentThemeColors = colors => {
|
||||
let out_object = {};
|
||||
const style = getComputedStyle(document.body);
|
||||
|
||||
colors.forEach((item, index) => {
|
||||
out_object[item] = style.getPropertyValue('--' + item).trim()
|
||||
})
|
||||
@ -166,13 +114,28 @@ class ThemesController extends React.Component {
|
||||
return out_object;
|
||||
}
|
||||
|
||||
changeColorTheme(theme) {
|
||||
const changeColorTheme = theme => {
|
||||
// let theme = themes.light;
|
||||
|
||||
// if(type !== "system") {
|
||||
// theme = themes[type];
|
||||
|
||||
// LocalStorage.setItem("ui-theme", JSON.stringify(theme));
|
||||
// storeThemes.setColorTheme(theme);
|
||||
// } else {
|
||||
// const isSystemDarkTheme = this.checkSystemDarkTheme();
|
||||
// if(isSystemDarkTheme) theme = themes.dark;
|
||||
|
||||
// LocalStorage.setItem("ui-theme", JSON.stringify(themes["system"]));
|
||||
// storeThemes.setColorTheme(themes["system"]);
|
||||
// }
|
||||
|
||||
const $body = $$('body');
|
||||
$body.attr('class') && $body.attr('class', $body.attr('class').replace(/\s?theme-type-(?:dark|light)/, ''));
|
||||
$body.addClass(`theme-type-${theme.type}`);
|
||||
|
||||
const on_engine_created = api => {
|
||||
let obj = this.get_current_theme_colors(this.name_colors);
|
||||
const onEngineCreated = api => {
|
||||
let obj = getCurrentThemeColors(nameColors);
|
||||
obj.type = theme.type;
|
||||
obj.name = theme.id;
|
||||
|
||||
@ -180,18 +143,16 @@ class ThemesController extends React.Component {
|
||||
};
|
||||
|
||||
const api = Common.EditorApi ? Common.EditorApi.get() : undefined;
|
||||
if(!api) Common.Notifications.on('engineCreated', on_engine_created);
|
||||
else on_engine_created(api);
|
||||
if(!api) Common.Notifications.on('engineCreated', onEngineCreated);
|
||||
else onEngineCreated(api);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<ThemesContext.Provider value={{ changeColorTheme, translationThemes }}>
|
||||
{props.children}
|
||||
</ThemesContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
const themes = inject('storeAppOptions')(observer(ThemesController));
|
||||
const themes = inject('storeThemes')(observer(ThemesProvider));
|
||||
export {themes as Themes}
|
||||
82
apps/common/mobile/lib/store/themes.js
Normal file
82
apps/common/mobile/lib/store/themes.js
Normal file
@ -0,0 +1,82 @@
|
||||
import {action, observable, makeObservable} from 'mobx';
|
||||
|
||||
export class storeThemes {
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
isConfigSelectTheme: observable,
|
||||
setConfigSelectTheme: action,
|
||||
colorTheme: observable,
|
||||
setColorTheme: action
|
||||
});
|
||||
}
|
||||
|
||||
isConfigSelectTheme = true;
|
||||
setConfigSelectTheme(value) {
|
||||
this.isConfigSelectTheme = value;
|
||||
}
|
||||
|
||||
colorTheme;
|
||||
setColorTheme(theme) {
|
||||
this.colorTheme = theme;
|
||||
}
|
||||
|
||||
themes = {
|
||||
dark: {
|
||||
id: 'theme-dark',
|
||||
type: 'dark'
|
||||
},
|
||||
light: {
|
||||
id: 'theme-light',
|
||||
type: 'light'
|
||||
},
|
||||
system: {
|
||||
id: 'theme-system',
|
||||
type: 'system'
|
||||
}
|
||||
}
|
||||
|
||||
nameColors = [
|
||||
"canvas-background",
|
||||
"canvas-content-background",
|
||||
"canvas-page-border",
|
||||
|
||||
"canvas-ruler-background",
|
||||
"canvas-ruler-border",
|
||||
"canvas-ruler-margins-background",
|
||||
"canvas-ruler-mark",
|
||||
"canvas-ruler-handle-border",
|
||||
"canvas-ruler-handle-border-disabled",
|
||||
|
||||
"canvas-high-contrast",
|
||||
"canvas-high-contrast-disabled",
|
||||
|
||||
"canvas-cell-border",
|
||||
"canvas-cell-title-border",
|
||||
"canvas-cell-title-border-hover",
|
||||
"canvas-cell-title-border-selected",
|
||||
"canvas-cell-title-hover",
|
||||
"canvas-cell-title-selected",
|
||||
|
||||
"canvas-dark-cell-title",
|
||||
"canvas-dark-cell-title-hover",
|
||||
"canvas-dark-cell-title-selected",
|
||||
"canvas-dark-cell-title-border",
|
||||
"canvas-dark-cell-title-border-hover",
|
||||
"canvas-dark-cell-title-border-selected",
|
||||
"canvas-dark-content-background",
|
||||
"canvas-dark-page-border",
|
||||
|
||||
"canvas-scroll-thumb",
|
||||
"canvas-scroll-thumb-hover",
|
||||
"canvas-scroll-thumb-pressed",
|
||||
"canvas-scroll-thumb-border",
|
||||
"canvas-scroll-thumb-border-hover",
|
||||
"canvas-scroll-thumb-border-pressed",
|
||||
"canvas-scroll-arrow",
|
||||
"canvas-scroll-arrow-hover",
|
||||
"canvas-scroll-arrow-pressed",
|
||||
"canvas-scroll-thumb-target",
|
||||
"canvas-scroll-thumb-target-hover",
|
||||
"canvas-scroll-thumb-target-pressed",
|
||||
];
|
||||
}
|
||||
@ -174,6 +174,12 @@
|
||||
"textCustomColors": "Custom Colors",
|
||||
"textStandartColors": "Standard Colors",
|
||||
"textThemeColors": "Theme Colors"
|
||||
},
|
||||
"Themes": {
|
||||
"textTheme": "Theme",
|
||||
"system": "Same as system",
|
||||
"dark": "Dark",
|
||||
"light": "Light"
|
||||
}
|
||||
},
|
||||
"ContextMenu": {
|
||||
|
||||
@ -19,7 +19,6 @@ import PluginsController from '../../../../common/mobile/lib/controller/Plugins.
|
||||
import EncodingController from "./Encoding";
|
||||
import DropdownListController from "./DropdownList";
|
||||
import { Device } from '../../../../common/mobile/utils/device';
|
||||
import { Themes } from '../../../../common/mobile/lib/controller/Themes';
|
||||
|
||||
@inject(
|
||||
"users",
|
||||
@ -35,7 +34,7 @@ import { Themes } from '../../../../common/mobile/lib/controller/Themes';
|
||||
"storeLinkSettings",
|
||||
"storeToolbarSettings",
|
||||
"storeNavigation"
|
||||
)
|
||||
)
|
||||
class MainController extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -1262,9 +1261,8 @@ class MainController extends Component {
|
||||
<PluginsController />
|
||||
<EncodingController />
|
||||
<DropdownListController />
|
||||
<Themes />
|
||||
</Fragment>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
@ -2,60 +2,17 @@ import React, { Component } from "react";
|
||||
import { ApplicationSettings } from "../../view/settings/ApplicationSettings";
|
||||
import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage.mjs';
|
||||
import {observer, inject} from "mobx-react";
|
||||
// import { Themes } from '../../../../../common/mobile/lib/controller/Themes';
|
||||
import { ThemesContext } from "../../../../../common/mobile/lib/controller/Themes";
|
||||
|
||||
class ApplicationSettingsController extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.nameColors = [
|
||||
"canvas-background",
|
||||
"canvas-content-background",
|
||||
"canvas-page-border",
|
||||
|
||||
"canvas-ruler-background",
|
||||
"canvas-ruler-border",
|
||||
"canvas-ruler-margins-background",
|
||||
"canvas-ruler-mark",
|
||||
"canvas-ruler-handle-border",
|
||||
"canvas-ruler-handle-border-disabled",
|
||||
|
||||
"canvas-high-contrast",
|
||||
"canvas-high-contrast-disabled",
|
||||
|
||||
"canvas-cell-border",
|
||||
"canvas-cell-title-border",
|
||||
"canvas-cell-title-border-hover",
|
||||
"canvas-cell-title-border-selected",
|
||||
"canvas-cell-title-hover",
|
||||
"canvas-cell-title-selected",
|
||||
|
||||
"canvas-dark-cell-title",
|
||||
"canvas-dark-cell-title-hover",
|
||||
"canvas-dark-cell-title-selected",
|
||||
"canvas-dark-cell-title-border",
|
||||
"canvas-dark-cell-title-border-hover",
|
||||
"canvas-dark-cell-title-border-selected",
|
||||
"canvas-dark-content-background",
|
||||
"canvas-dark-page-border",
|
||||
|
||||
"canvas-scroll-thumb",
|
||||
"canvas-scroll-thumb-hover",
|
||||
"canvas-scroll-thumb-pressed",
|
||||
"canvas-scroll-thumb-border",
|
||||
"canvas-scroll-thumb-border-hover",
|
||||
"canvas-scroll-thumb-border-pressed",
|
||||
"canvas-scroll-arrow",
|
||||
"canvas-scroll-arrow-hover",
|
||||
"canvas-scroll-arrow-pressed",
|
||||
"canvas-scroll-thumb-target",
|
||||
"canvas-scroll-thumb-target-hover",
|
||||
"canvas-scroll-thumb-target-pressed",
|
||||
];
|
||||
this.switchDisplayComments = this.switchDisplayComments.bind(this);
|
||||
this.props.storeApplicationSettings.changeUnitMeasurement(Common.Utils.Metric.getCurrentMetric());
|
||||
this.changeColorTheme = this.changeColorTheme.bind(this);
|
||||
}
|
||||
|
||||
static contextType = ThemesContext;
|
||||
|
||||
setUnitMeasurement(value) {
|
||||
value = (value !== null) ? parseInt(value) : Common.Utils.Metric.getDefaultMetric();
|
||||
Common.Utils.Metric.setCurrentMetric(value);
|
||||
@ -112,59 +69,6 @@ class ApplicationSettingsController extends Component {
|
||||
LocalStorage.setItem('mode-direction', value);
|
||||
}
|
||||
|
||||
checkSystemDarkTheme() {
|
||||
if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
get_current_theme_colors(colors) {
|
||||
let out_object = {};
|
||||
const style = getComputedStyle(document.body);
|
||||
colors.forEach((item, index) => {
|
||||
out_object[item] = style.getPropertyValue('--' + item).trim()
|
||||
})
|
||||
|
||||
return out_object;
|
||||
}
|
||||
|
||||
changeColorTheme(type) {
|
||||
const appOptions = this.props.storeAppOptions;
|
||||
const themesMap = appOptions.themesMap;
|
||||
let theme = themesMap.light;
|
||||
|
||||
if(type !== "system") {
|
||||
theme = themesMap[type];
|
||||
|
||||
LocalStorage.setItem("ui-theme", JSON.stringify(theme));
|
||||
appOptions.setColorTheme(theme);
|
||||
} else {
|
||||
const isSystemDarkTheme = this.checkSystemDarkTheme();
|
||||
if(isSystemDarkTheme) theme = themesMap.dark;
|
||||
|
||||
LocalStorage.setItem("ui-theme", JSON.stringify(themesMap["system"]));
|
||||
appOptions.setColorTheme(themesMap["system"]);
|
||||
}
|
||||
|
||||
const $body = $$('body');
|
||||
$body.attr('class') && $body.attr('class', $body.attr('class').replace(/\s?theme-type-(?:dark|light)/, ''));
|
||||
$body.addClass(`theme-type-${theme.type}`);
|
||||
|
||||
const on_engine_created = api => {
|
||||
let obj = this.get_current_theme_colors(this.nameColors);
|
||||
obj.type = theme.type;
|
||||
obj.name = theme.id;
|
||||
|
||||
api.asc_setSkin(obj);
|
||||
};
|
||||
|
||||
const api = Common.EditorApi ? Common.EditorApi.get() : undefined;
|
||||
if(!api) Common.Notifications.on('engineCreated', on_engine_created);
|
||||
else on_engine_created(api);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ApplicationSettings
|
||||
@ -176,7 +80,8 @@ class ApplicationSettingsController extends Component {
|
||||
switchDisplayResolved={this.switchDisplayResolved}
|
||||
setMacrosSettings={this.setMacrosSettings}
|
||||
changeDirection={this.changeDirection}
|
||||
changeColorTheme={this.changeColorTheme}
|
||||
changeColorTheme={this.context.changeColorTheme}
|
||||
translationThemes={this.context.translationThemes}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import { f7, Icon, FabButtons, FabButton, Page, View, Navbar, Subnavbar } from 'framework7-react';
|
||||
import { f7, Icon, Page, View, Navbar, Subnavbar } from 'framework7-react';
|
||||
import { observer, inject } from "mobx-react";
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import EditOptions from '../view/edit/Edit';
|
||||
@ -16,6 +15,7 @@ import NavigationController from '../controller/settings/Navigation';
|
||||
import { AddLinkController } from '../controller/add/AddLink';
|
||||
import EditHyperlink from '../controller/edit/EditHyperlink';
|
||||
import Snackbar from '../components/Snackbar/Snackbar';
|
||||
import { Themes } from '../../../../common/mobile/lib/controller/Themes';
|
||||
|
||||
class MainPage extends Component {
|
||||
constructor(props) {
|
||||
@ -156,106 +156,108 @@ class MainPage extends Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<Page name="home" className={`editor${!isHideLogo ? ' page-with-logo' : ''}`}>
|
||||
{/* Top Navbar */}
|
||||
<Navbar id='editor-navbar'
|
||||
className={`main-navbar${!isHideLogo ? ' navbar-with-logo' : ''}`}>
|
||||
{!isHideLogo &&
|
||||
<div className="main-logo" onClick={() => {
|
||||
window.open(`${__PUBLISHER_URL__}`, "_blank");
|
||||
}}><Icon icon="icon-logo"></Icon></div>}
|
||||
<Subnavbar>
|
||||
<Toolbar openOptions={this.handleClickToOpenOptions}
|
||||
closeOptions={this.handleOptionsViewClosed}/>
|
||||
<Search useSuspense={false}/>
|
||||
</Subnavbar>
|
||||
</Navbar>
|
||||
<Themes>
|
||||
<Page name="home" className={`editor${!isHideLogo ? ' page-with-logo' : ''}`}>
|
||||
{/* Top Navbar */}
|
||||
<Navbar id='editor-navbar'
|
||||
className={`main-navbar${!isHideLogo ? ' navbar-with-logo' : ''}`}>
|
||||
{!isHideLogo &&
|
||||
<div className="main-logo" onClick={() => {
|
||||
window.open(`${__PUBLISHER_URL__}`, "_blank");
|
||||
}}><Icon icon="icon-logo"></Icon></div>}
|
||||
<Subnavbar>
|
||||
<Toolbar openOptions={this.handleClickToOpenOptions}
|
||||
closeOptions={this.handleOptionsViewClosed}/>
|
||||
<Search useSuspense={false}/>
|
||||
</Subnavbar>
|
||||
</Navbar>
|
||||
|
||||
{/* Page content */}
|
||||
{/* Page content */}
|
||||
|
||||
<View id="editor_sdk">
|
||||
</View>
|
||||
<View id="editor_sdk">
|
||||
</View>
|
||||
|
||||
{isShowPlaceholder ?
|
||||
<div className="doc-placeholder-container">
|
||||
<div className="doc-placeholder">
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
</div>
|
||||
</div> : null
|
||||
}
|
||||
{isShowPlaceholder ?
|
||||
<div className="doc-placeholder-container">
|
||||
<div className="doc-placeholder">
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
</div>
|
||||
</div> : null
|
||||
}
|
||||
|
||||
{/* {
|
||||
Device.phone ? null : <SearchSettings />
|
||||
} */}
|
||||
<Snackbar
|
||||
isShowSnackbar={this.state.snackbarVisible}
|
||||
closeCallback={() => this.handleOptionsViewClosed('snackbar')}
|
||||
message={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")}
|
||||
/>
|
||||
<SearchSettings useSuspense={false}/>
|
||||
{
|
||||
!this.state.editOptionsVisible ? null :
|
||||
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')}/>
|
||||
}
|
||||
{
|
||||
!this.state.addOptionsVisible ? null :
|
||||
<AddOptions onCloseLinkSettings={this.handleOptionsViewClosed.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
|
||||
}
|
||||
{
|
||||
!this.state.addLinkSettingsVisible ? null :
|
||||
<AddLinkController onClosed={this.handleOptionsViewClosed.bind(this)} />
|
||||
}
|
||||
{
|
||||
!this.state.editLinkSettingsVisible ? null :
|
||||
<EditHyperlink onClosed={this.handleOptionsViewClosed.bind(this)} />
|
||||
}
|
||||
{
|
||||
!this.state.settingsVisible ? null :
|
||||
<Settings openOptions={this.handleClickToOpenOptions.bind(this)}
|
||||
closeOptions={this.handleOptionsViewClosed.bind(this)}/>
|
||||
}
|
||||
{
|
||||
!this.state.collaborationVisible ? null :
|
||||
<CollaborationDocument onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} page={this.state.collaborationPage} />
|
||||
}
|
||||
{
|
||||
!this.state.navigationVisible ? null :
|
||||
<NavigationController onclosed={this.handleOptionsViewClosed.bind(this, 'navigation')}/>
|
||||
}
|
||||
{isFabShow &&
|
||||
<CSSTransition
|
||||
in={this.state.fabVisible}
|
||||
timeout={500}
|
||||
classNames="fab"
|
||||
mountOnEnter
|
||||
unmountOnExit
|
||||
>
|
||||
<div className="fab fab-right-bottom" onClick={() => this.turnOffViewerMode()}>
|
||||
<a href="#"><i className="icon icon-edit-mode"></i></a>
|
||||
</div>
|
||||
</CSSTransition>
|
||||
}
|
||||
{appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)}/>}
|
||||
</Page>
|
||||
{/* {
|
||||
Device.phone ? null : <SearchSettings />
|
||||
} */}
|
||||
<Snackbar
|
||||
isShowSnackbar={this.state.snackbarVisible}
|
||||
closeCallback={() => this.handleOptionsViewClosed('snackbar')}
|
||||
message={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")}
|
||||
/>
|
||||
<SearchSettings useSuspense={false}/>
|
||||
{
|
||||
!this.state.editOptionsVisible ? null :
|
||||
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')}/>
|
||||
}
|
||||
{
|
||||
!this.state.addOptionsVisible ? null :
|
||||
<AddOptions onCloseLinkSettings={this.handleOptionsViewClosed.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
|
||||
}
|
||||
{
|
||||
!this.state.addLinkSettingsVisible ? null :
|
||||
<AddLinkController onClosed={this.handleOptionsViewClosed.bind(this)} />
|
||||
}
|
||||
{
|
||||
!this.state.editLinkSettingsVisible ? null :
|
||||
<EditHyperlink onClosed={this.handleOptionsViewClosed.bind(this)} />
|
||||
}
|
||||
{
|
||||
!this.state.settingsVisible ? null :
|
||||
<Settings openOptions={this.handleClickToOpenOptions.bind(this)}
|
||||
closeOptions={this.handleOptionsViewClosed.bind(this)}/>
|
||||
}
|
||||
{
|
||||
!this.state.collaborationVisible ? null :
|
||||
<CollaborationDocument onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} page={this.state.collaborationPage} />
|
||||
}
|
||||
{
|
||||
!this.state.navigationVisible ? null :
|
||||
<NavigationController onclosed={this.handleOptionsViewClosed.bind(this, 'navigation')}/>
|
||||
}
|
||||
{isFabShow &&
|
||||
<CSSTransition
|
||||
in={this.state.fabVisible}
|
||||
timeout={500}
|
||||
classNames="fab"
|
||||
mountOnEnter
|
||||
unmountOnExit
|
||||
>
|
||||
<div className="fab fab-right-bottom" onClick={() => this.turnOffViewerMode()}>
|
||||
<a href="#"><i className="icon icon-edit-mode"></i></a>
|
||||
</div>
|
||||
</CSSTransition>
|
||||
}
|
||||
{appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)}/>}
|
||||
</Page>
|
||||
</Themes>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,42 +39,11 @@ export class storeAppOptions {
|
||||
|
||||
isFileEncrypted: observable,
|
||||
setEncryptionFile: action,
|
||||
|
||||
colorTheme: observable,
|
||||
setColorTheme: action,
|
||||
|
||||
isConfigSelectTheme: observable,
|
||||
setConfigSelectTheme: action
|
||||
});
|
||||
}
|
||||
|
||||
themesMap = {
|
||||
dark: {
|
||||
id: 'theme-dark',
|
||||
type: 'dark'
|
||||
},
|
||||
light: {
|
||||
id: 'theme-light',
|
||||
type: 'light'
|
||||
},
|
||||
system: {
|
||||
id: 'theme-system',
|
||||
type: 'system'
|
||||
}
|
||||
};
|
||||
|
||||
isEdit = false;
|
||||
|
||||
isConfigSelectTheme = true;
|
||||
setConfigSelectTheme(value) {
|
||||
this.isConfigSelectTheme = value;
|
||||
}
|
||||
|
||||
colorTheme;
|
||||
setColorTheme(theme) {
|
||||
this.colorTheme = theme;
|
||||
}
|
||||
|
||||
isFileEncrypted = false;
|
||||
setEncryptionFile(value) {
|
||||
this.isFileEncrypted = value;
|
||||
@ -95,7 +64,6 @@ export class storeAppOptions {
|
||||
this.isMobileView = !this.isMobileView;
|
||||
}
|
||||
|
||||
|
||||
isViewer = true;
|
||||
changeViewerMode(value) {
|
||||
this.isViewer = value;
|
||||
|
||||
@ -17,6 +17,7 @@ import {storeReview} from '../../../../common/mobile/lib/store/review';
|
||||
import {storeComments} from "../../../../common/mobile/lib/store/comments";
|
||||
import {storeToolbarSettings} from "./toolbar";
|
||||
import { storeNavigation } from './navigation';
|
||||
import { storeThemes } from '../../../../common/mobile/lib/store/themes';
|
||||
|
||||
export const stores = {
|
||||
storeAppOptions: new storeAppOptions(),
|
||||
@ -36,6 +37,7 @@ export const stores = {
|
||||
storeReview: new storeReview(),
|
||||
storeComments: new storeComments(),
|
||||
storeToolbarSettings: new storeToolbarSettings(),
|
||||
storeNavigation: new storeNavigation()
|
||||
storeNavigation: new storeNavigation(),
|
||||
storeThemes: new storeThemes()
|
||||
};
|
||||
|
||||
|
||||
@ -2,11 +2,11 @@ import React, {Fragment, useState} from "react";
|
||||
import { observer, inject } from "mobx-react";
|
||||
import { Page, Navbar, List, ListItem, BlockTitle, Toggle, f7 } from "framework7-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
// import { Themes } from '../../../../../common/mobile/lib/controller/Themes';
|
||||
|
||||
const PageApplicationSettings = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t("Settings", { returnObjects: true });
|
||||
const storeThemes = props.storeThemes;
|
||||
const displayMode = props.storeReview.displayMode;
|
||||
const store = props.storeApplicationSettings;
|
||||
const unitMeasurement = store.unitMeasurement;
|
||||
@ -15,7 +15,6 @@ const PageApplicationSettings = props => {
|
||||
const isHiddenTableBorders = store.isHiddenTableBorders;
|
||||
const isComments = store.isComments;
|
||||
const isResolvedComments = store.isResolvedComments;
|
||||
// const [isThemeDark, setIsThemeDark] = useState(Themes.isCurrentDark);
|
||||
|
||||
const changeMeasureSettings = value => {
|
||||
store.changeUnitMeasurement(value);
|
||||
@ -24,18 +23,19 @@ const PageApplicationSettings = props => {
|
||||
|
||||
// set mode
|
||||
const appOptions = props.storeAppOptions;
|
||||
const colorTheme = appOptions.colorTheme;
|
||||
const colorTheme = storeThemes.colorTheme;
|
||||
const translationThemes = props.translationThemes;
|
||||
const typeTheme = colorTheme.type;
|
||||
const isConfigSelectTheme = appOptions.isConfigSelectTheme;
|
||||
const isConfigSelectTheme = storeThemes.isConfigSelectTheme;
|
||||
const isViewer = appOptions.isViewer;
|
||||
const _isEdit = appOptions.isEdit;
|
||||
const _isShowMacros = (!appOptions.isDisconnected && appOptions.customization) ? appOptions.customization.macros !== false : true;
|
||||
|
||||
const themes = {
|
||||
'dark': t('Settings.textDark'),
|
||||
'light': t('Settings.textLight'),
|
||||
'system': t('Settings.textSameAsSystem')
|
||||
}
|
||||
// const themes = {
|
||||
// 'dark': t('Settings.textDark'),
|
||||
// 'light': t('Settings.textLight'),
|
||||
// 'system': t('Settings.textSameAsSystem')
|
||||
// }
|
||||
|
||||
return (
|
||||
<Page>
|
||||
@ -102,7 +102,10 @@ const PageApplicationSettings = props => {
|
||||
</List>
|
||||
{!!isConfigSelectTheme &&
|
||||
<List mediaList>
|
||||
<ListItem title={t("Settings.textTheme")} after={typeTheme === 'dark' || typeTheme === 'light' ? themes[typeTheme] : themes['system']} link="/theme-settings/" routeProps={{changeColorTheme: props.changeColorTheme}}></ListItem>
|
||||
<ListItem title={t("Common.Themes.textTheme")} after={typeTheme === 'dark' || typeTheme === 'light' ? translationThemes[typeTheme] : translationThemes['system']} link="/theme-settings/" routeProps={{
|
||||
changeColorTheme: props.changeColorTheme,
|
||||
translationThemes
|
||||
}}></ListItem>
|
||||
</List>
|
||||
}
|
||||
{_isShowMacros &&
|
||||
@ -119,17 +122,23 @@ const PageApplicationSettings = props => {
|
||||
const PageThemeSettings = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t("Settings", { returnObjects: true });
|
||||
const appOptions = props.storeAppOptions;
|
||||
const colorTheme = appOptions.colorTheme;
|
||||
const storeThemes = props.storeThemes;
|
||||
const colorTheme = storeThemes.colorTheme;
|
||||
const typeTheme = colorTheme.type;
|
||||
const translationThemes = props.translationThemes;
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={t('Settings.textTheme')} backLink={_t.textBack} />
|
||||
<List>
|
||||
<ListItem radio checked={typeTheme === 'system'} onChange={() => props.changeColorTheme('system')} name="system" title={t('Settings.textSameAsSystem')}></ListItem>
|
||||
{Object.keys(translationThemes).map((theme, index) => {
|
||||
return (
|
||||
<ListItem key={index} radio checked={typeTheme === theme} onChange={() => props.changeColorTheme(theme)} name={theme} title={translationThemes[theme]}></ListItem>
|
||||
)
|
||||
})}
|
||||
{/* <ListItem radio checked={typeTheme === 'system'} onChange={() => props.changeColorTheme('system')} name="system" title={t('Settings.textSameAsSystem')}></ListItem>
|
||||
<ListItem radio checked={typeTheme === 'light'} onChange={() => props.changeColorTheme('light')} name="light" title={t('Settings.textLight')}></ListItem>
|
||||
<ListItem radio checked={typeTheme === 'dark'} onChange={() => props.changeColorTheme('dark')} name="dark" title={t('Settings.textDark')}></ListItem>
|
||||
<ListItem radio checked={typeTheme === 'dark'} onChange={() => props.changeColorTheme('dark')} name="dark" title={t('Settings.textDark')}></ListItem> */}
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
@ -193,9 +202,9 @@ const PageMacrosSettings = props => {
|
||||
);
|
||||
};
|
||||
|
||||
const ApplicationSettings = inject("storeApplicationSettings", "storeAppOptions", "storeReview")(observer(PageApplicationSettings));
|
||||
const ApplicationSettings = inject("storeApplicationSettings", "storeAppOptions", "storeReview", "storeThemes")(observer(PageApplicationSettings));
|
||||
const MacrosSettings = inject("storeApplicationSettings")(observer(PageMacrosSettings));
|
||||
const Direction = inject("storeApplicationSettings")(observer(PageDirection));
|
||||
const ThemeSettings = inject("storeAppOptions")(observer(PageThemeSettings));
|
||||
const ThemeSettings = inject("storeAppOptions", "storeThemes")(observer(PageThemeSettings));
|
||||
|
||||
export {ApplicationSettings, MacrosSettings, Direction, ThemeSettings};
|
||||
Reference in New Issue
Block a user