From 66d3071f7abc257e3b8bd668a28e71d773ece327 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 18 Nov 2021 15:23:33 +0300 Subject: [PATCH 1/3] [PE mobile] changed some icons to correct image-mask --- apps/common/mobile/resources/less/_mixins.less | 3 ++- apps/presentationeditor/mobile/src/less/icons-material.less | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/common/mobile/resources/less/_mixins.less b/apps/common/mobile/resources/less/_mixins.less index 775bfb91a..4378affb1 100644 --- a/apps/common/mobile/resources/less/_mixins.less +++ b/apps/common/mobile/resources/less/_mixins.less @@ -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) { diff --git a/apps/presentationeditor/mobile/src/less/icons-material.less b/apps/presentationeditor/mobile/src/less/icons-material.less index 7c31594ba..0c2b3a564 100644 --- a/apps/presentationeditor/mobile/src/less/icons-material.less +++ b/apps/presentationeditor/mobile/src/less/icons-material.less @@ -401,7 +401,7 @@ &.icon-format-potx { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-format-odp { @@ -413,7 +413,7 @@ &.icon-format-otp { width: 30px; height: 30px; - .encoded-svg-mask(''); + .encoded-svg-mask('') } // Collaboration From d1bd1c67fa3adc64bf818cfa89fa8c36e0a9af9b Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 18 Nov 2021 22:39:33 +0300 Subject: [PATCH 2/3] [mobile] added UI Themes controller --- apps/common/mobile/lib/controller/Themes.js | 48 +++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 apps/common/mobile/lib/controller/Themes.js diff --git a/apps/common/mobile/lib/controller/Themes.js b/apps/common/mobile/lib/controller/Themes.js new file mode 100644 index 000000000..5e9d9bfc6 --- /dev/null +++ b/apps/common/mobile/lib/controller/Themes.js @@ -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} \ No newline at end of file From f0b21727cb11eb05d7a48ae6bbeca8dc0e46e20a Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 18 Nov 2021 22:40:59 +0300 Subject: [PATCH 3/3] [PE mobile] keep current theme type for next launch --- .../settings/ApplicationSettings.jsx | 20 ++----------------- .../src/view/settings/ApplicationSettings.jsx | 5 +++-- 2 files changed, 5 insertions(+), 20 deletions(-) diff --git a/apps/presentationeditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/presentationeditor/mobile/src/controller/settings/ApplicationSettings.jsx index c52cbe9e7..93428d9e9 100644 --- a/apps/presentationeditor/mobile/src/controller/settings/ApplicationSettings.jsx +++ b/apps/presentationeditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -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 ( ) } diff --git a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx index 2040217ed..30a98fc67 100644 --- a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx +++ b/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx @@ -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 => { {props.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}> + onToggleChange={toggle => {Themes.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}>