[SSE mobile] Added themes controller and correct icons
This commit is contained in:
SergeyEzhin
parent
94f3f4631d
commit
ffd2325f8f
|
|
@ -465,7 +465,8 @@
|
|||
"txtScheme6": "Concourse",
|
||||
"txtScheme7": "Equity",
|
||||
"txtScheme8": "Flow",
|
||||
"txtScheme9": "Foundry"
|
||||
"txtScheme9": "Foundry",
|
||||
"textDarkTheme": "Dark Theme"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -46,7 +46,7 @@ const PageApplicationSettings = props => {
|
|||
}}
|
||||
/>
|
||||
</ListItem>
|
||||
<ListItem title={'Dark theme'}>
|
||||
<ListItem title={t('View.Settings.textDarkTheme')}>
|
||||
<Toggle checked={isThemeDark}
|
||||
onToggleChange={toggle => {Themes.switchDarkTheme(!toggle), setIsThemeDark(!toggle)}}>
|
||||
</Toggle>
|
||||
|
|
|
|||
|
|
@ -652,7 +652,8 @@
|
|||
"txtSemicolon": "Semicolon",
|
||||
"txtSpace": "Space",
|
||||
"txtTab": "Tab",
|
||||
"warnDownloadAs": "If you continue saving in this format all features except the text will be lost.<br>Are you sure you want to continue?"
|
||||
"warnDownloadAs": "If you continue saving in this format all features except the text will be lost.<br>Are you sure you want to continue?",
|
||||
"textDarkTheme": "Dark Theme"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -87,20 +87,6 @@ class ApplicationSettingsController extends Component {
|
|||
if (regCode!==null) api.asc_setLocale(+regCode);
|
||||
}
|
||||
|
||||
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
|
||||
|
|
@ -113,8 +99,6 @@ class ApplicationSettingsController extends Component {
|
|||
onChangeMacrosSettings={this.onChangeMacrosSettings}
|
||||
onFormulaLangChange={this.onFormulaLangChange}
|
||||
onRegSettings={this.onRegSettings}
|
||||
isThemeDark={this.isThemeDark}
|
||||
switchDarkTheme={this.switchDarkTheme}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -322,7 +322,7 @@
|
|||
&.icon-format-xltx {
|
||||
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" xml:space="preserve" ><defs><style>.cls-1{fill:@{brandColor};}</style><clipPath id="clip-xltx"><rect width="33" height="33"/></clipPath></defs><g id="xltx" clip-path="url(#clip-xltx)"><rect id="Rectangle_20" data-name="Rectangle 20" width="33" height="33" fill="none"/><path id="Path_19" data-name="Path 19" d="M516.527,119.222q2.151-.131,4.314-.222-2.54,4.455-5.119,8.9c1.744,3.04,3.528,6.06,5.278,9.1-1.528-.076-3.052-.158-4.581-.251a58.98,58.98,0,0,1-3.166-6.819c-.862,2.2-2.094,4.284-3.084,6.445-1.389-.017-2.779-.066-4.168-.114,1.63-2.732,3.2-5.484,4.885-8.2-1.428-2.8-2.994-5.54-4.467-8.319q2.095-.106,4.188-.206c.945,2.123,1.98,4.218,2.76,6.4C514.205,123.626,515.454,121.454,516.527,119.222Z" transform="translate(-504 -117)" 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="18" height="19"><path fill-rule="evenodd" d="M7.018.148L9.894 0 6.481 5.933 7.69 8.024a2 2 0 0 0-1.691 1.929c-.442-.871-.864-1.748-1.164-2.666-.348.888-.785 1.745-1.222 2.603l-.834 1.694L0 11.508l1.129-1.91 2.128-3.556-1.764-3.301L.279.496 3.071.359l.498 1.099 1.342 3.165c.39-1.075.914-2.106 1.439-3.137L7.018.148zM6.999 10a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-8zm5 2v5h1v-5h2v-1h-5v1h2z"/></svg>');
|
||||
}
|
||||
&.icon-format-ods {
|
||||
width: 30px;
|
||||
|
|
@ -332,7 +332,7 @@
|
|||
&.icon-format-ots {
|
||||
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-ots"><rect width="33" height="33"/></clipPath><style>.cls-1{fill:@{brandColor};}</style></defs><g id="ots" clip-path="url(#clip-ots)"><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"><path fill-rule="evenodd" d="M18.952.657L18.874.61l-.02-.012a4.43 4.43 0 0 0-1.72-.571c-1.087-.123-2.127.175-3.005.782a4.48 4.48 0 0 0-2.016-.755c-1.01-.114-1.979.136-2.816.659l-.01.007c-.035.028-.048.058-.048.091 0 .058.038.104.087.104l.02-.004c.45-.099.919-.127 1.398-.073 1.343.151 2.513.646 3.334 1.757.043.053.081.05.124-.003C15.234 1.164 16.818.6 18.52.791l.282.042.028.005.083.014c.056.007.086-.046.086-.104 0-.039-.015-.073-.046-.091zM11.999 8a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-9zm4 8v-5h-2v-1h5v1h-2v5h-1zm.969-10.322a.16.16 0 0 1 .084.145c0 .086-.058.155-.13.155-.003 0-.128-.011-.187-.017l-.622-.026c-2.926 0-5.554 1.283-7.148 3.884l-.046.076-.03.049c-.024.035-.059.057-.1.057-.033 0-.062-.014-.085-.038C7.125 8.188 5.04 7.529 2.701 7.529c-.88 0-1.73.156-2.531.444l-.016.006c-.008.002-.017.004-.025.004-.072 0-.13-.07-.13-.155 0-.05.02-.094.05-.122 1.413-1.138 3.097-1.796 4.91-1.796 1.276 0 2.487.326 3.581.91 1.433-1.217 3.185-1.935 5.079-1.935a7.52 7.52 0 0 1 3.345.791z"/></svg>');
|
||||
}
|
||||
&.icon-format-csv {
|
||||
width: 24px;
|
||||
|
|
|
|||
|
|
@ -306,8 +306,7 @@
|
|||
&.icon-format-xltx {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
//<style>.cls-1{fill:@{brandColor};}</style>
|
||||
.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" xml:space="preserve" ><defs><clipPath id="clip-xltx"><rect width="33" height="33"/></clipPath></defs><g id="xltx" clip-path="url(#clip-xltx)"><rect id="Rectangle_20" data-name="Rectangle 20" width="33" height="33" fill="none"/><path id="Path_19" data-name="Path 19" d="M516.527,119.222q2.151-.131,4.314-.222-2.54,4.455-5.119,8.9c1.744,3.04,3.528,6.06,5.278,9.1-1.528-.076-3.052-.158-4.581-.251a58.98,58.98,0,0,1-3.166-6.819c-.862,2.2-2.094,4.284-3.084,6.445-1.389-.017-2.779-.066-4.168-.114,1.63-2.732,3.2-5.484,4.885-8.2-1.428-2.8-2.994-5.54-4.467-8.319q2.095-.106,4.188-.206c.945,2.123,1.98,4.218,2.76,6.4C514.205,123.626,515.454,121.454,516.527,119.222Z" transform="translate(-504 -117)" 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="18" height="19"><path fill-rule="evenodd" d="M7.018.148L9.894 0 6.481 5.933 7.69 8.024a2 2 0 0 0-1.691 1.929c-.442-.871-.864-1.748-1.164-2.666-.348.888-.785 1.745-1.222 2.603l-.834 1.694L0 11.508l1.129-1.91 2.128-3.556-1.764-3.301L.279.496 3.071.359l.498 1.099 1.342 3.165c.39-1.075.914-2.106 1.439-3.137L7.018.148zM6.999 10a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-9a1 1 0 0 1-1-1v-8zm5 2v5h1v-5h2v-1h-5v1h2z"/></svg>');
|
||||
}
|
||||
&.icon-format-ods {
|
||||
width: 30px;
|
||||
|
|
@ -317,7 +316,7 @@
|
|||
&.icon-format-ots {
|
||||
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-ots"><rect width="33" height="33"/></clipPath><style>.cls-1{fill:@{brandColor};}</style></defs><g id="ots" clip-path="url(#clip-ots)"><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"><path fill-rule="evenodd" d="M18.952.657L18.874.61l-.02-.012a4.43 4.43 0 0 0-1.72-.571c-1.087-.123-2.127.175-3.005.782a4.48 4.48 0 0 0-2.016-.755c-1.01-.114-1.979.136-2.816.659l-.01.007c-.035.028-.048.058-.048.091 0 .058.038.104.087.104l.02-.004c.45-.099.919-.127 1.398-.073 1.343.151 2.513.646 3.334 1.757.043.053.081.05.124-.003C15.234 1.164 16.818.6 18.52.791l.282.042.028.005.083.014c.056.007.086-.046.086-.104 0-.039-.015-.073-.046-.091zM11.999 8a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-9zm4 8v-5h-2v-1h5v1h-2v5h-1zm.969-10.322a.16.16 0 0 1 .084.145c0 .086-.058.155-.13.155-.003 0-.128-.011-.187-.017l-.622-.026c-2.926 0-5.554 1.283-7.148 3.884l-.046.076-.03.049c-.024.035-.059.057-.1.057-.033 0-.062-.014-.085-.038C7.125 8.188 5.04 7.529 2.701 7.529c-.88 0-1.73.156-2.531.444l-.016.006c-.008.002-.017.004-.025.004-.072 0-.13-.07-.13-.155 0-.05.02-.094.05-.122 1.413-1.138 3.097-1.796 4.91-1.796 1.276 0 2.487.326 3.581.91 1.433-1.217 3.185-1.935 5.079-1.935a7.52 7.52 0 0 1 3.345.791z"/></svg>');
|
||||
}
|
||||
&.icon-format-csv {
|
||||
width: 24px;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React, {Fragment, useState} from "react";
|
|||
import { observer, inject } from "mobx-react";
|
||||
import { Page, Navbar, List, ListItem, BlockTitle, Toggle, Icon } from "framework7-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js';
|
||||
|
||||
const PageApplicationSettings = props => {
|
||||
const { t } = useTranslation();
|
||||
|
|
@ -20,7 +21,7 @@ const PageApplicationSettings = props => {
|
|||
const isRefStyle = storeApplicationSettings.isRefStyle;
|
||||
const isComments = storeApplicationSettings.isComments;
|
||||
const isResolvedComments = storeApplicationSettings.isResolvedComments;
|
||||
const [isThemeDark, setIsThemeDark] = useState(props.isThemeDark);
|
||||
const [isThemeDark, setIsThemeDark] = useState(Themes.isCurrentDark);
|
||||
|
||||
const changeMeasureSettings = value => {
|
||||
storeApplicationSettings.changeUnitMeasurement(value);
|
||||
|
|
@ -93,9 +94,9 @@ const PageApplicationSettings = props => {
|
|||
}}
|
||||
/>
|
||||
</ListItem>
|
||||
<ListItem title={'Dark theme'}>
|
||||
<ListItem title={t('View.Settings.textDarkTheme')}>
|
||||
<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