From 1fc88fb6c3338b3ac9bf7799deaa93e5a2f92c28 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <julia.svinaryva@onlyoffice.com>
Date: Tue, 4 Oct 2022 16:41:46 +0300
Subject: [PATCH] [rtl] Make dropdown menu

---
 apps/common/main/resources/less/common.less    | 18 ++++++++++++++++++
 .../main/resources/less/dropdown-menu.less     | 18 ++++++++++++++++++
 .../main/resources/less/dropdown-submenu.less  | 10 ++++++++++
 apps/documenteditor/main/app/view/Toolbar.js   | 12 +++++++-----
 4 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less
index 7b070e57c..1de9945a8 100644
--- a/apps/common/main/resources/less/common.less
+++ b/apps/common/main/resources/less/common.less
@@ -325,4 +325,22 @@ body {
     .ps-scrollbar-y {
         left: 0 !important;
     }
+}
+
+.menu-margins {
+    .margin-vertical {
+        display: inline-block;
+        margin-right: 20px;
+        min-width: 80px;
+        .rtl & {
+            margin-right: 0;
+            margin-left: 20px;
+        }
+    }
+    .margin-horizontal {
+        display: inline-block;
+    }
+    label {
+        display: block;
+    }
 }
\ No newline at end of file
diff --git a/apps/common/main/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less
index ae4def3ed..e33f1fa4c 100644
--- a/apps/common/main/resources/less/dropdown-menu.less
+++ b/apps/common/main/resources/less/dropdown-menu.less
@@ -80,6 +80,12 @@
                 float: left;
                 margin-left: -18px;
                 background-position: @menu-check-offset-x @menu-check-offset-y;
+
+                .rtl & {
+                    float: right;
+                    margin-left: 0;
+                    margin-right: -18px;
+                }
             }
             &.custom-scale:before {
                 margin-top: 3px;
@@ -99,6 +105,11 @@
             margin: -2px 5px 0 -15px;
             background-repeat: no-repeat;
             opacity: @component-normal-icon-opacity;
+
+            .rtl & {
+                float: right;
+                margin: -2px -15px 0 5px;
+            }
         }
 
         .no-checkmark.checked {
@@ -140,9 +151,16 @@
         li {
             & > a {
                 padding-left: 28px;
+                .rtl & {
+                    padding-left: 20px;
+                    padding-right: 28px;
+                }
             }
             .menu-item-icon {
                 margin: -2px 0 0 -24px;
+                .rtl & {
+                    margin: -2px -24px 0 0;
+                }
             }
             .checked:not(.no-checkmark):before  {
                 margin-left: -22px;
diff --git a/apps/common/main/resources/less/dropdown-submenu.less b/apps/common/main/resources/less/dropdown-submenu.less
index e422dfd3f..c3a678d0a 100644
--- a/apps/common/main/resources/less/dropdown-submenu.less
+++ b/apps/common/main/resources/less/dropdown-submenu.less
@@ -27,6 +27,16 @@
         border-left-color: @icon-normal;
         margin-top: 5px;
         margin-right: -7px;
+
+        .rtl & {
+            float: left;
+            margin-right: 0;
+            margin-left: -7px;
+            border-color: transparent;
+            border-width: 3px 3px 3px 0;
+            border-right-color: @icon-normal-ie;
+            border-right-color: @icon-normal;
+        }
     }
 
     &.over:not(.disabled) > .dropdown-menu {
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index 93f63587e..5e047099c 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -1033,11 +1033,12 @@ define([
 
 
                     var pageMarginsTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
-                        '<% if (options.value !== null) { %><div style="display: inline-block;margin-right: 20px;min-width: 80px;">' +
-                        '<label style="display: block;">' + this.textTop + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
-                        '<label style="display: block;">' + this.textLeft + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div><div style="display: inline-block;">' +
-                        '<label style="display: block;">' + this.textBottom + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
-                        '<label style="display: block;">' + this.textRight + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' +
+                        '<% if (options.value !== null) { %><div class="margin-vertical">' +
+                        '<label>' + this.textTop + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
+                        '<label>' + this.textLeft + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' +
+                        '<div class="margin-horizontal">' +
+                        '<label>' + this.textBottom + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label>' +
+                        '<label>' + this.textRight + '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></label></div>' +
                         '<% } %></a>');
 
                     this.btnPageMargins = new Common.UI.Button({
@@ -1047,6 +1048,7 @@ define([
                         lock: [_set.docPropsLock, _set.previewReviewMode, _set.viewFormMode, _set.lostConnect, _set.disableOnStart],
                         caption: me.capBtnMargins,
                         menu: new Common.UI.Menu({
+                            cls: 'menu-margins',
                             items: [
                                 {
                                     caption: this.textMarginsLast,