[SSE mobile] Added Regional Settings

This commit is contained in:
SergeyEzhin 2021-02-25 20:42:07 +03:00
parent 9bb4c5fbaa
commit 9d1ccf2f84
7 changed files with 327 additions and 57 deletions

View file

@ -403,4 +403,18 @@
color: @darkGreen;
}
}
// Regional Settings
.regional-settings {
.item-title-row {
display: flex;
justify-content: flex-start;
align-items: center;
.item-title {
margin-left: 20px;
white-space: normal;
}
}
}
}

View file

@ -291,4 +291,24 @@
}
}
}
// Regional Settings
.regional-settings {
.list {
.item-inner {
margin-left: 16px;
}
.item-title-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
flex-direction: row-reverse;
.item-title {
white-space: normal;
}
}
}
}
}

View file

@ -463,3 +463,202 @@ input[type="number"]::-webkit-inner-spin-button {
margin: 0;
}
// Regional Settings
.icon.lang-flag {
background-size: 48px auto;
background-image: url(../img/controls/flags@2x.png);
}
.icon.lang-flag {
width: 16px;
height: 12px;
}
.lang-flag.ca,
.lang-flag.ca-ES {
background-position: 0 0;
}
.lang-flag.cs,
.lang-flag.cs-CZ {
background-position: -16px 0;
}
.lang-flag.da,
.lang-flag.da-DK {
background-position: -32px 0;
}
.lang-flag.de,
.lang-flag.de-DE {
background-position: 0 -12px;
}
.lang-flag.el,
.lang-flag.el-GR {
background-position: -16px -12px;
}
.lang-flag.en,
.lang-flag.en-US {
background-position: -32px -12px;
}
.lang-flag.fr,
.lang-flag.fr-FR {
background-position: 0 -24px;
}
.lang-flag.hu,
.lang-flag.hu-HU {
background-position: -16px -24px;
}
.lang-flag.it,
.lang-flag.it-IT {
background-position: -32px -24px;
}
.lang-flag.ko,
.lang-flag.ko-KR {
background-position: 0 -36px;
}
.lang-flag.nl,
.lang-flag.nl-NL {
background-position: -16px -36px;
}
.lang-flag.nb,
.lang-flag.nb-NO,
.lang-flag.nn,
.lang-flag.nn-NO {
background-position: -32px -36px;
}
.lang-flag.pl,
.lang-flag.pl-PL {
background-position: 0 -48px;
}
.lang-flag.pt,
.lang-flag.pt-BR {
background-position: -16px -48px;
}
.lang-flag.ro,
.lang-flag.ro-RO {
background-position: -32px -48px;
}
.lang-flag.ru,
.lang-flag.ru-RU {
background-position: 0 -60px;
}
.lang-flag.sv,
.lang-flag.sv-SE {
background-position: -32px -60px;
}
.lang-flag.tr,
.lang-flag.tr-TR {
background-position: 0 -72px;
}
.lang-flag.uk,
.lang-flag.uk-UA {
background-position: -16px -72px;
}
.lang-flag.lv,
.lang-flag.lv-LV {
background-position: -32px -72px;
}
.lang-flag.lt,
.lang-flag.lt-LT {
background-position: 0 -84px;
}
.lang-flag.vi,
.lang-flag.vi-VN {
background-position: -16px -84px;
}
.lang-flag.de-CH {
background-position: -32px -84px;
}
.lang-flag.pt-PT {
background-position: -16px -96px;
}
.lang-flag.de-AT {
background-position: -32px -96px;
}
.lang-flag.es,
.lang-flag.es-ES {
background-position: 0 -108px;
}
.lang-flag.en-GB {
background-position: -32px -108px;
}
.lang-flag.en-AU {
background-position: 0 -120px;
}
.lang-flag.az-Latn-AZ {
background-position: -16px -120px;
}
.lang-flag.id,
.lang-flag.id-ID {
background-position: -32px -120px;
}
.lang-flag.bg,
.lang-flag.bg-BG {
background-position: 0 -132px;
}
.lang-flag.ca-ES-valencia {
background-position: -16px -132px;
}
.lang-flag.en-CA {
background-position: -32px -132px;
}
.lang-flag.en-ZA {
background-position: 0 -144px;
}
.lang-flag.eu,
.lang-flag.eu-ES {
background-position: -16px -144px;
}
.lang-flag.gl,
.lang-flag.gl-ES {
background-position: -32px -144px;
}
.lang-flag.hr,
.lang-flag.hr-HR {
background-position: 0 -156px;
}
.lang-flag.lb,
.lang-flag.lb-LU {
background-position: -16px -156px;
}
.lang-flag.mn,
.lang-flag.mn-MN {
background-position: -32px -156px;
}
.lang-flag.sl,
.lang-flag.sl-SI {
background-position: 0 -168px;
}
.lang-flag.sr,
.lang-flag.sr-Cyrl-RS,
.lang-flag.sr-Latn-RS {
background-position: -16px -168px;
}
.lang-flag.sk,
.lang-flag.sk-SK {
background-position: -32px -168px;
}
.lang-flag.kk,
.lang-flag.kk-KZ {
background-position: 0 -180px;
}
.lang-flag.fi,
.lang-flag.fi-FI,
.lang-flag.sv-FI {
background-position: -16px -180px;
}
.lang-flag.zh,
.lang-flag.zh-CN {
background-position: -32px -180px;
}
.lang-flag.ja,
.lang-flag.ja-JP {
background-position: 0 -192px;
}
.lang-flag.es-MX {
background-position: -16px -192px;
}

View file

@ -6,26 +6,28 @@ class ApplicationSettingsController extends Component {
constructor(props) {
super(props);
this.onFormulaLangChange = this.onFormulaLangChange.bind(this);
this.onRegSettings = this.onRegSettings.bind(this);
this.initRegSettings = this.initRegSettings.bind(this);
this.props.storeApplicationSettings.initRegData();
this.initRegSettings();
}
initRegSettings() {
// this.props.storeApplicationSettings.initRegSettings();
this.props.storeApplicationSettings.getRegCode();
const info = new Asc.asc_CFormatCellsInfo();
const api = Common.EditorApi.get();
const regSettings = this.props.storeApplicationSettings.reqSettings;
const regCode = this.props.storeApplicationSettings.regCode;
info.asc_setType(Asc.c_oAscNumFormatType.None);
info.asc_setSymbol(regSettings);
info.asc_setSymbol(regCode);
const arr = api.asc_getFormatCells(info);
const text4 = api.asc_getLocaleExample(arr[4], 1000.01, regSettings),
text5 = api.asc_getLocaleExample(arr[5], Asc.cDate().getExcelDateWithTime(), regSettings),
text6 = api.asc_getLocaleExample(arr[6], Asc.cDate().getExcelDateWithTime(), regSettings);
const text4 = api.asc_getLocaleExample(arr[4], 1000.01, regCode),
text5 = api.asc_getLocaleExample(arr[5], Asc.cDate().getExcelDateWithTime(), regCode),
text6 = api.asc_getLocaleExample(arr[6], Asc.cDate().getExcelDateWithTime(), regCode);
this.textRegSettingsExample = `${text4} ${text5} ${text6}`;
this.props.storeApplicationSettings.setRegExample(`${text4} ${text5} ${text6}`);
}
onChangeDisplayComments(displayComments) {
@ -33,51 +35,59 @@ class ApplicationSettingsController extends Component {
if (!displayComments) {
api.asc_hideComments();
// Common.localStorage.setBool("sse-settings-resolvedcomment", false);
Common.localStorage.setBool("sse-settings-resolvedcomment", false);
} else {
// let resolved = Common.localStorage.getBool("sse-settings-resolvedcomment");
api.asc_showComments(displayComments);
let resolved = Common.localStorage.getBool("sse-settings-resolvedcomment");
api.asc_showComments(resolved);
}
// Common.localStorage.setBool("sse-mobile-settings-livecomment", displayComments);
Common.localStorage.setBool("sse-mobile-settings-livecomment", displayComments);
}
onChangeDisplayResolved(value) {
const api = Common.EditorApi.get();
// let displayComments = Common.localStorage.getBool("sse-mobile-settings-livecomment");
let displayComments = Common.localStorage.getBool("sse-mobile-settings-livecomment");
// if (displayComments) {
if (displayComments) {
api.asc_showComments(value);
// Common.localStorage.setBool("sse-settings-resolvedcomment", resolved);
// }
Common.localStorage.setBool("sse-settings-resolvedcomment", value);
}
}
clickR1C1Style(checked) {
const api = Common.EditorApi.get();
// Common.localStorage.setBool('sse-settings-r1c1', checked);
Common.localStorage.setBool('sse-settings-r1c1', checked);
api.asc_setR1C1Mode(checked);
}
unitMeasurementChange(value) {
value = value ? +value : Common.Utils.Metric.getDefaultMetric();
Common.Utils.Metric.setCurrentMetric(value);
// Common.localStorage.setItem("se-mobile-settings-unit", value);
Common.localStorage.setItem("se-mobile-settings-unit", value);
}
onChangeMacrosSettings(value) {
Common.Utils.InternalSettings.set("sse-mobile-macros-mode", +value);
// Common.localStorage.setItem("sse-mobile-macros-mode", +value);
Common.localStorage.setItem("sse-mobile-macros-mode", +value);
}
onFormulaLangChange(value) {
// Common.localStorage.setItem("sse-settings-func-lang", value);
Common.localStorage.setItem("sse-settings-func-lang", value);
this.initRegSettings();
// SSE.getController('AddFunction').onDocumentReady();
}
onRegSettings(regCode) {
const api = Common.EditorApi.get();
Common.localStorage.setItem("sse-settings-regional", regCode);
this.initRegSettings();
if (regCode!==null) api.asc_setLocale(+regCode);
}
render() {
return (
<ApplicationSettings
initRegSettings={this.initRegSettings}
unitMeasurementChange={this.unitMeasurementChange}
textRegSettingsExample={this.textRegSettingsExample}
onChangeDisplayComments={this.onChangeDisplayComments}
@ -85,6 +95,7 @@ class ApplicationSettingsController extends Component {
clickR1C1Style={this.clickR1C1Style}
onChangeMacrosSettings={this.onChangeMacrosSettings}
onFormulaLangChange={this.onFormulaLangChange}
onRegSettings={this.onRegSettings}
/>
)
}

View file

@ -9,9 +9,10 @@ import routes from '../router/routes.js';
import '../../../../common/main/lib/util/utils.js';
import '../../../../common/main/lib/util/LanguageInfo.js';
import Notifications from '../../../../common/mobile/utils/notifications.js'
import {LocalStorage} from '../../../../common/mobile/utils/LocalStorage.js';
import Notifications from '../../../../common/mobile/utils/notifications.js';
import {MainController} from '../controller/Main';
import {Device} from '../../../../common/mobile/utils/device'
import {Device} from '../../../../common/mobile/utils/device';
import CellEditor from '../controller/CellEditor';
const f7params = {
@ -26,6 +27,7 @@ export default class extends React.Component {
super();
Common.Notifications = new Notifications();
Common.localStorage = LocalStorage;
}
render() {

View file

@ -1,11 +1,11 @@
import {action, observable} from 'mobx';
export class storeApplicationSettings {
@observable unitMeasurement = Common.Utils.Metric.getCurrentMetric();
@observable macrosMode = 0;
@observable formulaLang = Common.Locale.currentLang || dataLang[0].value;
@observable regSettings = 0x0409;
@observable regCode = undefined;
@observable regExample = '';
@observable regData = [];
@observable isRefStyle = false;
@observable isComments = true;
@ -35,31 +35,36 @@ export class storeApplicationSettings {
return regDataCode;
}
// @action initRegData() {
// const regDataCodes = this.getRegDataCodes();
// regDataCodes.forEach(item => {
// let langInfo = Common.util.LanguageInfo.getLocalLanguageName(item.value);
// this.regData.push({code: item.value, displayName: langInfo[1], langName: langInfo[0]});
// })
// }
@action initRegData() {
const regDataCodes = this.getRegDataCodes();
// @action initRegSettings() {
// const regData = this.getRegDataCodes();
// let value = Number(Common.localStorage.getItem('sse-settings-regional'));
regDataCodes.forEach(item => {
let langInfo = Common.util.LanguageInfo.getLocalLanguageName(item.value);
this.regData.push({code: item.value, displayName: langInfo[1], langName: langInfo[0]});
})
}
// if(!value) {
// this.regSettings = 0x0409;
// } else {
// regData.forEach(obj => {
// if(obj.value === value) {
// this.regSettings = obj.value;
// }
// });
// }
// }
@action getRegCode() {
const regData = this.regData;
let value = Number(Common.localStorage.getItem('sse-settings-regional'));
@action changeRegSettings(value) {
this.regSettings = value;
regData.forEach(obj => {
if(obj.code === value) {
this.regCode = obj.code;
}
});
if(!this.regCode) {
this.regCode = 0x0409;
}
}
@action changeRegCode(value) {
this.regCode = value;
}
@action setRegExample(value) {
this.regExample = value;
}
@action changeUnitMeasurement(value) {

View file

@ -1,6 +1,6 @@
import React, {Fragment} from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle, Icon } from "framework7-react";
import { useTranslation } from "react-i18next";
const PageApplicationSettings = props => {
@ -9,14 +9,14 @@ const PageApplicationSettings = props => {
const storeApplicationSettings = props.storeApplicationSettings;
const unitMeasurement = storeApplicationSettings.unitMeasurement;
const formulaLang = storeApplicationSettings.formulaLang;
// const regSettings = storeApplicationSettings.regSettings;
const regData = storeApplicationSettings.regData;
const regCode = storeApplicationSettings.regCode;
const regExample = storeApplicationSettings.regExample;
const dataLang = storeApplicationSettings.getFormulaLanguages();
const dataRegCodes = storeApplicationSettings.getRegDataCodes();
const defineFormulaLang = () => dataLang.find(obj => obj.value === formulaLang);
// const defineRegSettings = () => dataRegCodes.find(obj => obj.value === regSettings);
const currentFormulaLang = defineFormulaLang();
// const currentRegSettings = defineRegSettings();
const textRegSettingsExample = props.textRegSettingsExample;
const defineRegSetting = () => regData.find(obj => regCode === obj.code);
const currentRegSetting = defineRegSetting();
const isRefStyle = storeApplicationSettings.isRefStyle;
const isComments = storeApplicationSettings.isComments;
const isResolvedComments = storeApplicationSettings.isResolvedComments;
@ -55,7 +55,9 @@ const PageApplicationSettings = props => {
</List>
<BlockTitle>{_t.textRegionalSettings}</BlockTitle>
<List mediaList>
<ListItem title="English" subtitle={`Example: ${textRegSettingsExample}`} link="/regional-settings/"></ListItem>
<ListItem title={currentRegSetting.displayName} subtitle={`Example: ${regExample}`} link="/regional-settings/" routeProps={{
onRegSettings: props.onRegSettings
}}></ListItem>
</List>
<BlockTitle>{_t.textCommentingDisplay}</BlockTitle>
<List>
@ -106,10 +108,27 @@ const PageRegionalSettings = props => {
const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true });
const storeApplicationSettings = props.storeApplicationSettings;
const regData = storeApplicationSettings.regData;
const regCode = storeApplicationSettings.regCode;
return (
<Page>
<Page className="regional-settings">
<Navbar title={_t.textRegionalSettings} backLink={_t.textBack} />
<List>
{regData.length ? regData.map((elem, index) => {
return (
<ListItem key={index} radio checked={elem.code === regCode} onChange={() => {
storeApplicationSettings.changeRegCode(elem.code);
props.onRegSettings(elem.code);
}}>
<div className="item-title-row">
<Icon slot="media" icon={`lang-flag ${elem.langName}`}></Icon>
<div className="item-title">{elem.displayName}</div>
</div>
</ListItem>
)
}) : null}
</List>
</Page>
)
}