From 03db98ce74bb48d8f57d91b31db5cc2ecbbde6b2 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <julia.svinaryva@onlyoffice.com>
Date: Sun, 23 Oct 2022 19:07:40 +0300
Subject: [PATCH] [rtl] Make settings in right panel

---
 .../main/lib/component/ComboBorderSize.js     |   4 +-
 apps/common/main/resources/less/buttons.less  |  39 ++++
 .../resources/less/combo-border-size.less     |   6 +-
 .../main/resources/less/combo-dataview.less   |   4 +
 .../template/HeaderFooterSettings.template    |  18 +-
 .../main/app/template/ImageSettings.template  |   8 +-
 .../app/template/ParagraphSettings.template   |   2 +-
 .../main/app/template/TableSettings.template  |  18 +-
 .../app/template/TextArtSettings.template     |   8 +-
 .../main/app/view/TableSettings.js            |   3 +-
 .../main/resources/less/rightmenu.less        | 201 +++++++++++++++++-
 11 files changed, 275 insertions(+), 36 deletions(-)

diff --git a/apps/common/main/lib/component/ComboBorderSize.js b/apps/common/main/lib/component/ComboBorderSize.js
index e893701cf7..85a1aeeb30 100644
--- a/apps/common/main/lib/component/ComboBorderSize.js
+++ b/apps/common/main/lib/component/ComboBorderSize.js
@@ -182,7 +182,7 @@ define([
 
     Common.UI.ComboBorderSizeEditable = Common.UI.ComboBox.extend(_.extend({
         template: _.template([
-            '<span class="input-group combobox combo-border-size combo-border-size-ed input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
+            '<span class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
                 '<input type="text" class="form-control text" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
                 '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
                     '<span class="caret"></span>',
@@ -241,7 +241,7 @@ define([
 
     Common.UI.ComboBorderType = Common.UI.ComboBorderSize.extend(_.extend({
         template: _.template([
-            '<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
+            '<div class="input-group combobox combo-border-size combo-border-type input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
                 '<div class="form-control" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
                     '<i class="image"></i>',
                 '</div>',
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index c256ff5fa9..bb408bce14 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -477,6 +477,10 @@
 
     &.align-left {
         text-align: left;
+
+        .rtl & {
+            text-align: right;
+        }
     }
 }
 
@@ -531,6 +535,22 @@
     > .btn {
         + .dropdown-toggle {
             padding: 0 4px 0 3px;
+
+            .rtl & {
+                padding: 0 3px 0 4px;
+            }
+        }
+
+        .rtl & {
+            float: right;
+        }
+
+        &:first-child:not(:last-child):not(.dropdown-toggle) {
+            .rtl & {
+                .border-radius(@border-radius-small);
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
         }
     }
 
@@ -544,6 +564,14 @@
         }
     }
 
+    > .dropdown-toggle:not(first-child) {
+        .rtl & {
+            .border-radius(@border-radius-small);
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
+
     .caption {
         &:empty {
             display: none;
@@ -893,6 +921,11 @@
         position: absolute;
         right: 5px;
         margin-top: 5px;
+
+        .rtl & {
+            right: auto;
+            left: 5px;
+        }
     }
 
     &:hover:not(.disabled),
@@ -935,6 +968,12 @@
 
     &:not(.dropdown-toggle) {
         border-right: none;
+
+        .rtl & {
+            border: @scaled-one-px-value-ie solid @border-regular-control-ie;
+            border: @scaled-one-px-value solid @border-regular-control;
+            border-left: none;
+        }
     }
 
     &:hover:not(.disabled),
diff --git a/apps/common/main/resources/less/combo-border-size.less b/apps/common/main/resources/less/combo-border-size.less
index 64c3cb0d32..5216ad5650 100644
--- a/apps/common/main/resources/less/combo-border-size.less
+++ b/apps/common/main/resources/less/combo-border-size.less
@@ -68,15 +68,13 @@
         }
     }
 
-    &:not(.combo-border-size-ed) {
+    &.combo-border-type {
         .rtl & li img {
             float: right;
         }
     }
-}
 
-.combo-border-size-ed {
-    .dropdown-menu li a {
+    &:not(.combo-border-type) .dropdown-menu li a {
         padding: 5px 20px;
     }
 }
diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less
index 81ebef4d96..eff057003d 100644
--- a/apps/common/main/resources/less/combo-dataview.less
+++ b/apps/common/main/resources/less/combo-dataview.less
@@ -320,6 +320,10 @@
     .item {
         margin: @combo-dataview-item-margins 0 @combo-dataview-item-margins @combo-dataview-item-margins;
         .box-shadow(none);
+
+        .rtl & {
+            margin: @combo-dataview-item-margins @combo-dataview-item-margins @combo-dataview-item-margins 0;
+        }
     }
 
     &.disabled {
diff --git a/apps/documenteditor/main/app/template/HeaderFooterSettings.template b/apps/documenteditor/main/app/template/HeaderFooterSettings.template
index b63bc9bd6c..c12357ac88 100644
--- a/apps/documenteditor/main/app/template/HeaderFooterSettings.template
+++ b/apps/documenteditor/main/app/template/HeaderFooterSettings.template
@@ -52,9 +52,9 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div id="headerfooter-button-top-left" style="display: inline-block; margin-right:5px;"></div>
-            <div id="headerfooter-button-top-center" style="display: inline-block; margin-right:5px;"></div>
-            <div id="headerfooter-button-top-right" style="display: inline-block; margin-right:5px;"></div>
+            <div id="headerfooter-button-top-left"></div>
+            <div id="headerfooter-button-top-center"></div>
+            <div id="headerfooter-button-top-right"></div>
         </td>
     </tr>
     <tr>
@@ -64,9 +64,9 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div id="headerfooter-button-bottom-left" style="display: inline-block; margin-right:5px;"></div>
-            <div id="headerfooter-button-bottom-center" style="display: inline-block; margin-right:5px;"></div>
-            <div id="headerfooter-button-bottom-right" style="display: inline-block; margin-right:5px;"></div>
+            <div id="headerfooter-button-bottom-left"></div>
+            <div id="headerfooter-button-bottom-center"></div>
+            <div id="headerfooter-button-bottom-right"></div>
         </td>
     </tr>
     <tr>
@@ -86,9 +86,9 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div id="headerfooter-radio-prev"  style="margin-bottom: 5px;"></div>
-            <div id="headerfooter-radio-from" style="display: inline-block;vertical-align: middle; margin-right: 2px;"></div>
-            <div id="headerfooter-spin-from" style="display: inline-block;vertical-align: middle;"></div>
+            <div id="headerfooter-radio-prev"></div>
+            <div id="headerfooter-radio-from"></div>
+            <div id="headerfooter-spin-from"></div>
         </td>
     </tr>
     <tr class="finish-cell"></tr>
diff --git a/apps/documenteditor/main/app/template/ImageSettings.template b/apps/documenteditor/main/app/template/ImageSettings.template
index af368f5f75..4495f4a15e 100644
--- a/apps/documenteditor/main/app/template/ImageSettings.template
+++ b/apps/documenteditor/main/app/template/ImageSettings.template
@@ -41,15 +41,15 @@
         <td class="padding-small" width="50%">
             <label class="input-label"><%= scope.textRotate90 %></label>
             <div>
-                <div id="image-button-270" style="display: inline-block;margin-right: 4px;"></div>
-                <div id="image-button-90" style="display: inline-block;"></div>
+                <div id="image-button-270"></div>
+                <div id="image-button-90"></div>
             </div>
         </td>
         <td class="padding-small" width="50%">
             <label class="input-label"><%= scope.textFlip %></label>
             <div>
-                <div id="image-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
-                <div id="image-button-flipv" style="display: inline-block;"></div>
+                <div id="image-button-fliph"></div>
+                <div id="image-button-flipv"></div>
             </div>
         </td>
     </tr>
diff --git a/apps/documenteditor/main/app/template/ParagraphSettings.template b/apps/documenteditor/main/app/template/ParagraphSettings.template
index 1d4a607b6b..e778772e54 100644
--- a/apps/documenteditor/main/app/template/ParagraphSettings.template
+++ b/apps/documenteditor/main/app/template/ParagraphSettings.template
@@ -73,7 +73,7 @@
     <tr class="text-only">
         <td class="padding-small" colspan=2>
             <div id="paragraph-color-btn" style="display: inline-block;"></div>
-            <label class="input-label" style="margin-left: 5px;"><%= scope.textBackColor %></label>
+            <label class="input-label margin"><%= scope.textBackColor %></label>
         </td>
     </tr>
     <tr>
diff --git a/apps/documenteditor/main/app/template/TableSettings.template b/apps/documenteditor/main/app/template/TableSettings.template
index 43682ae7c6..46a015fec6 100644
--- a/apps/documenteditor/main/app/template/TableSettings.template
+++ b/apps/documenteditor/main/app/template/TableSettings.template
@@ -53,10 +53,10 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <div id="table-combo-border-size" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
-            <div style="display: inline-block; float:right;vertical-align: middle;">
-                <label class="input-label" style="margin-right: 5px;"><%= scope.textBorderColor %></label>
-                <div id="table-border-color-btn" style="display: inline-block;"></div>
+            <div id="table-combo-border-size"></div>
+            <div class="table-color">
+                <label class="input-label"><%= scope.textBorderColor %></label>
+                <div id="table-border-color-btn"></div>
             </div>
         </td>
     </tr>
@@ -85,7 +85,7 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2 align="right">
-            <label class="input-label" style="margin-right: 5px;"><%= scope.textBackColor %></label>
+            <label class="input-label margin"><%= scope.textBackColor %></label>
             <div id="table-back-color-btn" style="display: inline-block;text-align:left;"></div>
         </td>
     </tr>
@@ -112,15 +112,15 @@
     <tr>
         <td class="padding-small" colspan=2>
             <label style="margin-top: 3px;"><%= scope.textHeight %></label>
-            <div id="table-btn-distrub-rows" style="display: inline-block; float:right; margin-left: 4px;"></div>
-            <div id="table-spin-cell-height" style="display: inline-block; float:right;"></div>
+            <div id="table-btn-distrub-rows"></div>
+            <div id="table-spin-cell-height"></div>
         </td>
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
             <label style="margin-top: 3px;"><%= scope.textWidth %></label>
-            <div id="table-btn-distrub-cols" style="display: inline-block; float:right; margin-left: 4px;"></div>
-            <div id="table-spin-cell-width" style="display: inline-block; float:right;"></div>
+            <div id="table-btn-distrub-cols"></div>
+            <div id="table-spin-cell-width"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/documenteditor/main/app/template/TextArtSettings.template b/apps/documenteditor/main/app/template/TextArtSettings.template
index 7ca7e0e6cf..f33e1ab9c7 100644
--- a/apps/documenteditor/main/app/template/TextArtSettings.template
+++ b/apps/documenteditor/main/app/template/TextArtSettings.template
@@ -39,7 +39,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="textart-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="textart-button-direction"></div>
                             </div>
@@ -47,7 +47,7 @@
                     </tr>
                     <tr valign="bottom">
                         <td>
-                            <label class="input-label" style="margin-right: 5px;margin-bottom: 3px;"><%= scope.textAngle %></label>
+                            <label class="input-label angle-label"><%= scope.textAngle %></label>
                         </td>
                         <td>
                             <div id="textart-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@@ -64,7 +64,7 @@
                         <label class="input-label" style=""><%= scope.strColor %></label>
                         <div id="textart-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="textart-gradient-position"></div>
                     </div>
@@ -86,7 +86,7 @@
                     <div id="textart-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
                     <label id="textart-lbl-transparency-end">100</label>
                 </div>
-                <div id="textart-spin-transparency" style="display: inline-block;float: right;"></div>
+                <div id="textart-spin-transparency"></div>
             </div>
         </td>
     </tr>
diff --git a/apps/documenteditor/main/app/view/TableSettings.js b/apps/documenteditor/main/app/view/TableSettings.js
index 33335fbbf0..3be33c095b 100644
--- a/apps/documenteditor/main/app/view/TableSettings.js
+++ b/apps/documenteditor/main/app/view/TableSettings.js
@@ -484,7 +484,6 @@ define([
                 cls         : 'btn-toolbar',
                 iconCls     : 'toolbar__icon table-to-text',
                 caption     : this.textConvert,
-                style       : 'width: 100%;text-align: left;',
                 dataHint    : '1',
                 dataHintDirection: 'left',
                 dataHintOffset: 'medium'
@@ -871,7 +870,7 @@ define([
                     menu        : new Common.UI.Menu({
                         style: 'width: 588px;',
                         items: [
-                            { template: _.template('<div id="id-table-menu-template" class="menu-table-template"  style="margin: 5px 5px 5px 10px;"></div>') }
+                            { template: _.template('<div id="id-table-menu-template" class="menu-table-template"></div>') }
                         ]
                     }),
                     dataHint: '1',
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index b4a1ac59b0..8d462d8837 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -9,10 +9,108 @@
     }
 }
 .right-panel .settings-panel {
-    label.input-label{
+    label.input-label {
         vertical-align: baseline;
     }
 
+    &#id-paragraph-settings {
+        .input-label.margin {
+            margin-left: 5px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 5px;
+            }
+        }
+    }
+
+    &#id-table-settings {
+        #id-table-menu-template {
+            margin: 5px 5px 5px 10px;
+
+            .rtl & {
+                margin: 5px 10px 5px 5px;
+            }
+
+            .group-description {
+                padding: 3px 0 3px 10px;
+
+                .rtl & {
+                    padding: 3px 10px 3px 0;
+                    text-align: right;
+                }
+            }
+        }
+
+        #table-combo-border-size {
+            display: inline-block;
+            vertical-align: middle;
+            width: 93px;
+        }
+
+        .table-color {
+            display: inline-block;
+            float: right;
+            vertical-align: middle;
+
+            .rtl & {
+                float: left;
+            }
+
+            .input-label {
+                margin-right: 5px;
+
+                .rtl & {
+                    margin-right: 0;
+                    margin-left: 5px;
+                }
+            }
+
+            #table-border-color-btn {
+                display: inline-block;
+            }
+        }
+
+        .input-label.margin {
+            margin-right: 5px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        #table-btn-distrub-rows, #table-btn-distrub-cols,
+        #table-spin-cell-height, #table-spin-cell-width {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #table-btn-distrub-rows, #table-btn-distrub-cols {
+            margin-left: 4px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 4px;
+            }
+        }
+
+        #table-btn-convert-to-text {
+            .btn {
+                width: 100%;
+                text-align: left;
+
+                .rtl & {
+                    text-align: right;
+                }
+            }
+        }
+    }
+
     &#id-shape-settings {
         #shape-panel-transparent-fill {
             width: 100%;
@@ -71,6 +169,107 @@
             }
         }
     }
+
+    &#id-image-settings {
+        #image-button-270, #image-button-fliph {
+            display: inline-block;
+            margin-right: 4px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 4px;
+            }
+        }
+
+        #image-button-90, #image-button-flipv {
+            display: inline-block;
+        }
+    }
+
+    &#id-header-settings {
+        #headerfooter-radio-from {
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 2px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 2px;
+            }
+        }
+
+        #headerfooter-radio-prev {
+            margin-bottom: 5px;
+        }
+
+        #headerfooter-spin-from {
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        #headerfooter-button-top-left,
+        #headerfooter-button-top-center,
+        #headerfooter-button-top-right,
+        #headerfooter-button-bottom-left,
+        #headerfooter-button-bottom-center,
+        #headerfooter-button-bottom-right {
+            display: inline-block;
+            margin-right: 5px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+    }
+
+    &#id-textart-settings {
+        #textart-spin-transparency {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #textart-panel-gradient-fill {
+            .textart-direction {
+                float: right;
+
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+
+        .angle-label {
+            margin-bottom: 3px;
+            margin-right: 5px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        #id-textart-menu-direction {
+            .dataview .item {
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+
+        .gradient-position {
+            margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+        }
+    }
 }
 
 .ie {