From 0f4f400cec63f8f989b75348008b8a68bdc877f6 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 8 Apr 2022 18:50:26 +0400 Subject: [PATCH 01/15] Changing config and adding rtl support --- apps/documenteditor/mobile/src/app.js | 3 ++- apps/documenteditor/mobile/src/index_dev.html | 2 +- vendor/framework7-react/build/webpack.config.js | 12 ++++++++++-- vendor/framework7-react/package.json | 4 +++- 4 files changed, 16 insertions(+), 5 deletions(-) diff --git a/apps/documenteditor/mobile/src/app.js b/apps/documenteditor/mobile/src/app.js index cc9445153..c6e174778 100644 --- a/apps/documenteditor/mobile/src/app.js +++ b/apps/documenteditor/mobile/src/app.js @@ -15,7 +15,8 @@ window.jQuery = jQuery; window.$ = jQuery; // Import Framework7 Styles -import 'framework7/framework7-bundle.css'; +// import 'framework7/framework7-bundle.css'; +import 'framework7/framework7-bundle-rtl.css'; // Import Icons and App Custom Styles // import '../css/icons.css'; diff --git a/apps/documenteditor/mobile/src/index_dev.html b/apps/documenteditor/mobile/src/index_dev.html index 315fa328e..9d247a82b 100644 --- a/apps/documenteditor/mobile/src/index_dev.html +++ b/apps/documenteditor/mobile/src/index_dev.html @@ -20,7 +20,7 @@ <% } else { %> <% } %> - + diff --git a/vendor/framework7-react/build/webpack.config.js b/vendor/framework7-react/build/webpack.config.js index 25a403832..5f84acf62 100644 --- a/vendor/framework7-react/build/webpack.config.js +++ b/vendor/framework7-react/build/webpack.config.js @@ -2,6 +2,8 @@ const webpack = require('webpack'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); +const WebpackRTLPlugin = require('webpack-rtl-plugin'); +// const rtlcss = require('rtlcss'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); @@ -103,7 +105,8 @@ module.exports = { options: { config: { path: path.resolve(__dirname, '..'), - } + }, + // plugins: [rtlcss] }, }, ], @@ -123,7 +126,8 @@ module.exports = { options: { config: { path: path.resolve(__dirname, '..'), - } + }, + // plugins: [rtlcss] }, }, { @@ -198,6 +202,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..68cbe8734 100644 --- a/vendor/framework7-react/package.json +++ b/vendor/framework7-react/package.json @@ -37,8 +37,10 @@ "react": "^17.0.1", "react-dom": "^17.0.1", "react-i18next": "^11.8.5", + "rtlcss": "^3.5.0", "swiper": "^6.4.8", - "template7": "^1.4.2" + "template7": "^1.4.2", + "webpack-rtl-plugin": "^2.0.0" }, "devDependencies": { "@babel/core": "^7.12.10", From a5af4c395ce02fb557747d3eef46ed435d4cf4f9 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Mon, 11 Apr 2022 21:19:48 +0400 Subject: [PATCH 02/15] Adding rtlcss plugin --- apps/common/mobile/resources/less/about.less | 4 +- apps/documenteditor/mobile/src/app.js | 2 +- apps/documenteditor/mobile/src/index_dev.html | 1 - apps/documenteditor/mobile/src/less/app.less | 1 + .../framework7-react/build/webpack.config.js | 44 +++++++++++-------- vendor/framework7-react/package.json | 4 +- vendor/framework7-react/postcss.config.js | 3 +- 7 files changed, 34 insertions(+), 25 deletions(-) diff --git a/apps/common/mobile/resources/less/about.less b/apps/common/mobile/resources/less/about.less index 6b71c1c41..7b5e3f1e8 100644 --- a/apps/common/mobile/resources/less/about.less +++ b/apps/common/mobile/resources/less/about.less @@ -3,11 +3,11 @@ .about { .page-content { - text-align: center; + text-align: center /*rtl:ignore*/; } .content-block:first-child { - margin: 15px 0; + margin: 15px 0 /*rtl:append20px*/; } .content-block { diff --git a/apps/documenteditor/mobile/src/app.js b/apps/documenteditor/mobile/src/app.js index c6e174778..87819ade0 100644 --- a/apps/documenteditor/mobile/src/app.js +++ b/apps/documenteditor/mobile/src/app.js @@ -16,7 +16,7 @@ window.$ = jQuery; // Import Framework7 Styles // import 'framework7/framework7-bundle.css'; -import 'framework7/framework7-bundle-rtl.css'; +// import 'framework7/framework7-bundle-rtl.css'; // Import Icons and App Custom Styles // import '../css/icons.css'; diff --git a/apps/documenteditor/mobile/src/index_dev.html b/apps/documenteditor/mobile/src/index_dev.html index 9d247a82b..05790b92b 100644 --- a/apps/documenteditor/mobile/src/index_dev.html +++ b/apps/documenteditor/mobile/src/index_dev.html @@ -20,7 +20,6 @@ <% } else { %> <% } %> - diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index c0607a196..c5463bf8d 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -1,3 +1,4 @@ +@import '../../../../../vendor/framework7-react/node_modules/framework7/framework7-bundle.less'; @import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less'; @import '../../../../common/mobile/resources/less/_mixins.less'; @import '../../../../common/mobile/resources/less/colors-table.less'; diff --git a/vendor/framework7-react/build/webpack.config.js b/vendor/framework7-react/build/webpack.config.js index 5f84acf62..71204212e 100644 --- a/vendor/framework7-react/build/webpack.config.js +++ b/vendor/framework7-react/build/webpack.config.js @@ -2,8 +2,10 @@ const webpack = require('webpack'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); -const WebpackRTLPlugin = require('webpack-rtl-plugin'); +// const WebpackRTLPlugin = require('webpack-rtl-plugin'); // const rtlcss = require('rtlcss'); +const postcssRTLCSS = require('postcss-rtlcss'); +const { Mode } = require('postcss-rtlcss/options'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); @@ -100,15 +102,17 @@ module.exports = { } }), 'css-loader', - { - loader: 'postcss-loader', - options: { - config: { - path: path.resolve(__dirname, '..'), - }, - // plugins: [rtlcss] - }, + { + loader: 'postcss-loader', + options: { + postcssOptions: { + path: path.resolve(__dirname, '..'), + plugins: [ + postcssRTLCSS({mode: Mode.combined}) + ] + }, }, + }, ], }, { @@ -122,13 +126,15 @@ module.exports = { }), 'css-loader?url=false', { - loader: 'postcss-loader', - options: { - config: { - path: path.resolve(__dirname, '..'), - }, - // plugins: [rtlcss] + loader: 'postcss-loader', + options: { + postcssOptions: { + path: path.resolve(__dirname, '..'), + plugins: [ + postcssRTLCSS({mode: Mode.combined}) + ] }, + }, }, { loader: "less-loader", @@ -202,10 +208,10 @@ module.exports = { new MiniCssExtractPlugin({ filename: 'css/[name].css', }), - new WebpackRTLPlugin({ - filename: 'css/[name].rtl.css', - diffOnly: true - }), + // 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 68cbe8734..06735dd7f 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", @@ -67,8 +68,9 @@ "mobx": "^6.1.8", "mobx-react": "^7.1.0", "ora": "^4.1.1", - "postcss-loader": "^3.0.0", + "postcss-loader": "^6.2.1", "postcss-preset-env": "^6.7.0", + "postcss-rtlcss": "^3.6.1", "rimraf": "^3.0.2", "style-loader": "^1.3.0", "terser-webpack-plugin": "^5.1.3", 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': {} }, }); From 16c09f3b6a96b2293b0725bb9aec9b4e30ddec91 Mon Sep 17 00:00:00 2001 From: Andrey Shimagin Date: Fri, 15 Apr 2022 16:57:00 +0300 Subject: [PATCH 03/15] [PE] Add RTL-styles --- .../mobile/resources/less/common-rtl.less | 103 ++++++++++++++++++ apps/presentationeditor/mobile/src/app.js | 3 +- .../mobile/src/less/app-rtl.less | 25 +++++ .../mobile/src/less/app.less | 2 + .../framework7-react/build/webpack.config.js | 4 +- vendor/framework7-react/package.json | 3 +- 6 files changed, 136 insertions(+), 4 deletions(-) create mode 100644 apps/common/mobile/resources/less/common-rtl.less create mode 100644 apps/presentationeditor/mobile/src/less/app-rtl.less diff --git a/apps/common/mobile/resources/less/common-rtl.less b/apps/common/mobile/resources/less/common-rtl.less new file mode 100644 index 000000000..fcf2f1505 --- /dev/null +++ b/apps/common/mobile/resources/less/common-rtl.less @@ -0,0 +1,103 @@ +[dir="rtl"].device-android { + + .wrap-comment, .comment-list{ + .comment-header .initials { + margin-right: 0; + margin-left: 10px; + } + } + + .comment-list .item-inner{ + .comment-header { + .right { + justify-content: space-between; + .comment-resolve { + margin-right: 0px; + margin-left: 10px; + } + } + } + } + + .actions-modal { + .actions-button-text { + text-align: right; + } + } +} + +[dir="rtl"].device-ios .app-layout{ + + .subnavbar,.navbar .left a + a { + margin-right: 0; + } + + .subnavbar,.navbar .right a + a { + margin-right: 0; + } + + .tab-buttons { + .tab-link.tab-link:first-child { + border-radius: 0px 5px 5px 0px; + } + + .tab-link.tab-link:last-child { + border-radius: 5px 0px 0px 5px; + } + } + + .list { + .item-inner { + .item-after .segmented { + margin-left: 0px; + margin-right: 10px; + } + } + } +} + +[dir="rtl"] { + i.icon { + &.icon-search, &.icon-link, &.icon-edit-settings, &.icon-app-settings, &.icon-add-shape, &.icon-add-image, + &.icon-image-library, &.icon-text-align-right, &.icon-text-align-left, &.icon-table-add-column-left, + &.icon-table-add-column-right, &.icon-table-add-row-above, &.icon-table-add-row-below, &.icon-table-remove-row, + &.icon-table-remove-column, &.icon-paste, &.icon-copy, &.icon-table-borders-left, &.icon-table-borders-right { + transform: scaleX(-1); + } + } + + .shapes { + .thumb { + transform: scaleX(-1); + } + } + + .settings-popup, + #settings-popover{ + .link { + display: inline; + } + } + + #edit-table-style { + ul { + padding-right: 0; + } + } + + .color-schemes-menu { + .item-title{ + margin-right: 20px; + } + } + + .list [slot="root-start"] { + padding: 15px 15px 0 0px; + } + + .numbers, .bullets, .multilevels { + .item-content { + padding-right: 0; + } + } +} diff --git a/apps/presentationeditor/mobile/src/app.js b/apps/presentationeditor/mobile/src/app.js index 49a9db3fb..fb4d3f9a2 100644 --- a/apps/presentationeditor/mobile/src/app.js +++ b/apps/presentationeditor/mobile/src/app.js @@ -15,7 +15,8 @@ window.jQuery = jQuery; window.$ = jQuery; // Import Framework7 Styles -import 'framework7/framework7-bundle.css'; +// import 'framework7/framework7-bundle.css'; +import 'framework7/framework7-bundle-rtl.css'; // Import App Custom Styles import './less/app.less'; diff --git a/apps/presentationeditor/mobile/src/less/app-rtl.less b/apps/presentationeditor/mobile/src/less/app-rtl.less new file mode 100644 index 000000000..788b1b258 --- /dev/null +++ b/apps/presentationeditor/mobile/src/less/app-rtl.less @@ -0,0 +1,25 @@ +[dir="rtl"] { + + i.icon { + &.icon-setup, &.icon-move-foreground, &.icon-move-background, &.icon-move-forward, + &.icon-move-backward, &.icon-align-left, &.icon-align-right, + &.icon-align-top, &.icon-align-middle, &.icon-align-bottom, &.icon-align-horizontal { + transform: scaleX(-1); + } + } + + .slide-theme .item-theme.active:before { + left: -5px; + right: unset; + } + + .slide-layout { + .item-inner:before { + left: 11px; + right: unset; + } + .row img { + transform: scaleX(-1); + } + } +} \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less index ded0ee9f0..d6c3c9edf 100644 --- a/apps/presentationeditor/mobile/src/less/app.less +++ b/apps/presentationeditor/mobile/src/less/app.less @@ -24,6 +24,7 @@ @import '../../../../common/mobile/resources/less/collaboration.less'; @import '../../../../common/mobile/resources/less/common.less'; +@import '../../../../common/mobile/resources/less/common-rtl.less'; @import '../../../../common/mobile/resources/less/common-ios.less'; @import '../../../../common/mobile/resources/less/common-material.less'; @import '../../../../common/mobile/resources/less/icons.less'; @@ -34,6 +35,7 @@ @import '../../../../common/mobile/resources/less/comments.less'; @import './app-material.less'; @import './app-ios.less'; +@import './app-rtl.less'; @import './icons-ios.less'; @import './icons-material.less'; @import './icons-common.less'; diff --git a/vendor/framework7-react/build/webpack.config.js b/vendor/framework7-react/build/webpack.config.js index 25a403832..909a9be6f 100644 --- a/vendor/framework7-react/build/webpack.config.js +++ b/vendor/framework7-react/build/webpack.config.js @@ -101,7 +101,7 @@ module.exports = { { loader: 'postcss-loader', options: { - config: { + postcssOptions: { path: path.resolve(__dirname, '..'), } }, @@ -121,7 +121,7 @@ module.exports = { { loader: 'postcss-loader', options: { - config: { + postcssOptions: { path: path.resolve(__dirname, '..'), } }, 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", From 9cd94b8a44393e973a57b06b687fb38df39e4177 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 15 Apr 2022 19:48:15 +0400 Subject: [PATCH 04/15] [DE mobile] Add and change styles for rtl support --- .../mobile/resources/less/common-ios.less | 14 ++-- apps/common/mobile/resources/less/common.less | 5 +- .../mobile/resources/less/common.rtl.less | 69 +++++++++++++++++++ .../mobile/resources/less/icons.rtl.less | 9 +++ apps/documenteditor/mobile/src/app.js | 2 +- apps/documenteditor/mobile/src/less/app.less | 2 +- .../mobile/src/less/app.rtl.less | 2 + .../mobile/src/view/edit/EditChart.jsx | 4 +- .../mobile/src/view/edit/EditShape.jsx | 4 +- .../mobile/src/view/edit/EditTable.jsx | 6 +- .../framework7-react/build/webpack.config.js | 16 ++--- vendor/framework7-react/package.json | 5 +- 12 files changed, 109 insertions(+), 29 deletions(-) create mode 100644 apps/common/mobile/resources/less/common.rtl.less create mode 100644 apps/common/mobile/resources/less/icons.rtl.less create mode 100644 apps/documenteditor/mobile/src/less/app.rtl.less diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index a6c00d4b4..3921ef9bb 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -118,13 +118,13 @@ } } - .list:first-child { - li:first-child { - a { - border-radius: 0; - } - } - } + // .list:first-child { + // li:first-child { + // a { + // border-radius: 0; + // } + // } + // } .list:last-child { li:last-child { diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index e07026a7a..707a6cdd6 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -74,6 +74,8 @@ .range-number { color: @text-normal; + min-width: 60px; + text-align: right; } } .page-content { @@ -173,6 +175,7 @@ .row.list .item-content { padding-left: 0; + padding-right: 0; min-height: 68px; .item-inner{ padding: 0; @@ -184,7 +187,7 @@ } .popover { - .list { + .page .list { ul { background-color: var(--f7-list-bg-color); li:first-child, li:last-child { diff --git a/apps/common/mobile/resources/less/common.rtl.less b/apps/common/mobile/resources/less/common.rtl.less new file mode 100644 index 000000000..bc08810e2 --- /dev/null +++ b/apps/common/mobile/resources/less/common.rtl.less @@ -0,0 +1,69 @@ +.device-ios[dir=rtl] { + .app-layout { + .tab-buttons .tab-link:last-child { + border-radius: 5px 0 0 5px; + } + .tab-buttons .tab-link:first-child { + border-radius: 0 5px 5px 0; + } + .popover li:last-child .segmented a:first-child { + border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0; + } + .popover li:last-child .segmented a:last-child { + border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius); + } + .list .item-inner .item-after .segmented { + margin-right: 10px; + margin-left: 10px; + } + #editor-navbar.navbar .right a + a, #editor-navbar.navbar .left a + a { + margin-right: 0; + } + .searchbar-inner__right .buttons-row a.next { + margin-left: 0; + margin-right: 15px; + } + .searchbar-inner__left { + margin-right: 0; + margin-left: 10px; + } + .navbar .searchbar-input-wrap { + // margin-left: 10px; + margin-right: 0; + } + } +} + +@media (max-width: 550px) { + .device-ios[dir=rtl] .app-layout .searchbar-expandable.searchbar-enabled .searchbar-inner__right { + margin-right: 10px; + margin-left: 0; + } +} + +.device-android[dir=rtl] { + +} + +[dir=rtl] { + .color-schemes-menu .item-title { + margin-right: 20px; + } + .popup .list .range-number, .popover .list .range-number, .sheet-modal .list .range-number { + text-align: left; + } + .popup .list .inner-range-title, .popover .list .inner-range-title, .sheet-modal .list .inner-range-title { + padding-left: 0; + padding-right: 15px; + } + #color-picker .right-block { + margin-right: 20px; + } + .page-review .toolbar #btn-reject-change { + margin-left: 0; + margin-right: 20px; + } + .list li.no-indicator .item-link .item-inner { + padding-right: 0; + } +} \ No newline at end of file diff --git a/apps/common/mobile/resources/less/icons.rtl.less b/apps/common/mobile/resources/less/icons.rtl.less new file mode 100644 index 000000000..97c453547 --- /dev/null +++ b/apps/common/mobile/resources/less/icons.rtl.less @@ -0,0 +1,9 @@ +.device-ios[dir=rtl] { + i.icon.icon-next, i.icon.icon-prev, i.icon.icon-prev-change, i.icon.icon-next-change { + transform: scale(-1); + } +} + +.device-android[dir=rtl] { + +} \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/app.js b/apps/documenteditor/mobile/src/app.js index 87819ade0..c6e174778 100644 --- a/apps/documenteditor/mobile/src/app.js +++ b/apps/documenteditor/mobile/src/app.js @@ -16,7 +16,7 @@ window.$ = jQuery; // Import Framework7 Styles // import 'framework7/framework7-bundle.css'; -// import 'framework7/framework7-bundle-rtl.css'; +import 'framework7/framework7-bundle-rtl.css'; // Import Icons and App Custom Styles // import '../css/icons.css'; diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index c5463bf8d..f78237403 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -1,8 +1,8 @@ -@import '../../../../../vendor/framework7-react/node_modules/framework7/framework7-bundle.less'; @import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less'; @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'; @brandColor: var(--brand-word); diff --git a/apps/documenteditor/mobile/src/less/app.rtl.less b/apps/documenteditor/mobile/src/less/app.rtl.less new file mode 100644 index 000000000..5103b8a76 --- /dev/null +++ b/apps/documenteditor/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/documenteditor/mobile/src/view/edit/EditChart.jsx b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx index f905a9eb3..297c8550f 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx @@ -275,7 +275,7 @@ const PageChartBorder = props => { onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} > -
+
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
@@ -435,7 +435,7 @@ const PageWrap = props => { onRangeChanged={(value) => {props.onWrapDistance(value)}} >
-
+
{stateDistance + ' ' + metricText}
diff --git a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx index f447cc90b..9fe02a2cf 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx @@ -205,7 +205,7 @@ const PageStyle = props => { onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} >
-
+
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
@@ -229,7 +229,7 @@ const PageStyle = props => { onRangeChanged={(value) => {props.onOpacity(value)}} >
-
+
{stateOpacity + ' %'}
diff --git a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx index c479c158c..56b058e62 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx @@ -55,7 +55,7 @@ const PageTableOptions = props => { onRangeChanged={(value) => {props.onCellMargins(value)}} >
-
+
{stateDistance + ' ' + metricText}
@@ -160,7 +160,7 @@ const PageWrap = props => { onRangeChanged={(value) => {props.onWrapDistance(value)}} >
-
+
{stateDistance + ' ' + metricText}
@@ -434,7 +434,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro onRangeChanged={(value) => {storeTableSettings.updateCellBorderWidth(borderSizeTransform.sizeByIndex(value));}} >
-
+
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
diff --git a/vendor/framework7-react/build/webpack.config.js b/vendor/framework7-react/build/webpack.config.js index 71204212e..ef8bb5ce1 100644 --- a/vendor/framework7-react/build/webpack.config.js +++ b/vendor/framework7-react/build/webpack.config.js @@ -4,8 +4,8 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // const WebpackRTLPlugin = require('webpack-rtl-plugin'); // const rtlcss = require('rtlcss'); -const postcssRTLCSS = require('postcss-rtlcss'); -const { Mode } = require('postcss-rtlcss/options'); +// const postcssRTLCSS = require('postcss-rtlcss'); +// const { Mode } = require('postcss-rtlcss/options'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); @@ -107,9 +107,9 @@ module.exports = { options: { postcssOptions: { path: path.resolve(__dirname, '..'), - plugins: [ - postcssRTLCSS({mode: Mode.combined}) - ] + // plugins: [ + // postcssRTLCSS({mode: Mode.combined}) + // ] }, }, }, @@ -130,9 +130,9 @@ module.exports = { options: { postcssOptions: { path: path.resolve(__dirname, '..'), - plugins: [ - postcssRTLCSS({mode: Mode.combined}) - ] + // plugins: [ + // postcssRTLCSS({mode: Mode.combined}) + // ] }, }, }, diff --git a/vendor/framework7-react/package.json b/vendor/framework7-react/package.json index 06735dd7f..5eacbbf29 100644 --- a/vendor/framework7-react/package.json +++ b/vendor/framework7-react/package.json @@ -38,10 +38,8 @@ "react": "^17.0.1", "react-dom": "^17.0.1", "react-i18next": "^11.8.5", - "rtlcss": "^3.5.0", "swiper": "^6.4.8", - "template7": "^1.4.2", - "webpack-rtl-plugin": "^2.0.0" + "template7": "^1.4.2" }, "devDependencies": { "@babel/core": "^7.12.10", @@ -70,7 +68,6 @@ "ora": "^4.1.1", "postcss-loader": "^6.2.1", "postcss-preset-env": "^6.7.0", - "postcss-rtlcss": "^3.6.1", "rimraf": "^3.0.2", "style-loader": "^1.3.0", "terser-webpack-plugin": "^5.1.3", From f0a725c94ac46c6f346b5f87a2422fb92c494869 Mon Sep 17 00:00:00 2001 From: Andrey Shimagin Date: Mon, 18 Apr 2022 13:59:45 +0300 Subject: [PATCH 05/15] [PE] Change styles for RTL support --- .../mobile/resources/less/common-ios.less | 14 ++-- .../mobile/resources/less/common-rtl.less | 68 +++++++++++++++---- apps/common/mobile/resources/less/common.less | 4 +- .../mobile/src/view/edit/EditChart.jsx | 2 +- .../mobile/src/view/edit/EditShape.jsx | 6 +- .../mobile/src/view/edit/EditSlide.jsx | 2 +- .../mobile/src/view/edit/EditTable.jsx | 4 +- 7 files changed, 71 insertions(+), 29 deletions(-) diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index a6c00d4b4..3921ef9bb 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -118,13 +118,13 @@ } } - .list:first-child { - li:first-child { - a { - border-radius: 0; - } - } - } + // .list:first-child { + // li:first-child { + // a { + // border-radius: 0; + // } + // } + // } .list:last-child { li:last-child { diff --git a/apps/common/mobile/resources/less/common-rtl.less b/apps/common/mobile/resources/less/common-rtl.less index fcf2f1505..e22d0cf58 100644 --- a/apps/common/mobile/resources/less/common-rtl.less +++ b/apps/common/mobile/resources/less/common-rtl.less @@ -7,18 +7,6 @@ } } - .comment-list .item-inner{ - .comment-header { - .right { - justify-content: space-between; - .comment-resolve { - margin-right: 0px; - margin-left: 10px; - } - } - } - } - .actions-modal { .actions-button-text { text-align: right; @@ -37,15 +25,25 @@ } .tab-buttons { - .tab-link.tab-link:first-child { + .tab-link:first-child { border-radius: 0px 5px 5px 0px; } - .tab-link.tab-link:last-child { + .tab-link:last-child { border-radius: 5px 0px 0px 5px; } } + .popover li:first-child .segmented a:first-child + .popover li:last-child .segmented a:first-child { + border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0; + } + + .popover li:first-child .segmented a:last-child, + .popover li:last-child .segmented a:last-child { + border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius); + } + .list { .item-inner { .item-after .segmented { @@ -54,6 +52,27 @@ } } } + + .searchbar-inner__right .buttons-row a.next { + margin-left: 0; + margin-right: 15px; + } + + .searchbar-inner__left { + margin-right: 0; + margin-left: 10px; + } + + .navbar .searchbar-input-wrap { + margin-right: 0; + } +} + +@media (max-width: 550px) { + .device-ios[dir=rtl] .app-layout .searchbar-expandable.searchbar-enabled .searchbar-inner__right { + margin-right: 10px; + margin-left: 0; + } } [dir="rtl"] { @@ -66,6 +85,18 @@ } } + .comment-list .item-content .item-inner{ + .comment-header { + .right { + justify-content: space-between; + .comment-resolve { + margin-right: 0px; + margin-left: 10px; + } + } + } + } + .shapes { .thumb { transform: scaleX(-1); @@ -100,4 +131,13 @@ padding-right: 0; } } + + .dataview .active::after { + left: -5px; + right: unset; + } + + .popup .list .range-number, .popover .list .range-number, .sheet-modal .list .range-number { + text-align: left; + } } diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 975b48c32..55bcd0094 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -72,8 +72,10 @@ padding: 15px 0 0 15px; } - [slot="inner-end"] { + .range-number { color: @text-normal; + min-width: 60px; + text-align: right; } } .page-content { diff --git a/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx index 1857e4292..83d1bb389 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx @@ -285,7 +285,7 @@ const PageChartBorder = props => { onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} >
-
+
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx b/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx index bd41e6a97..9190e8ce1 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx @@ -162,7 +162,7 @@ const PageStyle = props => { onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} >
-
+
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
@@ -186,7 +186,7 @@ const PageStyle = props => { onRangeChanged={(value) => {props.onOpacity(value)}} >
-
+
{stateOpacity + ' %'}
@@ -281,7 +281,7 @@ const PageStyleNoFill = props => { onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}} >
-
+
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx b/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx index 6a0b6ca39..3f4c7b2cd 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditSlide.jsx @@ -297,7 +297,7 @@ const PageTransition = props => { onRangeChanged={(value) => {props.onDelay(value)}} >
-
+
{stateRange + ' ' + _t.textSec}
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx index 95dd24122..cb73c5d26 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx @@ -280,7 +280,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro onRangeChanged={(value) => {storeTableSettings.updateCellBorderWidth(borderSizeTransform.sizeByIndex(value));}} >
-
+
{stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
@@ -539,7 +539,7 @@ const EditTable = props => { onRangeChanged={(value) => {props.onOptionMargin(value)}} >
-
+
{stateDistance + ' ' + metricText}
From 037f2b4293b11ba9f62e1c0ad3dc4e3c583f8500 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 19 Apr 2022 19:17:20 +0400 Subject: [PATCH 06/15] [DE mobile] Add rtl styles --- .../resources/less/common-material.less | 10 +- .../mobile/resources/less/common.rtl.less | 160 ++++++++++++++++-- .../mobile/resources/less/icons.rtl.less | 12 +- 3 files changed, 159 insertions(+), 23 deletions(-) diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index d694fac4a..f86d8a78e 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -103,10 +103,10 @@ } .add-popup { - .view{ - .block-title{ - margin-bottom: 0; - margin-top: 8px; + .view { + .block-title { + // margin-bottom: 0; + // margin-top: 8px; } .add-image, .inputs-list { ul:after { @@ -116,7 +116,7 @@ } } - .coauth__sheet{ + .coauth__sheet { max-height: 65%; } diff --git a/apps/common/mobile/resources/less/common.rtl.less b/apps/common/mobile/resources/less/common.rtl.less index bc08810e2..7ccad3483 100644 --- a/apps/common/mobile/resources/less/common.rtl.less +++ b/apps/common/mobile/resources/less/common.rtl.less @@ -1,69 +1,199 @@ .device-ios[dir=rtl] { .app-layout { - .tab-buttons .tab-link:last-child { - border-radius: 5px 0 0 5px; + .subnavbar,.navbar .left a + a { + margin-right: 0; } - .tab-buttons .tab-link:first-child { - border-radius: 0 5px 5px 0; + + .subnavbar,.navbar .right a + a { + margin-right: 0; } - .popover li:last-child .segmented a:first-child { - border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0; + + .tab-buttons { + .tab-link:last-child { + border-radius: 5px 0 0 5px; + } + .tab-link:first-child { + border-radius: 0 5px 5px 0; + } } - .popover li:last-child .segmented a:last-child { - border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius); + + .popover { + li:last-child, li:first-child { + .segmented a:first-child { + border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0; + } + .segmented a:last-child { + border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius); + } + } } + .list .item-inner .item-after .segmented { margin-right: 10px; - margin-left: 10px; + margin-left: 0; } + #editor-navbar.navbar .right a + a, #editor-navbar.navbar .left a + a { margin-right: 0; } + .searchbar-inner__right .buttons-row a.next { margin-left: 0; margin-right: 15px; } + .searchbar-inner__left { margin-right: 0; margin-left: 10px; } + .navbar .searchbar-input-wrap { - // margin-left: 10px; + margin-left: 10px; margin-right: 0; } } -} -@media (max-width: 550px) { - .device-ios[dir=rtl] .app-layout .searchbar-expandable.searchbar-enabled .searchbar-inner__right { - margin-right: 10px; - margin-left: 0; + .comment-list .item-content .item-inner .comment-header { + padding-left: 16px; } } .device-android[dir=rtl] { + .app-layout { + .searchbar input { + padding-right: 24px; + padding-left: 36px; + background-position: right; + } + } + .wrap-comment, .comment-list{ + .comment-header .initials { + margin-right: 0; + margin-left: 10px; + } + } + + .actions-modal { + .actions-button-text { + text-align: right; + } + } + + .comment-list .item-content .item-inner .comment-header { + padding-left: 0; + } + + .navigation-sheet { + &__title { + padding-left: 0; + padding-right: 16px; + } + } } [dir=rtl] { .color-schemes-menu .item-title { margin-right: 20px; } + .popup .list .range-number, .popover .list .range-number, .sheet-modal .list .range-number { text-align: left; } + .popup .list .inner-range-title, .popover .list .inner-range-title, .sheet-modal .list .inner-range-title { padding-left: 0; padding-right: 15px; } + #color-picker .right-block { margin-right: 20px; } + .page-review .toolbar #btn-reject-change { margin-left: 0; margin-right: 20px; } + .list li.no-indicator .item-link .item-inner { padding-right: 0; } + + .numbers, .bullets, .multilevels { + .item-content { + padding-right: 0; + } + } + + .settings-popup, #settings-popover{ + .link { + display: inline; + } + } + + .comment-list { + .item-content .item-inner { + padding-left: 0; + .comment-header { + padding-right: 0; + .right { + justify-content: space-between; + .comment-resolve { + margin-right: 0px; + margin-left: 10px; + } + } + + .name { + text-align: right; + } + } + } + + .comment-quote { + border-right: 1px solid var(--text-secondary); + border-left: 0; + padding-left: 16px; + padding-right: 10px; + } + + .comment-text, .reply-text { + padding-right: 0; + padding-left: 15px; + } + } + + #add-comment-dialog .dialog .dialog-inner .wrap-comment .name, #edit-comment-dialog .dialog .dialog-inner .wrap-comment .name, #add-reply-dialog .dialog .dialog-inner .wrap-comment .name, #edit-reply-dialog .dialog .dialog-inner .wrap-comment .name, #add-comment-dialog .dialog .dialog-inner .wrap-comment .comment-date, #edit-comment-dialog .dialog .dialog-inner .wrap-comment .comment-date, #add-reply-dialog .dialog .dialog-inner .wrap-comment .comment-date, #edit-reply-dialog .dialog .dialog-inner .wrap-comment .comment-date, #add-comment-dialog .dialog .dialog-inner .wrap-comment .reply-date, #edit-comment-dialog .dialog .dialog-inner .wrap-comment .reply-date, #add-reply-dialog .dialog .dialog-inner .wrap-comment .reply-date, #edit-reply-dialog .dialog .dialog-inner .wrap-comment .reply-date { + text-align: right; + } + + #view-comment-popover .page .page-content { + padding: 16px 0 60px 16px; + } + + .wrap-comment { + padding: 16px 16px 0 24px; + } +} + +@media (max-width: 550px) { + .device-ios[dir=rtl] { + .app-layout { + .searchbar-expandable.searchbar-enabled .searchbar-inner__right { + margin-right: 10px; + margin-left: 0; + } + .navbar .searchbar-input-wrap { + margin-left: 0; + } + } + } + .device-android[dir=rtl] { + .app-layout { + .searchbar-expandable.searchbar-enabled .searchbar-inner__left { + margin-right: 0; + margin-left: 33px; + } + } + } } \ No newline at end of file diff --git a/apps/common/mobile/resources/less/icons.rtl.less b/apps/common/mobile/resources/less/icons.rtl.less index 97c453547..cd95cc80a 100644 --- a/apps/common/mobile/resources/less/icons.rtl.less +++ b/apps/common/mobile/resources/less/icons.rtl.less @@ -1,9 +1,15 @@ -.device-ios[dir=rtl] { - i.icon.icon-next, i.icon.icon-prev, i.icon.icon-prev-change, i.icon.icon-next-change { - transform: scale(-1); +[dir=rtl] { + i.icon { + &.icon-search, &.icon-link, &.icon-edit-settings, &.icon-app-settings, &.icon-add-shape, &.icon-add-image, &.icon-image-library, &.icon-text-align-right, &.icon-text-align-left, &.icon-table-add-column-left, &.icon-table-add-column-right, &.icon-table-add-row-above, &.icon-table-add-row-below, &.icon-table-remove-row, &.icon-table-remove-column, &.icon-paste, &.icon-copy, &.icon-table-borders-left, &.icon-table-borders-right, &.icon-next, &.icon-prev, &.icon-prev-change, &.icon-next-change { + transform: scaleX(-1); + } } } +.device-ios[dir=rtl] { + +} + .device-android[dir=rtl] { } \ No newline at end of file From 158394342fbf9efe021585eef4f77cfa5d69a0f5 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 19 Apr 2022 20:00:15 +0400 Subject: [PATCH 07/15] [SSE mobile] Add rtl styles --- apps/common/mobile/resources/less/common.rtl.less | 5 +++++ apps/spreadsheeteditor/mobile/src/app.js | 3 ++- apps/spreadsheeteditor/mobile/src/less/app.less | 1 + 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/apps/common/mobile/resources/less/common.rtl.less b/apps/common/mobile/resources/less/common.rtl.less index 7ccad3483..3b1173096 100644 --- a/apps/common/mobile/resources/less/common.rtl.less +++ b/apps/common/mobile/resources/less/common.rtl.less @@ -117,6 +117,7 @@ .list li.no-indicator .item-link .item-inner { padding-right: 0; + padding-left: 15px; } .numbers, .bullets, .multilevels { @@ -174,6 +175,10 @@ .wrap-comment { padding: 16px 16px 0 24px; } + + .inline-labels .item-label + .item-input-wrap, .inline-label .item-label + .item-input-wrap, .inline-labels .item-floating-label + .item-input-wrap, .inline-label .item-floating-label + .item-input-wrap { + margin-right: 0; + } } @media (max-width: 550px) { diff --git a/apps/spreadsheeteditor/mobile/src/app.js b/apps/spreadsheeteditor/mobile/src/app.js index 923799f29..108b38365 100644 --- a/apps/spreadsheeteditor/mobile/src/app.js +++ b/apps/spreadsheeteditor/mobile/src/app.js @@ -15,7 +15,8 @@ window.jQuery = jQuery; window.$ = jQuery; // Import Framework7 Styles -import 'framework7/framework7-bundle.css'; +// import 'framework7/framework7-bundle.css'; +import 'framework7/framework7-bundle-rtl.css'; // Import App Custom Styles import './less/app.less'; diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less index 0565ce531..5fb35b344 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); From 23529336dfd9bbeedbea8790ccdfe9c3937dfe42 Mon Sep 17 00:00:00 2001 From: Andrey Shimagin Date: Thu, 21 Apr 2022 14:18:44 +0300 Subject: [PATCH 08/15] [PE] Change styles for RTL support v2 --- .../mobile/resources/less/common-rtl.less | 113 ++++++++++++++++-- 1 file changed, 100 insertions(+), 13 deletions(-) diff --git a/apps/common/mobile/resources/less/common-rtl.less b/apps/common/mobile/resources/less/common-rtl.less index e22d0cf58..adb8c399c 100644 --- a/apps/common/mobile/resources/less/common-rtl.less +++ b/apps/common/mobile/resources/less/common-rtl.less @@ -1,5 +1,13 @@ [dir="rtl"].device-android { + .app-layout { + .searchbar input { + padding-right: 24px; + padding-left: 36px; + background-position: right; + } + } + .wrap-comment, .comment-list{ .comment-header .initials { margin-right: 0; @@ -12,6 +20,13 @@ text-align: right; } } + + .navigation-sheet { + &__title { + padding-left: 0; + padding-right: 16px; + } + } } [dir="rtl"].device-ios .app-layout{ @@ -34,14 +49,15 @@ } } - .popover li:first-child .segmented a:first-child - .popover li:last-child .segmented a:first-child { - border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0; - } - - .popover li:first-child .segmented a:last-child, - .popover li:last-child .segmented a:last-child { - border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius); + .popover { + li:last-child, li:first-child { + .segmented a:first-child { + border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0; + } + .segmented a:last-child { + border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius); + } + } } .list { @@ -64,19 +80,18 @@ } .navbar .searchbar-input-wrap { + margin-left: 10px; margin-right: 0; } -} -@media (max-width: 550px) { - .device-ios[dir=rtl] .app-layout .searchbar-expandable.searchbar-enabled .searchbar-inner__right { - margin-right: 10px; - margin-left: 0; + .comment-list .item-content .item-inner .comment-header { + padding-left: 16px; } } [dir="rtl"] { i.icon { + i.icon.icon-next, i.icon.icon-prev, i.icon.icon-prev-change, i.icon.icon-next-change, &.icon-search, &.icon-link, &.icon-edit-settings, &.icon-app-settings, &.icon-add-shape, &.icon-add-image, &.icon-image-library, &.icon-text-align-right, &.icon-text-align-left, &.icon-table-add-column-left, &.icon-table-add-column-right, &.icon-table-add-row-above, &.icon-table-add-row-below, &.icon-table-remove-row, @@ -86,6 +101,7 @@ } .comment-list .item-content .item-inner{ + padding-left: 0; .comment-header { .right { justify-content: space-between; @@ -94,9 +110,41 @@ margin-left: 10px; } } + + .name { + text-align: right; + } } } + .comment-quote { + border-right: 1px solid var(--text-secondary); + border-left: 0; + padding-left: 16px; + padding-right: 10px; + } + + .comment-text, .reply-text { + padding-right: 0; + padding-left: 15px; + } + + // .comment-list .item-content .item-inner .comment-header { + // padding-left: 16px; + // } + + #add-comment-dialog .dialog .dialog-inner .wrap-comment .name, #edit-comment-dialog .dialog .dialog-inner .wrap-comment .name, #add-reply-dialog .dialog .dialog-inner .wrap-comment .name, #edit-reply-dialog .dialog .dialog-inner .wrap-comment .name, #add-comment-dialog .dialog .dialog-inner .wrap-comment .comment-date, #edit-comment-dialog .dialog .dialog-inner .wrap-comment .comment-date, #add-reply-dialog .dialog .dialog-inner .wrap-comment .comment-date, #edit-reply-dialog .dialog .dialog-inner .wrap-comment .comment-date, #add-comment-dialog .dialog .dialog-inner .wrap-comment .reply-date, #edit-comment-dialog .dialog .dialog-inner .wrap-comment .reply-date, #add-reply-dialog .dialog .dialog-inner .wrap-comment .reply-date, #edit-reply-dialog .dialog .dialog-inner .wrap-comment .reply-date { + text-align: right; + } + + #view-comment-popover .page .page-content { + padding: 16px 0 60px 16px; + } + + .wrap-comment { + padding: 16px 16px 0 24px; + } + .shapes { .thumb { transform: scaleX(-1); @@ -140,4 +188,43 @@ .popup .list .range-number, .popover .list .range-number, .sheet-modal .list .range-number { text-align: left; } + + .popup .list .inner-range-title, .popover .list .inner-range-title, .sheet-modal .list .inner-range-title { + padding-left: 0; + padding-right: 15px; + } + + #color-picker .right-block { + margin-left: 0px; + margin-right: 20px; + } + + .page-review .toolbar #btn-reject-change { + margin-left: 0; + margin-right: 20px; + } + + .list li.no-indicator .item-link .item-inner { + padding-right: 0; + } +} + +@media (max-width: 550px) { + .device-ios[dir=rtl] .app-layout { + .searchbar-expandable.searchbar-enabled .searchbar-inner__right { + margin-right: 10px; + margin-left: 0; + } + + .navbar .searchbar-input-wrap { + margin-left: 0; + } + } + + .device-android[dir=rtl] .app-layout { + .searchbar-expandable.searchbar-enabled .searchbar-inner__left { + margin-right: 0; + margin-left: 33px; + } + } } From e09963360115430f58a0dcb54b6109cb3165c6c0 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 22 Apr 2022 18:12:16 +0400 Subject: [PATCH 09/15] [DE mobile] Added direction change settings --- apps/documenteditor/mobile/locale/en.json | 3 ++ apps/documenteditor/mobile/src/app.js | 20 +++++++++++-- .../settings/ApplicationSettings.jsx | 7 ++++- .../mobile/src/store/applicationSettings.js | 10 +++++-- .../src/view/settings/ApplicationSettings.jsx | 29 ++++++++++++++++++- .../mobile/src/view/settings/Settings.jsx | 9 +++++- .../mobile/src/less/app.rtl.less | 2 ++ 7 files changed, 73 insertions(+), 7 deletions(-) create mode 100644 apps/spreadsheeteditor/mobile/src/less/app.rtl.less diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index ef648a6af..0dfa001e8 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -588,6 +588,9 @@ "textLoading": "Loading...", "textLocation": "Location", "textMacrosSettings": "Macros Settings", + "textDirection": "Direction", + "textLtr": "LTR", + "textRtl": "RTL", "textMargins": "Margins", "textMarginsH": "Top and bottom margins are too high for a given page height", "textMarginsW": "Left and right margins are too wide for a given page width", diff --git a/apps/documenteditor/mobile/src/app.js b/apps/documenteditor/mobile/src/app.js index c6e174778..7de588e1f 100644 --- a/apps/documenteditor/mobile/src/app.js +++ b/apps/documenteditor/mobile/src/app.js @@ -15,14 +15,30 @@ window.jQuery = jQuery; window.$ = jQuery; // Import Framework7 Styles -// import 'framework7/framework7-bundle.css'; -import 'framework7/framework7-bundle-rtl.css'; + +const directionMode = +localStorage.getItem('direction') || 0; +const htmlElem = document.querySelector('html'); + +if(directionMode === 1) { + import('framework7/framework7-bundle-rtl.css') + .then(module => { + // console.log(module); + htmlElem.setAttribute('dir', 'rtl') + }); +} else { + import('framework7/framework7-bundle.css') + .then(module => { + // console.log(module); + htmlElem.setAttribute('dir', 'ltr') + }); +} // Import Icons and App Custom Styles // import '../css/icons.css'; import './less/app.less'; // Import App Component + import App from './view/app'; import { I18nextProvider } from 'react-i18next'; import i18n from './lib/i18n'; diff --git a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx index 98f516d09..a36d2f73a 100644 --- a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx +++ b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -63,6 +63,10 @@ class ApplicationSettingsController extends Component { LocalStorage.setItem("de-mobile-macros-mode", value); } + changeDirection(value) { + localStorage.setItem('direction', value); + } + render() { return ( ) } diff --git a/apps/documenteditor/mobile/src/store/applicationSettings.js b/apps/documenteditor/mobile/src/store/applicationSettings.js index 0cc34353f..8c5baf33c 100644 --- a/apps/documenteditor/mobile/src/store/applicationSettings.js +++ b/apps/documenteditor/mobile/src/store/applicationSettings.js @@ -1,5 +1,4 @@ import {makeObservable, action, observable} from 'mobx'; -import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage'; export class storeApplicationSettings { constructor() { @@ -17,7 +16,9 @@ export class storeApplicationSettings { changeShowTableEmptyLine: action, changeDisplayComments: action, changeDisplayResolved: action, - changeMacrosSettings: action + changeMacrosSettings: action, + directionMode: observable, + changeDirectionMode: action }) } @@ -28,6 +29,11 @@ export class storeApplicationSettings { isComments = false; isResolvedComments = false; macrosMode = 0; + directionMode = +localStorage.getItem('direction') || 0; + + changeDirectionMode(value) { + this.directionMode = +value; + } changeUnitMeasurement(value) { this.unitMeasurement = +value; diff --git a/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx index f09d4eb2f..9fe5ff358 100644 --- a/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx @@ -99,6 +99,10 @@ const PageApplicationSettings = props => { + + + + {_isShowMacros && { ); }; +const PageDirection = props => { + const { t } = useTranslation(); + const _t = t("Settings", { returnObjects: true }); + const store = props.storeApplicationSettings; + const directionMode = store.directionMode; + + const changeDirection = value => { + store.changeDirectionMode(value); + props.changeDirection(value); + }; + + return ( + + + + changeDirection(0)}> + changeDirection(1)}> + + + ); +} + const PageMacrosSettings = props => { const { t } = useTranslation(); const _t = t("Settings", { returnObjects: true }); @@ -138,5 +164,6 @@ const PageMacrosSettings = props => { const ApplicationSettings = inject("storeApplicationSettings", "storeAppOptions", "storeReview")(observer(PageApplicationSettings)); const MacrosSettings = inject("storeApplicationSettings")(observer(PageMacrosSettings)); +const Direction = inject("storeApplicationSettings")(observer(PageDirection)); -export {ApplicationSettings, MacrosSettings}; \ No newline at end of file +export {ApplicationSettings, MacrosSettings, Direction}; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx index e22481bfa..2a6ece70f 100644 --- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx @@ -10,7 +10,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 } from "./ApplicationSettings"; +import { MacrosSettings, Direction } from "./ApplicationSettings"; import About from '../../../../../common/mobile/lib/view/About'; import NavigationController from '../../controller/settings/Navigation'; @@ -61,6 +61,13 @@ const routes = [ { path: '/navigation/', component: NavigationController + }, + + // Direction + + { + path: '/direction/', + component: Direction } ]; 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'; From 15f7bb385b28bea5bce456cd42c7de6e29fe09d6 Mon Sep 17 00:00:00 2001 From: Andrey Shimagin Date: Mon, 25 Apr 2022 10:21:06 +0300 Subject: [PATCH 10/15] [PE] Adding LTR/RTL mode changes --- apps/presentationeditor/mobile/src/app.js | 11 +++++---- .../mobile/src/less/app-rtl.less | 2 ++ .../mobile/src/less/app.less | 3 +-- .../src/view/settings/ApplicationSettings.jsx | 24 ++++++++++++++++++- 4 files changed, 33 insertions(+), 7 deletions(-) diff --git a/apps/presentationeditor/mobile/src/app.js b/apps/presentationeditor/mobile/src/app.js index fb4d3f9a2..7f5b031bd 100644 --- a/apps/presentationeditor/mobile/src/app.js +++ b/apps/presentationeditor/mobile/src/app.js @@ -14,12 +14,14 @@ import jQuery from 'jquery'; window.jQuery = jQuery; window.$ = jQuery; -// Import Framework7 Styles -// import 'framework7/framework7-bundle.css'; -import 'framework7/framework7-bundle-rtl.css'; +// Import Framework7 or Framework7-RTL Styles +let direction = LocalStorage.getItem('mode-direction'); + +import(`framework7/framework7-bundle${direction === 'rtl' ? '-rtl' : ''}.css`) +.then(() => direction === 'rtl' ? $$('html').attr('dir', 'rtl') : $$('html').removeAttr('dir')); // Import App Custom Styles -import './less/app.less'; +import('./less/app.less'); // Import App Component import App from './page/app'; @@ -28,6 +30,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/presentationeditor/mobile/src/less/app-rtl.less b/apps/presentationeditor/mobile/src/less/app-rtl.less index 788b1b258..42850257b 100644 --- a/apps/presentationeditor/mobile/src/less/app-rtl.less +++ b/apps/presentationeditor/mobile/src/less/app-rtl.less @@ -1,3 +1,5 @@ +@import '../../../../common/mobile/resources/less/common-rtl.less'; + [dir="rtl"] { i.icon { diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less index d6c3c9edf..52f98b332 100644 --- a/apps/presentationeditor/mobile/src/less/app.less +++ b/apps/presentationeditor/mobile/src/less/app.less @@ -2,6 +2,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'; @brandColor: var(--brand-slide); @@ -24,7 +25,6 @@ @import '../../../../common/mobile/resources/less/collaboration.less'; @import '../../../../common/mobile/resources/less/common.less'; -@import '../../../../common/mobile/resources/less/common-rtl.less'; @import '../../../../common/mobile/resources/less/common-ios.less'; @import '../../../../common/mobile/resources/less/common-material.less'; @import '../../../../common/mobile/resources/less/icons.less'; @@ -35,7 +35,6 @@ @import '../../../../common/mobile/resources/less/comments.less'; @import './app-material.less'; @import './app-ios.less'; -@import './app-rtl.less'; @import './icons-ios.less'; @import './icons-material.less'; @import './icons-common.less'; diff --git a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx index 2007144e9..bd2722d7b 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,26 @@ const PageApplicationSettings = props => { ); }; +const RTLSetting = () => { + 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.alert('Please restart the application for the changes to take effect'); + } + + return ( + + + {switchRTLMode(!toggle), setRTLMode(!toggle)}}> + + + + ) +} + const PageMacrosSettings = props => { const { t } = useTranslation(); const _t = t("View.Settings", { returnObjects: true }); From 16eeb614feefa4d17bccc97c1e86df1119530fb2 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 26 Apr 2022 12:58:54 +0400 Subject: [PATCH 11/15] [DE mobile] Correct import styles --- apps/documenteditor/mobile/locale/en.json | 5 +++-- apps/documenteditor/mobile/src/app.js | 21 ++++++------------- .../settings/ApplicationSettings.jsx | 2 +- .../mobile/src/store/applicationSettings.js | 5 +++-- .../src/view/settings/ApplicationSettings.jsx | 16 +++++++++++--- 5 files changed, 26 insertions(+), 23 deletions(-) diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 0dfa001e8..4de2409e1 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -589,8 +589,9 @@ "textLocation": "Location", "textMacrosSettings": "Macros Settings", "textDirection": "Direction", - "textLtr": "LTR", - "textRtl": "RTL", + "textLeftToRight": "Left To Right", + "textRightToLeft": "Right To Left", + "textRestartApplication": "Please restart the application for the changes to take effect", "textMargins": "Margins", "textMarginsH": "Top and bottom margins are too high for a given page height", "textMarginsW": "Left and right margins are too wide for a given page width", diff --git a/apps/documenteditor/mobile/src/app.js b/apps/documenteditor/mobile/src/app.js index 7de588e1f..15f74d1bb 100644 --- a/apps/documenteditor/mobile/src/app.js +++ b/apps/documenteditor/mobile/src/app.js @@ -16,26 +16,16 @@ window.$ = jQuery; // Import Framework7 Styles -const directionMode = +localStorage.getItem('direction') || 0; const htmlElem = document.querySelector('html'); +const direction = LocalStorage.getItem('mode-direction'); -if(directionMode === 1) { - import('framework7/framework7-bundle-rtl.css') - .then(module => { - // console.log(module); - htmlElem.setAttribute('dir', 'rtl') - }); -} else { - import('framework7/framework7-bundle.css') - .then(module => { - // console.log(module); - htmlElem.setAttribute('dir', 'ltr') - }); -} +direction === 'rtl' ? htmlElem.setAttribute('dir', 'rtl') : htmlElem.setAttribute('dir', 'ltr'); + +import(`framework7/framework7-bundle${direction === 'rtl' ? '-rtl' : ''}.css`); // Import Icons and App Custom Styles // import '../css/icons.css'; -import './less/app.less'; +import('./less/app.less'); // Import App Component @@ -45,6 +35,7 @@ import i18n from './lib/i18n'; 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/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx index a36d2f73a..3b28205a1 100644 --- a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx +++ b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -64,7 +64,7 @@ class ApplicationSettingsController extends Component { } changeDirection(value) { - localStorage.setItem('direction', value); + localStorage.setItem('mode-direction', value); } render() { diff --git a/apps/documenteditor/mobile/src/store/applicationSettings.js b/apps/documenteditor/mobile/src/store/applicationSettings.js index 8c5baf33c..d1c74e2fc 100644 --- a/apps/documenteditor/mobile/src/store/applicationSettings.js +++ b/apps/documenteditor/mobile/src/store/applicationSettings.js @@ -1,4 +1,5 @@ import {makeObservable, action, observable} from 'mobx'; +import { LocalStorage } from '../../../../common/mobile/utils/LocalStorage'; export class storeApplicationSettings { constructor() { @@ -29,10 +30,10 @@ export class storeApplicationSettings { isComments = false; isResolvedComments = false; macrosMode = 0; - directionMode = +localStorage.getItem('direction') || 0; + directionMode = localStorage.getItem('mode-direction') || 'ltr'; changeDirectionMode(value) { - this.directionMode = +value; + this.directionMode = value; } changeUnitMeasurement(value) { diff --git a/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx index 9fe5ff358..f9098ca36 100644 --- a/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx +++ b/apps/documenteditor/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 } from "framework7-react"; +import { Page, Navbar, List, ListItem, BlockTitle, Toggle, f7 } from "framework7-react"; import { useTranslation } from "react-i18next"; import { Themes } from '../../../../../common/mobile/lib/controller/Themes.js'; @@ -123,14 +123,24 @@ const PageDirection = props => { const changeDirection = value => { store.changeDirectionMode(value); props.changeDirection(value); + + f7.dialog.create({ + title: _t.notcriticalErrorTitle, + text: t('Settings.textRestartApplication'), + buttons: [ + { + text: _t.textOk + } + ] + }).open(); }; return ( - changeDirection(0)}> - changeDirection(1)}> + changeDirection('ltr')}> + changeDirection('rtl')}> ); From 72ef56710df38229e290f7b2ee1446b4f72baafd Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 26 Apr 2022 13:01:12 +0400 Subject: [PATCH 12/15] [DE mobile] Correct local storage --- .../mobile/src/controller/settings/ApplicationSettings.jsx | 2 +- apps/documenteditor/mobile/src/store/applicationSettings.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx index 3b28205a1..a57ec57e1 100644 --- a/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx +++ b/apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx @@ -64,7 +64,7 @@ class ApplicationSettingsController extends Component { } changeDirection(value) { - localStorage.setItem('mode-direction', value); + LocalStorage.setItem('mode-direction', value); } render() { diff --git a/apps/documenteditor/mobile/src/store/applicationSettings.js b/apps/documenteditor/mobile/src/store/applicationSettings.js index d1c74e2fc..fb93e9a27 100644 --- a/apps/documenteditor/mobile/src/store/applicationSettings.js +++ b/apps/documenteditor/mobile/src/store/applicationSettings.js @@ -30,7 +30,7 @@ export class storeApplicationSettings { isComments = false; isResolvedComments = false; macrosMode = 0; - directionMode = localStorage.getItem('mode-direction') || 'ltr'; + directionMode = LocalStorage.getItem('mode-direction') || 'ltr'; changeDirectionMode(value) { this.directionMode = value; From 3b9d9925e1ffb33cfc936c6a2add3ad8281c7ff2 Mon Sep 17 00:00:00 2001 From: Andrey Shimagin Date: Tue, 26 Apr 2022 15:19:20 +0300 Subject: [PATCH 13/15] [PE] Correct import and change styles icons-rtl --- .../mobile/resources/less/common-rtl.less | 10 ---------- .../common/mobile/resources/less/icons.rtl.less | 17 +++++++++++++++++ apps/presentationeditor/mobile/src/app.js | 2 +- .../mobile/src/less/app-rtl.less | 10 +--------- 4 files changed, 19 insertions(+), 20 deletions(-) create mode 100644 apps/common/mobile/resources/less/icons.rtl.less diff --git a/apps/common/mobile/resources/less/common-rtl.less b/apps/common/mobile/resources/less/common-rtl.less index adb8c399c..57f77664f 100644 --- a/apps/common/mobile/resources/less/common-rtl.less +++ b/apps/common/mobile/resources/less/common-rtl.less @@ -90,16 +90,6 @@ } [dir="rtl"] { - i.icon { - i.icon.icon-next, i.icon.icon-prev, i.icon.icon-prev-change, i.icon.icon-next-change, - &.icon-search, &.icon-link, &.icon-edit-settings, &.icon-app-settings, &.icon-add-shape, &.icon-add-image, - &.icon-image-library, &.icon-text-align-right, &.icon-text-align-left, &.icon-table-add-column-left, - &.icon-table-add-column-right, &.icon-table-add-row-above, &.icon-table-add-row-below, &.icon-table-remove-row, - &.icon-table-remove-column, &.icon-paste, &.icon-copy, &.icon-table-borders-left, &.icon-table-borders-right { - transform: scaleX(-1); - } - } - .comment-list .item-content .item-inner{ padding-left: 0; .comment-header { diff --git a/apps/common/mobile/resources/less/icons.rtl.less b/apps/common/mobile/resources/less/icons.rtl.less new file mode 100644 index 000000000..eb6320102 --- /dev/null +++ b/apps/common/mobile/resources/less/icons.rtl.less @@ -0,0 +1,17 @@ +[dir="rtl"] { + // Common rtl-icons + i.icon { + &.icon-next, &.icon-prev, &.icon-text-align-right, &.icon-text-align-left, + &.icon-table-add-column-left, &.icon-table-add-column-right, &.icon-table-remove-column, + &.icon-table-borders-left, &.icon-table-borders-right { + transform: scaleX(-1); + } + } + + // [PE] rtl-icons + i.icon { + &.icon-align-left, &.icon-align-right { + transform: scaleX(-1); + } + } +} \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/app.js b/apps/presentationeditor/mobile/src/app.js index 7f5b031bd..f1b43f913 100644 --- a/apps/presentationeditor/mobile/src/app.js +++ b/apps/presentationeditor/mobile/src/app.js @@ -17,8 +17,8 @@ window.$ = jQuery; // Import Framework7 or Framework7-RTL Styles let direction = LocalStorage.getItem('mode-direction'); +direction === 'rtl' ? $$('html').attr('dir', 'rtl') : $$('html').removeAttr('dir') import(`framework7/framework7-bundle${direction === 'rtl' ? '-rtl' : ''}.css`) -.then(() => direction === 'rtl' ? $$('html').attr('dir', 'rtl') : $$('html').removeAttr('dir')); // Import App Custom Styles import('./less/app.less'); diff --git a/apps/presentationeditor/mobile/src/less/app-rtl.less b/apps/presentationeditor/mobile/src/less/app-rtl.less index 42850257b..c6b088922 100644 --- a/apps/presentationeditor/mobile/src/less/app-rtl.less +++ b/apps/presentationeditor/mobile/src/less/app-rtl.less @@ -1,15 +1,7 @@ @import '../../../../common/mobile/resources/less/common-rtl.less'; +@import '../../../../common/mobile/\/resources/less/icons.rtl.less'; [dir="rtl"] { - - i.icon { - &.icon-setup, &.icon-move-foreground, &.icon-move-background, &.icon-move-forward, - &.icon-move-backward, &.icon-align-left, &.icon-align-right, - &.icon-align-top, &.icon-align-middle, &.icon-align-bottom, &.icon-align-horizontal { - transform: scaleX(-1); - } - } - .slide-theme .item-theme.active:before { left: -5px; right: unset; From 1d452c9f760d9e801b22e387e07fa6ac1426a4b2 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 26 Apr 2022 18:12:25 +0400 Subject: [PATCH 14/15] [SSE mobile] Add import styles --- .../src/view/settings/ApplicationSettings.jsx | 8 ++-- apps/spreadsheeteditor/mobile/locale/en.json | 6 ++- apps/spreadsheeteditor/mobile/src/app.js | 13 ++++-- .../settings/ApplicationSettings.jsx | 5 +++ .../mobile/src/store/applicationSettings.js | 11 ++++- .../src/view/settings/ApplicationSettings.jsx | 42 ++++++++++++++++++- .../mobile/src/view/settings/Settings.jsx | 5 +++ 7 files changed, 78 insertions(+), 12 deletions(-) diff --git a/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx index f9098ca36..28fadca2e 100644 --- a/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/ApplicationSettings.jsx @@ -100,7 +100,7 @@ const PageApplicationSettings = props => { - + {_isShowMacros && @@ -137,10 +137,10 @@ const PageDirection = props => { return ( - + - changeDirection('ltr')}> - changeDirection('rtl')}> + changeDirection('ltr')}> + changeDirection('rtl')}> ); diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index 7b3f29ccf..3bd9f5138 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -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.
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 108b38365..7763b36a8 100644 --- a/apps/spreadsheeteditor/mobile/src/app.js +++ b/apps/spreadsheeteditor/mobile/src/app.js @@ -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); 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/store/applicationSettings.js b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js index d45318d05..1d22a10ce 100644 --- a/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js +++ b/apps/spreadsheeteditor/mobile/src/store/applicationSettings.js @@ -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' }, 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 } ]; From 46d22a499f371b51b107a71c368e3c2286e70357 Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Thu, 12 May 2022 12:39:11 +0300 Subject: [PATCH 15/15] [DE PE SSE] Adding rtl icons and refactoring --- apps/common/mobile/resources/less/icons.less | 30 +++++++++++++++ .../mobile/resources/less/icons.rtl.less | 38 ++++++++++++++++++- .../mobile/src/view/edit/EditText.jsx | 2 +- .../mobile/src/view/edit/EditText.jsx | 2 +- .../mobile/src/less/icons-common.less | 37 +++++++++++++++++- .../mobile/src/less/icons-ios.less | 31 --------------- .../mobile/src/less/icons-material.less | 31 --------------- 7 files changed, 104 insertions(+), 67 deletions(-) diff --git a/apps/common/mobile/resources/less/icons.less b/apps/common/mobile/resources/less/icons.less index 076f36865..b2c1097c2 100644 --- a/apps/common/mobile/resources/less/icons.less +++ b/apps/common/mobile/resources/less/icons.less @@ -43,4 +43,34 @@ i.icon { height: 22px; .encoded-svg-background(''); } + + // Numbers + + &.icon-numbers-1 { + .encoded-svg-background(''); + } + + &.icon-numbers-2 { + .encoded-svg-background(''); + } + + &.icon-numbers-3 { + .encoded-svg-background(''); + } + + &.icon-numbers-4 { + .encoded-svg-background(''); + } + + &.icon-numbers-5 { + .encoded-svg-background(''); + } + + &.icon-numbers-6 { + .encoded-svg-background(''); + } + + &.icon-numbers-7 { + .encoded-svg-background(''); + } } diff --git a/apps/common/mobile/resources/less/icons.rtl.less b/apps/common/mobile/resources/less/icons.rtl.less index eb6320102..8407cf0b2 100644 --- a/apps/common/mobile/resources/less/icons.rtl.less +++ b/apps/common/mobile/resources/less/icons.rtl.less @@ -3,9 +3,29 @@ i.icon { &.icon-next, &.icon-prev, &.icon-text-align-right, &.icon-text-align-left, &.icon-table-add-column-left, &.icon-table-add-column-right, &.icon-table-remove-column, - &.icon-table-borders-left, &.icon-table-borders-right { + &.icon-table-borders-left, &.icon-table-borders-right, &.icon-numbers-3, &.icon-numbers-7 { transform: scaleX(-1); } + + &.icon-numbers-1 { + .encoded-svg-background(''); + } + + &.icon-numbers-2 { + .encoded-svg-background(''); + } + + &.icon-numbers-4 { + .encoded-svg-background(''); + } + + &.icon-numbers-5 { + .encoded-svg-background(''); + } + + &.icon-numbers-6 { + .encoded-svg-background(''); + } } // [PE] rtl-icons @@ -14,4 +34,20 @@ transform: scaleX(-1); } } + + // [SSE] rtl-icons + + i.icon { + &.icon-text-orientation-horizontal { + .encoded-svg-mask(''); + } + + &.icon-text-orientation-anglecount { + .encoded-svg-mask(''); + } + + &.icon-text-orientation-angleclock { + .encoded-svg-mask(''); + } + } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx index 7a0fe89eb..3e66e06a7 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx @@ -259,7 +259,7 @@ const PageNumbers = observer( props => { : - + } ))} diff --git a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx index 8fae5157f..f815e812e 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx @@ -585,7 +585,7 @@ const PageNumbers = observer(props => { : - + } ))} 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 16071201f..74136b59b 100644 --- a/apps/spreadsheeteditor/mobile/src/less/icons-ios.less +++ b/apps/spreadsheeteditor/mobile/src/less/icons-ios.less @@ -376,37 +376,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;