From cc7248f51d7e48f83eae9235217608d70ca29b0e Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Mon, 12 Sep 2022 22:53:28 +0300
Subject: [PATCH] [rtl] fix left and right panels position for DE

---
 apps/common/main/resources/less/common.less   | 25 ++++++++
 .../main/app/controller/Viewport.js           |  4 +-
 apps/documenteditor/main/app/view/Viewport.js | 59 +++++++++++--------
 3 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less
index 6e37abbb4..181661900 100644
--- a/apps/common/main/resources/less/common.less
+++ b/apps/common/main/resources/less/common.less
@@ -51,6 +51,11 @@ label {
         .tool-menu-btns {
             border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
             border-right: @scaled-one-px-value solid @border-toolbar;
+
+            .rtl & {
+                border-left: @scaled-one-px-value solid @border-toolbar;
+                border-right: 0 none;
+            }
         }
     }
 
@@ -63,6 +68,14 @@ label {
             background-color: @background-toolbar;
             right: 0;
             overflow: hidden;
+
+            .rtl & {
+                left: 0;
+                right: auto;
+
+                border-right: @scaled-one-px-value solid @border-toolbar;
+                border-left: 0 none;
+            }
         }
     }
 }
@@ -85,6 +98,13 @@ label {
     border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
     border-right: @scaled-one-px-value solid @border-toolbar;
 
+    .rtl & {
+        padding-right: 40px;
+        padding-left: 0;
+        border-left: @scaled-one-px-value solid @border-toolbar;
+        border-right: 0 none;
+    }
+
     #left-panel-chat {
         height: 100%;
     }
@@ -108,6 +128,11 @@ label {
     border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
     border-left: @scaled-one-px-value solid @border-toolbar;
     line-height: 15px;
+
+    .rtl & {
+        border-right: @scaled-one-px-value solid @border-toolbar;
+        border-left: 0 none;
+    }
 }
 
 .statusbar {
diff --git a/apps/documenteditor/main/app/controller/Viewport.js b/apps/documenteditor/main/app/controller/Viewport.js
index 713133cde..ba460e46e 100644
--- a/apps/documenteditor/main/app/controller/Viewport.js
+++ b/apps/documenteditor/main/app/controller/Viewport.js
@@ -212,7 +212,7 @@ define([
                 this.viewport.hlayout.doLayout();
                 break;
             case 'history':
-                var panel = this.viewport.hlayout.items[1];
+                var panel = this.viewport.hlayout.getItem('history');
                 if (panel.resize.el) {
                     this.boxSdk.css('border-left', '');
                     panel.resize.el.show();
@@ -220,7 +220,7 @@ define([
                 this.viewport.hlayout.doLayout();
                 break;
             case 'leftmenu':
-                var panel = this.viewport.hlayout.items[0];
+                var panel = this.viewport.hlayout.getItem('left');
                 if (panel.resize.el) {
                     if (panel.el.width() > 40) {
                         this.boxSdk.css('border-left', '');
diff --git a/apps/documenteditor/main/app/view/Viewport.js b/apps/documenteditor/main/app/view/Viewport.js
index a90ad6f6b..ac07dc555 100644
--- a/apps/documenteditor/main/app/view/Viewport.js
+++ b/apps/documenteditor/main/app/view/Viewport.js
@@ -104,33 +104,42 @@ define([
 
             $container = $('#viewport-hbox-layout', this.$el);
             var items = $container.find(' > .layout-item');
+            let iarray = [{ // left menu chat & comment
+                el: items[0],
+                rely: true,
+                alias: 'left',
+                resize: {
+                    hidden: true,
+                    autohide: false,
+                    min: 300,
+                    max: 600
+                }}, { // history versions
+                el: items[3],
+                rely: true,
+                alias: 'history',
+                resize: {
+                    hidden: true,
+                    autohide: false,
+                    min: 300,
+                    max: 600
+                }
+            }, { // sdk
+                el: items[1],
+                stretch: true
+            }, { // right menu
+                el: $(items[2]).hide(),
+                rely: true
+            }
+            ];
+
+            if ( Common.UI.isRTL() ) {
+                [iarray[0], iarray[3]] = [iarray[3], iarray[0]];
+                [iarray[1], iarray[2]] = [iarray[2], iarray[1]];
+            }
+
             this.hlayout = new Common.UI.HBoxLayout({
                 box: $container,
-                items: [{ // left menu chat & comment
-                        el: items[0],
-                        rely: true,
-                        resize: {
-                            hidden: true,
-                            autohide: false,
-                            min: 300,
-                            max: 600
-                    }}, { // history versions
-                        el: items[3],
-                        rely: true,
-                        resize: {
-                                hidden: true,
-                                autohide: false,
-                                min: 300,
-                                max: 600
-                        }
-                    }, { // sdk
-                        el: items[1],
-                        stretch: true
-                    }, { // right menu
-                        el: $(items[2]).hide(),
-                        rely: true
-                    }
-                ]
+                items: iarray
             });
 
             return this;