From e09963360115430f58a0dcb54b6109cb3165c6c0 Mon Sep 17 00:00:00 2001
From: SergeyEzhin <ezhin@mail.ru>
Date: Fri, 22 Apr 2022 18:12:16 +0400
Subject: [PATCH] [DE mobile] Added direction change settings
---
apps/documenteditor/mobile/locale/en.json | 3 ++
apps/documenteditor/mobile/src/app.js | 20 +++++++++++--
.../settings/ApplicationSettings.jsx | 7 ++++-
.../mobile/src/store/applicationSettings.js | 10 +++++--
.../src/view/settings/ApplicationSettings.jsx | 29 ++++++++++++++++++-
.../mobile/src/view/settings/Settings.jsx | 9 +++++-
.../mobile/src/less/app.rtl.less | 2 ++
7 files changed, 73 insertions(+), 7 deletions(-)
create mode 100644 apps/spreadsheeteditor/mobile/src/less/app.rtl.less
diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json
index ef648a6af..0dfa001e8 100644
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/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",
diff --git a/apps/documenteditor/mobile/src/app.js b/apps/documenteditor/mobile/src/app.js
index c6e174778..7de588e1f 100644
--- a/apps/documenteditor/mobile/src/app.js
+++ b/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';
diff --git a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx
index 98f516d09..a36d2f73a 100644
--- a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx
+++ b/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}
/>
)
}
diff --git a/apps/documenteditor/mobile/src/store/applicationSettings.js b/apps/documenteditor/mobile/src/store/applicationSettings.js
index 0cc34353f..8c5baf33c 100644
--- a/apps/documenteditor/mobile/src/store/applicationSettings.js
+++ b/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;
diff --git a/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx
index f09d4eb2f..9fe5ff358 100644
--- a/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx
+++ b/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};
\ No newline at end of file
+export {ApplicationSettings, MacrosSettings, Direction};
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx
index e22481bfa..2a6ece70f 100644
--- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx
+++ b/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
}
];
diff --git a/apps/spreadsheeteditor/mobile/src/less/app.rtl.less b/apps/spreadsheeteditor/mobile/src/less/app.rtl.less
new file mode 100644
index 000000000..5103b8a76
--- /dev/null
+++ b/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';