From 16c09f3b6a96b2293b0725bb9aec9b4e30ddec91 Mon Sep 17 00:00:00 2001 From: Andrey Shimagin Date: Fri, 15 Apr 2022 16:57:00 +0300 Subject: [PATCH] [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",