[DE mobile] Added direction change settings

apps/documenteditor/mobile/locale/en.json

@@ -588,6 +588,9 @@
     "textLoading": "Loading...",
     "textLocation": "Location",
     "textMacrosSettings": "Macros Settings",
+    "textDirection": "Direction",
+    "textLtr": "LTR",
+    "textRtl": "RTL",
     "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

@@ -15,14 +15,30 @@ window.jQuery = jQuery;
 window.$ = jQuery;
 
 // Import Framework7 Styles
-// import 'framework7/framework7-bundle.css';
-import 'framework7/framework7-bundle-rtl.css';
+
+const directionMode = +localStorage.getItem('direction') || 0;
+const htmlElem = document.querySelector('html');
+
+if(directionMode === 1) {
+    import('framework7/framework7-bundle-rtl.css')
+        .then(module => {
+            // 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 App Component
+
 import App from './view/app';
 import { I18nextProvider } from 'react-i18next';
 import i18n from './lib/i18n';

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

@@ -63,6 +63,10 @@ class ApplicationSettingsController extends Component {
         LocalStorage.setItem("de-mobile-macros-mode", value);
     }
 
+    changeDirection(value) {
+       localStorage.setItem('direction', value);
+    }
+
     render() {
         return (
             <ApplicationSettings 
@@ -72,7 +76,8 @@ class ApplicationSettingsController extends Component {
                 switchShowTableEmptyLine={this.switchShowTableEmptyLine}
                 switchDisplayComments={this.switchDisplayComments}
                 switchDisplayResolved={this.switchDisplayResolved}  
-                setMacrosSettings={this.setMacrosSettings}               
+                setMacrosSettings={this.setMacrosSettings}  
+                changeDirection={this.changeDirection}             
             />
         )
     }

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

@@ -1,5 +1,4 @@
 import {makeObservable, action, observable} from 'mobx';
-import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage';
 
 export class storeApplicationSettings {
     constructor() {
@@ -17,7 +16,9 @@ export class storeApplicationSettings {
             changeShowTableEmptyLine: action, 
             changeDisplayComments: action, 
             changeDisplayResolved: action, 
-            changeMacrosSettings: action
+            changeMacrosSettings: action,
+            directionMode: observable,
+            changeDirectionMode: action
         })
     }
 
@@ -28,6 +29,11 @@ export class storeApplicationSettings {
     isComments = false;
     isResolvedComments = false;
     macrosMode = 0;
+    directionMode = +localStorage.getItem('direction') || 0;
+
+    changeDirectionMode(value) {
+        this.directionMode = +value;
+    }
 
     changeUnitMeasurement(value) {
         this.unitMeasurement = +value;

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

@@ -99,6 +99,10 @@ const PageApplicationSettings = props => {
                 </ListItem>
             </List>
 
+            <List mediaList>
+                <ListItem title={_t.textDirection} link="/direction/" routeProps={{changeDirection: props.changeDirection}}></ListItem>
+            </List>
+
             {_isShowMacros &&
                 <List mediaList>
                     <ListItem title={_t.textMacrosSettings} link="/macros-settings/" routeProps={{
@@ -110,6 +114,28 @@ const PageApplicationSettings = props => {
     );
 };
 
+const PageDirection = props => {
+    const { t } = useTranslation();
+    const _t = t("Settings", { returnObjects: true });
+    const store = props.storeApplicationSettings;
+    const directionMode = store.directionMode;
+
+    const changeDirection = value => {
+        store.changeDirectionMode(value);
+        props.changeDirection(value);
+    };
+
+    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.textRtl} value={1} checked={directionMode === 1} onChange={() => changeDirection(1)}></ListItem>
+            </List>
+        </Page>
+    );
+}
+
 const PageMacrosSettings = props => {
     const { t } = useTranslation();
     const _t = t("Settings", { returnObjects: true });
@@ -138,5 +164,6 @@ const PageMacrosSettings = props => {
 
 const ApplicationSettings = inject("storeApplicationSettings", "storeAppOptions", "storeReview")(observer(PageApplicationSettings));
 const MacrosSettings = inject("storeApplicationSettings")(observer(PageMacrosSettings));
+const Direction = inject("storeApplicationSettings")(observer(PageDirection));
 
-export {ApplicationSettings, MacrosSettings};
+export {ApplicationSettings, MacrosSettings, Direction};

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

@@ -10,7 +10,7 @@ import DocumentInfoController from "../../controller/settings/DocumentInfo";
 import { DownloadController } from "../../controller/settings/Download";
 import ApplicationSettingsController from "../../controller/settings/ApplicationSettings";
 import { DocumentFormats, DocumentMargins, DocumentColorSchemes } from "./DocumentSettings";
-import { MacrosSettings } from "./ApplicationSettings";
+import { MacrosSettings, Direction } from "./ApplicationSettings";
 import About from '../../../../../common/mobile/lib/view/About';
 import NavigationController from '../../controller/settings/Navigation';
 
@@ -61,6 +61,13 @@ const routes = [
     {
         path: '/navigation/',
         component: NavigationController
+    },
+
+    // Direction 
+
+    {
+        path: '/direction/',
+        component: Direction
     }
 ];
 

apps/spreadsheeteditor/mobile/src/less/app.rtl.less

@@ -0,0 +1,2 @@
+@import '../../../../common/mobile/resources/less/common.rtl.less';
+@import '../../../../common/mobile/resources/less/icons.rtl.less';