diff --git a/apps/common/mobile/utils/htmlutils.js b/apps/common/mobile/utils/htmlutils.js
index d7b448e1d6..c82345f340 100644
--- a/apps/common/mobile/utils/htmlutils.js
+++ b/apps/common/mobile/utils/htmlutils.js
@@ -24,8 +24,18 @@ function isLocalStorageAvailable() {
}
}
+if(!window.lang) {
+ window.lang = (/(?:&|^)lang=([^&]+)&?/i).exec(window.location.search.substring(1));
+ window.lang = window.lang ? window.lang[1] : '';
+}
+
+window.lang && (window.lang = window.lang.split(/[\-\_]/)[0].toLowerCase());
+
if(isLocalStorageAvailable()) {
- if(localStorage.getItem('mobile-mode-direction') === 'rtl') {
+ const modeDirection = localStorage.getItem('mobile-mode-direction');
+
+ if(modeDirection === 'rtl' || (window.lang === 'ar' && !modeDirection)) {
+ !modeDirection && localStorage.setItem('mobile-mode-direction', 'rtl');
load_stylesheet('./css/framework7-rtl.css');
document.body.classList.add('rtl');
} else {
diff --git a/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx
index 80ed1e26a5..c47af649e3 100644
--- a/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx
+++ b/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx
@@ -25,6 +25,8 @@ const PageApplicationSettings = props => {
// set mode
const appOptions = props.storeAppOptions;
+ const currentLang = appOptions.lang;
+ const isRtlLang = currentLang && /^(ar)$/i.test(currentLang);
const colorTheme = storeThemes.colorTheme;
const themes = storeThemes.themes;
const typeTheme = colorTheme.type;
@@ -112,23 +114,27 @@ const PageApplicationSettings = props => {
}}>
}
-
-
-
- {t("Settings.textRtlInterface")}
- Beta
-
- {
- storeApplicationSettings.changeDirectionMode(newDirectionMode);
- props.changeDirectionMode(newDirectionMode);
- }}
- />
-
-
-
- {t('Settings.textExplanationChangeDirection')}
-
+ {isRtlLang &&
+ <>
+
+
+
+ {t("Settings.textRtlInterface")}
+ Beta
+
+ {
+ storeApplicationSettings.changeDirectionMode(newDirectionMode);
+ props.changeDirectionMode(newDirectionMode);
+ }}
+ />
+
+
+
+ {t('Settings.textExplanationChangeDirection')}
+
+ >
+ }
);
};
diff --git a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx
index 23012d14a5..cc6a2fb22d 100644
--- a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx
+++ b/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx
@@ -19,6 +19,8 @@ const PageApplicationSettings = props => {
// set mode
const appOptions = props.storeAppOptions;
+ const currentLang = appOptions.lang;
+ const isRtlLang = currentLang && /^(ar)$/i.test(currentLang);
const storeThemes = props.storeThemes;
const colorTheme = storeThemes.colorTheme;
const themes = storeThemes.themes;
@@ -66,23 +68,27 @@ const PageApplicationSettings = props => {
setMacrosSettings: props.setMacrosSettings
}}>
-
-
-
- {t("View.Settings.textRtlInterface")}
- Beta
-
- {
- storeApplicationSettings.changeDirectionMode(newDirectionMode);
- props.changeDirectionMode(newDirectionMode);
- }}
- />
-
-
-
- {t('View.Settings.textExplanationChangeDirection')}
-
+ {isRtlLang &&
+ <>
+
+
+
+ {t("View.Settings.textRtlInterface")}
+ Beta
+
+ {
+ storeApplicationSettings.changeDirectionMode(newDirectionMode);
+ props.changeDirectionMode(newDirectionMode);
+ }}
+ />
+
+
+
+ {t('View.Settings.textExplanationChangeDirection')}
+
+ >
+ }
);
};
diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx
index cccb47d17f..dc13c3be71 100644
--- a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx
@@ -31,6 +31,8 @@ const PageApplicationSettings = props => {
// set mode
const appOptions = props.storeAppOptions;
const storeThemes = props.storeThemes;
+ const currentLang = appOptions.lang;
+ const isRtlLang = currentLang && /^(ar)$/i.test(currentLang);
const colorTheme = storeThemes.colorTheme;
const themes = storeThemes.themes;
const isConfigSelectTheme = storeThemes.isConfigSelectTheme;
@@ -109,23 +111,27 @@ const PageApplicationSettings = props => {
onChangeMacrosSettings: props.onChangeMacrosSettings
}}>
-
-
-
- {t("View.Settings.textRtlInterface")}
- Beta
-
- {
- storeApplicationSettings.changeDirectionMode(newDirectionMode);
- props.changeDirectionMode(newDirectionMode);
- }}
- />
-
-
-
- {t('View.Settings.textExplanationChangeDirection')}
-
+ {isRtlLang &&
+ <>
+
+
+
+ {t("View.Settings.textRtlInterface")}
+ Beta
+
+ {
+ storeApplicationSettings.changeDirectionMode(newDirectionMode);
+ props.changeDirectionMode(newDirectionMode);
+ }}
+ />
+
+
+
+ {t('View.Settings.textExplanationChangeDirection')}
+
+ >
+ }
);
};