+
{stateDistance + ' ' + metricText}
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
index 541fd9a02..f58a36cd3 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx
@@ -564,22 +564,27 @@ const PageNumbers = observer(props => {
return (
-
- {numberArrays.map( number => (
- {
- storeTextSettings.resetNumbers(number.subtype);
- props.onNumber(number.subtype);
- }}>
-
-
-
-
- ))}
-
+ {numberArrays.map((numbers, index) => (
+
+ {numbers.map((number) => (
+ {
+ storeTextSettings.resetNumbers(number.type);
+ props.onNumber(number.type);
+ }}>
+ {number.thumb.length < 1 ?
+
+
+ :
+
+ }
+
+ ))}
+
+ ))}
- )
+ );
});
const PageBulletsAndNumbers = props => {
diff --git a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx
index 2007144e9..df847774b 100644
--- a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx
+++ b/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx
@@ -1,8 +1,9 @@
import React, {Fragment, useState} from "react";
import { observer, inject } from "mobx-react";
-import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
+import {f7, Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
import { useTranslation } from "react-i18next";
import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js';
+import { LocalStorage } from "../../../../../common/mobile/utils/LocalStorage.js";
const PageApplicationSettings = props => {
const { t } = useTranslation();
@@ -51,6 +52,7 @@ const PageApplicationSettings = props => {
+
}
{/* {_isShowMacros && */}
@@ -64,6 +66,38 @@ const PageApplicationSettings = 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 (
+
+
+ {switchRTLMode(!toggle), setRTLMode(!toggle)}}>
+
+
+
+ )
+}
+
const PageMacrosSettings = props => {
const { t } = useTranslation();
const _t = t("View.Settings", { returnObjects: true });
diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json
index 28f851bee..7d19d74b2 100644
--- a/apps/spreadsheeteditor/mobile/locale/en.json
+++ b/apps/spreadsheeteditor/mobile/locale/en.json
@@ -682,7 +682,11 @@
"txtSemicolon": "Semicolon",
"txtSpace": "Space",
"txtTab": "Tab",
- "warnDownloadAs": "If you continue saving in this format all features except the text will be lost.
Are you sure you want to continue?"
+ "warnDownloadAs": "If you continue saving in this format all features except the text will be lost.
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"
}
}
}
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/app.js b/apps/spreadsheeteditor/mobile/src/app.js
index 923799f29..7763b36a8 100644
--- a/apps/spreadsheeteditor/mobile/src/app.js
+++ b/apps/spreadsheeteditor/mobile/src/app.js
@@ -15,10 +15,17 @@ window.jQuery = jQuery;
window.$ = jQuery;
// Import Framework7 Styles
-import 'framework7/framework7-bundle.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
@@ -28,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);
diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx
index 30fc9aeb1..1db802bf4 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/settings/ApplicationSettings.jsx
@@ -88,6 +88,10 @@ class ApplicationSettingsController extends Component {
Common.Notifications.trigger('changeRegSettings');
}
+ changeDirection(value) {
+ LocalStorage.setItem('mode-direction', value);
+ }
+
render() {
return (
)
}
diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less
index 6285cf3a8..8dc8c6a6e 100644
--- a/apps/spreadsheeteditor/mobile/src/less/app.less
+++ b/apps/spreadsheeteditor/mobile/src/less/app.less
@@ -3,6 +3,7 @@
@import '../../../../common/mobile/resources/less/_mixins.less';
@import '../../../../common/mobile/resources/less/colors-table.less';
@import '../../../../common/mobile/resources/less/colors-table-dark.less';
+@import './app.rtl.less';
// @themeColor: #40865c;
@brandColor: var(--brand-cell);
diff --git a/apps/spreadsheeteditor/mobile/src/less/app.rtl.less b/apps/spreadsheeteditor/mobile/src/less/app.rtl.less
new file mode 100644
index 000000000..5103b8a76
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/less/app.rtl.less
@@ -0,0 +1,2 @@
+@import '../../../../common/mobile/resources/less/common.rtl.less';
+@import '../../../../common/mobile/resources/less/icons.rtl.less';
diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-common.less b/apps/spreadsheeteditor/mobile/src/less/icons-common.less
index 392f464ef..b81569a9e 100644
--- a/apps/spreadsheeteditor/mobile/src/less/icons-common.less
+++ b/apps/spreadsheeteditor/mobile/src/less/icons-common.less
@@ -78,9 +78,9 @@
}
}
-// Formats
-
i.icon {
+ // Formats
+
&.icon-format-xlsx {
width: 22px;
height: 22px;
@@ -106,4 +106,37 @@ i.icon {
height: 22px;
.encoded-svg-background('
');
}
+
+ // Text orientation
+
+ &.icon-text-orientation-horizontal {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-mask('
');
+ }
+ &.icon-text-orientation-anglecount {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-mask('
');
+ }
+ &.icon-text-orientation-angleclock {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-mask('
');
+ }
+ &.icon-text-orientation-vertical {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-mask('
');
+ }
+ &.icon-text-orientation-rotateup {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-mask('
');
+ }
+ &.icon-text-orientation-rotatedown {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-mask('
');
+ }
}
diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
index 0bddf695a..90d210542 100644
--- a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
+++ b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less
@@ -381,37 +381,6 @@
height: 24px;
.encoded-svg-mask('
');
}
- // Text orientation
- &.icon-text-orientation-horizontal {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('
');
- }
- &.icon-text-orientation-anglecount {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('
');
- }
- &.icon-text-orientation-angleclock {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('
');
- }
- &.icon-text-orientation-vertical {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('
');
- }
- &.icon-text-orientation-rotateup {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('
');
- }
- &.icon-text-orientation-rotatedown {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('
');
- }
}
.tab-link-active {
diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-material.less b/apps/spreadsheeteditor/mobile/src/less/icons-material.less
index 39773e019..d69f5fd41 100644
--- a/apps/spreadsheeteditor/mobile/src/less/icons-material.less
+++ b/apps/spreadsheeteditor/mobile/src/less/icons-material.less
@@ -329,37 +329,6 @@
height: 24px;
.encoded-svg-background('
');
}
- // Text orientation
- &.icon-text-orientation-horizontal {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('
');
- }
- &.icon-text-orientation-anglecount {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('
');
- }
- &.icon-text-orientation-angleclock {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('
');
- }
- &.icon-text-orientation-vertical {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('
');
- }
- &.icon-text-orientation-rotateup {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('
');
- }
- &.icon-text-orientation-rotatedown {
- width: 24px;
- height: 24px;
- .encoded-svg-mask('
');
- }
&.icon-plus {
width: 22px;
height: 22px;
diff --git a/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js
index 0abd39934..fdf83b3b3 100644
--- a/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js
+++ b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js
@@ -24,10 +24,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;
macrosRequest = 0;
@@ -39,6 +42,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' },
diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx
index 30a319d05..9a245d186 100644
--- a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx
@@ -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 => {
+
+
+
+
{/* } */}
{/* {_isShowMacros && */}
@@ -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 (
+
+
+
+ changeDirection('ltr')}>
+ changeDirection('rtl')}>
+
+
+ );
+}
+
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
};
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
index 01386fbfd..69780dd76 100644
--- a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
@@ -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
}
];
diff --git a/vendor/framework7-react/build/webpack.config.js b/vendor/framework7-react/build/webpack.config.js
index 25a403832..d47c5e65d 100644
--- a/vendor/framework7-react/build/webpack.config.js
+++ b/vendor/framework7-react/build/webpack.config.js
@@ -98,14 +98,14 @@ module.exports = {
}
}),
'css-loader',
- {
- loader: 'postcss-loader',
- options: {
- config: {
- path: path.resolve(__dirname, '..'),
- }
- },
- },
+ {
+ loader: 'postcss-loader',
+ options: {
+ postcssOptions: {
+ path: path.resolve(__dirname, '..'),
+ }
+ }
+ },
],
},
{
@@ -117,27 +117,27 @@ module.exports = {
publicPath: '../'
}
}),
- 'css-loader?url=false',
- {
- loader: 'postcss-loader',
- options: {
- config: {
- path: path.resolve(__dirname, '..'),
- }
- },
- },
- {
- loader: "less-loader",
- options: {
- lessOptions: {
- javascriptEnabled: true,
- globalVars: {
- "common-image-path": env === 'production' ? `../../../${editor}/mobile/resources/img` : '../../common/mobile/resources/img',
- "app-image-path": env === 'production' ? '../resources/img' : './resources/img',
- }
+ 'css-loader?url=false',
+ {
+ loader: 'postcss-loader',
+ options: {
+ postcssOptions: {
+ path: path.resolve(__dirname, '..'),
+ }
+ }
+ },
+ {
+ loader: "less-loader",
+ options: {
+ lessOptions: {
+ javascriptEnabled: true,
+ globalVars: {
+ "common-image-path": env === 'production' ? `../../../${editor}/mobile/resources/img` : '../../common/mobile/resources/img',
+ "app-image-path": env === 'production' ? '../resources/img' : './resources/img',
}
}
- },
+ }
+ },
],
},
{
@@ -198,6 +198,10 @@ module.exports = {
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
+ // new WebpackRTLPlugin({
+ // filename: 'css/[name].rtl.css',
+ // diffOnly: true
+ // }),
new HtmlWebpackPlugin({
filename: `../../../apps/${editor}/mobile/index.html`,
template: `../../apps/${editor}/mobile/src/index_dev.html`,
diff --git a/vendor/framework7-react/package.json b/vendor/framework7-react/package.json
index 7e389cd75..81c6f09ed 100644
--- a/vendor/framework7-react/package.json
+++ b/vendor/framework7-react/package.json
@@ -33,6 +33,7 @@
"framework7-react": "^6.0.4",
"i18next": "^19.8.4",
"i18next-fetch-backend": "^3.0.0",
+ "postcss": "^8.4.12",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
@@ -65,7 +66,7 @@
"mobx": "^6.1.8",
"mobx-react": "^7.1.0",
"ora": "^4.1.1",
- "postcss-loader": "^3.0.0",
+ "postcss-loader": "^5.3.0",
"postcss-preset-env": "^6.7.0",
"rimraf": "^3.0.2",
"style-loader": "^1.3.0",
diff --git a/vendor/framework7-react/postcss.config.js b/vendor/framework7-react/postcss.config.js
index f88a19cc8..a8baa9d42 100644
--- a/vendor/framework7-react/postcss.config.js
+++ b/vendor/framework7-react/postcss.config.js
@@ -1,5 +1,6 @@
+
module.exports = (ctx) => ({
plugins: {
- 'postcss-preset-env': {},
+ 'postcss-preset-env': {}
},
});