From fb3efad88e48a0f8dddb9bb04bf86a619e112bed Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Wed, 16 Nov 2022 22:12:04 +0300
Subject: [PATCH] [rtl] Fix settings in dialogs from toolbar for SSE

---
 .../common/main/lib/view/SymbolTableDialog.js |  20 +--
 .../main/resources/less/symboltable.less      |  63 +++++++++
 .../main/app/view/CreatePivotDialog.js        |   5 +-
 .../main/app/view/ExternalLinksDlg.js         |   4 +-
 .../main/app/view/HyperlinkSettingsDialog.js  |  25 ++--
 .../main/app/view/ProtectDialog.js            |   4 +-
 .../resources/less/advanced-settings.less     | 124 ++++++++++++++++++
 7 files changed, 217 insertions(+), 28 deletions(-)

diff --git a/apps/common/main/lib/view/SymbolTableDialog.js b/apps/common/main/lib/view/SymbolTableDialog.js
index 008a89954..defc7dd50 100644
--- a/apps/common/main/lib/view/SymbolTableDialog.js
+++ b/apps/common/main/lib/view/SymbolTableDialog.js
@@ -411,17 +411,17 @@ define([
             this.template = [
                 '<div class="box">',
                     '<div style="margin-bottom: 16px;" class="'+ (this.special ? '' : 'hidden') +'">',
-                        '<button type="button" class="btn btn-text-default auto" id="symbol-table-symbols" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textSymbols,'</button>',
-                        '<button type="button" class="btn btn-text-default auto" id="symbol-table-special" style="border-top-left-radius: 0;border-bottom-left-radius: 0;border-left-width: 0;margin-left: -1px;">', this.textSpecial,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="symbol-table-symbols">', this.textSymbols,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="symbol-table-special">', this.textSpecial,'</button>',
                     '</div>',
                     '<div id="symbol-table-pnl-symbols">',
                         '<table cols="2" style="width: 100%;max-width: 497px;">',
                             '<tr>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 50%;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;width: 50%;">',
                                     '<label class="input-label">' + this.textFont + '</label>',
                                     '<div id="symbol-table-cmb-fonts"></div>',
                                 '</td>',
-                                '<td style="padding-left: 5px;padding-bottom: 8px;">',
+                                '<td class="padding-left" style="padding-bottom: 8px;">',
                                     '<label class="input-label">' + this.textRange + '</label>',
                                     '<div id="symbol-table-cmb-range"></div>',
                                 '</td>',
@@ -450,17 +450,17 @@ define([
                         '</table>',
                         '<table cols="2" style="width: 100%;max-width: 497px;">',
                             '<tr>',
-                                '<td style="padding-right: 5px; width: 50%;">',
+                                '<td class="padding-right" style="width: 50%;">',
                                     '<label class="input-label">' + this.textCode + '</label>',
                                 '</td>',
-                                '<td style="padding-left: 5px;">',
+                                '<td class="padding-left">',
                                 '</td>',
                             '</tr>',
                             '<tr>',
-                                '<td style="padding-right: 5px;">',
+                                '<td class="padding-right">',
                                     '<div id="symbol-table-text-code" oo_editor_input="true"></div>',
                                 '</td>',
-                                '<td style="padding-left: 5px;">',
+                                '<td class="padding-left">',
                                     '<div id="symbol-table-label-font" style="overflow: hidden; text-overflow: ellipsis;white-space: nowrap;max-width: 160px;"></div>',
                                 '</td>',
                             '</tr>',
@@ -471,7 +471,7 @@ define([
                             '<tr>',
                                 '<td>',
                                     '<label>' + this.textCharacter + '</label>',
-                                    '<label id="symbol-table-lbl-shortcut" style="float: right; width: 107px;">' + this.textShortcut + '</label>',
+                                    '<label id="symbol-table-lbl-shortcut" style="width: 107px;">' + this.textShortcut + '</label>',
                                 '</td>',
                             '</tr>',
                             '<tr>',
@@ -1093,7 +1093,7 @@ define([
                 oCell.css('border-bottom', 'none');
                 oRecentsDiv.append(oCell);
                 if(i === (nCols - 1)){
-                    oCell.css('border-right', 'none');
+                    oCell.css(Common.UI.isRTL() ? 'border-left' : 'border-right', 'none');
                 }
             }
         },
diff --git a/apps/common/main/resources/less/symboltable.less b/apps/common/main/resources/less/symboltable.less
index fbabd91f8..e44f4181c 100644
--- a/apps/common/main/resources/less/symboltable.less
+++ b/apps/common/main/resources/less/symboltable.less
@@ -24,6 +24,12 @@
     cursor: default;
     overflow:hidden;
     display: inline-block;
+
+    .rtl & {
+      border-right: none;
+      border-left: @scaled-one-px-value-ie solid @border-regular-control-ie;
+      border-left: @scaled-one-px-value solid @border-regular-control;
+    }
   }
 
   .cell-selected{
@@ -58,3 +64,60 @@
     overflow:hidden;
   }
 }
+
+#symbol-table-symbols {
+  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;
+  }
+}
+
+#symbol-table-special {
+  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;
+  }
+}
+
+#symbol-table-pnl-symbols {
+  .padding-right {
+    padding-right: 5px;
+
+    .rtl & {
+      padding-right: 0;
+      padding-left: 5px;
+    }
+  }
+
+  .padding-left {
+    padding-left: 5px;
+
+    .rtl & {
+      padding-left: 0;
+      padding-right: 5px;
+    }
+  }
+}
+
+#symbol-table-lbl-shortcut {
+  float: right;
+
+  .rtl & {
+    float: left;
+  }
+}
+
diff --git a/apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js b/apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js
index 908ab8bfa..da51ea34b 100644
--- a/apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/CreatePivotDialog.js
@@ -48,7 +48,8 @@ define([
     SSE.Views.CreatePivotDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 310,
-            height: 250
+            height: 250,
+            id: 'window-create-pivot'
         },
 
         initialize : function(options) {
@@ -87,7 +88,7 @@ define([
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
-                                        '<td style="padding-left: 22px;">',
+                                        '<td class="input-dest">',
                                             '<div id="create-pivot-input-dest" class="input-row" style=""></div>',
                                         '</td>',
                                     '</tr>',
diff --git a/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js b/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
index 41c7b68b7..84debc043 100644
--- a/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/ExternalLinksDlg.js
@@ -67,8 +67,8 @@ define([
                                 '<table cols="1" style="width: 100%;">',
                                     '<tr>',
                                         '<td class="padding-large">',
-                                            '<div id="external-links-btn-update" style="display: inline-block;margin-right: 5px;"></div>',
-                                            '<div id="external-links-btn-delete" style="display: inline-block;margin-right: 5px;"></div>',
+                                            '<div id="external-links-btn-update" style="display: inline-block;"></div>',
+                                            '<div id="external-links-btn-delete" style="display: inline-block;"></div>',
                                             // '<button type="button" class="btn btn-text-default auto sort-dialog-btn-text" id="external-links-btn-open">', me.textOpen ,'</button>',
                                             // '<button type="button" class="btn btn-text-default auto sort-dialog-btn-text" id="external-links-btn-change">', me.textChange ,'</button>',
                                         '</td>',
diff --git a/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js b/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js
index 9ae19327e..6edc66182 100644
--- a/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/HyperlinkSettingsDialog.js
@@ -55,6 +55,7 @@ define([
             width   : 350,
             style   : 'min-width: 230px;',
             cls     : 'modal-dlg',
+            id      : 'window-hyperlink',
             buttons: ['ok', 'cancel']
         },
 
@@ -65,41 +66,41 @@ define([
 
             this.template = [
                 '<div class="box" style="height: 313px;">',
-                    '<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>',
+                    '<div class="input-row margin-bottom-big">',
+                        '<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">',
                             '<label>' + this.strLinkTo + '</label>',
                         '</div>',
-                        '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>',
+                        '<div id="id-dlg-hyperlink-url" class="input-row margin-bottom"></div>',
                     '</div>',
                     '<div id="id-internal-link" class="hidden">',
                         '<div class="input-row">',
                             '<label>' + this.strLinkTo + '</label>',
-                            '<div style="display: inline-block; position: relative;min-width: 150px;float: right;">',
-                                '<label class="link dropdown-toggle" data-toggle="dropdown" id="id-dlg-hyperlink-get-link" style="line-height: 14px; margin-top: 3px;float: right;">' + this.textGetLink + '</label>',
-                                '<div id="id-clip-copy-box" class="dropdown-menu" style="width: 291px; left: -139px; padding: 10px;">',
+                            '<div class="get-link">',
+                                '<label class="link dropdown-toggle" data-toggle="dropdown" id="id-dlg-hyperlink-get-link">' + this.textGetLink + '</label>',
+                                '<div id="id-clip-copy-box" class="dropdown-menu">',
                                     '<div id="id-dlg-clip-copy"></div>',
-                                    '<button id="id-dlg-copy-btn" class="btn btn-text-default" style="margin-left: 5px; width: 86px;">' + this.textCopy + '</button>',
+                                    '<button id="id-dlg-copy-btn" class="btn btn-text-default">' + this.textCopy + '</button>',
                                 '</div>',
                             '</div>',
                         '</div>',
-                        '<div id="id-dlg-hyperlink-list" style="width:100%; height: 115px;"></div>',
+                        '<div id="id-dlg-hyperlink-list"></div>',
                         '<div class="input-row">',
                             '<label>' + this.strRange + '</label>',
                         '</div>',
-                        '<div id="id-dlg-hyperlink-range" class="input-row" style="margin-bottom: 5px;"></div>',
+                        '<div id="id-dlg-hyperlink-range" class="input-row margin-bottom"></div>',
                     '</div>',
                     '<div class="input-row">',
                         '<label>' + this.strDisplay + '</label>',
                     '</div>',
-                    '<div id="id-dlg-hyperlink-display" class="input-row" style="margin-bottom: 5px;"></div>',
+                    '<div id="id-dlg-hyperlink-display" class="input-row margin-bottom"></div>',
                     '<div class="input-row">',
                         '<label>' + this.textTipText + '</label>',
                     '</div>',
-                    '<div id="id-dlg-hyperlink-tip" class="input-row" style="margin-bottom: 5px;"></div>',
+                    '<div id="id-dlg-hyperlink-tip" class="input-row margin-bottom"></div>',
                 '</div>'
             ].join('');
 
diff --git a/apps/spreadsheeteditor/main/app/view/ProtectDialog.js b/apps/spreadsheeteditor/main/app/view/ProtectDialog.js
index 433b5e9e2..6b6b50461 100644
--- a/apps/spreadsheeteditor/main/app/view/ProtectDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ProtectDialog.js
@@ -144,11 +144,11 @@ define([
                     template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                     itemTemplate: _.template([
                         '<div>',
-                        '<label class="checkbox-indeterminate" style="position:absolute;">',
+                        '<label class="checkbox-indeterminate">',
                         '<input id="pdcheckbox-<%= id %>" type="checkbox" class="button__checkbox">',
                         '<label for="pdcheckbox-<%= id %>" class="checkbox__shape" ></label>',
                         '</label>',
-                        '<div id="<%= id %>" class="list-item" style="pointer-events:none; margin-left: 20px;display: flex;">',
+                        '<div id="<%= id %>" class="list-item">',
                         '<div style="flex-grow: 1;"><%= Common.Utils.String.htmlEncode(value) %></div>',
                         '</div>',
                         '</div>'
diff --git a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
index 3130a9507..39ea9f3ea 100644
--- a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
+++ b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
@@ -446,4 +446,128 @@
             margin-left: -1px;
         }
     }
+}
+
+#window-create-pivot {
+    .input-dest {
+        padding-left: 22px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 22px;
+        }
+    }
+}
+
+#window-hyperlink {
+    #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;
+        }
+    }
+
+    .get-link {
+        display: inline-block;
+        position: relative;
+        min-width: 150px;
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+
+        #id-dlg-hyperlink-get-link {
+            line-height: 14px;
+            margin-top: 3px;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #id-clip-copy-box {
+            width: 291px;
+            left: -139px;
+            padding: 10px;
+
+            .rtl & {
+                left: auto;
+                right: -139px;
+            }
+
+            #id-dlg-copy-btn {
+                margin-left: 5px;
+                width: 86px;
+
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 5px;
+                }
+            }
+        }
+    }
+
+    #id-dlg-hyperlink-list {
+        width:100%;
+        height: 115px;
+    }
+
+    .margin-bottom {
+        margin-bottom: 5px;
+    }
+
+    .margin-bottom-big {
+        margin-bottom: 10px;
+    }
+}
+
+
+#external-links-btn-update,
+#external-links-btn-delete {
+    margin-right: 5px;
+
+    .rtl & {
+        margin-right: 0;
+        margin-left: 5px;
+    }
+}
+
+#protect-dlg-options {
+    .list-item {
+        pointer-events:none;
+        margin-left: 20px;
+        display: flex;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 20px;
+        }
+    }
+
+    .checkbox-indeterminate {
+        position:absolute;
+    }
 }
\ No newline at end of file