[DE mobile] Add and change styles for rtl support

apps/common/mobile/resources/less/common-ios.less

@@ -118,13 +118,13 @@
             }
         }
 
-        .list:first-child {
+        // .list:first-child {
-            li:first-child {
+        //     li:first-child {
-                a {
+        //         a {
-                    border-radius: 0;
+        //             border-radius: 0;
-                }
+        //         }
-            }
+        //     }
-        }
+        // }
 
         .list:last-child {
             li:last-child {

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 {

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;
+    }
+}

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] {
+
+}

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';

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);
 

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';

apps/documenteditor/mobile/src/view/edit/EditChart.jsx

@@ -275,7 +275,7 @@ const PageChartBorder = props => {
                                    onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
                             ></Range>
                         </div>
-                        <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                        <div className='range-number' slot='inner-end'>
                             {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
                         </div>
                     </ListItem>
@@ -435,7 +435,7 @@ const PageWrap = props => {
                                        onRangeChanged={(value) => {props.onWrapDistance(value)}}
                                 ></Range>
                             </div>
-                            <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                            <div className='range-number' slot='inner-end'>
                                 {stateDistance + ' ' + metricText}
                             </div>
                         </ListItem>

apps/documenteditor/mobile/src/view/edit/EditShape.jsx

@@ -205,7 +205,7 @@ const PageStyle = props => {
                                        onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
                                 ></Range>
                             </div>
-                            <div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                            <div className='range-number' slot='inner-end' dir="ltr">
                                 {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
                             </div>
                         </ListItem>
@@ -229,7 +229,7 @@ const PageStyle = props => {
                                        onRangeChanged={(value) => {props.onOpacity(value)}}
                                 ></Range>
                             </div>
-                            <div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                            <div className='range-number' slot='inner-end'>
                                 {stateOpacity + ' %'}
                             </div>
                         </ListItem>

apps/documenteditor/mobile/src/view/edit/EditTable.jsx

@@ -55,7 +55,7 @@ const PageTableOptions = props => {
                                onRangeChanged={(value) => {props.onCellMargins(value)}}
                         ></Range>
                     </div>
-                    <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                    <div className='range-number' slot='inner-end'>
                         {stateDistance + ' ' + metricText}
                     </div>
                 </ListItem>
@@ -160,7 +160,7 @@ const PageWrap = props => {
                                        onRangeChanged={(value) => {props.onWrapDistance(value)}}
                                 ></Range>
                             </div>
-                            <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                            <div className='range-number' slot='inner-end'>
                                 {stateDistance + ' ' + metricText}
                             </div>
                         </ListItem>
@@ -434,7 +434,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro
                            onRangeChanged={(value) => {storeTableSettings.updateCellBorderWidth(borderSizeTransform.sizeByIndex(value));}}
                     ></Range>
                 </div>
-                <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                <div className='range-number' slot='inner-end'>
                     {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
                 </div>
             </ListItem>

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 postcssRTLCSS = require('postcss-rtlcss');
-const { Mode } = require('postcss-rtlcss/options');
+// 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: [
+                // plugins: [
-                  postcssRTLCSS({mode: Mode.combined})
+                //   postcssRTLCSS({mode: Mode.combined})
-                ]
+                // ]
               },
             },
           },
@@ -130,9 +130,9 @@ module.exports = {
               options: {
                 postcssOptions: {
                   path: path.resolve(__dirname, '..'),
-                  plugins: [
+                  // plugins: [
-                    postcssRTLCSS({mode: Mode.combined})
+                  //   postcssRTLCSS({mode: Mode.combined})
-                  ]
+                  // ]
                 },
               },
             },

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",
+    "template7": "^1.4.2"
-    "webpack-rtl-plugin": "^2.0.0"
   },
   "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",