[DE PE SSE mobile] Added beta badge for rtl switch

This commit is contained in:
SergeyEzhin
2024-01-15 10:58:17 +01:00
parent 4961c5442a
commit d0308cba93
19 changed files with 166 additions and 149 deletions

View File

@ -4,6 +4,7 @@
@item-border-color: #c8c7cc;
@darkGreen: #40865c;
@text-normal: var(--text-normal);
@background-warning: #FF9F0A;
--f7-navbar-link-color: @brandColor;
--f7-subnavbar-link-color: @brandColor;
@ -672,6 +673,11 @@
color: @brandColor;
margin-left: 10px;
}
.beta-badge {
background-color: @background-warning;
margin-left: 10px;
}
}

View File

@ -7,7 +7,6 @@
@darkGrey: #757575;
@text-normal: var(--text-normal);
@brand-text-on-brand: var(--brand-text-on-brand);
@touchColor: rgba(255,255,255,0.1);
--f7-navbar-shadow-image: none;
@ -740,4 +739,9 @@
color: @toolbar-icons;
margin-left: 16px;
}
.beta-badge {
background-color: @brand-secondary;
margin-left: 8px;
}
}

View File

@ -1182,6 +1182,18 @@ input[type="number"]::-webkit-inner-spin-button {
margin-right: 20px;
}
// Beta badge
.beta-badge {
font-size: 12px;
font-weight: 400;
line-height: 16px;
letter-spacing: 0.5px;
color: @fill-white;
padding: 2px 4px;
border-radius: 4px;
}

View File

@ -633,6 +633,8 @@
"textAddToFavorites": "Add to Favorites",
"textApplication": "Application",
"textApplicationSettings": "Application Settings",
"textRtlInterface": "RTL Interface",
"textExplanationChangeDirection": "Application will be restarted for RTL interface activation",
"textAuthor": "Author",
"textBack": "Back",
"textBeginningDocument": "Beginning of document",

View File

@ -313,7 +313,6 @@ class MainController extends Component {
{
text: appOptions.canRequestSaveAs || !!appOptions.saveAsUrl || appOptions.isOffline ? t('Main.textSaveAsPdf') : t('Main.textDownloadPdf'),
onClick: () => {
console.log(appOptions.canRequestSaveAs || !!appOptions.saveAsUrl);
this.api.asc_DownloadAs(new Asc.asc_CDownloadOptions(Asc.c_oAscFileType.PDF, appOptions.canRequestSaveAs || !!appOptions.saveAsUrl));
}
},

View File

@ -3,12 +3,15 @@ import { ApplicationSettings } from "../../view/settings/ApplicationSettings";
import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage.mjs';
import {observer, inject} from "mobx-react";
import { ThemesContext } from "../../../../../common/mobile/lib/controller/Themes";
import { withTranslation } from 'react-i18next';
import { f7 } from "framework7-react";
class ApplicationSettingsController extends Component {
constructor(props) {
super(props);
this.switchDisplayComments = this.switchDisplayComments.bind(this);
this.props.storeApplicationSettings.changeUnitMeasurement(Common.Utils.Metric.getCurrentMetric());
this.changeDirectionMode = this.changeDirectionMode.bind(this);
}
static contextType = ThemesContext;
@ -65,10 +68,25 @@ class ApplicationSettingsController extends Component {
LocalStorage.setItem("de-mobile-macros-mode", value);
}
changeDirection(value) {
LocalStorage.setItem('mode-direction', value);
changeDirectionMode(direction) {
const { t } = this.props;
const _t = t("Settings", { returnObjects: true });
this.props.storeApplicationSettings.changeDirectionMode(direction);
LocalStorage.setItem('mode-direction', direction);
f7.dialog.create({
title: _t.notcriticalErrorTitle,
text: t('Settings.textRestartApplication'),
buttons: [
{
text: _t.textOk
}
]
}).open();
}
render() {
return (
<ApplicationSettings
@ -79,7 +97,7 @@ class ApplicationSettingsController extends Component {
switchDisplayComments={this.switchDisplayComments}
switchDisplayResolved={this.switchDisplayResolved}
setMacrosSettings={this.setMacrosSettings}
changeDirection={this.changeDirection}
changeDirectionMode={this.changeDirectionMode}
changeTheme={this.context.changeTheme}
/>
)
@ -87,4 +105,4 @@ class ApplicationSettingsController extends Component {
}
export default inject("storeAppOptions", "storeApplicationSettings")(observer(ApplicationSettingsController));
export default inject("storeAppOptions", "storeApplicationSettings")(observer(withTranslation()(ApplicationSettingsController)));

View File

@ -32,7 +32,6 @@ export class storeApplicationSettings {
isComments = false;
isResolvedComments = false;
macrosMode = 0;
directionMode = LocalStorage.getItem('mode-direction') || 'ltr';
changeDirectionMode(value) {

View File

@ -1,6 +1,6 @@
import React, { Fragment } from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle, f7 } from "framework7-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle, Block } from "framework7-react";
import { useTranslation } from "react-i18next";
const PageApplicationSettings = props => {
@ -15,6 +15,8 @@ const PageApplicationSettings = props => {
const isHiddenTableBorders = storeApplicationSettings.isHiddenTableBorders;
const isComments = storeApplicationSettings.isComments;
const isResolvedComments = storeApplicationSettings.isResolvedComments;
const directionMode = storeApplicationSettings.directionMode;
const newDirectionMode = directionMode !== 'ltr' ? 'ltr' : 'rtl';
const changeMeasureSettings = value => {
storeApplicationSettings.changeUnitMeasurement(value);
@ -108,6 +110,23 @@ 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>
</Page>
);
};
@ -134,38 +153,6 @@ const PageThemeSettings = props => {
)
}
const PageDirection = props => {
const { t } = useTranslation();
const _t = t("Settings", { returnObjects: true });
const storeApplicationSettings = props.storeApplicationSettings;
const directionMode = storeApplicationSettings.directionMode;
const changeDirection = value => {
storeApplicationSettings.changeDirectionMode(value);
props.changeDirection(value);
f7.dialog.create({
title: _t.notcriticalErrorTitle,
text: t('Settings.textRestartApplication'),
buttons: [
{
text: _t.textOk
}
]
}).open();
};
return (
<Page>
<Navbar title={t('Settings.textDirection')} backLink={_t.textBack} />
<List mediaList>
<ListItem radio name="direction" title={t('Settings.textLeftToRight')} checked={directionMode === 'ltr'} onChange={() => changeDirection('ltr')}></ListItem>
<ListItem radio name="direction" title={t('Settings.textRightToLeft')} checked={directionMode === 'rtl'} onChange={() => changeDirection('rtl')}></ListItem>
</List>
</Page>
);
}
const PageMacrosSettings = props => {
const { t } = useTranslation();
const _t = t("Settings", { returnObjects: true });
@ -194,7 +181,6 @@ const PageMacrosSettings = props => {
const ApplicationSettings = inject("storeApplicationSettings", "storeAppOptions", "storeReview", "storeThemes")(observer(PageApplicationSettings));
const MacrosSettings = inject("storeApplicationSettings")(observer(PageMacrosSettings));
const Direction = inject("storeApplicationSettings")(observer(PageDirection));
const ThemeSettings = inject("storeThemes")(observer(PageThemeSettings));
export {ApplicationSettings, MacrosSettings, Direction, ThemeSettings};
export {ApplicationSettings, MacrosSettings, ThemeSettings};

View File

@ -6,7 +6,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, Direction, ThemeSettings } from "./ApplicationSettings";
import { MacrosSettings, ThemeSettings } from "./ApplicationSettings";
import About from '../../../../../common/mobile/lib/view/About';
import NavigationController from '../../controller/settings/Navigation';
import SharingSettings from "../../../../../common/mobile/lib/view/SharingSettings";
@ -63,26 +63,16 @@ const routes = [
path: '/theme-settings/',
component: ThemeSettings
},
// Navigation
{
path: '/navigation',
component: NavigationController
},
// Direction
{
path: '/direction/',
component: Direction
},
// Sharing Settings
{
path: '/sharing-settings/',
component: SharingSettings
},
// Protection
{
path: '/protection',
@ -92,13 +82,11 @@ const routes = [
path: '/protect',
component: ProtectionDocumentController
},
// Encryption
{
path: '/encrypt',
component: FileEncryptionController
},
// Version History
{
path: '/version-history',

View File

@ -467,6 +467,8 @@
"textAddress": "address:",
"textApplication": "Application",
"textApplicationSettings": "Application Settings",
"textRtlInterface": "RTL Interface",
"textExplanationChangeDirection": "Application will be restarted for RTL interface activation",
"textAuthor": "Author",
"textBack": "Back",
"textCaseSensitive": "Case Sensitive",

View File

@ -3,11 +3,14 @@ import { ApplicationSettings } from "../../view/settings/ApplicationSettings";
import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage.mjs';
import {observer, inject} from "mobx-react";
import { ThemesContext } from "../../../../../common/mobile/lib/controller/Themes";
import { withTranslation } from 'react-i18next';
import { f7 } from "framework7-react";
class ApplicationSettingsController extends Component {
constructor(props) {
super(props);
this.props.storeApplicationSettings.changeUnitMeasurement(Common.Utils.Metric.getCurrentMetric());
this.changeDirectionMode = this.changeDirectionMode.bind(this);
}
static contextType = ThemesContext;
@ -29,6 +32,24 @@ class ApplicationSettingsController extends Component {
LocalStorage.setItem("pe-mobile-macros-mode", value);
}
changeDirectionMode(direction) {
const { t } = this.props;
const _t = t("View.Settings", { returnObjects: true });
this.props.storeApplicationSettings.changeDirectionMode(direction);
LocalStorage.setItem('mode-direction', direction);
f7.dialog.create({
title: _t.notcriticalErrorTitle,
text: t('View.Settings.textRestartApplication'),
buttons: [
{
text: _t.textOk
}
]
}).open();
}
render() {
return (
<ApplicationSettings
@ -36,10 +57,11 @@ class ApplicationSettingsController extends Component {
switchSpellCheck={this.switchSpellCheck}
setMacrosSettings={this.setMacrosSettings}
changeTheme={this.context.changeTheme}
changeDirectionMode={this.changeDirectionMode}
/>
)
}
}
export default inject("storeApplicationSettings", "storeAppOptions")(observer(ApplicationSettingsController));
export default inject("storeApplicationSettings", "storeAppOptions")(observer(withTranslation()(ApplicationSettingsController)));

View File

@ -1,4 +1,5 @@
import {action, observable, makeObservable} from 'mobx';
import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage.mjs';
export class storeApplicationSettings {
constructor() {
@ -10,7 +11,9 @@ export class storeApplicationSettings {
changeUnitMeasurement: action,
changeSpellCheck: action,
changeMacrosSettings: action,
changeMacrosRequest: action
changeMacrosRequest: action,
directionMode: observable,
changeDirectionMode: action
});
}
@ -18,6 +21,11 @@ export class storeApplicationSettings {
isSpellChecking = true;
macrosMode = 0;
macrosRequest = 0;
directionMode = LocalStorage.getItem('mode-direction') || 'ltr';
changeDirectionMode(value) {
this.directionMode = value;
}
changeUnitMeasurement(value) {
this.unitMeasurement = +value;

View File

@ -1,8 +1,7 @@
import React, {Fragment, useState} from "react";
import React, { Fragment } from "react";
import { observer, inject } from "mobx-react";
import {f7, Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle, Block } from "framework7-react";
import { useTranslation } from "react-i18next";
import { LocalStorage } from "../../../../../common/mobile/utils/LocalStorage.mjs";
const PageApplicationSettings = props => {
const { t } = useTranslation();
@ -10,6 +9,8 @@ const PageApplicationSettings = props => {
const storeApplicationSettings = props.storeApplicationSettings;
const unitMeasurement = storeApplicationSettings.unitMeasurement;
const isSpellChecking = storeApplicationSettings.isSpellChecking;
const directionMode = storeApplicationSettings.directionMode;
const newDirectionMode = directionMode !== 'ltr' ? 'ltr' : 'rtl';
const changeMeasureSettings = value => {
storeApplicationSettings.changeUnitMeasurement(value);
@ -51,7 +52,6 @@ const PageApplicationSettings = props => {
/>
</ListItem>
</List>
{/*<RTLSetting />*/}
</Fragment>
}
{!!isConfigSelectTheme &&
@ -61,13 +61,28 @@ const PageApplicationSettings = props => {
}}></ListItem>
</List>
}
{/* {_isShowMacros && */}
<List mediaList>
<ListItem title={_t.textMacrosSettings} link="/macros-settings/" routeProps={{
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>
</Page>
);
};
@ -94,38 +109,6 @@ const PageThemeSettings = props => {
)
}
const RTLSetting = () => {
const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true });
let direction = LocalStorage.getItem('mode-direction');
const [isRTLMode, setRTLMode] = useState(direction === 'rtl' ? true : false);
const switchRTLMode = rtl => {
LocalStorage.setItem("mode-direction", rtl ? 'rtl' : 'ltr');
f7.dialog.create({
title: t('View.Settings.notcriticalErrorTitle'),
text: t('View.Settings.textRestartApplication'),
buttons: [
{
text: t('View.Settings.textOk')
}
]
}).open();
}
return (
<List>
<ListItem title={t('View.Settings.textRTL')}>
<Toggle checked={isRTLMode}
onToggleChange={toggle => {switchRTLMode(!toggle), setRTLMode(!toggle)}}>
</Toggle>
</ListItem>
</List>
)
}
const PageMacrosSettings = props => {
const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true });

View File

@ -10,7 +10,6 @@ import { PresentationColorSchemes } from "./PresentationSettings";
import About from '../../../../../common/mobile/lib/view/About';
import SettingsPage from './SettingsPage';
import { MainContext } from '../../page/main';
import SharingSettings from "../../../../../common/mobile/lib/view/SharingSettings";
import VersionHistoryController from '../../../../../common/mobile/lib/controller/VersionHistory';
const routes = [

View File

@ -665,6 +665,8 @@
"textAddress": "Address",
"textApplication": "Application",
"textApplicationSettings": "Application Settings",
"textRtlInterface": "RTL Interface",
"textExplanationChangeDirection": "Application will be restarted for RTL interface activation",
"textAuthor": "Author",
"textBack": "Back",
"textBottom": "Bottom",

View File

@ -4,6 +4,7 @@ import {observer, inject} from "mobx-react";
import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage.mjs';
import { withTranslation } from 'react-i18next';
import { ThemesContext } from "../../../../../common/mobile/lib/controller/Themes";
import { f7 } from "framework7-react";
class ApplicationSettingsController extends Component {
constructor(props) {
@ -13,6 +14,7 @@ class ApplicationSettingsController extends Component {
this.onChangeDisplayComments = this.onChangeDisplayComments.bind(this);
this.onRegSettings = this.onRegSettings.bind(this);
this.initRegSettings = this.initRegSettings.bind(this);
this.changeDirectionMode = this.changeDirectionMode.bind(this);
this.initFormulaLangsCollection = this.initFormulaLangsCollection.bind(this);
this.props.storeApplicationSettings.initRegData();
this.initRegSettings();
@ -119,8 +121,22 @@ class ApplicationSettingsController extends Component {
Common.Notifications.trigger('changeRegSettings');
}
changeDirection(value) {
LocalStorage.setItem('mode-direction', value);
changeDirectionMode(direction) {
const { t } = this.props;
const _t = t("View.Settings", { returnObjects: true });
this.props.storeApplicationSettings.changeDirectionMode(direction);
LocalStorage.setItem('mode-direction', direction);
f7.dialog.create({
title: _t.notcriticalErrorTitle,
text: t('View.Settings.textRestartApplication'),
buttons: [
{
text: _t.textOk
}
]
}).open();
}
render() {
@ -135,7 +151,7 @@ class ApplicationSettingsController extends Component {
onChangeMacrosSettings={this.onChangeMacrosSettings}
onFormulaLangChange={this.onFormulaLangChange}
onRegSettings={this.onRegSettings}
changeDirection={this.changeDirection}
changeDirectionMode={this.changeDirectionMode}
changeTheme={this.context.changeTheme}
/>
)

View File

@ -152,7 +152,7 @@ const PageCellStyle = props => {
let stylesSlide = cellStyles.slice(indexSlide * countStylesSlide, (indexSlide * countStylesSlide) + countStylesSlide);
return (
<SwiperSlide>
<SwiperSlide key={indexSlide}>
<List className="cell-styles-list">
{stylesSlide.map((elem, index) => (
<ListItem key={index} className={elem.name === styleName ? "item-theme active" : "item-theme"} onClick={() => props.onStyleClick(elem.name)}>

View File

@ -1,6 +1,6 @@
import React, { Fragment } from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle, Icon, f7 } from "framework7-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle, Icon, f7, Block } from "framework7-react";
import { useTranslation } from "react-i18next";
const PageApplicationSettings = props => {
@ -20,6 +20,8 @@ const PageApplicationSettings = props => {
const isRefStyle = storeApplicationSettings.isRefStyle;
const isComments = storeApplicationSettings.isComments;
const isResolvedComments = storeApplicationSettings.isResolvedComments;
const directionMode = storeApplicationSettings.directionMode;
const newDirectionMode = directionMode !== 'ltr' ? 'ltr' : 'rtl';
const changeMeasureSettings = value => {
storeApplicationSettings.changeUnitMeasurement(value);
@ -102,18 +104,28 @@ const PageApplicationSettings = props => {
}}></ListItem>
</List>
}
{/*<List mediaList>*/}
{/* <ListItem title={t("View.Settings.textDirection")} link="/direction/" routeProps={{changeDirection: props.changeDirection}}></ListItem>*/}
{/*</List>*/}
{/* } */}
{/* {_isShowMacros && */}
<List>
<ListItem title={_t.textMacrosSettings} link="/macros-settings/" routeProps={{
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>
</Page>
);
};
@ -140,38 +152,6 @@ const PageThemeSettings = props => {
)
};
const PageDirection = props => {
const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true });
const storeApplicationSettings = props.storeApplicationSettings;
const directionMode = storeApplicationSettings.directionMode;
const changeDirection = value => {
storeApplicationSettings.changeDirectionMode(value);
props.changeDirection(value);
f7.dialog.create({
title: _t.notcriticalErrorTitle,
text: t('View.Settings.textRestartApplication'),
buttons: [
{
text: _t.textOk
}
]
}).open();
};
return (
<Page>
<Navbar title={t('View.Settings.textDirection')} backLink={_t.textBack} />
<List mediaList>
<ListItem radio name="direction" title={t('View.Settings.textLeftToRight')} checked={directionMode === 'ltr'} onChange={() => changeDirection('ltr')}></ListItem>
<ListItem radio name="direction" title={t('View.Settings.textRightToLeft')} checked={directionMode === 'rtl'} onChange={() => changeDirection('rtl')}></ListItem>
</List>
</Page>
);
}
const PageRegionalSettings = props => {
const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true });
@ -257,7 +237,6 @@ const ApplicationSettings = inject("storeApplicationSettings", "storeAppOptions"
const MacrosSettings = inject("storeApplicationSettings")(observer(PageMacrosSettings));
const RegionalSettings = inject("storeApplicationSettings")(observer(PageRegionalSettings));
const FormulaLanguage = inject("storeApplicationSettings")(observer(PageFormulaLanguage));
const Direction = inject("storeApplicationSettings")(observer(PageDirection));
const ThemeSettings = inject("storeThemes")(observer(PageThemeSettings));
export {
@ -265,6 +244,5 @@ export {
MacrosSettings,
RegionalSettings,
FormulaLanguage,
Direction,
ThemeSettings
};

View File

@ -7,10 +7,7 @@ import SpreadsheetInfoController from '../../controller/settings/SpreadsheetInfo
import { DownloadWithTranslation } from '../../controller/settings/Download.jsx';
import { SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins } from './SpreadsheetSettings.jsx';
import { MacrosSettings, RegionalSettings, FormulaLanguage, ThemeSettings } from './ApplicationSettings.jsx';
// import SpreadsheetAbout from './SpreadsheetAbout.jsx';
import About from '../../../../../common/mobile/lib/view/About';
import { Direction } from '../../../../../spreadsheeteditor/mobile/src/view/settings/ApplicationSettings';
// import SharingSettings from "../../../../../common/mobile/lib/view/SharingSettings";
import SettingsPage from './SettingsPage';
import { MainContext } from '../../page/main';
import VersionHistoryController from '../../../../../common/mobile/lib/controller/VersionHistory';
@ -69,10 +66,6 @@ const routes = [
path: '/about/',
component: About
},
{
path: '/direction/',
component: Direction
},
// Version History
{
path: '/version-history',