Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE mobile] Add import styles

Browse source
This commit is contained in:
SergeyEzhin 2022-04-26 18:12:25 +04:00
parent 72ef56710d
commit 1d452c9f76
7 changed files with 78 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx
View file

@ -100,7 +100,7 @@ const PageApplicationSettings = props => {
</List>
<List mediaList>
<ListItem title={_t.textDirection} link="/direction/" routeProps={{changeDirection: props.changeDirection}}></ListItem>
<ListItem title={t('Settings.textDirection')} link="/direction/" routeProps={{changeDirection: props.changeDirection}}></ListItem>
</List>
{_isShowMacros &&
@ -137,10 +137,10 @@ const PageDirection = props => {
return (
<Page>
<Navbar title={_t.textDirection} backLink={_t.textBack} />
<Navbar title={t('Settings.textDirection')} backLink={_t.textBack} />
<List mediaList>
<ListItem radio name="direction" title={_t.textLeftToRight} checked={directionMode === 'ltr'} onChange={() => changeDirection('ltr')}></ListItem>
<ListItem radio name="direction" title={_t.textRightToLeft} checked={directionMode === 'rtl'} onChange={() => changeDirection('rtl')}></ListItem>
<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>
);

6
apps/spreadsheeteditor/mobile/locale/en.json
View file

@ -680,7 +680,11 @@
"txtSemicolon": "Semicolon",
"txtSpace": "Space",
"txtTab": "Tab",
"warnDownloadAs": "If you continue saving in this format all features except the text will be lost.<br>Are you sure you want to continue?"
"warnDownloadAs": "If you continue saving in this format all features except the text will be lost.<br>Are you sure you want to continue?",
"textLeftToRight": "Left To Right",
"textRightToLeft": "Right To Left",
"textDirection": "Direction",
"textRestartApplication": "Please restart the application for the changes to take effect"
}
}
}

13
apps/spreadsheeteditor/mobile/src/app.js
View file

@ -15,11 +15,17 @@ window.jQuery = jQuery;
window.$ = jQuery;
// Import Framework7 Styles
// import 'framework7/framework7-bundle.css';
import 'framework7/framework7-bundle-rtl.css';
const htmlElem = document.querySelector('html');
const direction = LocalStorage.getItem('mode-direction');
direction === 'rtl' ? htmlElem.setAttribute('dir', 'rtl') : htmlElem.setAttribute('dir', 'ltr');
import(`framework7/framework7-bundle${direction === 'rtl' ? '-rtl' : ''}.css`);
// Import App Custom Styles
import './less/app.less';
import('./less/app.less');
import '../../../../../sdkjs/cell/css/main-mobile.css'
// Import App Component
@ -29,6 +35,7 @@ import i18n from './lib/i18n.js';
import { Provider } from 'mobx-react';
import { stores } from './store/mainStore';
import { LocalStorage } from '../../../common/mobile/utils/LocalStorage';
// Init F7 React Plugin
Framework7.use(Framework7React);

5
apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx
View file

@ -88,6 +88,10 @@ class ApplicationSettingsController extends Component {
Common.Notifications.trigger('changeRegSettings');
}
changeDirection(value) {
LocalStorage.setItem('mode-direction', value);
}
render() {
return (
<ApplicationSettings
@ -100,6 +104,7 @@ class ApplicationSettingsController extends Component {
onChangeMacrosSettings={this.onChangeMacrosSettings}
onFormulaLangChange={this.onFormulaLangChange}
onRegSettings={this.onRegSettings}
changeDirection={this.changeDirection}
/>
)
}

9
apps/spreadsheeteditor/mobile/src/store/applicationSettings.js
View file

@ -22,10 +22,13 @@ export class storeApplicationSettings {
changeDisplayComments: action,
changeDisplayResolved: action,
changeRefStyle: action,
changeFormulaLang: action
changeFormulaLang: action,
directionMode: observable,
changeDirectionMode: action
});
}
directionMode = LocalStorage.getItem('mode-direction') || 'ltr';
unitMeasurement = Common.Utils.Metric.getCurrentMetric();
macrosMode = 0;
formulaLang = LocalStorage.getItem('sse-settings-func-lang') || this.getFormulaLanguages()[0].value;
@ -36,6 +39,10 @@ export class storeApplicationSettings {
isComments = true;
isResolvedComments = true;
changeDirectionMode(value) {
this.directionMode = value;
}
getFormulaLanguages() {
const dataLang = [
{ value: 'en', displayValue: 'English', exampleValue: ' SUM; MIN; MAX; COUNT' },

42
apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx
View file

@ -1,6 +1,6 @@
import React, {Fragment, useState} from "react";
import { observer, inject } from "mobx-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle, Icon } from "framework7-react";
import { Page, Navbar, List, ListItem, BlockTitle, Toggle, Icon, f7 } from "framework7-react";
import { useTranslation } from "react-i18next";
import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js';
@ -97,6 +97,10 @@ const PageApplicationSettings = props => {
</Toggle>
</ListItem>
</List>
<List mediaList>
<ListItem title={t("View.Settings.textDirection")} link="/direction/" routeProps={{changeDirection: props.changeDirection}}></ListItem>
</List>
{/* } */}
{/* {_isShowMacros && */}
<List>
@ -109,6 +113,38 @@ const PageApplicationSettings = props => {
);
};
const PageDirection = props => {
const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true });
const store = props.storeApplicationSettings;
const directionMode = store.directionMode;
const changeDirection = value => {
store.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 });
@ -194,10 +230,12 @@ 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));
export {
ApplicationSettings,
MacrosSettings,
RegionalSettings,
FormulaLanguage
FormulaLanguage,
Direction
};

5
apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
View file

@ -12,6 +12,7 @@ import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from '.
import {MacrosSettings, RegionalSettings, FormulaLanguage} 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';
const routes = [
{
@ -61,6 +62,10 @@ const routes = [
{
path: '/about/',
component: About
},
{
path: '/direction/',
component: Direction
}
];