After merge
This commit is contained in:
SergeyEzhin
commit
373bca6c00
48
apps/common/mobile/lib/controller/Themes.js
Normal file
48
apps/common/mobile/lib/controller/Themes.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
import { Dom7 } from 'framework7'
|
||||
import { LocalStorage } from "../../utils/LocalStorage";
|
||||
|
||||
class ThemesController {
|
||||
constructor() {
|
||||
this.themes_map = {
|
||||
dark : {
|
||||
id: 'theme-dark',
|
||||
type:'dark'
|
||||
},
|
||||
light: {
|
||||
id: 'theme-light',
|
||||
type: 'light'
|
||||
}};
|
||||
|
||||
const obj = LocalStorage.getItem("ui-theme");
|
||||
let theme = this.themes_map.light;
|
||||
if ( !!obj )
|
||||
theme = this.themes_map[JSON.parse(obj).type];
|
||||
else
|
||||
if ( window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ) {
|
||||
theme = this.themes_map['dark'];
|
||||
LocalStorage.setItem("ui-theme", JSON.stringify(theme));
|
||||
}
|
||||
|
||||
const $$ = Dom7;
|
||||
const $body = $$('body');
|
||||
$body.attr('class') && $body.attr('class', $body.attr('class').replace(/\s?theme-type-(?:dark|light)/, ''));
|
||||
$body.addClass(`theme-type-${theme.type}`);
|
||||
}
|
||||
|
||||
get isCurrentDark() {
|
||||
const obj = LocalStorage.getItem("ui-theme");
|
||||
return !!obj ? JSON.parse(obj).type === 'dark' : false;
|
||||
}
|
||||
|
||||
switchDarkTheme(dark) {
|
||||
const theme = this.themes_map[dark ? 'dark' : '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}`);
|
||||
}
|
||||
}
|
||||
|
||||
const themes = new ThemesController()
|
||||
export {themes as Themes}
|
||||
|
|
@ -3,7 +3,8 @@
|
|||
@url: `encodeURIComponent(@{svg})`;
|
||||
background-color: @color;
|
||||
-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,@{url}");
|
||||
mask-size: contain;
|
||||
-webkit-mask-size: contain;
|
||||
-webkit-mask-repeat: round;
|
||||
}
|
||||
|
||||
.encoded-svg-uncolored-mask(@svg) {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React, { Component } from "react";
|
|||
import { ApplicationSettings } from "../../view/settings/ApplicationSettings";
|
||||
import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js';
|
||||
|
||||
class ApplicationSettingsController extends Component {
|
||||
constructor(props) {
|
||||
|
|
@ -26,29 +27,12 @@ class ApplicationSettingsController extends Component {
|
|||
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() {
|
||||
return (
|
||||
<ApplicationSettings
|
||||
setUnitMeasurement={this.setUnitMeasurement}
|
||||
switchSpellCheck={this.switchSpellCheck}
|
||||
setMacrosSettings={this.setMacrosSettings}
|
||||
isThemeDark={this.isThemeDark}
|
||||
switchDarkTheme={this.switchDarkTheme}
|
||||
setMacrosSettings={this.setMacrosSettings}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -401,7 +401,7 @@
|
|||
&.icon-format-potx {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="33" viewBox="0 0 33 33"><defs><clipPath id="clip-potx"><rect width="33" height="33"/></clipPath><style>.cls-1{fill:@{brandColor};}</style></defs><g id="potx" clip-path="url(#clip-potx)"><rect id="Rectangle_20" data-name="Rectangle 20" width="33" height="33" fill="none"/><g id="Group_5" data-name="Group 5" transform="translate(16 16)"><path id="Path_44" data-name="Path 44" d="M1.011,0H13.989A1.011,1.011,0,0,1,15,1.011V13.989A1.011,1.011,0,0,1,13.989,15H1.011A1.011,1.011,0,0,1,0,13.989V1.011A1.011,1.011,0,0,1,1.011,0Z" class="cls-1"/><path id="Path_39" data-name="Path 39" d="M5.794,13.25V3.911H9.258V2.25h-9V3.911H3.729V13.25Z" transform="translate(2.742 -0.25)" fill="#fff"/></g><path id="Path_25" data-name="Path 25" d="M412.988,119c-1.658.033-3.382.327-4.94.257-.068,5.822-.057,11.646,0,17.467,1.136.087,2.279.18,3.415.273,0-2.132,0-4.263.006-6.395a8.88,8.88,0,0,0,4.213-.5c3.669-1.707,4.323-6.95,1.85-9.8a6.428,6.428,0,0,0-4.538-1.3Zm-.192,3.159a2.353,2.353,0,0,1,1.956.809,3.776,3.776,0,0,1,.075,3.576c-.655,1.124-2.136,1.014-3.278,1.145-.121-1.826-.108-3.652-.093-5.484C411.881,122.189,412.343,122.15,412.8,122.162Z" transform="translate(-404 -117)" class="cls-1"/></g></svg>');
|
||||
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="19" viewBox="0 0 16 19" fill="none"><path fill-rule="evenodd" d="M3.17352.00205L1.83101.09132.03033.17294.02691 11.8183 2.20037 12l.00399-4.26256.1462.00492c.85813.0293 1.75027.05976 2.53467-.33875C7.21956 6.26618 7.6361 2.77059 6.06157.87012 5.23967.13063 4.22784-.02022 3.17352.00205zm-.12158 2.10573c.47956.01275.94167.11913 1.24541.53935.41642.71217.39454 1.64995.04737 2.38392-.34559.62117-1.05357.67679-1.7.72758l-.38613.03546-.05822-3.65565.22293-.01202.62864-.01864zM4.99854 10c0-.55228.44771-1 1-1h8.99996c.5523 0 1 .44772 1 1v8c0 .5523-.4477 1-1 1H5.99853c-.55228 0-.99999-.4477-.99999-1v-8zm5 2v5h.99996v-5h2v-1H7.99854v1h2z" fill="#000"/></svg>');
|
||||
}
|
||||
|
||||
&.icon-format-odp {
|
||||
|
|
@ -413,7 +413,7 @@
|
|||
&.icon-format-otp {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="33" viewBox="0 0 33 33"><defs><clipPath id="clip-otp"><rect width="33" height="33"/></clipPath><style>.cls-1{fill:@{brandColor};}</style></defs><g id="otp" clip-path="url(#clip-otp)"><rect id="Rectangle_20" data-name="Rectangle 20" width="33" height="33" fill="none"/><path id="Path_33" data-name="Path 33" d="M125.173,121h0c-.046-.03-.093-.059-.141-.088a6.133,6.133,0,0,0-2.467-.869,6.014,6.014,0,0,0-4.309,1.188,6.223,6.223,0,0,0-2.892-1.147,5.965,5.965,0,0,0-4.039,1l-.036.024a.176.176,0,0,0-.049.125.145.145,0,0,0,.126.158l.019,0a.019.019,0,0,0,.009,0,5.781,5.781,0,0,1,2.005-.111,6.41,6.41,0,0,1,4.782,2.669c.06.081.115.076.178,0a6.288,6.288,0,0,1,6.194-2.735c.136.017.27.038.4.064.047.009.119.024.161.03.08.011.123-.071.123-.159A.155.155,0,0,0,125.173,121Z" transform="translate(-94.24 -116)" class="cls-1"/><path id="Path_34" data-name="Path 34" d="M126.894,125.978a.175.175,0,0,0-.022-.011,11.686,11.686,0,0,0-4.905-1.082,11.924,11.924,0,0,0-7.444,2.647,11.725,11.725,0,0,0-5.251-1.245,11.884,11.884,0,0,0-7.176,2.441.229.229,0,0,0-.022.016.217.217,0,0,0-.073.167.2.2,0,0,0,.191.211.167.167,0,0,0,.037,0,.118.118,0,0,0,.023-.008,11.679,11.679,0,0,1,3.71-.608c3.429,0,6.486.9,8.787,3.315a.093.093,0,0,1,.016.016.172.172,0,0,0,.123.052.18.18,0,0,0,.147-.078s.075-.115.111-.171a12.1,12.1,0,0,1,10.479-5.315c.306,0,.611.014.912.037l.273.022a.2.2,0,0,0,.191-.211A.211.211,0,0,0,126.894,125.978Z" transform="translate(-100 -115.885)" class="cls-1"/><g id="Group_5" data-name="Group 5" transform="translate(16 16)"><path id="Path_44" data-name="Path 44" d="M1.011,0H13.989A1.011,1.011,0,0,1,15,1.011V13.989A1.011,1.011,0,0,1,13.989,15H1.011A1.011,1.011,0,0,1,0,13.989V1.011A1.011,1.011,0,0,1,1.011,0Z" class="cls-1"/><path id="Path_39" data-name="Path 39" d="M5.794,13.25V3.911H9.258V2.25h-9V3.911H3.729V13.25Z" transform="translate(2.742 -0.25)" fill="#fff"/></g></g></svg>');
|
||||
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="22" height="18" viewBox="0 0 22 18" fill="none"><path fill-rule="evenodd" d="M18.9524.65678l-.0785-.04649-.0201-.0117c-.5256-.30277-1.1045-.50192-1.7196-.57134-1.0875-.12282-2.1267.17515-3.0048.78185-.6015-.40708-1.2825-.67215-2.0156-.75492-1.0105-.11403-1.9792.13581-2.81586.65904l-.01038.00672-.01425.00908c-.02031.01897-.03405.04847-.03405.0816 0 .0576.03846.1042.08723.1042.00451 0 .00893-.00082.01364-.00199s.00253-.0006.00375-.00103l.00223-.00072c.45-.09928.91919-.12738 1.39759-.07341 1.3427.15138 2.5128.6464 3.3337 1.75747.0429.05327.0807.05.1242-.00281 1.0326-1.42836 2.6162-1.99279 4.3181-1.8009l.2817.04156.0281.00521.083.01434c.0562.00738.0864-.04648.0864-.10432-.0005-.0391-.0146-.07259-.0465-.09144zM11.9985 8c-.5522 0-1 .44772-1 1v8c0 .5523.4477 1 1 1h9c.5523 0 1-.4477 1-1V9c0-.55228-.4477-1-1-1h-9zm4 8v-5h-2v-1h5v1h-2v5h-1zm.9693-10.32247l.0118.00606c.043.02436.0729.07716.0726.13898 0 .0857-.0584.15489-.1298.15489-.0028 0-.1275-.01136-.1866-.01686l-.6219-.02634c-2.9255 0-5.5537 1.2826-7.14778 3.88374l-.04596.07604-.02989.04912c-.02395.03488-.05947.05694-.09989.05694-.03268 0-.06192-.0141-.08468-.0381-.00393-.00456-.00717-.00889-.01089-.01217C7.12513 8.18814 5.0403 7.52852 2.70144 7.52852c-.87978 0-1.73011.1563-2.53139.44385-.00487.00226-.00932.00362-.01442.00519l-.00138.00043c-.00834.00199-.01697.00351-.02541.00351-.07173 0-.12982-.06955-.12982-.1549 0-.05034.02012-.09413.04994-.12152l.00484-.00414.00978-.00804c1.39796-1.1263 3.08205-1.78393 4.89586-1.78393 1.2755 0 2.48742.32583 3.58111.91041C9.97345 5.60211 11.726 4.88477 13.6191 4.88477c1.1847 0 2.3134.28192 3.3454.79121l.0033.00155z" fill="#000"/></svg>')
|
||||
}
|
||||
|
||||
// Collaboration
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ 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";
|
||||
import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js';
|
||||
|
||||
const PageApplicationSettings = props => {
|
||||
const { t } = useTranslation();
|
||||
|
|
@ -9,7 +10,7 @@ const PageApplicationSettings = props => {
|
|||
const store = props.storeApplicationSettings;
|
||||
const unitMeasurement = store.unitMeasurement;
|
||||
const isSpellChecking = store.isSpellChecking;
|
||||
const [isThemeDark, setIsThemeDark] = useState(props.isThemeDark);
|
||||
const [isThemeDark, setIsThemeDark] = useState(Themes.isCurrentDark);
|
||||
|
||||
const changeMeasureSettings = value => {
|
||||
store.changeUnitMeasurement(value);
|
||||
|
|
@ -47,7 +48,7 @@ const PageApplicationSettings = props => {
|
|||
</ListItem>
|
||||
<ListItem title={'Dark theme'}>
|
||||
<Toggle checked={isThemeDark}
|
||||
onToggleChange={toggle => {props.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}>
|
||||
onToggleChange={toggle => {Themes.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}>
|
||||
</Toggle>
|
||||
</ListItem>
|
||||
</List>
|
||||
|
|
|
|||
Loading…
Reference in a new issue