[PE] Adding LTR/RTL mode changes

apps/presentationeditor/mobile/src/app.js

@@ -14,12 +14,14 @@ import jQuery from 'jquery';
 window.jQuery = jQuery;
 window.$ = jQuery;
 
-// Import Framework7 Styles
+// Import Framework7 or Framework7-RTL Styles
-// import 'framework7/framework7-bundle.css';
+let direction = LocalStorage.getItem('mode-direction');
-import 'framework7/framework7-bundle-rtl.css';
+
+import(`framework7/framework7-bundle${direction === 'rtl' ? '-rtl' : ''}.css`)
+.then(() => direction === 'rtl' ? $$('html').attr('dir', 'rtl') : $$('html').removeAttr('dir'));
 
 // Import App Custom Styles
-import './less/app.less';
+import('./less/app.less');
 
 // Import App Component
 import App from './page/app';
@@ -28,6 +30,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/presentationeditor/mobile/src/less/app-rtl.less

@@ -1,3 +1,5 @@
+@import '../../../../common/mobile/resources/less/common-rtl.less';
+
 [dir="rtl"] {
 
     i.icon {

apps/presentationeditor/mobile/src/less/app.less

@@ -2,6 +2,7 @@
 @import '../../../../common/mobile/resources/less/_mixins.less';
 @import '../../../../common/mobile/resources/less/colors-table.less';
 @import '../../../../common/mobile/resources/less/colors-table-dark.less';
+@import './app-rtl.less';
 
 @brandColor: var(--brand-slide);
 
@@ -24,7 +25,6 @@
 
 @import '../../../../common/mobile/resources/less/collaboration.less';
 @import '../../../../common/mobile/resources/less/common.less';
-@import '../../../../common/mobile/resources/less/common-rtl.less';
 @import '../../../../common/mobile/resources/less/common-ios.less';
 @import '../../../../common/mobile/resources/less/common-material.less';
 @import '../../../../common/mobile/resources/less/icons.less';
@@ -35,7 +35,6 @@
 @import '../../../../common/mobile/resources/less/comments.less';
 @import './app-material.less';
 @import './app-ios.less';
-@import './app-rtl.less';
 @import './icons-ios.less';
 @import './icons-material.less';
 @import './icons-common.less';

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

@@ -1,8 +1,9 @@
 import React, {Fragment, useState} from "react";
 import { observer, inject } from "mobx-react";
-import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
+import {f7, Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
 import { useTranslation } from "react-i18next";
 import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js';
+import { LocalStorage } from "../../../../../common/mobile/utils/LocalStorage.js";
 
 const PageApplicationSettings = props => {
     const { t } = useTranslation();
@@ -51,6 +52,7 @@ const PageApplicationSettings = props => {
                             </Toggle>
                         </ListItem>
                     </List>
+                    <RTLSetting />
                 </Fragment>
             }
             {/* {_isShowMacros && */}
@@ -64,6 +66,26 @@ const PageApplicationSettings = props => {
     );
 };
 
+const RTLSetting = () => {
+    let direction = LocalStorage.getItem('mode-direction');
+    const [isRTLMode, setRTLMode] = useState(direction === 'rtl' ? true : false);
+
+    const switchRTLMode = rtl => {
+        LocalStorage.setItem("mode-direction", rtl ? 'rtl' : 'ltr');
+        f7.dialog.alert('Please restart the application for the changes to take effect');
+    }
+
+    return (
+        <List>
+            <ListItem title="RTL">
+                <Toggle checked={isRTLMode}
+                    onToggleChange={toggle => {switchRTLMode(!toggle), setRTLMode(!toggle)}}>
+                </Toggle>
+            </ListItem>            
+        </List>
+    )
+}
+
 const PageMacrosSettings = props => {
     const { t } = useTranslation();
     const _t = t("View.Settings", { returnObjects: true });