From 7d4c913be9f090046aec640a8b2a5aac6269a1d3 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Mon, 28 Nov 2022 16:41:25 +0300
Subject: [PATCH] [rtl] Fix dialogs from toolbar for PE and DE

---
 .../common/main/lib/view/InsertTableDialog.js |  5 +-
 .../less/advanced-settings-window.less        | 10 ++++
 .../main/resources/less/combo-dataview.less   |  7 +++
 .../main/app/view/DateTimeDialog.js           |  3 +-
 .../resources/less/advanced-settings.less     | 10 ++++
 .../main/app/view/Animation.js                |  2 +-
 .../main/app/view/DateTimeDialog.js           |  3 +-
 .../main/app/view/GridSettings.js             |  4 +-
 .../main/app/view/HyperlinkSettingsDialog.js  |  4 +-
 .../main/app/view/Transitions.js              |  2 +-
 .../resources/less/advanced-settings.less     | 57 +++++++++++++++++++
 .../main/resources/less/animation.less        | 12 ++++
 12 files changed, 109 insertions(+), 10 deletions(-)

diff --git a/apps/common/main/lib/view/InsertTableDialog.js b/apps/common/main/lib/view/InsertTableDialog.js
index 39521c44f..0c77d0301 100644
--- a/apps/common/main/lib/view/InsertTableDialog.js
+++ b/apps/common/main/lib/view/InsertTableDialog.js
@@ -51,6 +51,7 @@ define([
             height: 157,
             style: 'min-width: 230px;',
             cls: 'modal-dlg',
+            id: 'window-insert-table',
             split: false,
             buttons: ['ok', 'cancel']
         },
@@ -63,10 +64,10 @@ define([
             this.template = [
                 '<div class="box">',
                     '<div class="input-row">',
-                        '<label class="text columns-text" style="width: 130px;">' + this.txtColumns + '</label><div class="columns-val" style="float: right;"></div>',
+                        '<label class="text columns-text" style="width: 130px;">' + this.txtColumns + '</label><div class="columns-val"></div>',
                     '</div>',
                     '<div class="input-row" style="margin-top: 10px;">',
-                        '<label class="text rows-text" style="width: 130px;">' + this.txtRows + '</label><div class="rows-val" style="float: right;"></div>',
+                        '<label class="text rows-text" style="width: 130px;">' + this.txtRows + '</label><div class="rows-val"></div>',
                     '</div>',
                 '</div>'
             ].join('');
diff --git a/apps/common/main/resources/less/advanced-settings-window.less b/apps/common/main/resources/less/advanced-settings-window.less
index 68c983069..73896257d 100644
--- a/apps/common/main/resources/less/advanced-settings-window.less
+++ b/apps/common/main/resources/less/advanced-settings-window.less
@@ -122,3 +122,13 @@
         }
     }
 }
+
+#window-insert-table {
+    .columns-val, .rows-val {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+}
diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less
index eff057003..731eb9ef8 100644
--- a/apps/common/main/resources/less/combo-dataview.less
+++ b/apps/common/main/resources/less/combo-dataview.less
@@ -450,6 +450,13 @@
     .view {
         margin-right: -@combo-dataview-button-width;
         padding-right: calc(@combo-dataview-button-width - @scaled-one-px-value);
+
+        .rtl & {
+            margin-right: 0;
+            padding-right: 0;
+            margin-left: -@combo-dataview-button-width;
+            padding-left: calc(@combo-dataview-button-width - @scaled-one-px-value);
+        }
     }
 
     .view .dataview, .dropdown-menu {
diff --git a/apps/documenteditor/main/app/view/DateTimeDialog.js b/apps/documenteditor/main/app/view/DateTimeDialog.js
index 80253793d..c1f62237f 100644
--- a/apps/documenteditor/main/app/view/DateTimeDialog.js
+++ b/apps/documenteditor/main/app/view/DateTimeDialog.js
@@ -50,6 +50,7 @@ define([
             width: 350,
             style: 'min-width: 230px;',
             cls: 'modal-dlg',
+            id: 'window-date-time',
             buttons: ['ok', 'cancel']
         },
 
@@ -73,7 +74,7 @@ define([
                     '<div id="datetime-dlg-format" class="" style="margin-bottom: 10px;width: 100%; height: 162px; overflow: hidden;"></div>',
                     '<div class="input-row">',
                         '<div id="datetime-dlg-update" style="margin-top: 3px;"></div>',
-                        '<button type="button" class="btn btn-text-default auto" id="datetime-dlg-default" style="float: right;">' + this.textDefault + '</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="datetime-dlg-default">' + this.textDefault + '</button>',
                     '</div>',
                 '</div>'
             ].join('');
diff --git a/apps/documenteditor/main/resources/less/advanced-settings.less b/apps/documenteditor/main/resources/less/advanced-settings.less
index bc4a1fa99..a87187bca 100644
--- a/apps/documenteditor/main/resources/less/advanced-settings.less
+++ b/apps/documenteditor/main/resources/less/advanced-settings.less
@@ -297,4 +297,14 @@
             padding-left: 15px;
         }
     }
+}
+
+#window-date-time {
+    #datetime-dlg-default {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
 }
\ No newline at end of file
diff --git a/apps/presentationeditor/main/app/view/Animation.js b/apps/presentationeditor/main/app/view/Animation.js
index 4358439fb..414c2afb3 100644
--- a/apps/presentationeditor/main/app/view/Animation.js
+++ b/apps/presentationeditor/main/app/view/Animation.js
@@ -225,7 +225,7 @@ define([
 
                         if (menu.cmpEl) {
                             menu.menuAlignEl = cmp.cmpEl;
-                            menu.menuAlign = 'tl-tl';
+                            menu.menuAlign = Common.UI.isRTL() ? 'tr-tr' : 'tl-tl';
                             menu.cmpEl.css({
                                 'width': cmp.cmpEl.width() - cmp.openButton.$el.width(),
                                 'min-height': cmp.cmpEl.height()
diff --git a/apps/presentationeditor/main/app/view/DateTimeDialog.js b/apps/presentationeditor/main/app/view/DateTimeDialog.js
index e170cb6d1..46a98c990 100644
--- a/apps/presentationeditor/main/app/view/DateTimeDialog.js
+++ b/apps/presentationeditor/main/app/view/DateTimeDialog.js
@@ -50,6 +50,7 @@ define([
             width: 350,
             style: 'min-width: 230px;',
             cls: 'modal-dlg',
+            id: 'window-date-time',
             buttons: ['ok', 'cancel']
         },
 
@@ -73,7 +74,7 @@ define([
                     '<div id="datetime-dlg-format" class="" style="margin-bottom: 10px;width: 100%; height: 162px; overflow: hidden;"></div>',
                     '<div class="input-row">',
                         '<div id="datetime-dlg-update" style="margin-top: 3px;"></div>',
-                        '<button type="button" class="btn btn-text-default auto" id="datetime-dlg-default" style="float: right;">' + this.textDefault + '</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="datetime-dlg-default">' + this.textDefault + '</button>',
                     '</div>',
                 '</div>'
             ].join('');
diff --git a/apps/presentationeditor/main/app/view/GridSettings.js b/apps/presentationeditor/main/app/view/GridSettings.js
index c39cab567..66f7923de 100644
--- a/apps/presentationeditor/main/app/view/GridSettings.js
+++ b/apps/presentationeditor/main/app/view/GridSettings.js
@@ -64,8 +64,8 @@ define([
                     '<div class="input-row">',
                         '<label class="text">' + this.textSpacing + '</label>',
                     '</div>',
-                    '<div id="grid-spacing-combo" class="input-group-nr" style="display: inline-block;width:86px;"></div>',
-                    '<div id="grid-spacing-spin" style="display: inline-block;margin-left: 10px;"></div>',
+                    '<div id="grid-spacing-combo" class="input-group-nr"></div>',
+                    '<div id="grid-spacing-spin"></div>',
                 '</div>',
                 '<div class="separator horizontal"></div>'
             ].join('');
diff --git a/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js b/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js
index ba97812f9..0e9ac49e5 100644
--- a/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js
+++ b/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js
@@ -71,8 +71,8 @@ define([
             this.template = [
                 '<div class="box" style="height: 319px;">',
                     '<div class="input-row" style="margin-bottom: 10px;">',
-                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textExternalLink,'</button>',
-                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal" style="border-top-left-radius: 0;border-bottom-left-radius: 0;border-left-width: 0;margin-left: -1px;">', this.textInternalLink,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external">', this.textExternalLink,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal">', this.textInternalLink,'</button>',
                     '</div>',
                     '<div id="id-external-link">',
                         '<div class="input-row">',
diff --git a/apps/presentationeditor/main/app/view/Transitions.js b/apps/presentationeditor/main/app/view/Transitions.js
index 23232d924..7df0fd513 100644
--- a/apps/presentationeditor/main/app/view/Transitions.js
+++ b/apps/presentationeditor/main/app/view/Transitions.js
@@ -162,7 +162,7 @@ define([
                         if (menu.cmpEl) {
 
                             menu.menuAlignEl = cmp.cmpEl;
-                            menu.menuAlign = 'tl-tl';
+                            menu.menuAlign = Common.UI.isRTL() ? 'tr-tr' : 'tl-tl';
                             menu.cmpEl.css({
                                 'width': cmp.cmpEl.width() - cmp.openButton.$el.width(),
                                 'min-height': cmp.cmpEl.height()
diff --git a/apps/presentationeditor/main/resources/less/advanced-settings.less b/apps/presentationeditor/main/resources/less/advanced-settings.less
index 0c84e2427..6b7049d06 100644
--- a/apps/presentationeditor/main/resources/less/advanced-settings.less
+++ b/apps/presentationeditor/main/resources/less/advanced-settings.less
@@ -122,4 +122,61 @@
     }
 }
 
+#window-hyperlink-settings {
+    #id-dlg-hyperlink-external {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        .rtl & {
+            .border-radius(@border-radius-small);
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+
+        }
+    }
+
+    #id-dlg-hyperlink-internal {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-left-width: 0;
+        margin-left: -1px;
+
+        .rtl & {
+            border: @scaled-one-px-value solid @border-regular-control;
+            .border-radius(@border-radius-small);
+            margin-left: 0;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right-width: 0;
+            margin-right: -1px;
+        }
+    }
+}
+
+#window-date-time {
+    #datetime-dlg-default {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+}
+
+#window-grid-settings {
+    #grid-spacing-combo {
+        display: inline-block;
+        width:86px;
+    }
+
+    #grid-spacing-spin {
+        margin-left: 10px;
+        display: inline-block;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 10px;
+        }
+    }
+}
 
diff --git a/apps/presentationeditor/main/resources/less/animation.less b/apps/presentationeditor/main/resources/less/animation.less
index 2c8cb5021..8b2d7ed7f 100644
--- a/apps/presentationeditor/main/resources/less/animation.less
+++ b/apps/presentationeditor/main/resources/less/animation.less
@@ -10,14 +10,26 @@
 .menu-animation .dataview {
   padding: 0 0 0 2px;
 
+  .rtl & {
+    padding: 0 2px 0 0;
+  }
+
   .group-description {
     padding: 3px 0 3px 10px;
     .font-weight-bold();
+
+    .rtl & {
+      padding: 3px 10px 3px 0;
+      text-align: right;
+    }
   }
 
   .grouped-data .group-items-container {
     float: left;
     position: relative;
+    .rtl & {
+      float: right;
+    }
     .item {
         box-shadow: none;
         margin: @scaled-two-px-value;