pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-28 01:38:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

[common] Add rtl option blocking for non-rtl languages

Browse Source
This commit is contained in:
SergeyEzhin
2024-04-16 14:25:11 +03:00
parent 669badca20
commit 2ecc940453
4 changed files with 80 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/common/mobile/utils/htmlutils.js
View File

@ -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 {

40
apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx
View File

@ -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 => {
}}></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>
);
};

40
apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx
View File

@ -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
}}></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>
);
};

40
apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx
View File

@ -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
}}></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>
);
};