From aa629fb043aef36b391ed4a6784026d22827a009 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Sun, 9 Oct 2022 22:46:00 +0300
Subject: [PATCH] [rtl] Make dropdown menu (footnote, fix position)

---
 apps/common/main/lib/component/Menu.js        |  8 +++++
 apps/common/main/resources/less/combobox.less |  5 +++
 .../main/resources/less/dropdown-submenu.less |  4 +++
 apps/documenteditor/main/app/view/Links.js    | 32 +++++++++++++++----
 .../main/resources/less/toolbar.less          | 23 +++++++++++++
 5 files changed, 66 insertions(+), 6 deletions(-)

diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js
index 03e16cc01..c3b714666 100644
--- a/apps/common/main/lib/component/Menu.js
+++ b/apps/common/main/lib/component/Menu.js
@@ -173,6 +173,14 @@ define([
                 this.search = this.options.search;
                 this.outerMenu      = this.options.outerMenu;
 
+                if (Common.UI.isRTL()) {
+                    if (this.menuAlign === 'tl-tr') {
+                        this.menuAlign = 'tr-tl';
+                    } else if (this.menuAlign === 'tl-bl') {
+                        this.menuAlign = 'tr-br';
+                    }
+                }
+
                 if (this.options.restoreHeight) {
                     this.options.restoreHeight = (typeof (this.options.restoreHeight) == "number") ? this.options.restoreHeight : (this.options.maxHeight ? this.options.maxHeight : 100000);
                     !this.options.maxHeight && (this.options.maxHeight = this.options.restoreHeight);
diff --git a/apps/common/main/resources/less/combobox.less b/apps/common/main/resources/less/combobox.less
index 4c7525a16..37adced43 100644
--- a/apps/common/main/resources/less/combobox.less
+++ b/apps/common/main/resources/less/combobox.less
@@ -106,6 +106,11 @@
         border-top-color: transparent;
         border-bottom-color: transparent;
 
+        .rtl & {
+            border-left-color: @border-regular-control-ie;
+            border-left-color: @border-regular-control;
+        }
+
         &:hover, &:focus {
             background-color: transparent;
             border-right-color: @border-regular-control-ie;
diff --git a/apps/common/main/resources/less/dropdown-submenu.less b/apps/common/main/resources/less/dropdown-submenu.less
index c3a678d0a..48aa8f284 100644
--- a/apps/common/main/resources/less/dropdown-submenu.less
+++ b/apps/common/main/resources/less/dropdown-submenu.less
@@ -8,6 +8,10 @@
         margin-left: -1px;
       	border-radius:@border-radius-base;
 
+        .rtl & {
+            margin-left: 1px;
+        }
+
         &.pull-right {
             right: 100%;
             left: auto;
diff --git a/apps/documenteditor/main/app/view/Links.js b/apps/documenteditor/main/app/view/Links.js
index 8ea79d0eb..727b8965c 100644
--- a/apps/documenteditor/main/app/view/Links.js
+++ b/apps/documenteditor/main/app/view/Links.js
@@ -334,27 +334,47 @@ define([
                                 {caption: me.mniInsEndnote, value: 'ins_endnote'},
                                 {caption: '--'},
                                 new Common.UI.MenuItem({
-                                    template: _.template([
+                                    template: !Common.UI.isRTL() ? _.template([
                                         '<div class="menu-zoom" style="height: 26px;" ',
                                         '<% if(!_.isUndefined(options.stopPropagation)) { %>',
                                         'data-stopPropagation="true"',
                                         '<% } %>', '>',
                                         '<label class="title">' + me.textGotoFootnote + '</label>',
-                                        '<button id="id-menu-goto-footnote-next-' + index + '" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>',
-                                        '<button id="id-menu-goto-footnote-prev-' + index + '" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
+                                        '<button id="id-menu-goto-footnote-next-' + index + '" type="button" class="btn small btn-toolbar next"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>',
+                                        '<button id="id-menu-goto-footnote-prev-' + index + '" type="button" class="btn small btn-toolbar prev"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
+                                        '</div>'
+                                    ].join('')) :
+                                    _.template([
+                                        '<div class="menu-zoom" style="height: 26px;" ',
+                                        '<% if(!_.isUndefined(options.stopPropagation)) { %>',
+                                        'data-stopPropagation="true"',
+                                        '<% } %>', '>',
+                                        '<label class="title">' + me.textGotoFootnote + '</label>',
+                                        '<button id="id-menu-goto-footnote-prev-' + index + '" type="button" class="btn small btn-toolbar prev"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
+                                        '<button id="id-menu-goto-footnote-next-' + index + '" type="button" class="btn small btn-toolbar next"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>',
                                         '</div>'
                                     ].join('')),
                                     stopPropagation: true
                                 }),
                                 new Common.UI.MenuItem({
-                                    template: _.template([
+                                    template: !Common.UI.isRTL() ? _.template([
                                         '<div class="menu-zoom" style="height: 26px;" ',
                                         '<% if(!_.isUndefined(options.stopPropagation)) { %>',
                                         'data-stopPropagation="true"',
                                         '<% } %>', '>',
                                         '<label class="title">' + me.textGotoEndnote + '</label>',
-                                        '<button id="id-menu-goto-endnote-next-' + index + '" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>',
-                                        '<button id="id-menu-goto-endnote-prev-' + index + '" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
+                                        '<button id="id-menu-goto-endnote-next-' + index + '" type="button" class="btn small btn-toolbar next"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>',
+                                        '<button id="id-menu-goto-endnote-prev-' + index + '" type="button" class="btn small btn-toolbar prev"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
+                                        '</div>'
+                                    ].join('')) :
+                                    _.template([
+                                        '<div class="menu-zoom" style="height: 26px;" ',
+                                        '<% if(!_.isUndefined(options.stopPropagation)) { %>',
+                                        'data-stopPropagation="true"',
+                                        '<% } %>', '>',
+                                        '<label class="title">' + me.textGotoEndnote + '</label>',
+                                        '<button id="id-menu-goto-endnote-prev-' + index + '" type="button" class="btn small btn-toolbar prev"><i class="icon menu__icon btn-previtem">&nbsp;</i></button>',
+                                        '<button id="id-menu-goto-endnote-next-' + index + '" type="button" class="btn small btn-toolbar next"><i class="icon menu__icon btn-nextitem">&nbsp;</i></button>',
                                         '</div>'
                                     ].join('')),
                                     stopPropagation: true
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index a6474ba0a..aefc452f7 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -112,6 +112,11 @@
         //max-width: 95px;
         overflow: hidden;
         text-overflow: ellipsis;
+
+        .rtl & {
+            float: right;
+            padding: 5px 20px 5px 5px;
+        }
     }
 
     .zoom {
@@ -120,6 +125,24 @@
         min-width: 40px;
         text-align: center;
     }
+
+    .next {
+        float: right;
+        margin: 2px 5px 0 0;
+        .rtl & {
+            float: left;
+            margin: 2px 0 0 0 !important;
+        }
+    }
+
+    .prev {
+        float: right;
+        margin-top: 2px;
+        .rtl & {
+            float: left;
+            margin: 2px 0 0 5px;
+        }
+    }
 }