From 3431fb313f65e0fe826e60c8d803fefae8e69266 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <julia.svinaryva@onlyoffice.com>
Date: Tue, 1 Nov 2022 20:13:33 +0300
Subject: [PATCH] [rtl] Fix settings in left panel

---
 apps/common/main/lib/component/TreeView.js    | 15 ++++-
 .../main/lib/template/CommentsPanel.template  |  4 +-
 apps/common/main/resources/less/chat.less     | 13 ++++
 apps/common/main/resources/less/comments.less | 61 +++++++++++++++++++
 .../main/resources/less/searchdialog.less     | 25 ++++++++
 apps/common/main/resources/less/treeview.less |  9 +++
 .../main/app/view/Navigation.js               |  4 +-
 .../main/resources/less/navigation.less       | 19 ++++++
 .../main/app/view/Spellcheck.js               |  3 +-
 .../main/resources/less/leftmenu.less         | 10 +++
 .../main/resources/less/spellcheck.less       | 29 +++++++++
 11 files changed, 185 insertions(+), 7 deletions(-)

diff --git a/apps/common/main/lib/component/TreeView.js b/apps/common/main/lib/component/TreeView.js
index 2b2ac7add..ec4795d0e 100644
--- a/apps/common/main/lib/component/TreeView.js
+++ b/apps/common/main/lib/component/TreeView.js
@@ -170,7 +170,7 @@ define([
             initialize : function(options) {
                 options.store = options.store || new Common.UI.TreeViewStore();
                 options.emptyItemText = options.emptyItemText || '';
-                options.itemTemplate = options.itemTemplate || _.template([
+                options.itemTemplate = options.itemTemplate || !Common.UI.isRTL() ? _.template([
                     '<div id="<%= id %>" class="tree-item <% if (!isVisible) { %>' + 'hidden' + '<% } %>" style="display: block;padding-left: <%= level*16 + 24 %>px;">',
                     '<% if (hasSubItems) { %>',
                         '<div class="tree-caret img-commonctrl ' + '<% if (!isExpanded) { %>' + 'up' + '<% } %>' + '" style="margin-left: <%= level*16 %>px;"></div>',
@@ -183,6 +183,19 @@ define([
                         '<div class="name"><%= Common.Utils.String.htmlEncode(name) %></div>',
                     '<% } %>',
                     '</div>'
+                ].join('')) : _.template([
+                    '<div id="<%= id %>" class="tree-item <% if (!isVisible) { %>' + 'hidden' + '<% } %>" style="display: block;padding-right: <%= level*16 + 24 %>px;">',
+                    '<% if (hasSubItems) { %>',
+                        '<div class="tree-caret img-commonctrl ' + '<% if (!isExpanded) { %>' + 'up' + '<% } %>' + '" style="margin-right: <%= level*16 %>px;"></div>',
+                    '<% } %>',
+                    '<% if (isNotHeader) { %>',
+                        '<div class="name not-header"><%= Common.Utils.String.htmlEncode(name) %></div>',
+                    '<% } else if (isEmptyItem) { %>',
+                        '<div class="name empty">' + options.emptyItemText + '</div>',
+                    '<% } else { %>',
+                        '<div class="name"><%= Common.Utils.String.htmlEncode(name) %></div>',
+                    '<% } %>',
+                    '</div>'
                 ].join(''));
                 Common.UI.DataView.prototype.initialize.call(this, options);
             },
diff --git a/apps/common/main/lib/template/CommentsPanel.template b/apps/common/main/lib/template/CommentsPanel.template
index 5a0bb9a5a..34ed29581 100644
--- a/apps/common/main/lib/template/CommentsPanel.template
+++ b/apps/common/main/lib/template/CommentsPanel.template
@@ -12,7 +12,7 @@
     </div>
     <div id="comments-header" class="">
         <label><%=textComments%></label>
-        <div id="comments-btn-close" style="float:right;margin-left: 4px;"></div>
-        <div id="comments-btn-sort" style="float:right;"></div>
+        <div id="comments-btn-close"></div>
+        <div id="comments-btn-sort"></div>
     </div>
 </div>
diff --git a/apps/common/main/resources/less/chat.less b/apps/common/main/resources/less/chat.less
index 566e58cab..6f68facb1 100644
--- a/apps/common/main/resources/less/chat.less
+++ b/apps/common/main/resources/less/chat.less
@@ -20,6 +20,11 @@
         margin-top: 5px;
         margin-bottom: 5px;
         right: 4px !important;
+
+        .rtl & {
+            right: unset !important;
+            left: 4px !important;
+        }
     }
 
     #chat-title {
@@ -60,6 +65,10 @@
             height: 12px;
             border: 1px solid @border-toolbar-ie;
             border: 1px solid @border-toolbar;
+
+            .rtl & {
+                margin: 0 0 3px 5px;
+            }
         }
 
         .name {
@@ -119,6 +128,10 @@
                     border: 1px solid @border-toolbar;
                     margin: 0 5px 3px 0;
                     vertical-align: middle;
+
+                    .rtl & {
+                        margin: 0 0 3px 5px;
+                    }
                 }
 
                 .message {
diff --git a/apps/common/main/resources/less/comments.less b/apps/common/main/resources/less/comments.less
index c911a59e1..e4e0b2361 100644
--- a/apps/common/main/resources/less/comments.less
+++ b/apps/common/main/resources/less/comments.less
@@ -23,6 +23,25 @@
             .font-weight-bold();
             margin-top: 2px;
         }
+
+        #comments-btn-close {
+            float: right;
+            margin-left: 4px;
+
+            .rtl & {
+                float: left;
+                margin-left: 0;
+                margin-right: 4px;
+            }
+        }
+
+        #comments-btn-sort {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
     }
 
     .messages-ct {
@@ -44,6 +63,11 @@
             margin-top: 5px;
             margin-bottom: 5px;
             right: 4px !important;
+
+            .rtl & {
+                right: unset !important;
+                left: 4px !important;
+            }
         }
 
         .dataview-ct.inner {
@@ -110,9 +134,19 @@
     .btn {
         &.add {
             margin-left: 20px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 20px;
+            }
         }
         &.cancel {
             margin-left: 7px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 7px;
+            }
         }
     }
 }
@@ -175,6 +209,10 @@
         padding: 10px 65px 0 0px;
         height: 26px;
         cursor: default;
+
+        .rtl & {
+            padding: 10px 0px 0 65px;
+        }
     }
 
     .color {
@@ -184,6 +222,10 @@
         border: @scaled-one-px-value solid @border-toolbar;
         margin: 0 5px 3px 0;
         vertical-align: middle;
+
+        .rtl & {
+            margin: 0 0 3px 5px;
+        }
     }
 
     .user-name-colored {
@@ -272,6 +314,12 @@
         top: 0;
         margin: 11px 21px 10px 10px;
         height: 20px;
+
+        .rtl & {
+            right: unset;
+            left: 0;
+            margin: 11px 10px 10px 21px;
+        }
     }
 
     .btns-reply-ct {
@@ -280,6 +328,11 @@
         top: 0;
         height: 30px;
         margin-top: 11px;
+
+        .rtl & {
+            right: unset;
+            left: 0;
+        }
     }
 
     .reply-item-ct {
@@ -291,6 +344,10 @@
     div[class^=btn-] {
         float: left;
         cursor: pointer;
+
+        .rtl & {
+            float: right;
+        }
     }
 
     .btn-edit,.btn-delete, .btn-resolve, .icon-resolve, .btn-resolve-check, .btn-accept, .btn-reject, .btn-goto {
@@ -298,6 +355,10 @@
         height: 16px;
         margin: 0 0 0 5px;
         background-color: transparent;
+
+        .rtl & {
+            margin: 0 5px 0 0;
+        }
     }
 
     .icon-resolve {
diff --git a/apps/common/main/resources/less/searchdialog.less b/apps/common/main/resources/less/searchdialog.less
index e96e720ef..ac0dfd6fb 100644
--- a/apps/common/main/resources/less/searchdialog.less
+++ b/apps/common/main/resources/less/searchdialog.less
@@ -132,6 +132,10 @@
 
         #search-btn-close {
             float: right;
+
+            .rtl & {
+                float: left;
+            }
         }
     }
 
@@ -170,6 +174,11 @@
         .search-nav-btns {
             display: inline-block;
             float: right;
+
+            .rtl & {
+                float: left;
+            }
+
             div {
                 display: inline-block;
             }
@@ -200,6 +209,11 @@
         cursor: pointer;
         margin-left: 15px;
 
+        .rtl & {
+            margin-left: 0;
+            margin-right: 15px;
+        }
+
         .search-options-txt {
             display: inline-block;
             padding: 5px 0;
@@ -214,6 +228,13 @@
             left: 0;
             cursor: pointer;
             margin-left: 8px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 8px;
+                left: unset;
+                right: 0;
+            }
         }
 
     }
@@ -234,6 +255,10 @@
         }
         .search-options-caret {
             transform: rotate(270deg);
+
+            .rtl & {
+                transform: rotate(90deg);
+            }
         }
     }
 
diff --git a/apps/common/main/resources/less/treeview.less b/apps/common/main/resources/less/treeview.less
index 059dfddff..78b5875f4 100644
--- a/apps/common/main/resources/less/treeview.less
+++ b/apps/common/main/resources/less/treeview.less
@@ -79,8 +79,17 @@
     left: 0;
     cursor: pointer;
 
+    .rtl & {
+      left: unset;
+      right: 0;
+    }
+
     &.up {
       transform: rotate(270deg);
+
+      .rtl & {
+        transform: rotate(90deg);
+      }
     }
   }
 }
diff --git a/apps/documenteditor/main/app/view/Navigation.js b/apps/documenteditor/main/app/view/Navigation.js
index 3fec05e5f..d9ce8ce20 100644
--- a/apps/documenteditor/main/app/view/Navigation.js
+++ b/apps/documenteditor/main/app/view/Navigation.js
@@ -51,8 +51,8 @@ define([
             '<div id="navigation-box" class="layout-ct vbox">',
             '<div id="navigation-header" className="">',
                 '<label><%= scope.strNavigate%></label>',
-                '<div id="navigation-btn-close" style="float:right;margin-left: 4px;"></div>',
-                '<div id="navigation-btn-settings" style="float:right;"></div>',
+                '<div id="navigation-btn-close"></div>',
+                '<div id="navigation-btn-settings"></div>',
             '</div>',
                 '<div id="navigation-list" class="">',
                 '</div>',
diff --git a/apps/documenteditor/main/resources/less/navigation.less b/apps/documenteditor/main/resources/less/navigation.less
index 9fd80ddb9..505ab8b81 100644
--- a/apps/documenteditor/main/resources/less/navigation.less
+++ b/apps/documenteditor/main/resources/less/navigation.less
@@ -18,6 +18,25 @@
             .font-weight-bold();
             margin-top: 2px;
         }
+
+        #navigation-btn-close {
+            float: right;
+            margin-left: 4px;
+
+            .rtl & {
+                float: left;
+                margin-left: 0;
+                margin-right: 4px;
+            }
+        }
+
+        #navigation-btn-settings {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
     }
 
     #navigation-list {
diff --git a/apps/spreadsheeteditor/main/app/view/Spellcheck.js b/apps/spreadsheeteditor/main/app/view/Spellcheck.js
index 82bcf0673..a4de2cce1 100644
--- a/apps/spreadsheeteditor/main/app/view/Spellcheck.js
+++ b/apps/spreadsheeteditor/main/app/view/Spellcheck.js
@@ -65,7 +65,7 @@ define([
                         '<label class="header" style="display: block;"><%= scope.txtDictionaryLanguage %></label>',
                         '<div id="spellcheck-dictionary-language"></div>',
                         '<div id="spellcheck-complete" class="hidden">',
-                            '<i class="btn-resolve" style="display: inline-block;margin-right: 10px;"></i>',
+                            '<i class="btn-resolve"></i>',
                             '<%= scope.txtComplete %>' ,
                         '</div>',
                     '</div>',
@@ -110,7 +110,6 @@ define([
 
             this.buttonNext = new Common.UI.Button({
                 parentEl: $('#spellcheck-next'),
-                style: 'margin-left: 5px;',
                 cls: 'btn-toolbar bg-white',
                 iconCls: 'toolbar__icon btn-nextitem',
                 hint: this.txtNextTip,
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index 0694bfe19..9bd8e6042 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -889,6 +889,11 @@
                 &:last-child {
                     width: 36%;
                 }
+
+                .rtl & {
+                    padding-left: 0;
+                    padding-right: 4px;
+                }
             }
         }
         .search-items {
@@ -911,6 +916,11 @@
                     &:last-child {
                         width: 36%;
                     }
+
+                    .rtl & {
+                        padding-left: 0;
+                        padding-right: 4px;
+                    }
                 }
             }
         }
diff --git a/apps/spreadsheeteditor/main/resources/less/spellcheck.less b/apps/spreadsheeteditor/main/resources/less/spellcheck.less
index 2f7f4cebf..f9f7b9d0f 100644
--- a/apps/spreadsheeteditor/main/resources/less/spellcheck.less
+++ b/apps/spreadsheeteditor/main/resources/less/spellcheck.less
@@ -40,6 +40,11 @@
                 margin-top: 5px;
                 margin-bottom: 5px;
                 right: 4px !important;
+
+                .rtl & {
+                    right: unset !important;
+                    left: 4px !important;
+                }
             }
         }
     }
@@ -52,6 +57,15 @@
 
     #spellcheck-next {
         display: inline-block;
+
+        .btn {
+            margin-left: 5px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 5px;
+            }
+        }
     }
 
     #spellcheck-suggestions-list {
@@ -70,6 +84,11 @@
     #spellcheck-ignore {
         margin-left: 9px;
         display: inline-block;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 9px;
+        }
     }
 
     #spellcheck-add-to-dictionary {
@@ -86,6 +105,16 @@
 
     #spellcheck-complete {
         display: flex;
+
+        .btn-resolve {
+            display: inline-block;
+            margin-right: 10px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 10px;
+            }
+        }
     }
     .btn-resolve
     {