Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE mobile] Added Regional Settings

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/common/mobile/resources/less/common-ios.less
View file

@ -403,4 +403,18 @@
color: @darkGreen; 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;
}
}
}
} }

20
apps/common/mobile/resources/less/common-material.less
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;
}
}
}
}
} }

199
apps/common/mobile/resources/less/common.less
View file

@ -463,3 +463,202 @@ input[type="number"]::-webkit-inner-spin-button {
margin: 0; 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;
}

51
apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx
View file

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

6
apps/spreadsheeteditor/mobile/src/page/app.jsx
View file

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

53
apps/spreadsheeteditor/mobile/src/store/applicationSettings.js
View file

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

35
apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx
View file

@ -1,6 +1,6 @@
import React, {Fragment} from "react"; import React, {Fragment} from "react";
import { observer, inject } from "mobx-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"; import { useTranslation } from "react-i18next";
const PageApplicationSettings = props => { const PageApplicationSettings = props => {
@ -9,14 +9,14 @@ const PageApplicationSettings = props => {
const storeApplicationSettings = props.storeApplicationSettings; const storeApplicationSettings = props.storeApplicationSettings;
const unitMeasurement = storeApplicationSettings.unitMeasurement; const unitMeasurement = storeApplicationSettings.unitMeasurement;
const formulaLang = storeApplicationSettings.formulaLang; 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 dataLang = storeApplicationSettings.getFormulaLanguages();
const dataRegCodes = storeApplicationSettings.getRegDataCodes();
const defineFormulaLang = () => dataLang.find(obj => obj.value === formulaLang); const defineFormulaLang = () => dataLang.find(obj => obj.value === formulaLang);
// const defineRegSettings = () => dataRegCodes.find(obj => obj.value === regSettings);
const currentFormulaLang = defineFormulaLang(); const currentFormulaLang = defineFormulaLang();
// const currentRegSettings = defineRegSettings(); const defineRegSetting = () => regData.find(obj => regCode === obj.code);
const textRegSettingsExample = props.textRegSettingsExample; const currentRegSetting = defineRegSetting();
const isRefStyle = storeApplicationSettings.isRefStyle; const isRefStyle = storeApplicationSettings.isRefStyle;
const isComments = storeApplicationSettings.isComments; const isComments = storeApplicationSettings.isComments;
const isResolvedComments = storeApplicationSettings.isResolvedComments; const isResolvedComments = storeApplicationSettings.isResolvedComments;
@ -55,7 +55,9 @@ const PageApplicationSettings = props => {
</List> </List>
<BlockTitle>{_t.textRegionalSettings}</BlockTitle> <BlockTitle>{_t.textRegionalSettings}</BlockTitle>
<List mediaList> <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> </List>
<BlockTitle>{_t.textCommentingDisplay}</BlockTitle> <BlockTitle>{_t.textCommentingDisplay}</BlockTitle>
<List> <List>
@ -106,10 +108,27 @@ const PageRegionalSettings = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true }); const _t = t("View.Settings", { returnObjects: true });
const storeApplicationSettings = props.storeApplicationSettings; const storeApplicationSettings = props.storeApplicationSettings;
const regData = storeApplicationSettings.regData;
const regCode = storeApplicationSettings.regCode;
return ( return (
<Page> <Page className="regional-settings">
<Navbar title={_t.textRegionalSettings} backLink={_t.textBack} /> <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> </Page>
) )
} }