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')}

+
+ + } ); };