[SSE mobile] Added Regional Settings
This commit is contained in:
SergeyEzhin
parent
9bb4c5fbaa
commit
9d1ccf2f84
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue