[PE] Add RTL-styles

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

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

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

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

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, '..'),
                     }
                 },

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",