Skip to content

Commit

Permalink
[common] Add rtl option blocking for non-rtl languages
Browse files Browse the repository at this point in the history
  • Loading branch information
@SergeyEzhin
SergeyEzhin committed Apr 16, 2024
1 parent 669badc commit 2ecc940
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 52 deletions.
12 changes: 11 additions & 1 deletion apps/common/mobile/utils/htmlutils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
40 changes: 23 additions & 17 deletions apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -112,23 +114,27 @@ const PageApplicationSettings = props => {
}}></ListItem>
</List>
}
<List>
<ListItem>
<div>
<span>{t("Settings.textRtlInterface")}</span>
<span className="beta-badge">Beta</span>
</div>
<Toggle checked={directionMode !== 'ltr'}
onToggleChange={() => {
storeApplicationSettings.changeDirectionMode(newDirectionMode);
props.changeDirectionMode(newDirectionMode);
}}
/>
</ListItem>
</List>
<Block>
<p>{t('Settings.textExplanationChangeDirection')}</p>
</Block>
{isRtlLang &&
<>
<List>
<ListItem>
<div>
<span>{t("Settings.textRtlInterface")}</span>
<span className="beta-badge">Beta</span>
</div>
<Toggle checked={directionMode !== 'ltr'}
onToggleChange={() => {
storeApplicationSettings.changeDirectionMode(newDirectionMode);
props.changeDirectionMode(newDirectionMode);
}}
/>
</ListItem>
</List>
<Block>
<p>{t('Settings.textExplanationChangeDirection')}</p>
</Block>
</>
}
</Page>
);
};
Expand Down
40 changes: 23 additions & 17 deletions apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -66,23 +68,27 @@ const PageApplicationSettings = props => {
setMacrosSettings: props.setMacrosSettings
}}></ListItem>
</List>
<List>
<ListItem>
<div>
<span>{t("View.Settings.textRtlInterface")}</span>
<span className="beta-badge">Beta</span>
</div>
<Toggle checked={directionMode !== 'ltr'}
onToggleChange={() => {
storeApplicationSettings.changeDirectionMode(newDirectionMode);
props.changeDirectionMode(newDirectionMode);
}}
/>
</ListItem>
</List>
<Block>
<p>{t('View.Settings.textExplanationChangeDirection')}</p>
</Block>
{isRtlLang &&
<>
<List>
<ListItem>
<div>
<span>{t("View.Settings.textRtlInterface")}</span>
<span className="beta-badge">Beta</span>
</div>
<Toggle checked={directionMode !== 'ltr'}
onToggleChange={() => {
storeApplicationSettings.changeDirectionMode(newDirectionMode);
props.changeDirectionMode(newDirectionMode);
}}
/>
</ListItem>
</List>
<Block>
<p>{t('View.Settings.textExplanationChangeDirection')}</p>
</Block>
</>
}
</Page>
);
};
Expand Down
40 changes: 23 additions & 17 deletions apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -109,23 +111,27 @@ const PageApplicationSettings = props => {
onChangeMacrosSettings: props.onChangeMacrosSettings
}}></ListItem>
</List>
<List>
<ListItem>
<div>
<span>{t("View.Settings.textRtlInterface")}</span>
<span className="beta-badge">Beta</span>
</div>
<Toggle checked={directionMode !== 'ltr'}
onToggleChange={() => {
storeApplicationSettings.changeDirectionMode(newDirectionMode);
props.changeDirectionMode(newDirectionMode);
}}
/>
</ListItem>
</List>
<Block>
<p>{t('View.Settings.textExplanationChangeDirection')}</p>
</Block>
{isRtlLang &&
<>
<List>
<ListItem>
<div>
<span>{t("View.Settings.textRtlInterface")}</span>
<span className="beta-badge">Beta</span>
</div>
<Toggle checked={directionMode !== 'ltr'}
onToggleChange={() => {
storeApplicationSettings.changeDirectionMode(newDirectionMode);
props.changeDirectionMode(newDirectionMode);
}}
/>
</ListItem>
</List>
<Block>
<p>{t('View.Settings.textExplanationChangeDirection')}</p>
</Block>
</>
}
</Page>
);
};
Expand Down

0 comments on commit 2ecc940

Please sign in to comment.