Merge branch 'feature/mobile-apps-on-reactjs-pe-application-settings' into feature/mobile-apps-on-reactjs

apps/presentationeditor/mobile/locale/en.json

@@ -35,7 +35,20 @@
       "textPrint": "Print",
       "textPresentationInfo": "Presentation Info",
       "textHelp": "Help",
-      "textAbout": "About"
+      "textAbout": "About",
+      "textBack": "Back",
+      "textUnitOfMeasurement": "Unit Of Measurement",
+      "textCentimeter": "Centimeter",
+      "textPoint": "Point",
+      "textInch": "Inch",
+      "textSpellcheck": "Spell Checking",
+      "textMacrosSettings": "Macros Settings",
+      "textDisableAll": "Disable All",
+      "textDisableAllMacrosWithoutNotification": "Disable all macros without notification",
+      "textShowNotification": "Show Notification",
+      "textDisableAllMacrosWithNotification": "Disable all macros with notification",
+      "textEnableAll": "Enable All",
+      "textEnableAllMacrosWithoutNotification": "Enable all macros without notification"
     }
   }
 }

apps/presentationeditor/mobile/src/controller/settings/ApplicationSettings.jsx

@@ -0,0 +1,43 @@
+import React, { Component } from "react";
+import { ApplicationSettings } from "../../view/settings/ApplicationSettings";
+
+class ApplicationSettingsController extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    setUnitMeasurement(value) {
+        const api = Common.EditorApi.get();
+        value = (value!==null) ? parseInt(value) : Common.Utils.Metric.getDefaultMetric();
+        Common.Utils.Metric.setCurrentMetric(value);
+        // Common.localStorage.setItem("pe-mobile-settings-unit", value);
+        api.asc_SetDocumentUnits((value==Common.Utils.Metric.c_MetricUnits.inch) ? Asc.c_oAscDocumentUnits.Inch : ((value==Common.Utils.Metric.c_MetricUnits.pt) ? Asc.c_oAscDocumentUnits.Point : Asc.c_oAscDocumentUnits.Millimeter));
+    }
+
+    switchSpellCheck(value) {
+        const api = Common.EditorApi.get();
+        // let state = value === '1' ? true : false;
+        // Common.localStorage.setItem("pe-mobile-spellcheck", state ? 1 : 0);
+        // Common.Utils.InternalSettings.set("pe-mobile-spellcheck", state);
+        api.asc_setSpellCheck(value);
+    }
+
+    setMacrosSettings(value) {
+        Common.Utils.InternalSettings.set("pe-mobile-macros-mode", value);
+        // Common.localStorage.setItem("pe-mobile-macros-mode", value);
+    }
+
+
+    render() {
+        return (
+            <ApplicationSettings 
+                setUnitMeasurement={this.setUnitMeasurement}
+                switchSpellCheck={this.switchSpellCheck} 
+                setMacrosSettings={this.setMacrosSettings}               
+            />
+        )
+    }
+}
+
+
+export default ApplicationSettingsController;

apps/presentationeditor/mobile/src/store/applicationSettings.js

@@ -0,0 +1,20 @@
+import {action, observable} from 'mobx';
+
+export class storeApplicationSettings {
+   
+    @observable unitMeasurement = 0;
+    @observable isSpellChecking = true;
+    @observable macrosMode = 0;
+    
+    @action changeUnitMeasurement(value) {
+        this.unitMeasurement = +value;
+    }
+
+    @action changeSpellCheck(value) {
+        this.isSpellChecking = value;
+    }
+
+    @action changeMacrosSettings(value) {
+        this.macrosMode = +value;
+    }
+}

apps/presentationeditor/mobile/src/store/mainStore.js

@@ -2,6 +2,7 @@
 // import {storeDocumentSettings} from './documentSettings';
 // import {storeFocusObjects} from "./focusObjects";
 import {storeUsers} from '../../../../common/mobile/lib/store/users';
+import {storeApplicationSettings} from './applicationSettings';
 // import {storeTextSettings} from "./textSettings";
 // import {storeParagraphSettings} from "./paragraphSettings";
 // import {storeShapeSettings} from "./shapeSettings";
@@ -13,6 +14,7 @@ export const stores = {
     // storeFocusObjects: new storeFocusObjects(),
     // storeDocumentSettings: new storeDocumentSettings(),
     users: new storeUsers(),
+    storeApplicationSettings: new storeApplicationSettings()
     // storeTextSettings: new storeTextSettings(),
     // storeParagraphSettings: new storeParagraphSettings(),
     // storeShapeSettings: new storeShapeSettings(),

apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx

@@ -0,0 +1,90 @@
+import React, {Fragment} from "react";
+import { observer, inject } from "mobx-react";
+import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
+import { useTranslation } from "react-i18next";
+
+const PageApplicationSettings = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Settings", { returnObjects: true });
+    const store = props.storeApplicationSettings;
+    const unitMeasurement = store.unitMeasurement;
+    const isSpellChecking = store.isSpellChecking;
+
+    const changeMeasureSettings = value => {
+        store.changeUnitMeasurement(value);
+        props.setUnitMeasurement(value);
+    };
+
+    // set mode
+    // const appOptions = props.storeAppOptions;
+    // const _isEdit = appOptions.isEdit;
+    // const _isShowMacros = (!appOptions.isDisconnected && appOptions.customization) ? appOptions.customization.macros !== false : true;
+
+    return (
+        <Page>
+            <Navbar title={_t.textApplicationSettings} backLink={_t.textBack} />
+            {/* {_isEdit && */}
+                <Fragment>
+                    <BlockTitle>{_t.textUnitOfMeasurement}</BlockTitle>
+                    <List>
+                        <ListItem radio radioIcon="end" title={_t.textCentimeter} name="unit-of-measurement" checked={unitMeasurement === 0}
+                                  onChange={() => changeMeasureSettings(0)}></ListItem>
+                        <ListItem radio radioIcon="end" title={_t.textPoint} name="unit-of-measurement" checked={unitMeasurement === 1}
+                                  onChange={() => changeMeasureSettings(1)}></ListItem>
+                        <ListItem radio radioIcon="end" title={_t.textInch} name="unit-of-measurement" checked={unitMeasurement === 2}
+                                  onChange={() => changeMeasureSettings(2)}></ListItem>
+                    </List>
+                    <List>
+                        <ListItem>
+                            <span>{_t.textSpellcheck}</span>
+                            <Toggle checked={isSpellChecking}
+                                    onChange={() => {
+                                        store.changeSpellCheck(!isSpellChecking);
+                                        props.switchSpellCheck(!isSpellChecking);
+                                    }}
+                            />
+                        </ListItem>
+                    </List>
+                </Fragment>
+            {/* } */}
+            {/* {_isShowMacros && */}
+                <List mediaList>
+                    <ListItem title={_t.textMacrosSettings} link="/macros-settings/" routeProps={{
+                        setMacrosSettings: props.setMacrosSettings
+                    }}></ListItem>
+                </List>
+            {/* } */}
+        </Page>
+    );
+};
+
+const PageMacrosSettings = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Settings", { returnObjects: true });
+    const store = props.storeApplicationSettings;
+    const macrosMode = store.macrosMode;
+
+    const changeMacros = value => {
+        store.changeMacrosSettings(value);
+        props.setMacrosSettings(value);
+    };
+
+    return (
+        <Page>
+            <Navbar title={_t.textMacrosSettings} backLink={_t.textBack} />
+            <List mediaList>
+                <ListItem radio name="macros-settings" title={_t.textDisableAll} text={_t.textDisableAllMacrosWithoutNotification} 
+                    checked={macrosMode === 2} onChange={() => changeMacros(2)}></ListItem>
+                <ListItem radio name="macros-settings" title={_t.textShowNotification} text={_t.textDisableAllMacrosWithNotification}
+                    checked={macrosMode === 0} onChange={() => changeMacros(0)}></ListItem>
+                <ListItem radio name="macros-settings" title={_t.textEnableAll} text={_t.textEnableAllMacrosWithoutNotification}
+                    checked={macrosMode === 1} onChange={() => changeMacros(1)}></ListItem>
+            </List>
+        </Page>
+    );
+};
+
+const ApplicationSettings = inject("storeApplicationSettings")(observer(PageApplicationSettings));
+const MacrosSettings = inject("storeApplicationSettings")(observer(PageMacrosSettings));
+
+export {ApplicationSettings, MacrosSettings};

apps/presentationeditor/mobile/src/view/settings/Settings.jsx

@@ -3,12 +3,22 @@ import {View,Page,Navbar,NavRight,Link,Popup,Popover,Icon,ListItem,List} from 'f
 import { withTranslation } from 'react-i18next';
 import {f7} from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
+import ApplicationSettingsController from "../../controller/settings/ApplicationSettings";
+import { MacrosSettings } from "./ApplicationSettings";
 
 const routes = [
     {
         path: '/',
         component: 'TSettingsView'
     },
+    {
+        path: '/application-settings/',
+        component: ApplicationSettingsController
+    },
+    {
+        path: '/macros-settings/',
+        component: MacrosSettings
+    }
     /*{
         path: '/presentation-settings/',
         component: PresentationSettingsController,
@@ -45,7 +55,7 @@ const SettingsList = withTranslation()(props => {
                     <ListItem link="#" title={_t.textPresentationSettings} onClick={onoptionclick.bind(this, '/presentation-settings/')}>
                         <Icon slot="media" icon="icon-setup"></Icon>
                     </ListItem>
-                    <ListItem title={_t.textApplicationSettings} link="#">
+                    <ListItem title={_t.textApplicationSettings} link="#" onClick={onoptionclick.bind(this, '/application-settings/')}>
                         <Icon slot="media" icon="icon-app-settings"></Icon>
                     </ListItem>
                     <ListItem title={_t.textDownload} link="#">