diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 0160e25d7..00cf701a0 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -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; + } + } + } } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 211c11340..9b7ec4fa2 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -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; + } + } + } + } } diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 584c33e60..034ffc5d2 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -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; +} + + + + + diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx index cf9f616eb..1704fee0c 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -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) { - api.asc_showComments(value); - // Common.localStorage.setBool("sse-settings-resolvedcomment", resolved); - // } + if (displayComments) { + api.asc_showComments(value); + 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 ( ) } diff --git a/apps/spreadsheeteditor/mobile/src/page/app.jsx b/apps/spreadsheeteditor/mobile/src/page/app.jsx index 83feeb19a..28fac09c7 100644 --- a/apps/spreadsheeteditor/mobile/src/page/app.jsx +++ b/apps/spreadsheeteditor/mobile/src/page/app.jsx @@ -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 = { @@ -24,8 +25,9 @@ const f7params = { export default class extends React.Component { constructor() { super(); - + Common.Notifications = new Notifications(); + Common.localStorage = LocalStorage; } render() { diff --git a/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js index 051a38dc8..a752ecc6d 100644 --- a/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js @@ -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')); + + regData.forEach(obj => { + if(obj.code === value) { + this.regCode = obj.code; + } + }); - @action changeRegSettings(value) { - this.regSettings = value; + if(!this.regCode) { + this.regCode = 0x0409; + } + } + + @action changeRegCode(value) { + this.regCode = value; + } + + @action setRegExample(value) { + this.regExample = value; } @action changeUnitMeasurement(value) { diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx index fd69d7adb..4755b03b0 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx @@ -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 => { {_t.textRegionalSettings} - + {_t.textCommentingDisplay} @@ -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 ( - + + + {regData.length ? regData.map((elem, index) => { + return ( + { + storeApplicationSettings.changeRegCode(elem.code); + props.onRegSettings(elem.code); + }}> +
+ +
{elem.displayName}
+
+
+ ) + }) : null} +
) }