[SSE mobile] Add import styles

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

@@ -100,7 +100,7 @@ const PageApplicationSettings = props => {
             </List>
 
             <List mediaList>
-                <ListItem title={_t.textDirection} link="/direction/" routeProps={{changeDirection: props.changeDirection}}></ListItem>
+                <ListItem title={t('Settings.textDirection')} link="/direction/" routeProps={{changeDirection: props.changeDirection}}></ListItem>
             </List>
 
             {_isShowMacros &&
@@ -137,10 +137,10 @@ const PageDirection = props => {
 
     return (
         <Page>
-            <Navbar title={_t.textDirection} backLink={_t.textBack} />
+            <Navbar title={t('Settings.textDirection')} backLink={_t.textBack} />
             <List mediaList>
-                <ListItem radio name="direction" title={_t.textLeftToRight} checked={directionMode === 'ltr'} onChange={() => changeDirection('ltr')}></ListItem>
+                <ListItem radio name="direction" title={t('Settings.textLeftToRight')} checked={directionMode === 'ltr'} onChange={() => changeDirection('ltr')}></ListItem>
-                <ListItem radio name="direction" title={_t.textRightToLeft} checked={directionMode === 'rtl'} onChange={() => changeDirection('rtl')}></ListItem>
+                <ListItem radio name="direction" title={t('Settings.textRightToLeft')} checked={directionMode === 'rtl'} onChange={() => changeDirection('rtl')}></ListItem>
             </List>
         </Page>
     );

apps/spreadsheeteditor/mobile/locale/en.json

@@ -680,7 +680,11 @@
       "txtSemicolon": "Semicolon",
       "txtSpace": "Space",
       "txtTab": "Tab",
-      "warnDownloadAs": "If you continue saving in this format all features except the text will be lost.<br>Are you sure you want to continue?"
+      "warnDownloadAs": "If you continue saving in this format all features except the text will be lost.<br>Are you sure you want to continue?",
+      "textLeftToRight": "Left To Right",
+      "textRightToLeft": "Right To Left",
+      "textDirection": "Direction",
+      "textRestartApplication": "Please restart the application for the changes to take effect"
     }
   }
 }

apps/spreadsheeteditor/mobile/src/app.js

@@ -15,11 +15,17 @@ window.jQuery = jQuery;
 window.$ = jQuery;
 
 // Import Framework7 Styles
-// import 'framework7/framework7-bundle.css';
+
-import 'framework7/framework7-bundle-rtl.css';
+const htmlElem = document.querySelector('html');
+const direction = LocalStorage.getItem('mode-direction');
+
+direction === 'rtl' ? htmlElem.setAttribute('dir', 'rtl') : htmlElem.setAttribute('dir', 'ltr');
+
+import(`framework7/framework7-bundle${direction === 'rtl' ? '-rtl' : ''}.css`);
 
 // Import App Custom Styles
-import './less/app.less';
+
+import('./less/app.less');
 import '../../../../../sdkjs/cell/css/main-mobile.css'
 
 // Import App Component
@@ -29,6 +35,7 @@ import i18n from './lib/i18n.js';
 
 import { Provider } from 'mobx-react';
 import { stores } from './store/mainStore';
+import { LocalStorage } from '../../../common/mobile/utils/LocalStorage';
 
 // Init F7 React Plugin
 Framework7.use(Framework7React);

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

@@ -88,6 +88,10 @@ class ApplicationSettingsController extends Component {
         Common.Notifications.trigger('changeRegSettings');
     }
 
+    changeDirection(value) {
+        LocalStorage.setItem('mode-direction', value);
+    }
+
     render() {
         return (
             <ApplicationSettings 
@@ -100,6 +104,7 @@ class ApplicationSettingsController extends Component {
                 onChangeMacrosSettings={this.onChangeMacrosSettings}  
                 onFormulaLangChange={this.onFormulaLangChange}     
                 onRegSettings={this.onRegSettings}   
+                changeDirection={this.changeDirection}
             />
         )
     }

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

@@ -22,10 +22,13 @@ export class storeApplicationSettings {
             changeDisplayComments: action, 
             changeDisplayResolved: action, 
             changeRefStyle: action, 
-            changeFormulaLang: action
+            changeFormulaLang: action,
+            directionMode: observable,
+            changeDirectionMode: action
         });
     }
     
+    directionMode = LocalStorage.getItem('mode-direction') || 'ltr';
     unitMeasurement = Common.Utils.Metric.getCurrentMetric();
     macrosMode = 0;
     formulaLang = LocalStorage.getItem('sse-settings-func-lang') || this.getFormulaLanguages()[0].value;
@@ -36,6 +39,10 @@ export class storeApplicationSettings {
     isComments = true;
     isResolvedComments = true; 
 
+    changeDirectionMode(value) {
+        this.directionMode = value;
+    }
+
     getFormulaLanguages() {
         const dataLang = [
             { value: 'en', displayValue: 'English', exampleValue: ' SUM; MIN; MAX; COUNT' },

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

@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from "react";
 import { observer, inject } from "mobx-react";
-import { Page, Navbar, List, ListItem, BlockTitle, Toggle, Icon } from "framework7-react";
+import { Page, Navbar, List, ListItem, BlockTitle, Toggle, Icon, f7 } from "framework7-react";
 import { useTranslation } from "react-i18next";
 import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js';
 
@@ -97,6 +97,10 @@ const PageApplicationSettings = props => {
                         </Toggle>
                     </ListItem>
                 </List>
+
+                <List mediaList>
+                    <ListItem title={t("View.Settings.textDirection")} link="/direction/" routeProps={{changeDirection: props.changeDirection}}></ListItem>
+                </List>
             {/* } */}
             {/* {_isShowMacros && */}
                 <List>
@@ -109,6 +113,38 @@ const PageApplicationSettings = props => {
     );
 };
 
+const PageDirection = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Settings", { returnObjects: true });
+    const store = props.storeApplicationSettings;
+    const directionMode = store.directionMode;
+
+    const changeDirection = value => {
+        store.changeDirectionMode(value);
+        props.changeDirection(value);
+
+        f7.dialog.create({
+            title: _t.notcriticalErrorTitle,
+            text: t('View.Settings.textRestartApplication'),
+            buttons: [
+                {
+                    text: _t.textOk
+                }
+            ]
+        }).open();
+    };
+
+    return (
+        <Page>
+            <Navbar title={t('View.Settings.textDirection')} backLink={_t.textBack} />
+            <List mediaList>
+                <ListItem radio name="direction" title={t('View.Settings.textLeftToRight')} checked={directionMode === 'ltr'} onChange={() => changeDirection('ltr')}></ListItem>
+                <ListItem radio name="direction" title={t('View.Settings.textRightToLeft')} checked={directionMode === 'rtl'} onChange={() => changeDirection('rtl')}></ListItem>
+            </List>
+        </Page>
+    );
+}
+
 const PageRegionalSettings = props => {
     const { t } = useTranslation();
     const _t = t("View.Settings", { returnObjects: true });
@@ -194,10 +230,12 @@ const ApplicationSettings = inject("storeApplicationSettings", "storeAppOptions"
 const MacrosSettings = inject("storeApplicationSettings")(observer(PageMacrosSettings));
 const RegionalSettings = inject("storeApplicationSettings")(observer(PageRegionalSettings));
 const FormulaLanguage = inject("storeApplicationSettings")(observer(PageFormulaLanguage));
+const Direction = inject("storeApplicationSettings")(observer(PageDirection));
 
 export {
     ApplicationSettings, 
     MacrosSettings,
     RegionalSettings,
-    FormulaLanguage
+    FormulaLanguage,
+    Direction
 };

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

@@ -12,6 +12,7 @@ import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from '.
 import {MacrosSettings, RegionalSettings, FormulaLanguage} from './ApplicationSettings.jsx';
 // import SpreadsheetAbout from './SpreadsheetAbout.jsx';
 import About from '../../../../../common/mobile/lib/view/About';
+import { Direction } from '../../../../../spreadsheeteditor/mobile/src/view/settings/ApplicationSettings';
 
 const routes = [
     {
@@ -61,6 +62,10 @@ const routes = [
     {
         path: '/about/',
         component: About
+    },
+    {
+        path: '/direction/',
+        component: Direction
     }
 ];