[DE mobile] Correct import styles

apps/documenteditor/mobile/locale/en.json

@@ -589,8 +589,9 @@
     "textLocation": "Location",
     "textMacrosSettings": "Macros Settings",
     "textDirection": "Direction",
-    "textLtr": "LTR",
+    "textLeftToRight": "Left To Right",
-    "textRtl": "RTL",
+    "textRightToLeft": "Right To Left",
+    "textRestartApplication": "Please restart the application for the changes to take effect",
     "textMargins": "Margins",
     "textMarginsH": "Top and bottom margins are too high for a given page height",
     "textMarginsW": "Left and right margins are too wide for a given page width",

apps/documenteditor/mobile/src/app.js

@@ -16,26 +16,16 @@ window.$ = jQuery;
 
 // Import Framework7 Styles
 
-const directionMode = +localStorage.getItem('direction') || 0;
 const htmlElem = document.querySelector('html');
+const direction = LocalStorage.getItem('mode-direction');
 
-if(directionMode === 1) {
+direction === 'rtl' ? htmlElem.setAttribute('dir', 'rtl') : htmlElem.setAttribute('dir', 'ltr');
-    import('framework7/framework7-bundle-rtl.css')
+
-        .then(module => {
+import(`framework7/framework7-bundle${direction === 'rtl' ? '-rtl' : ''}.css`);
-            // console.log(module);
-            htmlElem.setAttribute('dir', 'rtl')
-    });
-} else {
-    import('framework7/framework7-bundle.css')
-        .then(module => {
-            // console.log(module);
-            htmlElem.setAttribute('dir', 'ltr')
-    });
-}
 
 // Import Icons and App Custom Styles
 // import '../css/icons.css';
-import './less/app.less';
+import('./less/app.less');
 
 // Import App Component
 
@@ -45,6 +35,7 @@ import i18n from './lib/i18n';
 
 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/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx

@@ -64,7 +64,7 @@ class ApplicationSettingsController extends Component {
     }
 
     changeDirection(value) {
-       localStorage.setItem('direction', value);
+       localStorage.setItem('mode-direction', value);
     }
 
     render() {

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

@@ -1,4 +1,5 @@
 import {makeObservable, action, observable} from 'mobx';
+import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage';
 
 export class storeApplicationSettings {
     constructor() {
@@ -29,10 +30,10 @@ export class storeApplicationSettings {
     isComments = false;
     isResolvedComments = false;
     macrosMode = 0;
-    directionMode = +localStorage.getItem('direction') || 0;
+    directionMode = localStorage.getItem('mode-direction') || 'ltr';
 
     changeDirectionMode(value) {
-        this.directionMode = +value;
+        this.directionMode = value;
     }
 
     changeUnitMeasurement(value) {

apps/documenteditor/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 } from "framework7-react";
+import { Page, Navbar, List, ListItem, BlockTitle, Toggle, f7 } from "framework7-react";
 import { useTranslation } from "react-i18next";
 import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js';
 
@@ -123,14 +123,24 @@ const PageDirection = props => {
     const changeDirection = value => {
         store.changeDirectionMode(value);
         props.changeDirection(value);
+
+        f7.dialog.create({
+            title: _t.notcriticalErrorTitle,
+            text: t('Settings.textRestartApplication'),
+            buttons: [
+                {
+                    text: _t.textOk
+                }
+            ]
+        }).open();
     };
 
     return (
         <Page>
             <Navbar title={_t.textDirection} backLink={_t.textBack} />
             <List mediaList>
-                <ListItem radio name="direction" title={_t.textLtr} value={0} checked={directionMode === 0} onChange={() => changeDirection(0)}></ListItem>
+                <ListItem radio name="direction" title={_t.textLeftToRight} checked={directionMode === 'ltr'} onChange={() => changeDirection('ltr')}></ListItem>
-                <ListItem radio name="direction" title={_t.textRtl} value={1} checked={directionMode === 1} onChange={() => changeDirection(1)}></ListItem>
+                <ListItem radio name="direction" title={_t.textRightToLeft} checked={directionMode === 'rtl'} onChange={() => changeDirection('rtl')}></ListItem>
             </List>
         </Page>
     );