From 684a9668bf4c1bf0115683350ab37ef742e86aa7 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Fri, 19 Aug 2022 21:41:24 +0300
Subject: [PATCH 01/42] [all] added option to turn on RTL

---
 apps/common/main/lib/util/htmlutils.js        | 24 +++++++++++--------
 .../main/app/view/FileMenuPanels.js           | 14 +++++++++++
 .../main/app/view/FileMenuPanels.js           | 15 +++++++++++-
 .../main/app/view/FileMenuPanels.js           | 14 +++++++++++
 4 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/apps/common/main/lib/util/htmlutils.js b/apps/common/main/lib/util/htmlutils.js
index e2c1329ed..99e690eca 100644
--- a/apps/common/main/lib/util/htmlutils.js
+++ b/apps/common/main/lib/util/htmlutils.js
@@ -1,3 +1,17 @@
+var checkLocalStorage = (function () {
+    try {
+        var storage = window['localStorage'];
+        return true;
+    }
+    catch(e) {
+        return false;
+    }
+})();
+
+if ( checkLocalStorage && localStorage.getItem("ui-rtl") === '1' ) {
+    document.body.setAttribute('dir', 'rtl');
+    document.body.classList.add('rtl');
+}
 
 function checkScaling() {
     var matches = {
@@ -42,16 +56,6 @@ var params = (function() {
     return urlParams;
 })();
 
-var checkLocalStorage = (function () {
-    try {
-        var storage = window['localStorage'];
-        return true;
-    }
-    catch(e) {
-        return false;
-    }
-})();
-
 if ( window.desktop ) {
     var theme = desktop.theme
 
diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index eb5ab2551..f7e1de1ff 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -344,6 +344,9 @@ define([
                 '<tr>',
                     '<td colspan="2"><div id="fms-chb-use-alt-key"></div></td>',
                 '</tr>',
+                '<tr>',
+                    '<td colspan="2"><div id="fms-chb-rtl-ui"></div></td>',
+                '</tr>',
                 '<tr class="themes">',
                     '<td><label><%= scope.strTheme %></label></td>',
                     '<td>',
@@ -709,6 +712,14 @@ define([
                 })).on('click', _.bind(me.applySettings, me));
             });
 
+            this.chRTL = new Common.UI.CheckBox({
+                el: $markup.findById('#fms-chb-rtl-ui'),
+                labelText: this.strRTLSupport,
+                dataHint: '2',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+
             this.pnlSettings = $markup.find('.flex-settings').addBack().filter('.flex-settings');
             this.pnlApply = $markup.find('.fms-flex-apply').addBack().filter('.fms-flex-apply');
             this.pnlTable = this.pnlSettings.find('table');
@@ -861,6 +872,7 @@ define([
             }
             this.chDarkMode.setValue(Common.UI.Themes.isContentThemeDark());
             this.chDarkMode.setDisabled(!Common.UI.Themes.isDarkTheme());
+            this.chRTL.setValue(Common.localStorage.getBool("ui-rtl"));
 
             if (this.mode.canViewReview) {
                 value = Common.Utils.InternalSettings.get("de-settings-review-hover-mode");
@@ -918,6 +930,7 @@ define([
             }
 
             Common.localStorage.setItem("de-settings-paste-button", this.chPaste.isChecked() ? 1 : 0);
+            Common.localStorage.setBool("ui-rtl", this.chRTL.isChecked());
 
             Common.localStorage.save();
 
@@ -988,6 +1001,7 @@ define([
         textForceSave: 'Save to Server',
         textOldVersions: 'Make the files compatible with older MS Word versions when saved as DOCX',
         txtCacheMode: 'Default cache mode',
+        strRTLSupport: 'RTL interface',
         strMacrosSettings: 'Macros Settings',
         txtWarnMacros: 'Show Notification',
         txtRunMacros: 'Enable All',
diff --git a/apps/presentationeditor/main/app/view/FileMenuPanels.js b/apps/presentationeditor/main/app/view/FileMenuPanels.js
index bc3690f07..08ca6fcfa 100644
--- a/apps/presentationeditor/main/app/view/FileMenuPanels.js
+++ b/apps/presentationeditor/main/app/view/FileMenuPanels.js
@@ -269,7 +269,9 @@ define([
                 '<tr>',
                     '<td colspan="2"><div id="fms-chb-use-alt-key"></div></td>',
                 '</tr>',
-
+                '<tr>',
+                    '<td colspan="2"><div id="fms-chb-rtl-ui"></div></td>',
+                '</tr>',
                 '<tr class="themes">',
                     '<td><label><%= scope.strTheme %></label></td>',
                     '<td><span id="fms-cmb-theme"></span></td>',
@@ -540,6 +542,14 @@ define([
                 dataHintOffset: 'big'
             });
 
+            this.chRTL = new Common.UI.CheckBox({
+                el: $markup.findById('#fms-chb-rtl-ui'),
+                labelText: this.strRTLSupport,
+                dataHint: '2',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+
             $markup.find('.btn.primary').each(function(index, el){
                 (new Common.UI.Button({
                     el: $(el)
@@ -670,6 +680,7 @@ define([
             this.lblMacrosDesc.text(item ? item.get('descValue') : this.txtWarnMacrosDesc);
 
             this.chPaste.setValue(Common.Utils.InternalSettings.get("pe-settings-paste-button"));
+            this.chRTL.setValue(Common.localStorage.getBool("ui-rtl"));
 
             var data = [];
             for (var t in Common.UI.Themes.map()) {
@@ -716,6 +727,7 @@ define([
             Common.Utils.InternalSettings.set("pe-macros-mode", this.cmbMacros.getValue());
 
             Common.localStorage.setItem("pe-settings-paste-button", this.chPaste.isChecked() ? 1 : 0);
+            Common.localStorage.setBool("ui-rtl", this.chRTL.isChecked());
 
             Common.localStorage.save();
 
@@ -768,6 +780,7 @@ define([
         textForceSave: 'Save to Server',
         txtSpellCheck: 'Spell Checking',
         txtCacheMode: 'Default cache mode',
+        strRTLSupport: 'RTL interface',
         strMacrosSettings: 'Macros Settings',
         txtWarnMacros: 'Show Notification',
         txtRunMacros: 'Enable All',
diff --git a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
index b39b9267c..fb7ec1c32 100644
--- a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
+++ b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
@@ -244,6 +244,9 @@ define([
                 '<tr>',
                     '<td colspan="2"><div id="fms-chb-use-alt-key"></div></td>',
                 '</tr>',
+                '<tr>',
+                    '<td colspan="2"><div id="fms-chb-rtl-ui"></div></td>',
+                '</tr>',
                 '<tr class="themes">',
                     '<td><label><%= scope.strTheme %></label></td>',
                     '<td><span id="fms-cmb-theme"></span></td>',
@@ -712,6 +715,14 @@ define([
             });
             this.btnAutoCorrect.on('click', _.bind(this.autoCorrect, this));
 
+            this.chRTL = new Common.UI.CheckBox({
+                el: $markup.findById('#fms-chb-rtl-ui'),
+                labelText: this.strRTLSupport,
+                dataHint: '2',
+                dataHintDirection: 'left',
+                dataHintOffset: 'small'
+            });
+
             $markup.find('.btn.primary').each(function(index, el){
                 (new Common.UI.Button({
                     el: $(el)
@@ -877,6 +888,7 @@ define([
             this.cmbMacros.setValue(item ? item.get('value') : 0);
 
             this.chPaste.setValue(Common.Utils.InternalSettings.get("sse-settings-paste-button"));
+            this.chRTL.setValue(Common.localStorage.getBool("ui-rtl"));
 
             var data = [];
             for (var t in Common.UI.Themes.map()) {
@@ -977,6 +989,7 @@ define([
             Common.Utils.InternalSettings.set("sse-macros-mode", this.cmbMacros.getValue());
 
             Common.localStorage.setItem("sse-settings-paste-button", this.chPaste.isChecked() ? 1 : 0);
+            Common.localStorage.setBool("ui-rtl", this.chRTL.isChecked());
 
             Common.localStorage.save();
             if (this.menu) {
@@ -1103,6 +1116,7 @@ define([
         strDecimalSeparator: 'Decimal separator',
         strThousandsSeparator: 'Thousands separator',
         txtCacheMode: 'Default cache mode',
+        strRTLSupport: 'RTL interface',
         strMacrosSettings: 'Macros Settings',
         txtWarnMacros: 'Show Notification',
         txtRunMacros: 'Enable All',

From 7146701873230a285b9d12866bbe1735466af498 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Mon, 22 Aug 2022 14:24:38 +0300
Subject: [PATCH 02/42] [all] added flag to use RTL in code

---
 apps/documenteditor/main/app/controller/Main.js     | 1 +
 apps/presentationeditor/main/app/controller/Main.js | 1 +
 apps/spreadsheeteditor/main/app/controller/Main.js  | 1 +
 3 files changed, 3 insertions(+)

diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js
index ee8d7e32b..d49d93f27 100644
--- a/apps/documenteditor/main/app/controller/Main.js
+++ b/apps/documenteditor/main/app/controller/Main.js
@@ -416,6 +416,7 @@ define([
                 this.appOptions.canFeatureComparison = true;
                 this.appOptions.canFeatureContentControl = true;
                 this.appOptions.canFeatureForms = !!this.api.asc_isSupportFeature("forms");
+                this.appOptions.uiRtl = Common.localStorage.getBool("ui-rtl");
 
                 this.appOptions.mentionShare = !((typeof (this.appOptions.customization) == 'object') && (this.appOptions.customization.mentionShare==false));
 
diff --git a/apps/presentationeditor/main/app/controller/Main.js b/apps/presentationeditor/main/app/controller/Main.js
index 74274bb87..d70e24a71 100644
--- a/apps/presentationeditor/main/app/controller/Main.js
+++ b/apps/presentationeditor/main/app/controller/Main.js
@@ -369,6 +369,7 @@ define([
                 this.appOptions.compatibleFeatures = (typeof (this.appOptions.customization) == 'object') && !!this.appOptions.customization.compatibleFeatures;
                 this.appOptions.canRequestSharingSettings = this.editorConfig.canRequestSharingSettings;
                 this.appOptions.mentionShare = !((typeof (this.appOptions.customization) == 'object') && (this.appOptions.customization.mentionShare==false));
+                this.appOptions.uiRtl = Common.localStorage.getBool("ui-rtl");
 
                 this.appOptions.user.guest && this.appOptions.canRenameAnonymous && Common.NotificationCenter.on('user:rename', _.bind(this.showRenameUserDialog, this));
 
diff --git a/apps/spreadsheeteditor/main/app/controller/Main.js b/apps/spreadsheeteditor/main/app/controller/Main.js
index 4f1f37aea..9701676a0 100644
--- a/apps/spreadsheeteditor/main/app/controller/Main.js
+++ b/apps/spreadsheeteditor/main/app/controller/Main.js
@@ -415,6 +415,7 @@ define([
                 this.appOptions.canMakeActionLink = this.editorConfig.canMakeActionLink;
                 this.appOptions.canFeaturePivot = true;
                 this.appOptions.canFeatureViews = true;
+                this.appOptions.uiRtl = Common.localStorage.getBool("ui-rtl");
 
                 if (this.appOptions.user.guest && this.appOptions.canRenameAnonymous && !this.appOptions.isEditDiagram && !this.appOptions.isEditMailMerge && !this.appOptions.isEditOle)
                     Common.NotificationCenter.on('user:rename', _.bind(this.showRenameUserDialog, this));

From 15ce9217143420446838ac3789309332a4f45dc4 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Mon, 12 Sep 2022 22:51:29 +0300
Subject: [PATCH 03/42] [all] function to check 'isRtl' flag

---
 apps/common/locale.js              | 7 ++++++-
 apps/common/main/lib/util/utils.js | 9 +++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/apps/common/locale.js b/apps/common/locale.js
index db8f29318..608c33087 100644
--- a/apps/common/locale.js
+++ b/apps/common/locale.js
@@ -167,10 +167,15 @@ Common.Locale = new(function() {
         } else require(polyfills, _requireLang);
     } else _requireLang();
 
+    const _isCurrentRtl = function () {
+        return false;
+    };
+
     return {
         apply: _applyLocalization,
         get: _get,
-        getCurrentLanguage: _getCurrentLanguage
+        getCurrentLanguage: _getCurrentLanguage,
+        isCurrentLanguageRtl: _isCurrentRtl
     };
     
 })();
diff --git a/apps/common/main/lib/util/utils.js b/apps/common/main/lib/util/utils.js
index 03aac86ae..645d7f3b5 100644
--- a/apps/common/main/lib/util/utils.js
+++ b/apps/common/main/lib/util/utils.js
@@ -1091,4 +1091,13 @@ Common.Utils.getKeyByValue = function(obj, value) {
                 return prop;
         }
     }
+};
+
+Common.UI.isRTL = function () {
+    if ( window.isrtl == undefined ) {
+        window.isrtl = Common.localStorage.itemExists('ui-rtl') ?
+                            Common.localStorage.getBool("ui-rtl") : Common.Locale.isCurrentLanguageRtl();
+    }
+
+    return window.isrtl;
 };
\ No newline at end of file

From cc7248f51d7e48f83eae9235217608d70ca29b0e Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Mon, 12 Sep 2022 22:53:28 +0300
Subject: [PATCH 04/42] [rtl] fix left and right panels position for DE

---
 apps/common/main/resources/less/common.less   | 25 ++++++++
 .../main/app/controller/Viewport.js           |  4 +-
 apps/documenteditor/main/app/view/Viewport.js | 59 +++++++++++--------
 3 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less
index 6e37abbb4..181661900 100644
--- a/apps/common/main/resources/less/common.less
+++ b/apps/common/main/resources/less/common.less
@@ -51,6 +51,11 @@ label {
         .tool-menu-btns {
             border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
             border-right: @scaled-one-px-value solid @border-toolbar;
+
+            .rtl & {
+                border-left: @scaled-one-px-value solid @border-toolbar;
+                border-right: 0 none;
+            }
         }
     }
 
@@ -63,6 +68,14 @@ label {
             background-color: @background-toolbar;
             right: 0;
             overflow: hidden;
+
+            .rtl & {
+                left: 0;
+                right: auto;
+
+                border-right: @scaled-one-px-value solid @border-toolbar;
+                border-left: 0 none;
+            }
         }
     }
 }
@@ -85,6 +98,13 @@ label {
     border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
     border-right: @scaled-one-px-value solid @border-toolbar;
 
+    .rtl & {
+        padding-right: 40px;
+        padding-left: 0;
+        border-left: @scaled-one-px-value solid @border-toolbar;
+        border-right: 0 none;
+    }
+
     #left-panel-chat {
         height: 100%;
     }
@@ -108,6 +128,11 @@ label {
     border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
     border-left: @scaled-one-px-value solid @border-toolbar;
     line-height: 15px;
+
+    .rtl & {
+        border-right: @scaled-one-px-value solid @border-toolbar;
+        border-left: 0 none;
+    }
 }
 
 .statusbar {
diff --git a/apps/documenteditor/main/app/controller/Viewport.js b/apps/documenteditor/main/app/controller/Viewport.js
index 713133cde..ba460e46e 100644
--- a/apps/documenteditor/main/app/controller/Viewport.js
+++ b/apps/documenteditor/main/app/controller/Viewport.js
@@ -212,7 +212,7 @@ define([
                 this.viewport.hlayout.doLayout();
                 break;
             case 'history':
-                var panel = this.viewport.hlayout.items[1];
+                var panel = this.viewport.hlayout.getItem('history');
                 if (panel.resize.el) {
                     this.boxSdk.css('border-left', '');
                     panel.resize.el.show();
@@ -220,7 +220,7 @@ define([
                 this.viewport.hlayout.doLayout();
                 break;
             case 'leftmenu':
-                var panel = this.viewport.hlayout.items[0];
+                var panel = this.viewport.hlayout.getItem('left');
                 if (panel.resize.el) {
                     if (panel.el.width() > 40) {
                         this.boxSdk.css('border-left', '');
diff --git a/apps/documenteditor/main/app/view/Viewport.js b/apps/documenteditor/main/app/view/Viewport.js
index a90ad6f6b..ac07dc555 100644
--- a/apps/documenteditor/main/app/view/Viewport.js
+++ b/apps/documenteditor/main/app/view/Viewport.js
@@ -104,33 +104,42 @@ define([
 
             $container = $('#viewport-hbox-layout', this.$el);
             var items = $container.find(' > .layout-item');
+            let iarray = [{ // left menu chat & comment
+                el: items[0],
+                rely: true,
+                alias: 'left',
+                resize: {
+                    hidden: true,
+                    autohide: false,
+                    min: 300,
+                    max: 600
+                }}, { // history versions
+                el: items[3],
+                rely: true,
+                alias: 'history',
+                resize: {
+                    hidden: true,
+                    autohide: false,
+                    min: 300,
+                    max: 600
+                }
+            }, { // sdk
+                el: items[1],
+                stretch: true
+            }, { // right menu
+                el: $(items[2]).hide(),
+                rely: true
+            }
+            ];
+
+            if ( Common.UI.isRTL() ) {
+                [iarray[0], iarray[3]] = [iarray[3], iarray[0]];
+                [iarray[1], iarray[2]] = [iarray[2], iarray[1]];
+            }
+
             this.hlayout = new Common.UI.HBoxLayout({
                 box: $container,
-                items: [{ // left menu chat & comment
-                        el: items[0],
-                        rely: true,
-                        resize: {
-                            hidden: true,
-                            autohide: false,
-                            min: 300,
-                            max: 600
-                    }}, { // history versions
-                        el: items[3],
-                        rely: true,
-                        resize: {
-                                hidden: true,
-                                autohide: false,
-                                min: 300,
-                                max: 600
-                        }
-                    }, { // sdk
-                        el: items[1],
-                        stretch: true
-                    }, { // right menu
-                        el: $(items[2]).hide(),
-                        rely: true
-                    }
-                ]
+                items: iarray
             });
 
             return this;

From aa35384d5e423c322a38c016db9ec720900fccd2 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Wed, 14 Sep 2022 21:22:52 +0300
Subject: [PATCH 05/42] [rtl] Fix input and combobox components

---
 .../main/lib/component/ComboBorderSize.js     |  4 +-
 apps/common/main/resources/less/buttons.less  |  4 ++
 .../resources/less/combo-border-size.less     | 10 +++++
 apps/common/main/resources/less/combobox.less | 38 +++++++++++++++++++
 .../main/resources/less/dropdown-menu.less    |  4 ++
 apps/common/main/resources/less/input.less    | 25 ++++++++++++
 6 files changed, 83 insertions(+), 2 deletions(-)

diff --git a/apps/common/main/lib/component/ComboBorderSize.js b/apps/common/main/lib/component/ComboBorderSize.js
index d784d0f7a..28a2f6e83 100644
--- a/apps/common/main/lib/component/ComboBorderSize.js
+++ b/apps/common/main/lib/component/ComboBorderSize.js
@@ -244,10 +244,10 @@ define([
                 '</button>',
                 '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                     '<% _.each(items, function(item) { %>',
-                        '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem" style="padding: 2px 0 2px 10px;">',
+                        '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
                             '<span style="margin-top: 0;"></span>',
                             '<% if (item.offsety!==undefined) { %>',
-                                '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="left" style="background-position: 0 -<%= item.offsety %>px;">',
+                                '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-position: 0 -<%= item.offsety %>px;">',
                             '<% } %>',
                         '</a></li>',
                     '<% }); %>',
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index 4540fadef..e53641a0a 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -249,6 +249,10 @@
 
                 .caret {
                     margin: 0 1px 0 4px;
+
+                    .rtl & {
+                        margin: 0 4px 0 1px;
+                    }
                 }
             }
         }
diff --git a/apps/common/main/resources/less/combo-border-size.less b/apps/common/main/resources/less/combo-border-size.less
index 669b67f60..bb2d4b0e6 100644
--- a/apps/common/main/resources/less/combo-border-size.less
+++ b/apps/common/main/resources/less/combo-border-size.less
@@ -14,6 +14,11 @@
     li {
         a {
             white-space: normal;
+            padding: 2px 0 2px 10px;
+
+            .rtl & {
+                padding: 2px 10px 2px 0;
+            }
         }
 
         span {
@@ -28,6 +33,11 @@
             height:20px;
             background-color: transparent;
             image-rendering: pixelated;
+            float: left;
+
+            .rtl & {
+                float: right;
+            }
         }
     }
 
diff --git a/apps/common/main/resources/less/combobox.less b/apps/common/main/resources/less/combobox.less
index 81d76ca28..3297071c7 100644
--- a/apps/common/main/resources/less/combobox.less
+++ b/apps/common/main/resources/less/combobox.less
@@ -18,10 +18,27 @@
 
         border-top-right-radius: 2px !important;
         border-bottom-right-radius: 2px !important;
+
+        .rtl & {
+            border-top-left-radius: 2px !important;
+            border-bottom-left-radius: 2px !important;
+        }
+    }
+
+    &.input-group-nr > .btn {
+        .rtl & {
+            border-top-right-radius: 0 !important;
+            border-bottom-right-radius: 0 !important;
+        }
     }
 
     &.input-group-nr > .form-control {
         padding-right: 7px + 2 * @padding-base-horizontal;
+
+        .rtl & {
+            padding-right: 3px;
+            padding-left: 7px + 2 * @padding-base-horizontal;
+        }
     }
 
     .form-control {
@@ -39,6 +56,12 @@
             line-height: 20px;
             padding-left: 2px;
         }
+
+        .rtl & {
+            border: @scaled-one-px-value-ie solid @border-regular-control-ie;
+            border: @scaled-one-px-value solid @border-regular-control;
+            border-left: 0;
+        }
     }
 
     .btn {
@@ -52,6 +75,16 @@
         position: absolute;
         top: 0;
         right: 0;
+
+        .rtl & {
+            border: @scaled-one-px-value-ie solid;
+            border: @scaled-one-px-value solid;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: 0;
+            right: unset;
+            left: 0;
+        }
     }
 
     .btn-default:not(.disabled),
@@ -61,6 +94,11 @@
         border-color: @border-regular-control-ie;
         border-color: @border-regular-control;
         padding-right: 5px;
+
+        .rtl & {
+            padding-right: 3px;
+            padding-left: 5px;
+        }
     }
 
     .btn-default.disabled {
diff --git a/apps/common/main/resources/less/dropdown-menu.less b/apps/common/main/resources/less/dropdown-menu.less
index 840465c8d..ae4def3ed 100644
--- a/apps/common/main/resources/less/dropdown-menu.less
+++ b/apps/common/main/resources/less/dropdown-menu.less
@@ -52,6 +52,10 @@
                 background-color: @highlight-button-hover-ie;
                 background-color: @highlight-button-hover;
             }
+
+            .rtl & {
+                text-align: right;
+            }
         }
 
         &.over > a {
diff --git a/apps/common/main/resources/less/input.less b/apps/common/main/resources/less/input.less
index 84218bb34..efd5d110e 100644
--- a/apps/common/main/resources/less/input.less
+++ b/apps/common/main/resources/less/input.less
@@ -47,6 +47,11 @@
         height: 16px;
         background-position: @input-error-offset-x @input-error-offset-y;
         filter: none;
+
+        .rtl & {
+            right: unset;
+            left: 3px;
+        }
     }
 }
 
@@ -55,6 +60,10 @@
     .input-error {
         float: left;
         position: relative;
+
+        .rtl & {
+            float: right;
+        }
     }
 
     &.form-control:focus,
@@ -134,14 +143,30 @@ textarea.form-control:focus {
             height: 20px;
             height: calc(22px - @scaled-one-px-value * 2);
         }
+
+        .rtl & {
+            right: unset;
+            left: @scaled-one-px-value-ie;
+            left: @scaled-one-px-value;
+        }
     }
 
     .input-error {
         &:before {
             right: 22px;
+
+            .rtl & {
+                right: unset;
+                left: 22px;
+            }
         }
     }
     input {
         padding-right: 20px;
+
+        .rtl & {
+            padding-right: 3px;
+            padding-left: 20px;
+        }
     }
 }
\ No newline at end of file

From 7aef8e20c3afafa5bd108fc0d4a85ebd2e3dd35f Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Fri, 16 Sep 2022 21:07:55 +0300
Subject: [PATCH 06/42] [rtl] Make ComboBoxColor and ComboBoxIcons components

---
 .../main/lib/component/ComboBorderSize.js     | 24 ++++----
 apps/common/main/resources/less/combobox.less | 55 +++++++++++++++++++
 apps/common/main/resources/less/common.less   |  5 ++
 3 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/apps/common/main/lib/component/ComboBorderSize.js b/apps/common/main/lib/component/ComboBorderSize.js
index 28a2f6e83..70348201b 100644
--- a/apps/common/main/lib/component/ComboBorderSize.js
+++ b/apps/common/main/lib/component/ComboBorderSize.js
@@ -300,9 +300,9 @@ define([
 
     Common.UI.ComboBoxColor = Common.UI.ComboBox.extend(_.extend({
         template: _.template([
-            '<div class="input-group combobox combo-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
-            '<div class="form-control" style="padding:2px 14px 2px 3px; <%= style %> display: block;">',
-                '<div style="display: inline-block;overflow: hidden;width: 100%;height: 100%;"></div>',
+            '<div class="input-group combobox combo-color combobox-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
+            '<div class="form-control" style="<%= style %>">',
+                '<div></div>',
             '</div>',
             '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
                 '<span class="caret"></span>',
@@ -313,7 +313,7 @@ define([
                     '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
                 '<% } else { %>',
                     '<li id="<%= item.id %>" data-value="<%= item.value %>">',
-                    '<a tabindex="-1" type="menuitem" style="padding: 5px;"><div style="height: 15px;<%= item.styleStr %>"><%= scope.getDisplayValue(item) %></div></a>',
+                    '<a tabindex="-1" type="menuitem"><div style="<%= item.styleStr %>"><%= scope.getDisplayValue(item) %></div></a>',
                     '</li>',
                 '<% } %>',
             '<% }); %>',
@@ -380,7 +380,7 @@ define([
                     '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
                     '<% } else { %>',
                     '<li id="<%= item.id %>" data-value="<%= item.value %>">',
-                    '<a tabindex="-1" type="menuitem" style="padding: 5px;"><div style="height: 15px;<%= item.styleStr %>"><%= scope.getDisplayValue(item) %></div></a>',
+                    '<a tabindex="-1" type="menuitem""><div style="<%= item.styleStr %>"><%= scope.getDisplayValue(item) %></div></a>',
                     '</li>',
                     '<% } %>',
                     '<% }); %>'
@@ -407,9 +407,9 @@ define([
 
     Common.UI.ComboBoxIcons= Common.UI.ComboBox.extend(_.extend({
         template: _.template([
-            '<div class="input-group combobox combo-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
-                '<div class="form-control" style="padding:2px 0 2px 3px; <%= style %> display: block;">',
-                    '<div style="display: inline-block;overflow: hidden;width: 100%;height: 100%;"></div>',
+            '<div class="input-group combobox combobox-icons combo-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
+                '<div class="form-control" style="<%= style %>">',
+                    '<div></div>',
                 '</div>',
                 '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
                     '<span class="caret"></span>',
@@ -420,9 +420,9 @@ define([
                             '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>',
                         '<% } else { %>',
                             '<li id="<%= item.id %>" data-value="<%= item.value %>">',
-                                '<a tabindex="-1" type="menuitem" style="padding: 5px;">',
+                                '<a tabindex="-1" type="menuitem">',
                                     '<% _.each(item.data.iconSet, function(icon) { %>',
-                                    '<img src="<%= item.data.icons.at(icon-1).get(\'icon\') %>" style="width:16px;height:16px;margin-right: 5px;">',
+                                    '<img src="<%= item.data.icons.at(icon-1).get(\'icon\') %>">',
                                     '<% }) %>',
                                 '</a>',
                             '</li>',
@@ -454,7 +454,7 @@ define([
             if (record.get('value')!=-1) {
                 var str = '';
                 _.each(record.get('data').iconSet, function(icon) {
-                    str += '<img src="' + record.get('data').icons.at(icon-1).get("icon") + '" style="width:16px;height:16px;margin-right: 5px;">';
+                    str += '<img src="' + record.get('data').icons.at(icon-1).get("icon") + '">';
                 });
                 formcontrol[0].innerHTML = str;
                 formcontrol.css({'margin-top': '0'});
@@ -495,7 +495,7 @@ define([
                     '<li id="<%= item.id %>" data-value="<%= item.value %>">',
                         '<a tabindex="-1" type="menuitem" style="padding: 5px;">',
                             '<% _.each(item.data.iconSet, function(icon) { %>',
-                                '<img src="<%= item.data.icons.at(icon-1).get(\'icon\') %>" style="width:16px;height:16px;margin-right: 5px;">',
+                                '<img src="<%= item.data.icons.at(icon-1).get(\'icon\') %>">',
                             '<% }) %>',
                         '</a>',
                     '</li>',
diff --git a/apps/common/main/resources/less/combobox.less b/apps/common/main/resources/less/combobox.less
index 3297071c7..4c7525a16 100644
--- a/apps/common/main/resources/less/combobox.less
+++ b/apps/common/main/resources/less/combobox.less
@@ -214,6 +214,10 @@
 
     .dropdown-menu.menu-absolute {
         position: fixed;
+
+        .rtl & {
+            right: unset;
+        }
     }
 
     .dropdown-menu.show-top {
@@ -228,6 +232,57 @@
             }
         }
     }
+
+    &.combobox-icons {
+        .form-control {
+            padding:2px 0 2px 3px;
+            display: block;
+            div {
+                display: inline-block;
+                overflow: hidden;
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        li a {
+            padding: 5px;
+            img {
+                width:16px;
+                height:16px;
+                margin-right: 5px;
+               .rtl & {
+                   margin-right: 0;
+                   margin-left: 5px;
+               }
+            }
+        }
+    }
+
+    &.combobox-color {
+        .form-control {
+            display: block;
+            padding: 2px 14px 2px 3px;
+
+            div {
+                display: inline-block;
+                overflow: hidden;
+                width: 100%;
+                height: 100%;
+            }
+
+            .rtl & {
+                padding: 2px 3px 2px 14px;
+            }
+        }
+        li a {
+            padding: 5px;
+
+            div {
+                height: 15px;
+            }
+        }
+    }
 }
 
 .open > .combobox.combo-dataview-menu {
diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less
index 181661900..8570b6daf 100644
--- a/apps/common/main/resources/less/common.less
+++ b/apps/common/main/resources/less/common.less
@@ -247,6 +247,11 @@ label {
         color: @text-normal-ie;
         color: @text-normal;
     }
+
+    .rtl & {
+        left: unset;
+        right: 0;
+    }
 }
 
 textarea {

From 82a5411b8c0a3075ce18fbe6fbc1ed3cd18f8762 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Mon, 19 Sep 2022 15:32:38 +0300
Subject: [PATCH 07/42] [rtl] Make spinner, scrolls

---
 apps/common/main/resources/less/common.less  |  8 ++++++++
 apps/common/main/resources/less/spinner.less | 11 +++++++++++
 2 files changed, 19 insertions(+)

diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less
index 8570b6daf..7b070e57c 100644
--- a/apps/common/main/resources/less/common.less
+++ b/apps/common/main/resources/less/common.less
@@ -317,4 +317,12 @@ body {
     &.pixel-ratio__1_75 {
         image-rendering: crisp-edges; // FF only
     }
+}
+
+.rtl .ps-scrollbar-y-rail {
+    right: unset !important;
+    left: 1px !important;
+    .ps-scrollbar-y {
+        left: 0 !important;
+    }
 }
\ No newline at end of file
diff --git a/apps/common/main/resources/less/spinner.less b/apps/common/main/resources/less/spinner.less
index e33fb2b65..9e2885259 100644
--- a/apps/common/main/resources/less/spinner.less
+++ b/apps/common/main/resources/less/spinner.less
@@ -9,6 +9,12 @@
         padding-left: 1px;
         padding-right: @trigger-width + 2px;
 
+        .rtl & {
+            text-align: left;
+            padding-left: @trigger-width + 2px;
+            padding-right: 1px;
+        }
+
         &:focus {
             // border-color: @border-preview-select;
         }
@@ -46,6 +52,11 @@
         border-bottom: @scaled-one-px-value-ie solid transparent;
         border-bottom: @scaled-one-px-value solid transparent;
 
+        .rtl & {
+            right: unset;
+            left: 1px;
+        }
+
         i {
             display: inline-block;
             width: 4px;

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 08/42] [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,

From dc06aab506ed7ca30bb70c34e1fb67bc1d1e54d6 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Wed, 5 Oct 2022 20:24:35 +0300
Subject: [PATCH 09/42] [rtl] Make dropdown menu (margins, size, custom zoom)

---
 apps/common/main/resources/less/toolbar.less  |  4 ++
 apps/documenteditor/main/app/view/Toolbar.js  | 19 +++++--
 .../main/app/view/Toolbar.js                  | 51 ++++++++++++-------
 .../main/resources/less/toolbar.less          | 41 +++++++++++++++
 4 files changed, 92 insertions(+), 23 deletions(-)

diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index d29a43791..ccad589b0 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -752,6 +752,10 @@
         &.colors {
             display: inline-block;
             margin-right: 15px;
+            .rtl & {
+                margin-right: 0;
+                margin-left: 15px;
+            }
         }
 
         &.color {
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index 5e047099c..91b3943a7 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -1032,13 +1032,21 @@ define([
                     this.toolbarControls.push(this.btnPageOrient);
 
 
-                    var pageMarginsTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                    var pageMarginsTemplate = !Common.UI.isRTL() ? _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></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>') :
+                        _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                        '<% if (options.value !== null) { %><div class="margin-vertical">' +
+                        '<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %>' + this.textTop + '</label>' +
+                        '<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %>' + this.textLeft + '</label></div>' +
+                        '<div class="margin-horizontal">' +
+                        '<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %>' + this.textBottom + '</label>' +
+                        '<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %>' + this.textRight + '</label></div>' +
                         '<% } %></a>');
 
                     this.btnPageMargins = new Common.UI.Button({
@@ -1101,9 +1109,12 @@ define([
                     });
                     this.toolbarControls.push(this.btnPageMargins);
 
-                    var pageSizeTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
-                        '<div><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' +
-                        '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>');
+                    var pageSizeTemplate = !Common.UI.isRTL() ? _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                        '<div dir="ltr"><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' +
+                        '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>') :
+                        _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                        '<div dir="ltr"><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> x ' +
+                        '<%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %></div></a>');
 
                     this.btnPageSize = new Common.UI.Button({
                         id: 'tlbtn-pagesize',
diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js
index 429ef8dea..df3add848 100644
--- a/apps/spreadsheeteditor/main/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js
@@ -1674,12 +1674,21 @@ define([
                     dataHintOffset: 'small'
                 });
 
-                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>' +
+                var pageMarginsTemplate = !Common.UI.isRTL() ? _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></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>') :
+                    _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                    '<% if (options.value !== null) { %><div class="margin-vertical">' +
+                    '<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %>' + this.textTop + '</label>' +
+                    '<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %>' + this.textLeft + '</label></div>' +
+                    '<div class="margin-horizontal">' +
+                    '<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[2]).toFixed(2)) %>' + this.textBottom + '</label>' +
+                    '<label><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[3]).toFixed(2)) %>' + this.textRight + '</label></div>' +
                     '<% } %></a>');
 
                 me.btnPageMargins = new Common.UI.Button({
@@ -1689,6 +1698,7 @@ define([
                     caption: me.capBtnMargins,
                     lock        : [_set.docPropsLock, _set.lostConnect, _set.coAuth, _set.editCell, _set.selRangeEdit],
                     menu: new Common.UI.Menu({
+                        cls: 'menu-margins',
                         items: [
                             {
                                 caption: me.textMarginsLast,
@@ -1726,9 +1736,12 @@ define([
                     dataHintOffset: 'small'
                 });
 
-                var pageSizeTemplate = _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
-                    '<div><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' +
-                    '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>');
+                var pageSizeTemplate = !Common.UI.isRTL() ? _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                    '<div dir="ltr"><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x ' +
+                    '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div></a>') :
+                    _.template('<a id="<%= id %>" tabindex="-1" type="menuitem"><div><b><%= caption %></b></div>' +
+                    '<div dir="ltr"><%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> x ' +
+                    '<%= Common.Utils.Metric.getCurrentMetricName() %> <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %></div></a>');
 
                 me.btnPageSize = new Common.UI.Button({
                     id: 'tlbtn-pagesize',
@@ -1884,16 +1897,16 @@ define([
 
                 me.mnuCustomScale = new Common.UI.MenuItem({
                     template: _.template([
-                        '<div class="checkable custom-scale" style="padding: 5px 5px 5px 20px;font-weight: normal;line-height: 1.42857143;font-size: 11px;height: 32px;"',
-                        '<% if(!_.isUndefined(options.stopPropagation)) { %>',
-                        'data-stopPropagation="true"',
-                        '<% } %>', '>',
-                        '<label class="title" style="padding-top: 3px;padding-right: 5px;">' + me.textScale + '</label>',
-                        '<button id="custom-scale-up" type="button" style="float:right;" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>',
-                        '<label id="value-custom-scale" style="float:right;padding: 3px 3px;min-width: 40px; text-align: center;"></label>',
-                        '<button id="custom-scale-down" type="button" style="float:right;" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>',
-                        '</div>'
-                    ].join('')),
+                            '<div class="checkable custom-scale"',
+                            '<% if(!_.isUndefined(options.stopPropagation)) { %>',
+                            'data-stopPropagation="true"',
+                            '<% } %>', '>',
+                            '<label class="title">' + me.textScale + '</label>',
+                            '<button id="custom-scale-up" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>',
+                            '<label id="value-custom-scale"></label>',
+                            '<button id="custom-scale-down" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown">&nbsp;</i></button>',
+                            '</div>'
+                        ].join('')),
                     stopPropagation: true,
                     value: 4
                 });
diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less
index 6c84ecc9e..3fe74ecd0 100644
--- a/apps/spreadsheeteditor/main/resources/less/toolbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less
@@ -146,3 +146,44 @@
         margin-right: 2px;
     }
 }
+
+.custom-scale {
+    padding: 5px 5px 5px 20px;
+    font-weight: normal;
+    line-height: 1.42857143;
+    font-size: 11px;
+    height: 32px;
+    .rtl & {
+        padding: 5px 20px 5px 5px;
+    }
+    .title {
+        padding-top: 3px;
+        padding-right: 5px;
+        .rtl & {
+            padding-right: 0;
+            padding-left: 5px;
+            float: right;
+        }
+    }
+    #custom-scale-up {
+        float:right;
+        .rtl & {
+            float: left;
+        }
+    }
+    #value-custom-scale {
+        float:right;
+        padding: 3px 3px;
+        min-width: 40px;
+        text-align: center;
+        .rtl & {
+            float: left;
+        }
+    }
+    #custom-scale-down {
+        float:right;
+        .rtl & {
+            float: left;
+        }
+    }
+}

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 10/42] [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;
+        }
+    }
 }
 
 

From aebe1872f8cb0e211ec18f8d322b07e7e0a68d87 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Thu, 13 Oct 2022 18:23:01 +0300
Subject: [PATCH 11/42] [rtl] Make theme color palette

---
 apps/common/main/lib/component/ColorButton.js |  2 +-
 .../main/lib/component/ThemeColorPalette.js   | 16 +++----
 apps/common/main/resources/less/buttons.less  | 25 +++++++---
 .../resources/less/theme-colorpalette.less    | 48 +++++++++++++++++++
 4 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js
index 8e2a2280b..90c428b8c 100644
--- a/apps/common/main/lib/component/ColorButton.js
+++ b/apps/common/main/lib/component/ColorButton.js
@@ -91,7 +91,7 @@ define([
                     auto.push({
                         id: id + '-color-auto',
                         caption: (typeof options.auto == 'object') ? options.auto.caption || this.textAutoColor : this.textAutoColor,
-                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #' + this.autocolor + ';"></span><%= caption %></a>')
+                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto" style="background-color: #' + this.autocolor + ';"></span><%= caption %></a>')
                     });
                     auto.push({caption: '--'});
                 }
diff --git a/apps/common/main/lib/component/ThemeColorPalette.js b/apps/common/main/lib/component/ThemeColorPalette.js
index 1af6e825b..f50b7a928 100644
--- a/apps/common/main/lib/component/ThemeColorPalette.js
+++ b/apps/common/main/lib/component/ThemeColorPalette.js
@@ -64,11 +64,11 @@ define([
 
         template    :
             _.template(
-                '<div style="padding: 4px 0 0 12px;">' +
+                '<div class="palette-inner">' +
                 '<% var me = this; var idx = 0; %>' +
                 '<% $(colors).each(function(num, item) { %>' +
-                    '<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
-                    '<% } else if (me.isSeparator(item)) { %> </div><div class="divider" style="width:100%;float:left;"></div><div style="padding: 12px;">' +
+                    '<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer"></div>' +
+                    '<% } else if (me.isSeparator(item)) { %> </div><div class="divider"></div><div style="padding: 12px;">' +
                     '<% } else if (me.isColor(item)) { %> ' +
                         '<a class="palette-color color-<%=item%>" style="background:#<%=item%>" idx="<%=idx++%>">' +
                         '<em><span style="background:#<%=item%>;" unselectable="on">&#160;</span></em>' +
@@ -79,20 +79,20 @@ define([
                         '</a>' +
                     '<% } else if (me.isEffect(item)) { %>' +
                         '<% if (idx>0 && me.columns>0 && idx%me.columns===0) { %> ' +
-                        '<div style="width:100%;height:0;float:left;"></div>' +
+                        '<div class="color-divider"></div>' +
                         '<% } %>' +
                         '<a effectid="<%=item.effectId%>" effectvalue="<%=item.effectValue%>" class="palette-color-effect color-<%=item.color%>" style="background:#<%=item.color%>" idx="<%=idx++%>">' +
                         '<em><span style="background:#<%=item.color%>;" unselectable="on">&#160;</span></em>' +
                         '</a>' +
                     '<% } else if (me.isCaption(item)) { %>' +
-                    '<div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;"><%=item%></div>' +
+                    '<div class="palette-color-caption"><%=item%></div>' +
                     '<% } %>' +
                 '<% }); %>' +
                 '</div>' +
                 '<% if (me.options.dynamiccolors!==undefined) { %>' +
-                '<div class="palette-color-dynamiccolors" style="padding: 4px 0 0 12px">' +
-                    '<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' +
-                    '<div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;"><%=me.textRecentColors%></div>' +
+                '<div class="palette-color-dynamiccolors">' +
+                    '<div class="palette-color-spacer"></div>' +
+                    '<div class="palette-color-caption"><%=me.textRecentColors%></div>' +
                     '<% for (var i=0; i<me.options.dynamiccolors; i++) { %>' +
                         '<a class="color-dynamic-<%=i%> dynamic-empty-color <%= me.emptyColorsClass %>" color="" idx="<%=idx++%>">' +
                         '<em><span unselectable="on">&#160;</span></em></a>' +
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index e53641a0a..a1e62faf4 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -721,13 +721,26 @@
 
 // for color button auto color
 .dropdown-menu {
-    li > a.selected,
-    li > a:hover {
+    li > a {
         span.color-auto {
-            outline: @scaled-one-px-value-ie solid @icon-normal-ie;
-            outline: @scaled-one-px-value solid @icon-normal;
-            border: @scaled-one-px-value-ie solid @background-normal-ie;
-            border: @scaled-one-px-value solid @background-normal;
+            background-image: none;
+            width: 12px;
+            height: 12px;
+            margin: 1px 7px 0 1px;
+
+            .rtl & {
+                margin: 1px 1px 0 7px;
+            }
+        }
+
+        &.selected,
+        &:hover {
+            span.color-auto {
+                outline: @scaled-one-px-value-ie solid @icon-normal-ie;
+                outline: @scaled-one-px-value solid @icon-normal;
+                border: @scaled-one-px-value-ie solid @background-normal-ie;
+                border: @scaled-one-px-value solid @background-normal;
+            }
         }
     }
 }
diff --git a/apps/common/main/resources/less/theme-colorpalette.less b/apps/common/main/resources/less/theme-colorpalette.less
index 3c71fba63..fd63a4483 100644
--- a/apps/common/main/resources/less/theme-colorpalette.less
+++ b/apps/common/main/resources/less/theme-colorpalette.less
@@ -32,6 +32,10 @@
         outline: 0 none;
         cursor: pointer;
 
+        .rtl & {
+            float: right;
+        }
+
         em span {
             border: @scaled-one-px-value-ie solid @border-color-shading-ie;
             border: @scaled-one-px-value solid @border-color-shading;
@@ -65,5 +69,49 @@
             border:solid @scaled-one-px-value @border-color-shading;
         }
     }
+
+    .palette-inner {
+        padding: 4px 0 0 12px;
+        .rtl & {
+            padding: 4px 12px 0 0;
+        }
+    }
+
+    .palette-color-caption {
+        width:100%;
+        float:left;
+        font-size: 11px;
+        .rtl & {
+            float: right;
+            text-align: right;
+        }
+    }
+
+    .palette-color-spacer {
+        width: 100%;
+        height: 8px;
+        float: left;
+        .rtl & {
+            float: right;
+        }
+    }
+
+    .palette-color-dynamiccolors {
+        padding: 4px 0 0 12px;
+        .rtl & {
+            padding: 4px 12px 0 0;
+        }
+    }
+
+    .divider {
+        width: 100%;
+        float: left;
+    }
+
+    .color-divider {
+        width:100%;
+        height:0;
+        float:left;
+    }
 }
 

From 1d6544370fa84f4a57940f927846e7b268dc57cf Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Fri, 14 Oct 2022 14:43:36 +0300
Subject: [PATCH 12/42] [all] correct panels in "File" menu

---
 apps/common/main/resources/less/common.less   |  4 ++++
 .../main/app/view/FileMenuPanels.js           |  2 +-
 .../main/resources/less/filemenu.less         | 18 +++++++++++++++
 .../main/resources/less/leftmenu.less         |  5 ++++
 .../main/app/view/FileMenuPanels.js           |  2 +-
 .../main/resources/less/leftmenu.less         | 23 +++++++++++++++++++
 .../main/app/view/FileMenuPanels.js           |  2 +-
 .../main/resources/less/leftmenu.less         | 23 +++++++++++++++++++
 8 files changed, 76 insertions(+), 3 deletions(-)

diff --git a/apps/common/main/resources/less/common.less b/apps/common/main/resources/less/common.less
index 1de9945a8..933a320d3 100644
--- a/apps/common/main/resources/less/common.less
+++ b/apps/common/main/resources/less/common.less
@@ -165,6 +165,10 @@ label {
         border-right: @scaled-one-px-value solid @border-toolbar;
         background-color: @background-toolbar-ie;
         background-color: @background-toolbar;
+
+        .rtl & {
+            float: right;
+        }
     }
 
     .flex-settings {
diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index f7e1de1ff..41c936dcc 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -1993,7 +1993,7 @@ define([
         template: _.template([
             '<div style="width:100%; height:100%; position: relative;">',
                 '<div id="id-help-contents" style="position: absolute; width:220px; top: 0; bottom: 0;" class="no-padding"></div>',
-                '<div id="id-help-frame" style="position: absolute; left: 220px; top: 0; right: 0; bottom: 0;" class="no-padding"></div>',
+                '<div id="id-help-frame" class="no-padding"></div>',
             '</div>'
         ].join('')),
 
diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less
index 650055751..28f2321d7 100644
--- a/apps/documenteditor/main/resources/less/filemenu.less
+++ b/apps/documenteditor/main/resources/less/filemenu.less
@@ -66,6 +66,11 @@
     background-color: @background-normal-ie;
     background-color: @background-normal;
 
+    .rtl & {
+      padding-left: 0;
+      padding-right: 260px;
+    }
+
     .content-box {
       height: 100%;
       padding: 0 20px;
@@ -82,6 +87,19 @@
   }
 }
 
+#id-help-frame {
+    position: absolute;
+    left: 220px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    .rtl & {
+        left: 0;
+        right: 220px;
+    }
+}
+
 #panel-saveas, #panel-savecopy {
   table {
     margin-left: auto;
diff --git a/apps/documenteditor/main/resources/less/leftmenu.less b/apps/documenteditor/main/resources/less/leftmenu.less
index 6f2b7e151..8aeb99b29 100644
--- a/apps/documenteditor/main/resources/less/leftmenu.less
+++ b/apps/documenteditor/main/resources/less/leftmenu.less
@@ -16,6 +16,11 @@
     background-color: @background-toolbar-ie;
     background-color: @background-toolbar;
     overflow: hidden;
+
+    .rtl & {
+        left: 0;
+        right: 40px;
+    }
 }
 
 #developer-hint, #beta-hint, #limit-hint {
diff --git a/apps/presentationeditor/main/app/view/FileMenuPanels.js b/apps/presentationeditor/main/app/view/FileMenuPanels.js
index 08ca6fcfa..ed88acd62 100644
--- a/apps/presentationeditor/main/app/view/FileMenuPanels.js
+++ b/apps/presentationeditor/main/app/view/FileMenuPanels.js
@@ -1508,7 +1508,7 @@ define([
         template: _.template([
             '<div style="width:100%; height:100%; position: relative;">',
                 '<div id="id-help-contents" style="position: absolute; width:220px; top: 0; bottom: 0;" class="no-padding"></div>',
-                '<div id="id-help-frame" style="position: absolute; left: 220px; top: 0; right: 0; bottom: 0;" class="no-padding"></div>',
+                '<div id="id-help-frame" class="no-padding"></div>',
             '</div>'
         ].join('')),
 
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index e852e3cc8..d0ca82b7d 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -31,6 +31,11 @@
     background-color: @background-toolbar-ie;
     background-color: @background-toolbar;
     overflow: hidden;
+
+    .rtl & {
+        left: 0;
+        right: 40px;
+    }
 }
 
 .btn-doc-format {
@@ -177,6 +182,11 @@
         background-color: @background-normal-ie;
         background-color: @background-normal;
 
+        .rtl & {
+            padding-left: 0;
+            padding-right: 260px;
+        }
+
         .content-box {
             height: 100%;
             padding: 0 20px;
@@ -522,6 +532,19 @@
     }
 }
 
+#id-help-frame {
+    position: absolute;
+    left: 220px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    .rtl & {
+        left: 0;
+        right: 220px;
+    }
+}
+
 #developer-hint, #beta-hint, #limit-hint {
     position: absolute;
     left: 0;
diff --git a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
index fb7ec1c32..6cf5e5012 100644
--- a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
+++ b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
@@ -1881,7 +1881,7 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
         template: _.template([
             '<div style="width:100%; height:100%; position: relative;">',
                 '<div id="id-help-contents" style="position: absolute; width:220px; top: 0; bottom: 0;" class="no-padding"></div>',
-                '<div id="id-help-frame" style="position: absolute; left: 220px; top: 0; right: 0; bottom: 0;" class="no-padding"></div>',
+                '<div id="id-help-frame" class="no-padding"></div>',
             '</div>'
         ].join('')),
 
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index 7f4accae5..54cf7fae3 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -31,6 +31,11 @@
     background-color: @background-toolbar-ie;
     background-color: @background-toolbar;
     overflow: hidden;
+
+    .rtl & {
+        left: 0;
+        right: 40px;
+    }
 }
 
 .btn-doc-format {
@@ -162,6 +167,11 @@
         background-color: @background-normal-ie;
         background-color: @background-normal;
 
+        .rtl & {
+            padding-left: 0;
+            padding-right: 260px;
+        }
+
         .content-box {
             height: 100%;
             padding: 0 20px;
@@ -713,6 +723,19 @@
     }
 }
 
+#id-help-frame {
+    position: absolute;
+    left: 220px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    .rtl & {
+        left: 0;
+        right: 220px;
+    }
+}
+
 #developer-hint, #beta-hint, #limit-hint {
     position: absolute;
     left: 0;

From bf4488af86af970dba0b65a3f3538f4164d7bc60 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Fri, 14 Oct 2022 17:56:25 +0300
Subject: [PATCH 13/42] [rtl] Make dimension picker

---
 .../main/lib/component/DimensionPicker.js     | 39 +++++++++++++------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/apps/common/main/lib/component/DimensionPicker.js b/apps/common/main/lib/component/DimensionPicker.js
index 24aece99f..e6dda50f8 100644
--- a/apps/common/main/lib/component/DimensionPicker.js
+++ b/apps/common/main/lib/component/DimensionPicker.js
@@ -53,12 +53,13 @@ define([
                 minRows     : 5,
                 minColumns  : 5,
                 maxRows     : 20,
-                maxColumns  : 20
+                maxColumns  : 20,
+                direction   : undefined // 'left', 'right'
             },
 
             template:_.template([
                 '<div style="width: 100%; height: 100%;">',
-                    '<div class="dimension-picker-status">0x0</div>',
+                    '<div dir="ltr" class="dimension-picker-status">0x0</div>',
                     '<div class="dimension-picker-observecontainer">',
                         '<div class="dimension-picker-mousecatcher"></div>',
                         '<div class="dimension-picker-unhighlighted"></div>',
@@ -84,12 +85,24 @@ define([
                 me.maxRows     = me.options.maxRows;
                 me.maxColumns  = me.options.maxColumns;
 
+                me.direction   = me.options.direction;
+                if (Common.UI.isRTL() && !me.direction) {
+                    me.direction = 'right';
+                }
+
                 me.curColumns = 0;
                 me.curRows = 0;
 
                 var onMouseMove = function(event){
+                    var offsetX;
+                    if (me.direction === 'right' && me.areaMouseCatcher) {
+                        var width = me.areaMouseCatcher.width();
+                        offsetX = event.offsetX === undefined ? (width - event.originalEvent.layerX) : (width - event.offsetX)*Common.Utils.zoom()
+                    } else {
+                        offsetX = event.offsetX === undefined ? event.originalEvent.layerX : event.offsetX*Common.Utils.zoom();
+                    }
                     me.setTableSize(
-                        Math.ceil((event.offsetX === undefined ? event.originalEvent.layerX : event.offsetX*Common.Utils.zoom()) / me.itemSize),
+                        Math.ceil(offsetX / me.itemSize),
                         Math.ceil((event.offsetY === undefined ? event.originalEvent.layerY : event.offsetY*Common.Utils.zoom()) / me.itemSize),
                         event
                     );
@@ -104,27 +117,31 @@ define([
                 };
 
                 if (rootEl){
-                    var areaMouseCatcher    = rootEl.find('.dimension-picker-mousecatcher');
+                    me.areaMouseCatcher    = rootEl.find('.dimension-picker-mousecatcher');
                     me.areaUnHighLighted   = rootEl.find('.dimension-picker-unhighlighted');
                     me.areaHighLighted     = rootEl.find('.dimension-picker-highlighted');
                     me.areaStatus          = rootEl.find('.dimension-picker-status');
 
                     rootEl.css({width: me.minColumns + 'em'});
-                    areaMouseCatcher.css('z-index', 1);
-                    areaMouseCatcher.width(me.maxColumns + 'em').height(me.maxRows + 'em');
+                    me.areaMouseCatcher.css('z-index', 1);
+                    me.areaMouseCatcher.width(me.maxColumns + 'em').height(me.maxRows + 'em');
                     me.areaUnHighLighted.width(me.minColumns + 'em').height(me.minRows + 'em');
-                    me.areaStatus.html(me.curColumns + ' x ' + me.curRows);
+                    me.areaStatus.html(!Common.UI.isRTL() ? this.curColumns + ' x ' + this.curRows : this.curRows + ' x ' + this.curColumns);
                     me.areaStatus.width(me.areaUnHighLighted.width());
 
-                    areaMouseCatcher.on('mousemove', onMouseMove);
+                    me.areaMouseCatcher.on('mousemove', onMouseMove);
                     me.areaHighLighted.on('mousemove', onMouseMove);
                     me.areaUnHighLighted.on('mousemove', onMouseMove);
-                    areaMouseCatcher.on('mouseleave', onMouseLeave);
+                    me.areaMouseCatcher.on('mouseleave', onMouseLeave);
                     me.areaHighLighted.on('mouseleave', onMouseLeave);
                     me.areaUnHighLighted.on('mouseleave', onMouseLeave);
-                    areaMouseCatcher.on('click', onHighLightedMouseClick);
+                    me.areaMouseCatcher.on('click', onHighLightedMouseClick);
                     me.areaHighLighted.on('click', onHighLightedMouseClick);
                     me.areaUnHighLighted.on('click', onHighLightedMouseClick);
+
+                    if (me.direction === 'right') {
+                        me.areaHighLighted.css({left: 'auto', right: '0'});
+                    }
                 }
             },
 
@@ -157,7 +174,7 @@ define([
                     );
 
                     this.cmpEl.width(this.areaUnHighLighted.width());
-                    this.areaStatus.html(this.curColumns + ' x ' + this.curRows);
+                    this.areaStatus.html(!Common.UI.isRTL() ? this.curColumns + ' x ' + this.curRows : this.curRows + ' x ' + this.curColumns);
                     this.areaStatus.width(this.areaUnHighLighted.width());
 
                     this.trigger('change', this, this.curColumns, this.curRows, event);

From 3032035cfbc402f6a508788eecb7db8b7976e0af Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Fri, 14 Oct 2022 22:01:21 +0300
Subject: [PATCH 14/42] [rtl] Make dataview (insert shape, chart)

---
 apps/common/main/resources/less/dataview.less | 30 +++++++++++++++++++
 apps/common/main/resources/less/toolbar.less  | 14 +++++++++
 2 files changed, 44 insertions(+)

diff --git a/apps/common/main/resources/less/dataview.less b/apps/common/main/resources/less/dataview.less
index 14c376c4d..a62d4a970 100644
--- a/apps/common/main/resources/less/dataview.less
+++ b/apps/common/main/resources/less/dataview.less
@@ -41,10 +41,25 @@
         clear: left;
         overflow: hidden;
 
+        .rtl & {
+            clear: right;
+        }
+
         &.inline {
             display: inline-block;
+
+            .rtl & {
+                float: right;
+                clear: none;
+            }
+
             &.margin .group-items-container {
                 margin-right: 20px;
+
+                .rtl & {
+                    margin-right: 0;
+                    margin-left: 20px;
+                }
             }
         }
 
@@ -57,6 +72,10 @@
                 float: left;
                 margin: 2px 4px 4px;
 
+                .rtl & {
+                    float: right;
+                }
+
                 &:not(.disabled) {
                     cursor: pointer;
                 }
@@ -93,9 +112,20 @@
 .menu-insert-shape, .menu-change-shape {
     width: 362px;
     padding: 10px 5px 10px 10px !important;
+
+    .rtl & {
+        padding: 10px 10px 10px 5px !important;
+    }
+
     .group-description {
         padding: 3px 0 3px 4px;
+
+        .rtl & {
+            padding: 3px 4px 3px 0;
+            text-align: right;
+        }
     }
+
     .dataview .grouped-data .group-items-container .item {
         box-shadow: none;
         margin: 2px 2px 2px;
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index ccad589b0..b95e5a40c 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -721,13 +721,27 @@
 .menu-insertchart {
     margin: 5px 5px 0 10px;
 
+    .rtl & {
+        margin: 5px 10px 0 5px;
+    }
+
     .group-description {
         padding-left: 4px;
+
+        .rtl & {
+            padding: 0;
+            padding-right: 4px;
+            text-align: right;
+        }
     }
 
     .group-items-container {
         float: left;
         position: relative;
+
+        .rtl & {
+            float: right;
+        }
     }
 }
 

From 65c89bf6d2b0eeedfb3f54126699d29a9316d386 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Mon, 17 Oct 2022 17:35:15 +0300
Subject: [PATCH 15/42] [rtl] Make checkboxes, settings in file menu

---
 apps/common/main/resources/less/checkbox.less | 10 ++
 apps/common/main/resources/less/radiobox.less |  6 ++
 .../main/app/view/FileMenuPanels.js           | 10 +-
 .../main/resources/less/filemenu.less         | 94 +++++++++++++++---
 .../main/app/view/FileMenuPanels.js           |  2 +-
 .../main/resources/less/leftmenu.less         | 28 ++++++
 .../main/app/view/FileMenuPanels.js           | 33 ++++---
 .../main/resources/less/leftmenu.less         | 95 +++++++++++++++++++
 8 files changed, 244 insertions(+), 34 deletions(-)

diff --git a/apps/common/main/resources/less/checkbox.less b/apps/common/main/resources/less/checkbox.less
index b0d588c75..110f871ef 100644
--- a/apps/common/main/resources/less/checkbox.less
+++ b/apps/common/main/resources/less/checkbox.less
@@ -6,6 +6,11 @@
     position: relative;
     min-height: 1em;
 
+    .rtl & {
+        padding-left: 0;
+        padding-right: 22px;
+    }
+
     input[type=checkbox] {
         display: none;
 
@@ -21,6 +26,11 @@
             left: 0;
             margin-top: auto;
 
+            .rtl & {
+                left: auto;
+                right: 0;
+            }
+
             + span {
                 outline: @scaled-one-px-value-ie dotted transparent;
                 outline: @scaled-one-px-value dotted transparent;
diff --git a/apps/common/main/resources/less/radiobox.less b/apps/common/main/resources/less/radiobox.less
index 56c440701..d1289aedf 100644
--- a/apps/common/main/resources/less/radiobox.less
+++ b/apps/common/main/resources/less/radiobox.less
@@ -10,6 +10,12 @@
 
     svg {
         margin-right: 8px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 8px;
+        }
+
         .rb-circle {
             fill: @background-normal-ie;
             fill: @background-normal;
diff --git a/apps/documenteditor/main/app/view/FileMenuPanels.js b/apps/documenteditor/main/app/view/FileMenuPanels.js
index 41c936dcc..018564885 100644
--- a/apps/documenteditor/main/app/view/FileMenuPanels.js
+++ b/apps/documenteditor/main/app/view/FileMenuPanels.js
@@ -350,8 +350,8 @@ define([
                 '<tr class="themes">',
                     '<td><label><%= scope.strTheme %></label></td>',
                     '<td>',
-                        '<div><div id="fms-cmb-theme" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
-                        '<div id="fms-chb-dark-mode" style="display: inline-block; vertical-align: middle;margin-top: 2px;"></div></div></td>',
+                        '<div><div id="fms-cmb-theme"></div>',
+                        '<div id="fms-chb-dark-mode"></div></div></td>',
                 '</tr>',
                 '<tr class="edit">',
                     '<td><label><%= scope.strUnit %></label></td>',
@@ -368,7 +368,7 @@ define([
                 '<tr class="macros">',
                     '<td><label><%= scope.strMacrosSettings %></label></td>',
                     '<td>',
-                        '<div><div id="fms-cmb-macros" style="display: inline-block; margin-right: 15px; vertical-align: middle;"></div>',
+                        '<div><div id="fms-cmb-macros"></div>',
                 '</tr>',
                 '<tr class ="divider-group"></tr>',
                 '<tr class="fms-btn-apply">',
@@ -1874,7 +1874,7 @@ define([
                         '<td class="right"><div id="id-info-rights"></div></td>',
                     '</tr>',
                     '<tr class="edit-rights">',
-                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom" style="margin-right: 10px;">' + this.txtBtnAccessRights + '</button></td>',
+                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom">' + this.txtBtnAccessRights + '</button></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
@@ -2197,7 +2197,7 @@ define([
                     '</tr>',
                     '<tr>',
                         '<td><div id="fms-btn-change-pwd" style="width:190px;"></div></td>',
-                        '<td align="right"><div id="fms-btn-delete-pwd" style="width:190px; margin-left:20px;"></div></td>',
+                        '<td align="right"><div id="fms-btn-delete-pwd" style="width:190px;"></div></td>',
                     '</tr>',
                 '</table>',
             '</div>',
diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less
index 28f2321d7..823e12322 100644
--- a/apps/documenteditor/main/resources/less/filemenu.less
+++ b/apps/documenteditor/main/resources/less/filemenu.less
@@ -249,6 +249,34 @@
       }
     }
   }
+
+  #fms-cmb-theme {
+    display: inline-block;
+    margin-right: 15px;
+    vertical-align: middle;
+
+    .rtl & {
+      margin-right: 0;
+      margin-left: 15px;
+    }
+  }
+
+  #fms-chb-dark-mode {
+    display: inline-block;
+    vertical-align: middle;
+    margin-top: 2px;
+  }
+
+  #fms-cmb-macros {
+    display: inline-block;
+    margin-right: 15px;
+    vertical-align: middle;
+
+    .rtl & {
+      margin-right: 0;
+      margin-left: 15px;
+    }
+  }
 }
 
 #panel-createnew {
@@ -260,6 +288,10 @@
     .font-weight-bold();
     padding: 0 0 10px 10px;
     white-space: nowrap;
+
+    .rtl & {
+      padding: 0 10px 10px 0;
+    }
   }
 
 
@@ -420,11 +452,19 @@
 
     .help-item-wrap {
       padding: 4px 2px 4px 20px;
+
+      .rtl & {
+        padding: 4px 20px 4px 2px;
+      }
     }
 
     .header-name {
       padding: 16px 2px 4px 10px;
       font-size: 12px;
+
+      .rtl & {
+        padding: 16px 10px 4px 2px;
+      }
     }
   }
 }
@@ -433,6 +473,15 @@
   #file-menu-panel & {
     padding: 0 30px;
   }
+
+  #id-info-btn-edit {
+    margin-right: 10px;
+
+    .rtl & {
+      margin-right: 0;
+      margin-left: 10px;
+    }
+  }
 }
 
 #panel-info,
@@ -442,11 +491,19 @@
       td {
         padding: 0 20px 5px 0;
 
+        .rtl & {
+          padding: 0 0 5px 20px;
+        }
+
         &.left {
           padding: 5px 10px;
           text-align: right;
           width: 30%;
 
+          .rtl & {
+            text-align: left;
+          }
+
           label {
             .font-weight-bold();
           }
@@ -523,22 +580,31 @@
 }
 
 #panel-protect {
-label {
-  font-size: 12px;
-}
+  label {
+    font-size: 12px;
+  }
 
-#file-menu-panel & {
-  padding: 30px 30px;
-}
+  #file-menu-panel & {
+    padding: 30px 30px;
+  }
 
-.header {
-  .font-weight-bold();
-  margin: 30px 0 10px;
-}
+  .header {
+    .font-weight-bold();
+    margin: 30px 0 10px;
+  }
 
-table {
-  td {
-    padding: 5px 0;
+  table {
+    td {
+      padding: 5px 0;
+    }
+  }
+
+  #fms-btn-delete-pwd {
+    margin-left: 20px;
+    .rtl & {
+      margin-left: 0;
+      margin-right: 20px;
+    }
   }
 }
-}
\ No newline at end of file
+
diff --git a/apps/presentationeditor/main/app/view/FileMenuPanels.js b/apps/presentationeditor/main/app/view/FileMenuPanels.js
index ed88acd62..aeba88c73 100644
--- a/apps/presentationeditor/main/app/view/FileMenuPanels.js
+++ b/apps/presentationeditor/main/app/view/FileMenuPanels.js
@@ -1392,7 +1392,7 @@ define([
                         '<td class="right"><div id="id-info-rights"></div></td>',
                     '</tr>',
                     '<tr class="edit-rights">',
-                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom" style="margin-right: 10px;">' + this.txtBtnAccessRights + '</button></td>',
+                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom">' + this.txtBtnAccessRights + '</button></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index d0ca82b7d..3ab344402 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -275,6 +275,10 @@
                 .font-weight-bold();
                 padding: 0 0 10px 10px;
                 white-space: nowrap;
+
+                .rtl & {
+                    padding: 0 10px 10px 0;
+                }
             }
 
             .blank-document-info {
@@ -433,10 +437,18 @@
 
                 .help-item-wrap {
                     padding: 4px 2px 4px 20px;
+
+                    .rtl & {
+                        padding: 4px 20px 4px 2px;
+                    }
                 }
 
                 .header-name {
                     padding: 16px 2px 4px 10px;
+
+                    .rtl & {
+                        padding: 16px 10px 4px 2px;
+                    }
                 }
             }
         }
@@ -452,11 +464,19 @@
                     td {
                         padding: 0 20px 5px 0;
 
+                        .rtl & {
+                            padding: 0 0 5px 20px;
+                        }
+
                         &.left {
                             padding: 5px 10px;
                             text-align: right;
                             width: 30%;
 
+                            .rtl & {
+                                text-align: left;
+                            }
+
                             label {
                                 .font-weight-bold();
                             }
@@ -528,6 +548,14 @@
                     padding: 5px 0;
                 }
             }
+
+            #fms-btn-delete-pwd {
+                margin-left: 20px;
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 20px;
+                }
+            }
         }
     }
 }
diff --git a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
index 6cf5e5012..defe5373e 100644
--- a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
+++ b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js
@@ -266,7 +266,7 @@ define([
                 '<tr class="macros">',
                     '<td><label><%= scope.strMacrosSettings %></label></td>',
                     '<td>',
-                        '<div><div id="fms-cmb-macros" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
+                        '<div><div id="fms-cmb-macros"></div>',
                     '</td>',
                 '</tr>',
                 '<tr class ="divider-group"></tr>',
@@ -276,14 +276,14 @@ define([
                 '<tr class="">',
                     '<td><label><%= scope.strFuncLocale %></label></td>',
                     '<td>',
-                        '<div><div id="fms-cmb-func-locale" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
-                        '<label id="fms-lbl-func-locale" style="vertical-align: middle;"><%= scope.strFuncLocaleEx %></label></div></td>',
+                        '<div><div id="fms-cmb-func-locale"></div>',
+                        '<label id="fms-lbl-func-locale"><%= scope.strFuncLocaleEx %></label></div></td>',
                 '</tr>',
                 '<tr>',
                     '<td><label><%= scope.txtRegion %></label></td>',
                     '<td>',
-                        '<div><div id="fms-cmb-reg-settings" style="display: inline-block; margin-right: 15px;vertical-align: middle;"></div>',
-                        '<label id="fms-lbl-reg-settings" style="vertical-align: middle;"></label></div></td>',
+                        '<div><div id="fms-cmb-reg-settings"></div>',
+                        '<label id="fms-lbl-reg-settings"></label></div></td>',
                 '</tr>',
                 '<tr>',
                     '<td colspan="2"><div id="fms-chb-separator-settings"></div></td>',
@@ -1767,7 +1767,7 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
                         '<td class="right"><div id="id-info-rights"></div></td>',
                     '</tr>',
                     '<tr class="edit-rights">',
-                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom" style="margin-right: 10px;">' + this.txtBtnAccessRights + '</button></td>',
+                        '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary custom">' + this.txtBtnAccessRights + '</button></td>',
                     '</tr>',
                 '</table>'
             ].join(''));
@@ -2254,14 +2254,14 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
                                     '<tr><td><label><%= scope.txtRepeatRowsAtTop %></label></td></tr>',
                                     '<tr><td class="padding-small">',
                                         '<table><tbody><tr>',
-                                            '<td><div id="print-txt-top" style="width: 163px; margin-right: 8px;"></div></td>',
+                                            '<td><div id="print-txt-top" style="width: 163px;"></div></td>',
                                             '<td><div id="print-presets-top" style="width: 77px;"></div></td>',
                                         '</tr></tbody></table>',
                                     '</td></tr>',
                                     '<tr><td><label><%= scope.txtRepeatColumnsAtLeft %></label></td></tr>',
                                     '<tr><td class="padding-large">',
                                         '<table><tbody><tr>',
-                                            '<td><div id="print-txt-left" style="width: 163px; margin-right: 8px;"></div></td>',
+                                            '<td><div id="print-txt-left" style="width: 163px;"></div></td>',
                                             '<td><div id="print-presets-left" style="width: 77px;"></div></td>',
                                         '</tr></tbody></table>',
                                     '</td></tr>',
@@ -2274,8 +2274,8 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
                                                     '<td><label><%= scope.txtBottom %></label></td>',
                                                 '</tr>',
                                                 '<tr>',
-                                                    '<td class="padding-small"><div id="print-spin-margin-top" style="margin-right: 8px;"></div></td>',
-                                                    '<td class="padding-small"><div id="print-spin-margin-bottom" style="margin-right: 8px;"></div></td>',
+                                                    '<td class="padding-small"><div id="print-spin-margin-top"></div></td>',
+                                                    '<td class="padding-small"><div id="print-spin-margin-bottom"></div></td>',
                                                 '</tr>',
                                                 '<tr>',
                                                     '<td><label><%= scope.txtLeft %></label></td>',
@@ -2310,11 +2310,16 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
                         '</div>',
                     '</div>',
                 '</div>',
-                '<div id="print-preview-box" style="position: absolute; left: 280px; top: 0; right: 0; bottom: 0;" class="no-padding">',
+                '<div id="print-preview-box" class="no-padding">',
                     '<div id="print-preview"></div>',
                     '<div id="print-navigation">',
-                        '<div id="print-prev-page" style="display: inline-block; margin-right: 4px;"></div>',
-                        '<div id="print-next-page" style="display: inline-block;"></div>',
+                        '<% if (!isRTL) { %>',
+                        '<div id="print-prev-page"></div>',
+                        '<div id="print-next-page"></div>',
+                        '<% } else { %>',
+                        '<div id="print-next-page"></div>',
+                        '<div id="print-prev-page"></div>',
+                        '<% } %>',
                         '<div class="page-number">',
                             '<label><%= scope.txtPage %></label>',
                             '<div id="print-number-page"></div>',
@@ -2341,7 +2346,7 @@ SSE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
         render: function(node) {
             var me = this;
 
-            var $markup = $(this.template({scope: this}));
+            var $markup = $(this.template({scope: this, isRTL: Common.UI.isRTL()}));
 
             this.cmbRange = new Common.UI.ComboBox({
                 el: $markup.findById('#print-combo-range'),
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index 54cf7fae3..eae6436b7 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -319,6 +319,24 @@
                     display: block;
                 }
             }
+
+            #fms-cmb-macros,
+            #fms-cmb-func-locale,
+            #fms-cmb-reg-settings {
+                display: inline-block;
+                margin-right: 15px;
+                vertical-align: middle;
+
+                .rtl & {
+                    margin-right: 0;
+                    margin-left: 15px;
+                }
+            }
+
+            #fms-lbl-func-locale,
+            #fms-lbl-reg-settings {
+                vertical-align: middle;
+            }
         }
 
         #panel-createnew {
@@ -330,6 +348,10 @@
                 .font-weight-bold();
                 padding: 0 0 10px 10px;
                 white-space: nowrap;
+
+                .rtl & {
+                    padding: 0 10px 10px 0;
+                }
             }
 
             .blank-document-info {
@@ -488,10 +510,18 @@
 
                 .help-item-wrap {
                     padding: 4px 2px 4px 20px;
+
+                    .rtl & {
+                        padding: 4px 20px 4px 2px;
+                    }
                 }
 
                 .header-name {
                     padding: 16px 2px 4px 10px;
+
+                    .rtl & {
+                        padding: 16px 10px 4px 2px;
+                    }
                 }
             }
         }
@@ -507,11 +537,19 @@
                     td {
                         padding: 0 20px 5px 0;
 
+                        .rtl & {
+                            padding: 0 0 5px 20px;
+                        }
+
                         &.left {
                             padding: 5px 10px;
                             text-align: right;
                             width: 30%;
 
+                            .rtl & {
+                                text-align: left;
+                            }
+
                             label {
                                 .font-weight-bold();
                             }
@@ -583,6 +621,14 @@
                     padding: 5px 0;
                 }
             }
+
+            #fms-btn-delete-pwd {
+                margin-left: 20px;
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 20px;
+                }
+            }
         }
 
         #panel-print {
@@ -601,6 +647,11 @@
                 justify-content: center;
                 align-items: center;
 
+                .rtl & {
+                    right: 280px;
+                    left: 0;
+                }
+
                 div {
                     text-align: center;
                 }
@@ -625,6 +676,10 @@
                 .footer {
                     .btn.primary {
                         margin-right: 8px;
+                        .rtl & {
+                            margin-right: 0;
+                            margin-left: 8px;
+                        }
                     }
                 }
                 .settings-container {
@@ -658,12 +713,29 @@
                         }
                     }
                 }
+                #print-txt-top,
+                #print-txt-left,
+                #print-spin-margin-top,
+                #print-spin-margin-bottom {
+                    margin-right: 8px;
+                    .rtl & {
+                        margin-right: 0;
+                        margin-left: 8px;
+                    }
+                }
             }
             #print-navigation {
                 height: 50px;
                 padding-left: 20px;
                 padding-top: 10px;
                 display: flex;
+                #print-prev-page {
+                    display: inline-block;
+                    margin-right: 4px;
+                }
+                #print-next-page {
+                    display: inline-block;
+                }
                 .btn-prev-page, .btn-next-page {
                     background-color: transparent;
                     padding: 0;
@@ -703,22 +775,45 @@
                     align-items: center;
                     height: 20px;
                     margin-left: 10px;
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: 10px;
+                    }
                     label {
                         .font-weight-bold();
                     }
                     #print-count-page, #print-number-page {
                         margin-left: 4px;
+                        .rtl & {
+                            margin-left: 0;
+                            margin-right: 4px;
+                        }
                     }
                 }
                 #print-active-sheet {
                     margin-left: 12px;
                     height: 20px;
                     line-height: 20px;
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: 12px;
+                    }
                 }
             }
             #print-preview {
                 height: calc(100% - 50px);
             }
+            #print-preview-box {
+                position: absolute;
+                left: 280px;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                .rtl & {
+                    right: 280px;
+                    left: 0;
+                }
+            }
         }
     }
 }

From 011ac805543ad8e9134185f857559baf4c2627bc Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Tue, 18 Oct 2022 22:32:35 +0300
Subject: [PATCH 16/42] [rtl] Make ComboDataviewShape, list styles

---
 .../main/lib/component/ComboDataViewShape.js  |  5 ++++-
 .../main/resources/less/combo-dataview.less   | 22 +++++++++++++++++++
 apps/common/main/resources/less/dataview.less |  4 ++++
 apps/common/main/resources/less/toolbar.less  |  4 ++++
 apps/documenteditor/main/app/view/Toolbar.js  |  5 ++++-
 .../main/app/view/Toolbar.js                  |  5 ++++-
 .../main/app/view/Toolbar.js                  |  5 ++++-
 7 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/apps/common/main/lib/component/ComboDataViewShape.js b/apps/common/main/lib/component/ComboDataViewShape.js
index 5de245ba7..7a68fc268 100644
--- a/apps/common/main/lib/component/ComboDataViewShape.js
+++ b/apps/common/main/lib/component/ComboDataViewShape.js
@@ -368,7 +368,10 @@ define([
             if (menu.cmpEl) {
                 menu.menuAlignEl = this.cmpEl;
                 var offset = this.cmpEl.width() - this.openButton.$el.width() - this.menuWidth + 1;
-                menu.setOffset(Math.min(offset, 0));
+                if (Common.UI.isRTL()) {
+                    offset = this.openButton.$el.width() - 1;
+                }
+                menu.setOffset(Common.UI.isRTL() ? offset : Math.min(offset, 0));
             }
 
             if (this.options.hint) {
diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less
index fecb3727e..99c941e91 100644
--- a/apps/common/main/resources/less/combo-dataview.less
+++ b/apps/common/main/resources/less/combo-dataview.less
@@ -15,6 +15,10 @@
         background-color: @background-normal-ie;
         background-color: @background-normal;
 
+        .rtl & {
+            float: right;
+        }
+
         .dataview {
             padding: 1px;
         }
@@ -24,6 +28,10 @@
         display: inline-block;
         float: right;
 
+        .rtl & {
+            float: left;
+        }
+
         button {
             border-radius:0 @border-radius-small @border-radius-small 0;
             border: @scaled-one-px-value-ie solid @border-regular-control-ie;
@@ -31,6 +39,10 @@
             background-color: @background-normal-ie;
             background-color: @background-normal;
 
+            .rtl & {
+                border-radius:@border-radius-small 0 0 @border-radius-small;
+            }
+
             &.dropdown-toggle {
                 .inner-box-caret {
                     padding: 0 1px 0 0;
@@ -93,6 +105,16 @@
 
         .border-left-radius(0);
 
+        .rtl & {
+            margin-right: 0;
+            padding-right: 0;
+            margin-left: -@combo-dataview-button-width;
+            padding-left: @combo-dataview-button-width;
+
+            .border-radius(@border-radius-small);
+            .border-right-radius(0);
+        }
+
         .dataview {
             @minus-px: calc(-1px / @pixel-ratio-factor);
             height: @combo-dataview-height;
diff --git a/apps/common/main/resources/less/dataview.less b/apps/common/main/resources/less/dataview.less
index a62d4a970..b19dcd82f 100644
--- a/apps/common/main/resources/less/dataview.less
+++ b/apps/common/main/resources/less/dataview.less
@@ -26,6 +26,10 @@
         .box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie);
         .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
 
+        .rtl & {
+            float: right;
+        }
+
         &:hover,
         &.selected {
             .box-shadow(0 0 0 2px @border-preview-select-ie);
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index b95e5a40c..35699e44e 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -652,6 +652,10 @@
     height: 46px;
     .view {
         padding-right: 14px;
+        .rtl & {
+            padding-right: 0;
+            padding-left: 14px;
+        }
     }
     .dataview.field-picker {
         height: 100%;
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index 91b3943a7..3d5eb1986 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -1535,7 +1535,10 @@ define([
                                 if (menuWidth>Common.Utils.innerWidth())
                                     menuWidth = Math.max(Math.floor(Common.Utils.innerWidth()/(itemMargin + _width)), 2) * (itemMargin + _width);
                                 var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - Math.min(menuWidth, buttonOffsetLeft) - 1;
-                                menu.setOffset(Math.min(offset, 0));
+                                if (Common.UI.isRTL()) {
+                                    offset = cmp.openButton.$el.width();
+                                }
+                                menu.setOffset(Common.UI.isRTL() ? offset : Math.min(offset, 0));
 
                                 menu.cmpEl.css({
                                     'width': menuWidth,
diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js
index 66cb3de83..706646f1f 100644
--- a/apps/presentationeditor/main/app/view/Toolbar.js
+++ b/apps/presentationeditor/main/app/view/Toolbar.js
@@ -1096,7 +1096,10 @@ define([
                                 if (menuWidth>Common.Utils.innerWidth())
                                     menuWidth = Math.max(Math.floor(Common.Utils.innerWidth()/(itemMargin + itemWidth)), 2) * (itemMargin + itemWidth);
                                 var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - Math.min(menuWidth, buttonOffsetLeft) - 1;
-                                menu.setOffset(Math.min(offset, 0));
+                                if (Common.UI.isRTL()) {
+                                    offset = cmp.openButton.$el.width();
+                                }
+                                menu.setOffset(Common.UI.isRTL() ? offset : Math.min(offset, 0));
 
                                 menu.cmpEl.css({
                                     'width': menuWidth,
diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js
index df3add848..656e2ff7d 100644
--- a/apps/spreadsheeteditor/main/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js
@@ -1337,7 +1337,10 @@ define([
                             if (menuWidth>Common.Utils.innerWidth())
                                 menuWidth = Math.max(Math.floor(Common.Utils.innerWidth()/(itemMargin + itemWidth)), 2) * (itemMargin + itemWidth);
                             var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - Math.min(menuWidth, buttonOffsetLeft) - 1;
-                            menu.setOffset(Math.min(offset, 0));
+                            if (Common.UI.isRTL()) {
+                                offset = cmp.openButton.$el.width();
+                            }
+                            menu.setOffset(Common.UI.isRTL() ? offset : Math.min(offset, 0));
 
                             menu.cmpEl.css({
                                 'width': menuWidth,

From feb696b8ecbc811ea633e1b8d6537370d2a49bcf Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Wed, 19 Oct 2022 17:55:12 +0300
Subject: [PATCH 17/42] [rtl] fix left and right panels position for PE, SSE

---
 .../main/app/controller/Viewport.js           |  4 +-
 .../main/app/view/Viewport.js                 | 59 ++++++++++--------
 .../main/app/controller/Viewport.js           |  4 +-
 .../main/app/view/Viewport.js                 | 62 +++++++++++--------
 4 files changed, 74 insertions(+), 55 deletions(-)

diff --git a/apps/presentationeditor/main/app/controller/Viewport.js b/apps/presentationeditor/main/app/controller/Viewport.js
index 50500ed56..e4da03c6c 100644
--- a/apps/presentationeditor/main/app/controller/Viewport.js
+++ b/apps/presentationeditor/main/app/controller/Viewport.js
@@ -215,7 +215,7 @@ define([
                 this.viewport.hlayout.doLayout();
                 break;
             case 'history':
-                var panel = this.viewport.hlayout.items[1];
+                var panel = this.viewport.hlayout.getItem('history');
                 if (panel.resize.el) {
                     this.boxSdk.css('border-left', '');
                     panel.resize.el.show();
@@ -223,7 +223,7 @@ define([
                 this.viewport.hlayout.doLayout();
                 break;
             case 'leftmenu':
-                var panel = this.viewport.hlayout.items[0];
+                var panel = this.viewport.hlayout.getItem('left');
                 if (panel.resize.el) {
                     if (panel.el.width() > 40) {
                         this.boxSdk.css('border-left', '');
diff --git a/apps/presentationeditor/main/app/view/Viewport.js b/apps/presentationeditor/main/app/view/Viewport.js
index 5593db8bd..96ac31cfb 100644
--- a/apps/presentationeditor/main/app/view/Viewport.js
+++ b/apps/presentationeditor/main/app/view/Viewport.js
@@ -105,33 +105,42 @@ define([
 
             $container = $('#viewport-hbox-layout', el);
             items = $container.find(' > .layout-item');
+
+            let iarray =  [{
+                el: items[0],
+                rely: true,
+                alias: 'left',
+                resize: {
+                    hidden: true,
+                    autohide: false,
+                    min: 300,
+                    max: 600
+                }}, { // history versions
+                el: items[3],
+                rely: true,
+                alias: 'history',
+                resize: {
+                    hidden: true,
+                    autohide: false,
+                    min: 300,
+                    max: 600
+                }
+            }, {
+                el: items[1],
+                stretch: true
+            }, {
+                el: $(items[2]).hide(),
+                rely: true
+            }];
+
+            if ( Common.UI.isRTL() ) {
+                [iarray[0], iarray[3]] = [iarray[3], iarray[0]];
+                [iarray[1], iarray[2]] = [iarray[2], iarray[1]];
+            }
+
             this.hlayout = new Common.UI.HBoxLayout({
                 box: $container,
-                items: [{
-                    el: items[0],
-                    rely: true,
-                    resize: {
-                        hidden: true,
-                        autohide: false,
-                        min: 300,
-                        max: 600
-                }}, { // history versions
-                    el: items[3],
-                    rely: true,
-                    resize: {
-                        hidden: true,
-                        autohide: false,
-                        min: 300,
-                        max: 600
-                    }
-                }, {
-                    el: items[1],
-                    stretch: true
-                }, {
-                    el: $(items[2]).hide(),
-                    rely: true
-                }
-                ]
+                items: iarray
             });
 
             return this;
diff --git a/apps/spreadsheeteditor/main/app/controller/Viewport.js b/apps/spreadsheeteditor/main/app/controller/Viewport.js
index 90b38270e..391180111 100644
--- a/apps/spreadsheeteditor/main/app/controller/Viewport.js
+++ b/apps/spreadsheeteditor/main/app/controller/Viewport.js
@@ -233,7 +233,7 @@ define([
                 this.viewport.hlayout.doLayout();
                 break;
             case 'history':
-                var panel = this.viewport.hlayout.items[1];
+                var panel = this.viewport.hlayout.getItem('history');
                 if (panel.resize.el) {
                     this.boxSdk.css('border-left', '');
                     panel.resize.el.show();
@@ -241,7 +241,7 @@ define([
                 this.viewport.hlayout.doLayout();
                 break;
             case 'leftmenu':
-                var panel = this.viewport.hlayout.items[0];
+                var panel = this.viewport.hlayout.getItem('left');
                 if (panel.resize.el) {
                     if (panel.el.width() > 40) {
                         this.boxSdk.css('border-left', '');
diff --git a/apps/spreadsheeteditor/main/app/view/Viewport.js b/apps/spreadsheeteditor/main/app/view/Viewport.js
index 89b7e2707..f8555d526 100644
--- a/apps/spreadsheeteditor/main/app/view/Viewport.js
+++ b/apps/spreadsheeteditor/main/app/view/Viewport.js
@@ -106,34 +106,44 @@ define([
 
             $container = $('#viewport-hbox-layout', el);
             items = $container.find(' > .layout-item');
+
+            let iarray = [{
+                el: items[0],
+                rely: true,
+                alias: 'left',
+                resize: {
+                    hidden: true,
+                    autohide: false,
+                    min: 300,
+                    max: 600,
+                    offset: 4
+                }
+            }, { // history versions
+                el: items[3],
+                rely: true,
+                alias: 'history',
+                resize: {
+                    hidden: true,
+                    autohide: false,
+                    min: 300,
+                    max: 600
+                }
+            }, {
+                el: items[1],
+                stretch: true
+            }, {
+                el: $(items[2]).hide(),
+                rely: true
+            }];
+
+            if ( Common.UI.isRTL() ) {
+                [iarray[0], iarray[3]] = [iarray[3], iarray[0]];
+                [iarray[1], iarray[2]] = [iarray[2], iarray[1]];
+            }
+
             this.hlayout = new Common.UI.HBoxLayout({
                 box: $container,
-                items: [{
-                    el: items[0],
-                    rely: true,
-                    resize: {
-                        hidden: true,
-                        autohide: false,
-                        min: 300,
-                        max: 600,
-                        offset: 4
-                    }
-                }, { // history versions
-                    el: items[3],
-                    rely: true,
-                    resize: {
-                        hidden: true,
-                        autohide: false,
-                        min: 300,
-                        max: 600
-                    }
-                }, {
-                    el: items[1],
-                    stretch: true
-                }, {
-                    el: $(items[2]).hide(),
-                    rely: true
-                }]
+                items: iarray
             });
 
             $container = $container.find('.layout-ct.vbox');

From bd3664eae803fd651a7f6b10a18d2b84e96556a0 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Wed, 19 Oct 2022 22:35:38 +0300
Subject: [PATCH 18/42] [rtl] Make shape settings for DE

---
 .../main/lib/component/ComboBorderSize.js     |  9 ++-
 apps/common/main/lib/component/ComboBox.js    |  3 +-
 .../main/lib/component/ComboDataView.js       |  2 +-
 apps/common/main/lib/component/Menu.js        |  2 +
 apps/common/main/lib/component/Slider.js      | 14 ++---
 apps/common/main/resources/less/buttons.less  | 20 +++++++
 .../resources/less/combo-border-size.less     | 16 +++--
 .../main/resources/less/combo-dataview.less   | 12 ++++
 .../main/app/template/ShapeSettings.template  | 22 +++----
 .../main/resources/less/rightmenu.less        | 59 +++++++++++++++++++
 10 files changed, 134 insertions(+), 25 deletions(-)

diff --git a/apps/common/main/lib/component/ComboBorderSize.js b/apps/common/main/lib/component/ComboBorderSize.js
index 70348201b..e893701cf 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 input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
+            '<span class="input-group combobox combo-border-size combo-border-size-ed 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>',
@@ -190,10 +190,17 @@ define([
                 '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                     '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
+                        '<% if (!isRTL) { %>',
                             '<span><%= item.displayValue %></span>',
                             '<% if (item.offsety!==undefined) { %>',
                              '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="right" style="background-position: 0 -<%= item.offsety %>px;">',
                             '<% } %>',
+                        '<% } else { %>',
+                            '<% if (item.offsety!==undefined) { %>',
+                            '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="left" style="background-position: 0 -<%= item.offsety %>px;">',
+                            '<% } %>',
+                            '<span><%= item.displayValue %></span>',
+                        '<% } %>',
                         '</a></li>',
                     '<% }); %>',
                 '</ul>',
diff --git a/apps/common/main/lib/component/ComboBox.js b/apps/common/main/lib/component/ComboBox.js
index 63e7a524c..7175d3308 100644
--- a/apps/common/main/lib/component/ComboBox.js
+++ b/apps/common/main/lib/component/ComboBox.js
@@ -153,7 +153,8 @@ define([
                         scope       : me,
                         dataHint    : this.options.dataHint,
                         dataHintDirection: this.options.dataHintDirection,
-                        dataHintOffset: this.options.dataHintOffset
+                        dataHintOffset: this.options.dataHintOffset,
+                        isRTL       : Common.UI.isRTL()
                     }));
                     if (this.itemsTemplate)
                         this.cmpEl.find('ul').html(
diff --git a/apps/common/main/lib/component/ComboDataView.js b/apps/common/main/lib/component/ComboDataView.js
index ec972e57f..a938c5763 100644
--- a/apps/common/main/lib/component/ComboDataView.js
+++ b/apps/common/main/lib/component/ComboDataView.js
@@ -112,7 +112,7 @@ define([
             this.openButton = new Common.UI.Button({
                 cls: 'open-menu',
                 menu: new Common.UI.Menu({
-                    menuAlign: 'tl-tl',
+                    menuAlign: Common.UI.isRTL() ? 'tr-tr' : 'tl-tl',
                     offset: [0, 3],
                     items: [
                         {template: _.template('<div class="menu-picker-container"></div>')}
diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js
index c3b714666..eccc82015 100644
--- a/apps/common/main/lib/component/Menu.js
+++ b/apps/common/main/lib/component/Menu.js
@@ -178,6 +178,8 @@ define([
                         this.menuAlign = 'tr-tl';
                     } else if (this.menuAlign === 'tl-bl') {
                         this.menuAlign = 'tr-br';
+                    } else if (this.menuAlign === 'tr-br') {
+                        this.menuAlign = 'tl-bl';
                     }
                 }
 
diff --git a/apps/common/main/lib/component/Slider.js b/apps/common/main/lib/component/Slider.js
index 492cf8f66..701b54ce5 100644
--- a/apps/common/main/lib/component/Slider.js
+++ b/apps/common/main/lib/component/Slider.js
@@ -156,7 +156,7 @@ define([
                 $(document).off('mousemove', onMouseMove);
 
                 me._dragstart = undefined;
-                me.trigger('changecomplete', me, me.value, me.lastValue);
+                me.trigger('changecomplete', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
             };
 
             var onMouseMove = function (e) {
@@ -175,7 +175,7 @@ define([
                 me.value = pos/me.delta + me.minValue;
 
                 if (Math.abs(me.value-me.lastValue)>0.001)
-                    me.trigger('change', me, me.value, me.lastValue);
+                    me.trigger('change', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
             };
 
             var onMouseDown = function (e) {
@@ -201,8 +201,8 @@ define([
                 me.lastValue = me.value;
                 me.value = pos/me.delta + me.minValue;
 
-                me.trigger('change', me, me.value, me.lastValue);
-                me.trigger('changecomplete', me, me.value, me.lastValue);
+                me.trigger('change', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
+                me.trigger('changecomplete', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
             };
 
             var updateslider;
@@ -211,7 +211,7 @@ define([
                 me.lastValue = me.value;
                 me.value = Math.max(me.minValue, Math.min(me.maxValue, me.value + ((increase) ? me.step : -me.step)));
                 me.setThumbPosition(Math.round((me.value-me.minValue)*me.delta));
-                me.trigger('change', me, me.value, me.lastValue);
+                me.trigger('change', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
             };
 
             var onKeyDown = function (e) {
@@ -234,7 +234,7 @@ define([
                     clearInterval(updateslider);
                     moveThumb(e.keyCode==Common.UI.Keys.UP || e.keyCode==Common.UI.Keys.RIGHT);
                     el.on('keydown', 'input', onKeyDown);
-                    me.trigger('changecomplete', me, me.value, me.lastValue);
+                    me.trigger('changecomplete', me, Common.UI.isRTL() ? me.maxValue - me.value : me.value, me.lastValue);
                 }
             };
 
@@ -264,7 +264,7 @@ define([
         setValue: function(value) {
             this.lastValue = this.value;
             this.value = Math.max(this.minValue, Math.min(this.maxValue, value));
-            this.setThumbPosition(Math.round((value-this.minValue)*this.delta));
+            this.setThumbPosition(Math.round(((Common.UI.isRTL() ? this.maxValue - value : value)-this.minValue)*this.delta));
         },
 
         getValue: function() {
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index a1e62faf4..32c64c692 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -529,6 +529,10 @@
     > .dropdown-toggle:first-child {
         .inner-box-caret {
             padding: 0 4px 0 3px;
+
+            .rtl & {
+                padding: 0 3px 0 4px;
+            }
         }
     }
 
@@ -664,6 +668,11 @@
     border:@scaled-one-px-value solid @border-regular-control;
     .border-radius(@border-radius-small);
 
+    .rtl & {
+        padding: @scaled-one-px-value-ie @scaled-one-px-value-ie @scaled-one-px-value-ie 11px;
+        padding: @scaled-one-px-value @scaled-one-px-value @scaled-one-px-value 11px ;
+    }
+
     span:nth-child(1) {
         float: left;
         width: 100%;
@@ -677,6 +686,11 @@
         position: absolute;
         right: 0;
         top: 2px;
+
+        .rtl & {
+            right: auto;
+            left: 0;
+        }
     }
 
     &,
@@ -701,6 +715,12 @@
             height: 34px;
             transform: translate(16px, -9px) rotate(62deg);
             left: 0;
+
+            .rtl & {
+                left: auto;
+                right: 0;
+                transform: translate(-16px, -9px) rotate(62deg);
+            }
         }
     }
 
diff --git a/apps/common/main/resources/less/combo-border-size.less b/apps/common/main/resources/less/combo-border-size.less
index bb2d4b0e6..64c3cb0d3 100644
--- a/apps/common/main/resources/less/combo-border-size.less
+++ b/apps/common/main/resources/less/combo-border-size.less
@@ -34,10 +34,6 @@
             background-color: transparent;
             image-rendering: pixelated;
             float: left;
-
-            .rtl & {
-                float: right;
-            }
         }
     }
 
@@ -71,6 +67,18 @@
             background-image: ~"url(@{common-image-const-path}/combo-border-size/BorderSize@2x.png)";
         }
     }
+
+    &:not(.combo-border-size-ed) {
+        .rtl & li img {
+            float: right;
+        }
+    }
+}
+
+.combo-border-size-ed {
+    .dropdown-menu li a {
+        padding: 5px 20px;
+    }
 }
 
 .combo-color {
diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less
index 99c941e91..48a51e346 100644
--- a/apps/common/main/resources/less/combo-dataview.less
+++ b/apps/common/main/resources/less/combo-dataview.less
@@ -287,6 +287,13 @@
     .view {
         margin-right: -@combo-dataview-button-width;
         padding-right: @combo-dataview-button-width;
+
+        .rtl & {
+            margin-right: 0;
+            padding-right: 0;
+            margin-left: -@combo-dataview-button-width;
+            padding-left: @combo-dataview-button-width;
+        }
     }
 
     .button {
@@ -343,6 +350,11 @@
         margin-left: 4px;
         .box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie);
         .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control);
+
+        .rtl & {
+            margin: 2px 0 2px 2px;
+            margin-right: 4px;
+        }
     }
 
     &.disabled {
diff --git a/apps/documenteditor/main/app/template/ShapeSettings.template b/apps/documenteditor/main/app/template/ShapeSettings.template
index fe544f539..e17c8b350 100644
--- a/apps/documenteditor/main/app/template/ShapeSettings.template
+++ b/apps/documenteditor/main/app/template/ShapeSettings.template
@@ -101,14 +101,14 @@
     </tr>
     <tr class="no-form">
         <td>
-            <div class="padding-small" id="shape-panel-transparent-fill" style="width: 100%;">
-                <label class="header" style="display:block;"><%= scope.strTransparency %></label>
-                <div style="display: inline-block; margin-top: 3px;">
+            <div class="padding-small" id="shape-panel-transparent-fill">
+                <label class="header"><%= scope.strTransparency %></label>
+                <div class="shape-slider">
                     <label id="shape-lbl-transparency-start">0</label>
-                    <div id="shape-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
+                    <div id="shape-slider-transparency"></div>
                     <label id="shape-lbl-transparency-end">100</label>
                 </div>
-                <div id="shape-spin-transparency" style="display: inline-block;float: right;"></div>
+                <div id="shape-spin-transparency"></div>
             </div>
         </td>
     </tr>
@@ -159,15 +159,15 @@
                     <td class="padding-small" width="50%">
                         <label class="input-label"><%= scope.textRotate90 %></label>
                         <div>
-                            <div id="shape-button-270" style="display: inline-block;margin-right: 4px;"></div>
-                            <div id="shape-button-90" style="display: inline-block;"></div>
+                            <div id="shape-button-270"></div>
+                            <div id="shape-button-90"></div>
                         </div>
                     </td>
                     <td class="padding-small" width="50%">
                         <label class="input-label"><%= scope.textFlip %></label>
                         <div>
-                            <div id="shape-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
-                            <div id="shape-button-flipv" style="display: inline-block;"></div>
+                            <div id="shape-button-fliph"></div>
+                            <div id="shape-button-flipv"></div>
                         </div>
                     </td>
                 </tr>
@@ -199,8 +199,8 @@
     </tr>
     <tr class="change-type">
         <td class="padding-small">
-            <label class="header" style="margin-top: 3px;"><%= scope.strChange %></label>
-            <div id="shape-btn-change" style="display: inline-block; float:right;"></div>
+            <label class="header"><%= scope.strChange %></label>
+            <div id="shape-btn-change"></div>
         </td>
     </tr>
     <tr class="no-form">
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index d0d81176d..855178ea6 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -12,6 +12,65 @@
     label.input-label{
         vertical-align: baseline;
     }
+
+    &#id-shape-settings {
+        #shape-panel-transparent-fill {
+            width: 100%;
+
+            .header {
+                display: block;
+            }
+
+            .shape-slider {
+                display: inline-block;
+                margin-top: 3px;
+            }
+
+            #shape-spin-transparency {
+                display: inline-block;
+                float: right;
+
+                .rtl & {
+                    float: left;
+                }
+            }
+
+            #shape-slider-transparency {
+                display: inline-block;
+                margin: 0 4px;
+                vertical-align: middle;
+            }
+        }
+
+        #shape-button-270, #shape-button-fliph {
+            display: inline-block;
+            margin-right: 4px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 4px;
+            }
+        }
+
+        #shape-button-90, #shape-button-flipv {
+            display: inline-block;
+        }
+
+        .change-type {
+            .header {
+                margin-top: 3px;
+            }
+
+            #shape-btn-change {
+                display: inline-block;
+                float: right;
+
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+    }
 }
 
 .ie {

From e16eaa1f154cadaea2eccd9822831f1e6283a6c4 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Sat, 22 Oct 2022 00:26:12 +0300
Subject: [PATCH 19/42] [rtl] fix resizing for left panel

---
 apps/common/main/lib/component/Layout.js          | 8 ++++----
 apps/documenteditor/main/app/view/Viewport.js     | 4 ++++
 apps/presentationeditor/main/app/view/Viewport.js | 3 +++
 apps/spreadsheeteditor/main/app/view/Viewport.js  | 3 +++
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/common/main/lib/component/Layout.js b/apps/common/main/lib/component/Layout.js
index 50428d26c..bf46aab2a 100644
--- a/apps/common/main/lib/component/Layout.js
+++ b/apps/common/main/lib/component/Layout.js
@@ -261,7 +261,7 @@ define([
             var panel             = e.data.panel;
             this.resize.type      = e.data.type;
             this.resize.$el       = panel.el;
-            this.resize.min       = panel.minpos;
+            this.resize.min       = panel.minpos > 0 ? panel.minpos : this.resize.$el.parent().width() + panel.minpos;
             this.resize.fmin      = panel.fmin;
             this.resize.fmax      = panel.fmax;
             this.resize.behaviour = panel.behaviour;
@@ -365,15 +365,15 @@ define([
                 oldValue = parseInt(panel.css(prop));
             } else {
                 panel = this.resize.$el.next();
-                next = this.resize.$el.next();
+                next = this.resize.$el.prev();
                 oldValue = parseInt(panel.css(prop));
                 value = panel.parent()[prop]() - (value + this.resize[prop]);
             }
 
             if (this.resize.type == 'vertical')
                 value -= panel.position().top;
-            if (this.resize.type == 'horizontal')
-                value -= panel.position().left;
+            // if (this.resize.type == 'horizontal')
+            //     value -= panel.position().left;
 
             panel.css(prop, value + 'px');
 
diff --git a/apps/documenteditor/main/app/view/Viewport.js b/apps/documenteditor/main/app/view/Viewport.js
index ac07dc555..8513b86f1 100644
--- a/apps/documenteditor/main/app/view/Viewport.js
+++ b/apps/documenteditor/main/app/view/Viewport.js
@@ -133,6 +133,10 @@ define([
             ];
 
             if ( Common.UI.isRTL() ) {
+                iarray[0].resize.min = -600;
+                iarray[0].resize.max = -300;
+                [iarray[1].resize.min, iarray[1].resize.max] = [-600, -300];
+
                 [iarray[0], iarray[3]] = [iarray[3], iarray[0]];
                 [iarray[1], iarray[2]] = [iarray[2], iarray[1]];
             }
diff --git a/apps/presentationeditor/main/app/view/Viewport.js b/apps/presentationeditor/main/app/view/Viewport.js
index 96ac31cfb..3d344f056 100644
--- a/apps/presentationeditor/main/app/view/Viewport.js
+++ b/apps/presentationeditor/main/app/view/Viewport.js
@@ -134,6 +134,9 @@ define([
             }];
 
             if ( Common.UI.isRTL() ) {
+                [iarray[0].resize.min, iarray[0].resize.max] = [-600, -300];
+                [iarray[1].resize.min, iarray[1].resize.max] = [-600, -300];
+
                 [iarray[0], iarray[3]] = [iarray[3], iarray[0]];
                 [iarray[1], iarray[2]] = [iarray[2], iarray[1]];
             }
diff --git a/apps/spreadsheeteditor/main/app/view/Viewport.js b/apps/spreadsheeteditor/main/app/view/Viewport.js
index f8555d526..8c0d261f2 100644
--- a/apps/spreadsheeteditor/main/app/view/Viewport.js
+++ b/apps/spreadsheeteditor/main/app/view/Viewport.js
@@ -137,6 +137,9 @@ define([
             }];
 
             if ( Common.UI.isRTL() ) {
+                [iarray[0].resize.min, iarray[0].resize.max] = [-600, -300];
+                [iarray[1].resize.min, iarray[1].resize.max] = [-600, -300];
+
                 [iarray[0], iarray[3]] = [iarray[3], iarray[0]];
                 [iarray[1], iarray[2]] = [iarray[2], iarray[1]];
             }

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 20/42] [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 e893701cf..85a1aeeb3 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 c256ff5fa..bb408bce1 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 64c3cb0d3..5216ad565 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 81ebef4d9..eff057003 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 b63bc9bd6..c12357ac8 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 af368f5f7..4495f4a15 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 1d4a607b6..e778772e5 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 43682ae7c..46a015fec 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 7ca7e0e6c..f33e1ab9c 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 33335fbbf..3be33c095 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 b4a1ac59b..8d462d883 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 {

From d29d0d61c75fd7f9bc38bcb4454927c9afc1853d Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <julia.svinaryva@onlyoffice.com>
Date: Mon, 24 Oct 2022 02:22:31 +0300
Subject: [PATCH 21/42] [rtl] Make settings in right panel (shape, textart)

---
 .../main/app/template/ShapeSettings.template  | 12 ++--
 .../main/app/view/ShapeSettings.js            | 15 +++--
 .../main/app/view/TextArtSettings.js          | 15 +++--
 .../main/resources/less/rightmenu.less        | 58 +++++++++++++++++++
 4 files changed, 84 insertions(+), 16 deletions(-)

diff --git a/apps/documenteditor/main/app/template/ShapeSettings.template b/apps/documenteditor/main/app/template/ShapeSettings.template
index e17c8b350..8cde82cf0 100644
--- a/apps/documenteditor/main/app/template/ShapeSettings.template
+++ b/apps/documenteditor/main/app/template/ShapeSettings.template
@@ -26,7 +26,7 @@
                         <div id="shape-combo-fill-type" style="width: 90px;"></div>
                     </td>
                     <td rowspan="2">
-                        <div style="width: 90px; height: 80px; padding: 14px 20px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;float:right;">
+                        <div class="texture-img">
                             <div id="shape-texture-img" style="width: 50px;height: 50px;"></div>
                         </div>
                     </td>
@@ -44,11 +44,11 @@
                 <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
-                    <div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="shape-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
-                    <div id="shape-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="shape-background-color-btn"></div>
                 </div>
             </div>
             <div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@@ -61,7 +61,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="shape-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="shape-button-direction"></div>
                             </div>
@@ -69,7 +69,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="shape-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@@ -86,7 +86,7 @@
                         <label class="input-label" style=""><%= scope.strColor %></label>
                         <div id="shape-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="shape-gradient-position"></div>
                     </div>
diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 85af8379f..24eddcae7 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -532,7 +532,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -1012,7 +1013,8 @@ define([
                         me.GradColor.currentIdx = 0;
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = this.GradColor.values[this.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue);
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
                     this.BGColor = {Value: 1, Color: 'ffffff'};
@@ -1452,7 +1454,7 @@ define([
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
                 var pos = me.GradColor.values[me.GradColor.currentIdx];
-                me.spnGradPosition.setValue(pos, true);
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -2017,8 +2019,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            var pos = btn.getNumberValue();
+                if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js
index a6a66bea6..dbb022b09 100644
--- a/apps/documenteditor/main/app/view/TextArtSettings.js
+++ b/apps/documenteditor/main/app/view/TextArtSettings.js
@@ -398,7 +398,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -678,7 +679,8 @@ define([
                         me.GradColor.currentIdx = 0;
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = this.GradColor.values[this.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.ShapeColor = {Value: 1, Color: this.GradColor.colors[0]};
                 }
@@ -996,7 +998,7 @@ define([
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
                 var pos = me.GradColor.values[me.GradColor.currentIdx];
-                me.spnGradPosition.setValue(pos, true);
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -1308,8 +1310,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            var pos = btn.getNumberValue();
+            if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index 8d462d883..1ab8ddd59 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -168,6 +168,64 @@
                 }
             }
         }
+
+        .shape-direction {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .angle-label {
+            margin-right: 5px;
+            margin-bottom: 3px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        .gradient-position {
+            margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+        }
+
+        #id-shape-menu-direction {
+            .dataview .item {
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+
+        .texture-img {
+            width: 90px;
+            height: 80px;
+            padding: 14px 20px;
+            border: 1px solid #AFAFAF;
+            border-radius: 2px;
+            background: #ffffff;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #shape-foreground-color-btn, #shape-background-color-btn {
+            display: inline-block;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
     }
 
     &#id-image-settings {

From 98cb1e132746e7c0887425d9cbc0533b35f620a0 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <julia.svinaryva@onlyoffice.com>
Date: Mon, 24 Oct 2022 19:41:45 +0300
Subject: [PATCH 22/42] [rtl] Make settings in right menu (mail merge)

---
 .../main/app/template/MailMerge.template      | 24 +++----
 .../main/app/view/MailMergeSettings.js        |  8 +--
 .../main/resources/less/rightmenu.less        | 70 +++++++++++++++++++
 3 files changed, 86 insertions(+), 16 deletions(-)

diff --git a/apps/documenteditor/main/app/template/MailMerge.template b/apps/documenteditor/main/app/template/MailMerge.template
index 1d7d07e5f..69b5c8410 100644
--- a/apps/documenteditor/main/app/template/MailMerge.template
+++ b/apps/documenteditor/main/app/template/MailMerge.template
@@ -32,11 +32,11 @@
     </tr>
     <tr>
         <td class="padding-small">
-            <div id="mmerge-button-first" style="display: inline-block;margin-right: 4px;"></div>
-            <div id="mmerge-button-prev" style="display: inline-block;margin-right: 4px;"></div>
-            <div id="mmerge-field-num" style="display:inline-block;vertical-align: middle;"></div>
-            <div id="mmerge-button-next" style="display: inline-block;margin-left: 4px;"></div>
-            <div id="mmerge-button-last" style="display: inline-block;margin-left: 4px;"></div>
+            <div id="mmerge-button-first"></div>
+            <div id="mmerge-button-prev"></div>
+            <div id="mmerge-field-num"></div>
+            <div id="mmerge-button-next"></div>
+            <div id="mmerge-button-last"></div>
         </td>
     </tr>
     <tr>
@@ -62,12 +62,12 @@
     </tr>
     <tr>
         <td class="padding-large">
-            <div id="mmerge-radio-all" style="margin-bottom: 5px;"></div>
-            <div id="mmerge-radio-current"  style="margin-bottom: 5px;"></div>
-            <div id="mmerge-radio-from-to" style="display: inline-block;vertical-align: middle; margin-right: 2px;"></div>
-            <div id="mmerge-field-from" style="display: inline-block;vertical-align: middle;"></div>
-            <label style="width: 30px; text-align: right; vertical-align: middle; margin-right: 2px;"><%= scope.textTo %></label>
-            <div id="mmerge-field-to" style="display: inline-block;vertical-align: middle;"></div>
+            <div id="mmerge-radio-all"></div>
+            <div id="mmerge-radio-current"></div>
+            <div id="mmerge-radio-from-to"></div>
+            <div id="mmerge-field-from"></div>
+            <label class="text-to-label"><%= scope.textTo %></label>
+            <div id="mmerge-field-to"></div>
         </td>
     </tr>
 </table>
@@ -77,7 +77,7 @@
             <button type="button" class="btn btn-text-default" id="mmerge-button-download" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textDownload %></button>
             <button type="button" class="btn btn-text-default hidden" id="mmerge-button-merge" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textMerge %></button>
         </td>
-        <td width="50%" style="text-align: right;">
+        <td class="portal-button" width="50%">
             <button type="button" class="btn btn-text-default" id="mmerge-button-portal" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textPortal %></button>
         </td>
     </tr>
diff --git a/apps/documenteditor/main/app/view/MailMergeSettings.js b/apps/documenteditor/main/app/view/MailMergeSettings.js
index 728f06278..271bfaa27 100644
--- a/apps/documenteditor/main/app/view/MailMergeSettings.js
+++ b/apps/documenteditor/main/app/view/MailMergeSettings.js
@@ -197,7 +197,7 @@ define([
             this.btnFirst = new Common.UI.Button({
                 parentEl: $('#mmerge-button-first', me.$el),
                 cls: 'btn-toolbar',
-                iconCls: 'toolbar__icon btn-firstitem',
+                iconCls: 'toolbar__icon ' + (!Common.UI.isRTL() ? 'btn-firstitem' : 'btn-lastitem'),
                 disabled: true,
                 value: 0,
                 hint: this.txtFirst,
@@ -211,7 +211,7 @@ define([
             this.btnPrev = new Common.UI.Button({
                 parentEl: $('#mmerge-button-prev', me.$el),
                 cls: 'btn-toolbar',
-                iconCls: 'toolbar__icon btn-previtem',
+                iconCls: 'toolbar__icon ' + (!Common.UI.isRTL() ? 'btn-previtem' : 'btn-nextitem'),
                 disabled: true,
                 value: 1,
                 hint: this.txtPrev,
@@ -225,7 +225,7 @@ define([
             this.btnNext = new Common.UI.Button({
                 parentEl: $('#mmerge-button-next', me.$el),
                 cls: 'btn-toolbar',
-                iconCls: 'toolbar__icon btn-nextitem',
+                iconCls: 'toolbar__icon ' + (!Common.UI.isRTL() ? 'btn-nextitem' : 'btn-previtem'),
                 value: 2,
                 hint: this.txtNext,
                 lock: [_set.noRecipients, _set.lostConnect],
@@ -238,7 +238,7 @@ define([
             this.btnLast = new Common.UI.Button({
                 parentEl: $('#mmerge-button-last', me.$el),
                 cls: 'btn-toolbar',
-                iconCls: 'toolbar__icon btn-lastitem',
+                iconCls: 'toolbar__icon ' + (!Common.UI.isRTL() ? 'btn-lastitem' : 'btn-firstitem'),
                 value: 3,
                 hint: this.txtLast,
                 lock: [_set.noRecipients, _set.lostConnect],
diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
index 1ab8ddd59..8e8110655 100644
--- a/apps/documenteditor/main/resources/less/rightmenu.less
+++ b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -328,6 +328,76 @@
             }
         }
     }
+
+    &#id-mail-merge-settings {
+        #mmerge-button-first,
+        #mmerge-button-prev {
+            display: inline-block;
+            margin-right: 4px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 4px;
+            }
+        }
+
+        #mmerge-field-num {
+            display:inline-block;
+            vertical-align: middle;
+        }
+
+        #mmerge-button-next,
+        #mmerge-button-last {
+            display: inline-block;
+            margin-left: 4px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 4px;
+            }
+        }
+
+        #mmerge-radio-all, #mmerge-radio-current {
+            margin-bottom: 5px;
+        }
+
+        #mmerge-radio-from-to {
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 2px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 2px;
+            }
+        }
+
+        #mmerge-field-from, #mmerge-field-to {
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        .text-to-label {
+            width: 30px;
+            text-align: right;
+            vertical-align: middle;
+            margin-right: 2px;
+
+            .rtl & {
+                text-align: left;
+                margin-right: 0;
+                margin-left: 2px;
+            }
+        }
+
+        .portal-button {
+            text-align: right;
+
+            .rtl & {
+                text-align: left;
+            }
+        }
+    }
 }
 
 .ie {

From 1df3d1285a49cbb4ee1e04b72ded4fbaee1fdfb6 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <julia.svinaryva@onlyoffice.com>
Date: Tue, 25 Oct 2022 20:39:25 +0300
Subject: [PATCH 23/42] [rtl] Make settings in right panel for SSE

---
 .../main/app/view/ShapeSettings.js            |   2 +-
 .../main/app/template/CellSettings.template   |  24 +-
 .../main/app/template/ImageSettings.template  |   8 +-
 .../main/app/template/ShapeSettings.template  |  24 +-
 .../main/app/template/SlicerSettings.template |   2 +-
 .../app/template/TextArtSettings.template     |  16 +-
 .../main/app/view/CellSettings.js             |  16 +-
 .../main/app/view/ChartSettings.js            |   3 -
 .../main/app/view/ShapeSettings.js            |  15 +-
 .../main/app/view/TextArtSettings.js          |  15 +-
 .../main/resources/less/rightmenu.less        | 337 ++++++++++++++++--
 11 files changed, 383 insertions(+), 79 deletions(-)

diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js
index 24eddcae7..773009471 100644
--- a/apps/documenteditor/main/app/view/ShapeSettings.js
+++ b/apps/documenteditor/main/app/view/ShapeSettings.js
@@ -2020,7 +2020,7 @@ define([
 
         onPositionChange: function(btn) {
             var pos = btn.getNumberValue();
-                if (Common.UI.isRTL()) {
+            if (Common.UI.isRTL()) {
                 pos = this.sldrGradient.maxValue - pos;
             }
             var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
diff --git a/apps/spreadsheeteditor/main/app/template/CellSettings.template b/apps/spreadsheeteditor/main/app/template/CellSettings.template
index ab127387f..644612f68 100644
--- a/apps/spreadsheeteditor/main/app/template/CellSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/CellSettings.template
@@ -19,22 +19,22 @@
                 <div id="cell-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.textForeground %></label>
-                    <div id="cell-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="cell-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.textBackground %></label>
-                    <div id="cell-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="cell-background-color-btn"></div>
                 </div>
             </div>
             <div id="cell-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
                 <div style="height:80px;">
                     <div style="display: inline-block;">
-                        <label class="input-label" style=""><%= scope.textAngle %></label>
+                        <label class="input-label" ><%= scope.textAngle %></label>
                         <div id="cell-spin-gradient-angle" style="width: 90px;"></div>
                     </div>
-                    <div style="display: inline-block;float: right;">
-                        <label class="input-label" style=""><%= scope.textDirection %></label>
-                        <div id="cell-button-direction" style=""></div>
+                    <div class="cell-direction">
+                        <label class="input-label"><%= scope.textDirection %></label>
+                        <div id="cell-button-direction"></div>
                     </div>
                 </div>
                 <label class="header" style="display:block;margin-bottom: 5px;"><%= scope.textGradient %></label>
@@ -47,7 +47,7 @@
                         <label class="input-label" style=""><%= scope.textGradientColor %></label>
                         <div id="cell-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="cell-gradient-position"></div>
                     </div>
@@ -72,10 +72,10 @@
     </tr>
     <tr>
         <td class="padding-small" colspan=2>
-            <div id="cell-combo-border-type" 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="cell-border-color-btn" style="display: inline-block;"></div>
+            <div id="cell-combo-border-type"></div>
+            <div class="border-color">
+                <label class="input-label"><%= scope.textBorderColor %></label>
+                <div id="cell-border-color-btn"></div>
             </div>
         </td>
     </tr>
@@ -127,7 +127,7 @@
     <tr>
         <td class="padding-large" colspan=2>
             <label class="input-label"><%= scope.textAngle %></label>
-            <div id="cell-spin-angle" style="display: inline-block;margin-left:5px;"></div>
+            <div id="cell-spin-angle"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/ImageSettings.template b/apps/spreadsheeteditor/main/app/template/ImageSettings.template
index 9d7e446a7..27e002faf 100644
--- a/apps/spreadsheeteditor/main/app/template/ImageSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/ImageSettings.template
@@ -43,15 +43,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/spreadsheeteditor/main/app/template/ShapeSettings.template b/apps/spreadsheeteditor/main/app/template/ShapeSettings.template
index 4d8534512..4e01cc82c 100644
--- a/apps/spreadsheeteditor/main/app/template/ShapeSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/ShapeSettings.template
@@ -26,7 +26,7 @@
                         <div id="shape-combo-fill-type" style="width: 90px;"></div>
                     </td>
                     <td rowspan="2">
-                        <div style="width: 90px; height: 80px; padding: 14px 20px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;float:right;">
+                        <div class="texture-img">
                             <div id="shape-texture-img" style="width: 50px;height: 50px;"></div>
                         </div>
                     </td>
@@ -44,11 +44,11 @@
                 <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
-                    <div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="shape-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
-                    <div id="shape-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="shape-background-color-btn"></div>
                 </div>
             </div>
             <div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@@ -61,7 +61,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="shape-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="shape-button-direction"></div>
                             </div>
@@ -69,7 +69,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="shape-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@@ -86,7 +86,7 @@
                         <label class="input-label" style=""><%= scope.strColor %></label>
                         <div id="shape-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="shape-gradient-position"></div>
                     </div>
@@ -108,7 +108,7 @@
                     <div id="shape-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
                     <label id="shape-lbl-transparency-end">100</label>
                 </div>
-                <div id="shape-spin-transparency" style="display: inline-block;float: right;"></div>
+                <div id="shape-spin-transparency"></div>
             </div>
         </td>
     </tr>
@@ -159,15 +159,15 @@
                     <td class="padding-small" width="50%">
                         <label class="input-label"><%= scope.textRotate90 %></label>
                         <div>
-                            <div id="shape-button-270" style="display: inline-block;margin-right: 4px;"></div>
-                            <div id="shape-button-90" style="display: inline-block;"></div>
+                            <div id="shape-button-270"></div>
+                            <div id="shape-button-90"></div>
                         </div>
                     </td>
                     <td class="padding-small" width="50%">
                         <label class="input-label"><%= scope.textFlip %></label>
                         <div>
-                            <div id="shape-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
-                            <div id="shape-button-flipv" style="display: inline-block;"></div>
+                            <div id="shape-button-fliph"></div>
+                            <div id="shape-button-flipv"></div>
                         </div>
                     </td>
                 </tr>
@@ -182,7 +182,7 @@
     <tr class="change-type">
         <td class="padding-small">
             <label class="header" style="margin-top: 3px;"><%= scope.strChange %></label>
-            <div id="shape-btn-change" style="display: inline-block; float:right;"></div>
+            <div id="shape-btn-change"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/SlicerSettings.template b/apps/spreadsheeteditor/main/app/template/SlicerSettings.template
index 27b937ffe..840bf7fd2 100644
--- a/apps/spreadsheeteditor/main/app/template/SlicerSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/SlicerSettings.template
@@ -47,7 +47,7 @@
     <tr>
         <td class="padding-small" colspan=2>
             <label class="input-label"><%= scope.textColumns %></label>
-            <div id="slicer-spin-cols" style="display: inline-block;margin-left:5px;"></div>
+            <div id="slicer-spin-cols"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/TextArtSettings.template b/apps/spreadsheeteditor/main/app/template/TextArtSettings.template
index 38d4e8846..ac22734b7 100644
--- a/apps/spreadsheeteditor/main/app/template/TextArtSettings.template
+++ b/apps/spreadsheeteditor/main/app/template/TextArtSettings.template
@@ -36,7 +36,7 @@
                         <button type="button" class="btn btn-text-default" id="textart-button-from-file" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromFile %></button>
                     </td>
                     <td class="padding-small" width="50%">
-                        <button type="button" class="btn btn-text-default" id="textart-button-from-url" style="width:90px;float:right;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromUrl %></button>
+                        <button type="button" class="btn btn-text-default" id="textart-button-from-url" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromUrl %></button>
                     </td>
                 </tr>
                 <tr>
@@ -44,7 +44,7 @@
                         <div id="textart-combo-fill-type" style="width: 90px;"></div>
                     </td>
                     <td rowspan="2">
-                        <div style="width: 90px; height: 80px; padding: 14px 20px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;float:right;">
+                        <div class="texture-img" style="width: 90px; height: 80px;">
                             <div id="textart-texture-img" style="width: 50px;height: 50px;"></div>
                         </div>
                     </td>
@@ -62,11 +62,11 @@
                 <div id="textart-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
-                    <div id="textart-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="textart-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
-                    <div id="textart-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="textart-background-color-btn"></div>
                 </div>
             </div>
             <div id="textart-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@@ -79,7 +79,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="textar-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="textart-button-direction"></div>
                             </div>
@@ -87,7 +87,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>
@@ -104,7 +104,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>
@@ -126,7 +126,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/spreadsheeteditor/main/app/view/CellSettings.js b/apps/spreadsheeteditor/main/app/view/CellSettings.js
index 690341383..d9183286e 100644
--- a/apps/spreadsheeteditor/main/app/view/CellSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/CellSettings.js
@@ -288,7 +288,8 @@ define([
                 var color = me.GradColor.colors[me.GradColor.currentIdx];
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
-                me.spnGradPosition.setValue(me.GradColor.values[me.GradColor.currentIdx]);
+                var curValue = me.GradColor.values[me.GradColor.currentIdx];
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -958,7 +959,8 @@ define([
                         me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
 
                         // Step position
-                        this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                        var curValue = this.GradColor.values[this.GradColor.currentIdx];
+                        this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue);
 
                         this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                         this.FGColor = {
@@ -1410,7 +1412,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue) {
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -1512,8 +1515,11 @@ define([
 
         onPositionChange: function(btn) {
             var me = this,
-                pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+                pos = btn.getNumberValue();
+            if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/spreadsheeteditor/main/app/view/ChartSettings.js b/apps/spreadsheeteditor/main/app/view/ChartSettings.js
index 2bd693270..8bbed9823 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartSettings.js
@@ -797,7 +797,6 @@ define([
                 cls         : 'btn-toolbar',
                 iconCls     : 'toolbar__icon btn-menu-chart',
                 caption     : this.textChangeType,
-                style       : 'width: 100%;text-align: left;',
                 dataHint    : '1',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
@@ -810,7 +809,6 @@ define([
                 cls         : 'btn-toolbar',
                 iconCls     : 'toolbar__icon btn-select-range',
                 caption     : this.textSelectData,
-                style       : 'width: 100%;text-align: left;',
                 dataHint    : '1',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
@@ -823,7 +821,6 @@ define([
                 cls         : 'btn-toolbar',
                 iconCls     : 'toolbar__icon switch_row_column',
                 caption     : this.textSwitch,
-                style       : 'width: 100%;text-align: left;',
                 dataHint    : '1',
                 dataHintDirection: 'left',
                 dataHintOffset: 'small'
diff --git a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
index fe17489b1..c42a22068 100644
--- a/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/ShapeSettings.js
@@ -525,7 +525,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -938,7 +939,8 @@ define([
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
 
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = me.GradColor.values[me.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
 
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
@@ -1375,7 +1377,7 @@ define([
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
                 var pos = me.GradColor.values[me.GradColor.currentIdx];
-                me.spnGradPosition.setValue(pos, true);
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -1894,8 +1896,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            var pos = btn.getNumberValue();
+            if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
index ef15aebd6..f867a7fd2 100644
--- a/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
+++ b/apps/spreadsheeteditor/main/app/view/TextArtSettings.js
@@ -517,7 +517,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -874,7 +875,8 @@ define([
                         me.GradColor.currentIdx = 0;
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = me.GradColor.values[me.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
                     this.BGColor = {Value: 1, Color: 'ffffff'};
@@ -1313,7 +1315,7 @@ define([
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
                 var pos = me.GradColor.values[me.GradColor.currentIdx];
-                me.spnGradPosition.setValue(pos, true);
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -1757,8 +1759,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            var pos = btn.getNumberValue();
+            if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/spreadsheeteditor/main/resources/less/rightmenu.less b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
index d8783ac31..f9373be9e 100644
--- a/apps/spreadsheeteditor/main/resources/less/rightmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/rightmenu.less
@@ -6,6 +6,314 @@
     label.input-label{
         vertical-align: baseline;
     }
+
+    &#id-cell-settings {
+        #cell-combo-border-type {
+            display: inline-block;
+            vertical-align: middle;
+            width: 93px;
+        }
+
+        .border-color {
+            display: inline-block;
+            float: right;
+            vertical-align: middle;
+
+            .rtl & {
+                float: left;
+            }
+
+            .input-label {
+                margin-right: 5px;
+
+                .rtl & {
+                    margin-right: 0;
+                    margin-left: 5px;
+                }
+            }
+
+            #cell-border-color-btn {
+                display: inline-block;
+            }
+        }
+
+        #cell-spin-angle {
+            display: inline-block;
+            margin-left: 5px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 5px;
+            }
+        }
+
+        #cell-panel-gradient-fill {
+            .cell-direction {
+                display: inline-block;
+                float: right;
+
+                .rtl & {
+                    float: left;
+                }
+
+                #cell-button-direction {
+                    .dataview .item {
+                        .rtl & {
+                            float: left;
+                        }
+                    }
+                }
+            }
+
+            .gradient-position {
+                margin-left: 10px;
+
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 10px;
+                }
+            }
+        }
+
+        #cell-foreground-color-btn, #cell-background-color-btn {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
+
+    &#id-table-settings {
+        #id-table-menu-template {
+            .group-description {
+                padding: 3px 0 3px 10px;
+                .font-weight-bold();
+
+                .rtl & {
+                    text-align: right;
+                    padding: 3px 10px 3px 0;
+                }
+            }
+
+            .group-items-container {
+                .item {
+                    &:hover {
+                        .box-shadow(0 0 0 2px @border-preview-hover-ie) !important;
+                        .box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover) !important;
+                    }
+
+                    &.selected {
+                        .box-shadow(0 0 0 2px @border-preview-select-ie) !important;
+                        .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select) !important;
+                    }
+                }
+            }
+        }
+    }
+
+    &#id-shape-settings {
+        #shape-spin-transparency {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #shape-button-270, #shape-button-fliph {
+            display: inline-block;
+            margin-right: 4px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 4px;
+            }
+        }
+
+        #shape-button-90, #shape-button-flipv {
+            display: inline-block;
+        }
+
+        #shape-btn-change {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .shape-direction {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .angle-label {
+            margin-right: 5px;
+            margin-bottom: 3px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        .gradient-position {
+            margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+        }
+
+        .texture-img {
+            width: 90px;
+            height: 80px;
+            padding: 14px 20px;
+            border: 1px solid #AFAFAF;
+            border-radius: 2px;
+            background: #ffffff;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #shape-foreground-color-btn,
+        #shape-background-color-btn {
+            display: inline-block;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
+
+    &#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-chart-settings {
+        #chart-btn-change-type .btn,
+        #chart-btn-select-data .btn,
+        #chart-btn-switch .btn {
+            width: 100%;
+            text-align: left;
+
+            .rtl & {
+                text-align: right;
+            }
+        }
+    }
+
+    &#id-textart-settings {
+        #textart-spin-transparency {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .textar-direction {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .angle-label {
+            margin-right: 5px;
+            margin-bottom: 3px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        .gradient-position {
+            margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+        }
+
+        .texture-img {
+            padding: 14px 20px;
+            border: 1px solid #AFAFAF;
+            border-radius: 2px;
+            background: #ffffff;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #textart-button-from-url {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #id-textart-menu-direction {
+            .dataview .item {
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+
+        #textart-foreground-color-btn,
+        #textart-background-color-btn {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
+
+    &#id-slicer-settings {
+        #slicer-spin-cols {
+            display: inline-block;
+            margin-left: 5px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 5px;
+            }
+        }
+    }
 }
 
 .combo-pattern-item {
@@ -57,12 +365,17 @@
 
     .list-item {
         width: 146px;
-        margin-left:20px;
+        margin-left: 20px;
         display: inline-block;
         white-space: pre;
         overflow: hidden;
         text-overflow: ellipsis;
         vertical-align: middle;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 20px;
+        }
     }
 
     .listitem-icon {
@@ -220,26 +533,4 @@
     .dataview > .item:not(:hover):not(.selected) {
         .box-shadow(none);
     }
-}
-
-#id-table-menu-template {
-    .group-description {
-        padding: 3px 0 3px 10px;
-        .font-weight-bold();
-        
-    } 
-
-    .group-items-container {
-        .item {
-            &:hover {
-                .box-shadow(0 0 0 2px @border-preview-hover-ie) !important;
-                .box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover) !important;
-            }
-      
-            &.selected {
-                .box-shadow(0 0 0 2px @border-preview-select-ie) !important;
-                .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select) !important;
-            }
-        }
-    }
 }
\ No newline at end of file

From e105d8930e1c3f216e292a1d0e9bbc0cf9e136a9 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Thu, 27 Oct 2022 21:36:28 +0300
Subject: [PATCH 24/42] [rtl] Make settings in right panel for PE

---
 .../main/app/template/ImageSettings.template  |   8 +-
 .../main/app/template/ShapeSettings.template  |  24 +-
 .../main/app/template/SlideSettings.template  |  12 +-
 .../main/app/template/TableSettings.template  |  10 +-
 .../app/template/TextArtSettings.template     |  16 +-
 .../main/app/view/ShapeSettings.js            |  15 +-
 .../main/app/view/SlideSettings.js            |  15 +-
 .../main/app/view/TableSettings.js            |   2 +-
 .../main/app/view/TextArtSettings.js          |  15 +-
 .../main/resources/less/app.less              |   8 -
 .../main/resources/less/rightmenu.less        | 332 ++++++++++++++++--
 11 files changed, 376 insertions(+), 81 deletions(-)

diff --git a/apps/presentationeditor/main/app/template/ImageSettings.template b/apps/presentationeditor/main/app/template/ImageSettings.template
index 1341a2ed0..be505152e 100644
--- a/apps/presentationeditor/main/app/template/ImageSettings.template
+++ b/apps/presentationeditor/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/presentationeditor/main/app/template/ShapeSettings.template b/apps/presentationeditor/main/app/template/ShapeSettings.template
index 4d8534512..87464cb90 100644
--- a/apps/presentationeditor/main/app/template/ShapeSettings.template
+++ b/apps/presentationeditor/main/app/template/ShapeSettings.template
@@ -26,7 +26,7 @@
                         <div id="shape-combo-fill-type" style="width: 90px;"></div>
                     </td>
                     <td rowspan="2">
-                        <div style="width: 90px; height: 80px; padding: 14px 20px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;float:right;">
+                        <div class="texture-img" style="width: 90px; height: 80px;">
                             <div id="shape-texture-img" style="width: 50px;height: 50px;"></div>
                         </div>
                     </td>
@@ -44,11 +44,11 @@
                 <div id="shape-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
-                    <div id="shape-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="shape-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
-                    <div id="shape-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="shape-background-color-btn"></div>
                 </div>
             </div>
             <div id="shape-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@@ -61,7 +61,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="grad-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="shape-button-direction"></div>
                             </div>
@@ -69,7 +69,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="shape-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@@ -86,7 +86,7 @@
                         <label class="input-label" style=""><%= scope.strColor %></label>
                         <div id="shape-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="shape-gradient-position"></div>
                     </div>
@@ -108,7 +108,7 @@
                     <div id="shape-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
                     <label id="shape-lbl-transparency-end">100</label>
                 </div>
-                <div id="shape-spin-transparency" style="display: inline-block;float: right;"></div>
+                <div id="shape-spin-transparency"></div>
             </div>
         </td>
     </tr>
@@ -159,15 +159,15 @@
                     <td class="padding-small" width="50%">
                         <label class="input-label"><%= scope.textRotate90 %></label>
                         <div>
-                            <div id="shape-button-270" style="display: inline-block;margin-right: 4px;"></div>
-                            <div id="shape-button-90" style="display: inline-block;"></div>
+                            <div id="shape-button-270"></div>
+                            <div id="shape-button-90"></div>
                         </div>
                     </td>
                     <td class="padding-small" width="50%">
                         <label class="input-label"><%= scope.textFlip %></label>
                         <div>
-                            <div id="shape-button-fliph" style="display: inline-block;margin-right: 4px;"></div>
-                            <div id="shape-button-flipv" style="display: inline-block;"></div>
+                            <div id="shape-button-fliph"></div>
+                            <div id="shape-button-flipv"></div>
                         </div>
                     </td>
                 </tr>
@@ -182,7 +182,7 @@
     <tr class="change-type">
         <td class="padding-small">
             <label class="header" style="margin-top: 3px;"><%= scope.strChange %></label>
-            <div id="shape-btn-change" style="display: inline-block; float:right;"></div>
+            <div id="shape-btn-change"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/presentationeditor/main/app/template/SlideSettings.template b/apps/presentationeditor/main/app/template/SlideSettings.template
index df87a6486..91ec7097c 100644
--- a/apps/presentationeditor/main/app/template/SlideSettings.template
+++ b/apps/presentationeditor/main/app/template/SlideSettings.template
@@ -44,11 +44,11 @@
                 <div id="slide-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
-                    <div id="slide-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="slide-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
-                    <div id="slide-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="slide-background-color-btn"></div>
                 </div>
             </div>
             <div id="slide-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@@ -61,7 +61,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="slide-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="slide-button-direction"></div>
                             </div>
@@ -69,7 +69,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="slide-spin-gradient-angle" style="display: inline-block; width: 60px;"></div>
@@ -86,7 +86,7 @@
                         <label class="input-label" style=""><%= scope.strColor %></label>
                         <div id="slide-gradient-color-btn"></div>
                     </div>
-                    <div style="margin-left: 10px;">
+                    <div class="gradient-position">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="slide-gradient-position"></div>
                     </div>
@@ -108,7 +108,7 @@
                     <div id="slide-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
                     <label id="slide-lbl-transparency-end">100</label>
                 </div>
-                <div id="slide-spin-transparency" style="display: inline-block;float: right;"></div>
+                <div id="slide-spin-transparency"></div>
             </div>
         </td>
     </tr>
diff --git a/apps/presentationeditor/main/app/template/TableSettings.template b/apps/presentationeditor/main/app/template/TableSettings.template
index 673ed83a9..33f3ae690 100644
--- a/apps/presentationeditor/main/app/template/TableSettings.template
+++ b/apps/presentationeditor/main/app/template/TableSettings.template
@@ -54,8 +54,8 @@
     <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 class="border-color">
+                <label class="input-label color-label"><%= scope.textBorderColor %></label>
                 <div id="table-border-color-btn" style="display: inline-block;"></div>
             </div>
         </td>
@@ -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 color-label"><%= scope.textBackColor %></label>
             <div id="table-back-color-btn" style="display: inline-block;text-align:left;"></div>
         </td>
     </tr>
@@ -112,13 +112,13 @@
     <tr>
         <td class="padding-small" colspan=2>
             <label style="margin-top: 3px;"><%= scope.textHeight %></label>
-            <div id="table-spin-cell-height" style="display: inline-block; float:right;"></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-spin-cell-width" style="display: inline-block; float:right;"></div>
+            <div id="table-spin-cell-width"></div>
         </td>
     </tr>
     <tr>
diff --git a/apps/presentationeditor/main/app/template/TextArtSettings.template b/apps/presentationeditor/main/app/template/TextArtSettings.template
index 38d4e8846..8956defd1 100644
--- a/apps/presentationeditor/main/app/template/TextArtSettings.template
+++ b/apps/presentationeditor/main/app/template/TextArtSettings.template
@@ -36,7 +36,7 @@
                         <button type="button" class="btn btn-text-default" id="textart-button-from-file" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromFile %></button>
                     </td>
                     <td class="padding-small" width="50%">
-                        <button type="button" class="btn btn-text-default" id="textart-button-from-url" style="width:90px;float:right;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromUrl %></button>
+                        <button type="button" class="btn btn-text-default" id="textart-button-from-url" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFromUrl %></button>
                     </td>
                 </tr>
                 <tr>
@@ -44,7 +44,7 @@
                         <div id="textart-combo-fill-type" style="width: 90px;"></div>
                     </td>
                     <td rowspan="2">
-                        <div style="width: 90px; height: 80px; padding: 14px 20px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;float:right;">
+                        <div class="texture-img" style="width: 90px; height: 80px;">
                             <div id="textart-texture-img" style="width: 50px;height: 50px;"></div>
                         </div>
                     </td>
@@ -62,11 +62,11 @@
                 <div id="textart-combo-pattern" style="width: 100%; height: 42px; margin-bottom: 8px;"></div>
                 <div style="width: 100%; height: 25px; margin-bottom: 8px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strForeground %></label>
-                    <div id="textart-foreground-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="textart-foreground-color-btn"></div>
                 </div>
                 <div style="width: 100%; height: 25px;">
                     <label class="input-label" style="margin-top: 3px;"><%= scope.strBackground %></label>
-                    <div id="textart-background-color-btn" style="display: inline-block; float:right;"></div>
+                    <div id="textart-background-color-btn"></div>
                 </div>
             </div>
             <div id="textart-panel-gradient-fill" class="settings-hidden padding-small" style="width: 100%;">
@@ -79,7 +79,7 @@
                             </div>
                         </td>
                         <td rowspan="2" style="width: 100%;">
-                            <div style="float: right;">
+                            <div class="grad-direction">
                                 <label class="input-label"><%= scope.textDirection %></label>
                                 <div id="textart-button-direction"></div>
                             </div>
@@ -87,7 +87,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>
@@ -104,7 +104,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" style="margin-left: 10px;">
                         <label class="input-label" style=""><%= scope.textPosition %></label>
                         <div id="textart-gradient-position"></div>
                     </div>
@@ -126,7 +126,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/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js
index fde3bdb0a..7fc991e99 100644
--- a/apps/presentationeditor/main/app/view/ShapeSettings.js
+++ b/apps/presentationeditor/main/app/view/ShapeSettings.js
@@ -510,7 +510,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -943,7 +944,8 @@ define([
                         me.GradColor.currentIdx = 0;
                     }
                     this.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = me.GradColor.values[me.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
                     this.BGColor = {Value: 1, Color: 'ffffff'};
@@ -1360,7 +1362,7 @@ define([
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
                 var pos = me.GradColor.values[me.GradColor.currentIdx];
-                me.spnGradPosition.setValue(pos, true);
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -1876,8 +1878,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            var pos = btn.getNumberValue();
+            if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/presentationeditor/main/app/view/SlideSettings.js b/apps/presentationeditor/main/app/view/SlideSettings.js
index 1bb821d15..94bfb4918 100644
--- a/apps/presentationeditor/main/app/view/SlideSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSettings.js
@@ -581,7 +581,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -856,7 +857,7 @@ define([
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
                 var pos = me.GradColor.values[me.GradColor.currentIdx];
-                me.spnGradPosition.setValue(pos, true);
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -1295,7 +1296,8 @@ define([
                         me.GradColor.currentIdx = 0;
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = this.GradColor.values[this.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue);
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
                     this.BGColor = {Value: 1, Color: 'ffffff'};
@@ -1450,8 +1452,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            var pos = btn.getNumberValue();
+            if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/presentationeditor/main/app/view/TableSettings.js b/apps/presentationeditor/main/app/view/TableSettings.js
index 0e12a775f..ec25614c5 100644
--- a/apps/presentationeditor/main/app/view/TableSettings.js
+++ b/apps/presentationeditor/main/app/view/TableSettings.js
@@ -799,7 +799,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/presentationeditor/main/app/view/TextArtSettings.js b/apps/presentationeditor/main/app/view/TextArtSettings.js
index 848e77b94..73cfdef3f 100644
--- a/apps/presentationeditor/main/app/view/TextArtSettings.js
+++ b/apps/presentationeditor/main/app/view/TextArtSettings.js
@@ -515,7 +515,8 @@ define([
 
         onGradientChange: function(slider, newValue, oldValue){
             this.GradColor.values = slider.getValues();
-            this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx], true);
+            var curValue = this.GradColor.values[this.GradColor.currentIdx];
+            this.spnGradPosition.setValue(Common.UI.isRTL() ? this.sldrGradient.maxValue - curValue : curValue, true);
             this._sliderChanged = true;
             if (this.api && !this._noApply) {
                 if (this._sendUndoPoint)  {
@@ -877,7 +878,8 @@ define([
                         me.GradColor.currentIdx = 0;
                     }
                     me.sldrGradient.setActiveThumb(me.GradColor.currentIdx);
-                    this.spnGradPosition.setValue(this.GradColor.values[this.GradColor.currentIdx]);
+                    var curValue = me.GradColor.values[me.GradColor.currentIdx];
+                    this.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - curValue : curValue);
                     this.OriginalFillType = Asc.c_oAscFill.FILL_TYPE_GRAD;
                     this.FGColor = {Value: 1, Color: this.GradColor.colors[0]};
                     this.BGColor = {Value: 1, Color: 'ffffff'};
@@ -1316,7 +1318,7 @@ define([
                 me.btnGradColor.setColor(color);
                 me.colorsGrad.select(color,false);
                 var pos = me.GradColor.values[me.GradColor.currentIdx];
-                me.spnGradPosition.setValue(pos, true);
+                me.spnGradPosition.setValue(Common.UI.isRTL() ? me.sldrGradient.maxValue - pos : pos, true);
             });
             this.sldrGradient.on('thumbdblclick', function(cmp){
                 me.btnGradColor.cmpEl.find('button').dropdown('toggle');
@@ -1760,8 +1762,11 @@ define([
         },
 
         onPositionChange: function(btn) {
-            var pos = btn.getNumberValue(),
-                minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
+            var pos = btn.getNumberValue();
+            if (Common.UI.isRTL()) {
+                pos = this.sldrGradient.maxValue - pos;
+            }
+            var minValue = (this.GradColor.currentIdx-1<0) ? 0 : this.GradColor.values[this.GradColor.currentIdx-1],
                 maxValue = (this.GradColor.currentIdx+1<this.GradColor.values.length) ? this.GradColor.values[this.GradColor.currentIdx+1] : 100,
                 needSort = pos < minValue || pos > maxValue;
             if (this.api) {
diff --git a/apps/presentationeditor/main/resources/less/app.less b/apps/presentationeditor/main/resources/less/app.less
index f3ed4c565..d6085fdf0 100644
--- a/apps/presentationeditor/main/resources/less/app.less
+++ b/apps/presentationeditor/main/resources/less/app.less
@@ -190,14 +190,6 @@
     }
 }
 
-#slide-texture-img-box {
-    background: @background-normal;
-    border: @scaled-one-px-value solid @border-regular-control;
-    border-radius: 2px;
-    float: right;
-    padding: 14px 20px;
-}
-
 // Skeleton of document
 
 .doc-placeholder {
diff --git a/apps/presentationeditor/main/resources/less/rightmenu.less b/apps/presentationeditor/main/resources/less/rightmenu.less
index 3a2b4daa6..884630bfb 100644
--- a/apps/presentationeditor/main/resources/less/rightmenu.less
+++ b/apps/presentationeditor/main/resources/less/rightmenu.less
@@ -6,6 +6,316 @@
     label.input-label{
         vertical-align: baseline;
     }
+
+    &#id-slide-settings {
+        #slide-spin-transparency {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .slide-direction {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .angle-label {
+            margin-right: 5px;
+            margin-bottom: 3px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        .gradient-position {
+            margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+        }
+
+        #id-slide-menu-direction {
+            .dataview .item {
+                .rtl & {
+                    float: left;
+                }
+            }
+        }
+
+        #slide-texture-img-box {
+            background: @background-normal;
+            border: @scaled-one-px-value solid @border-regular-control;
+            border-radius: 2px;
+            float: right;
+            padding: 14px 20px;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #slide-foreground-color-btn, #slide-background-color-btn {
+            display: inline-block;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
+
+    &#id-shape-settings {
+        #shape-spin-transparency {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #shape-button-270, #shape-button-fliph {
+            display: inline-block;
+            margin-right: 4px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 4px;
+            }
+        }
+
+        #shape-button-90, #shape-button-flipv {
+            display: inline-block;
+        }
+
+        #shape-btn-change {
+            display: inline-block;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .grad-direction {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+
+            #id-shape-menu-direction {
+                .dataview .item {
+                    .rtl & {
+                        float: left;
+                    }
+                }
+            }
+        }
+
+        .angle-label {
+            margin-right: 5px;
+            margin-bottom: 3px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        .gradient-position {
+            margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+        }
+
+        .texture-img {
+            padding: 14px 20px;
+            border: 1px solid #AFAFAF;
+            border-radius: 2px;
+            background: #ffffff;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #shape-foreground-color-btn, #shape-background-color-btn {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
+
+    &#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-table-settings {
+        #id-table-menu-template {
+            margin: 5px 5px 5px 10px;
+
+            .rtl & {
+                margin: 5px 10px 5px 5px;
+            }
+
+            .group-description {
+                padding: 3px 0 3px 10px;
+                .font-weight-bold();
+
+                .rtl & {
+                    padding: 3px 10px 3px 0;
+                    text-align: right;
+                }
+            }
+
+            .group-items-container {
+                .item {
+                    &:hover {
+                        .box-shadow(0 0 0 2px @border-preview-hover-ie) !important;
+                        .box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover) !important;
+                    }
+
+                    &.selected {
+                        .box-shadow(0 0 0 2px @border-preview-select-ie) !important;
+                        .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select) !important;
+                    }
+                }
+            }
+        }
+
+        .border-color {
+            display: inline-block;
+            float: right;
+            vertical-align: middle;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .color-label {
+            margin-right: 5px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        #table-spin-cell-height, #table-spin-cell-width {
+            display: inline-block;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
+
+    &#id-textart-settings {
+        #textart-spin-transparency {
+            display: inline-block;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .grad-direction {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+
+            #id-textart-menu-direction {
+                .dataview .item {
+                    .rtl & {
+                        float: left;
+                    }
+                }
+            }
+        }
+
+        .angle-label {
+            margin-right: 5px;
+            margin-bottom: 3px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 5px;
+            }
+        }
+
+        .gradient-position {
+            margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
+        }
+
+        #textart-button-from-url {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        .texture-img {
+            padding: 14px 20px;
+            border: 1px solid #AFAFAF;
+            border-radius: 2px;
+            background: #ffffff;
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+
+        #textart-foreground-color-btn, #textart-background-color-btn {
+            display: inline-block;
+            float:right;
+
+            .rtl & {
+                float: left;
+            }
+        }
+    }
 }
 
 .item-wrap {
@@ -101,26 +411,4 @@
             }
         }
     }
-}
-
-#id-table-menu-template {
-    .group-description {
-        padding: 3px 0 3px 10px;
-        .font-weight-bold();
-        
-    } 
-
-    .group-items-container {
-        .item {
-            &:hover {
-                .box-shadow(0 0 0 2px @border-preview-hover-ie) !important;
-                .box-shadow(0 0 0 @scaled-two-px-value @border-preview-hover) !important;
-            }
-      
-            &.selected {
-                .box-shadow(0 0 0 2px @border-preview-select-ie) !important;
-                .box-shadow(0 0 0 @scaled-two-px-value @border-preview-select) !important;
-            }
-        }
-    }
 }
\ No newline at end of file

From 3431fb313f65e0fe826e60c8d803fefae8e69266 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <julia.svinaryva@onlyoffice.com>
Date: Tue, 1 Nov 2022 20:13:33 +0300
Subject: [PATCH 25/42] [rtl] Fix settings in left panel

---
 apps/common/main/lib/component/TreeView.js    | 15 ++++-
 .../main/lib/template/CommentsPanel.template  |  4 +-
 apps/common/main/resources/less/chat.less     | 13 ++++
 apps/common/main/resources/less/comments.less | 61 +++++++++++++++++++
 .../main/resources/less/searchdialog.less     | 25 ++++++++
 apps/common/main/resources/less/treeview.less |  9 +++
 .../main/app/view/Navigation.js               |  4 +-
 .../main/resources/less/navigation.less       | 19 ++++++
 .../main/app/view/Spellcheck.js               |  3 +-
 .../main/resources/less/leftmenu.less         | 10 +++
 .../main/resources/less/spellcheck.less       | 29 +++++++++
 11 files changed, 185 insertions(+), 7 deletions(-)

diff --git a/apps/common/main/lib/component/TreeView.js b/apps/common/main/lib/component/TreeView.js
index 2b2ac7add..ec4795d0e 100644
--- a/apps/common/main/lib/component/TreeView.js
+++ b/apps/common/main/lib/component/TreeView.js
@@ -170,7 +170,7 @@ define([
             initialize : function(options) {
                 options.store = options.store || new Common.UI.TreeViewStore();
                 options.emptyItemText = options.emptyItemText || '';
-                options.itemTemplate = options.itemTemplate || _.template([
+                options.itemTemplate = options.itemTemplate || !Common.UI.isRTL() ? _.template([
                     '<div id="<%= id %>" class="tree-item <% if (!isVisible) { %>' + 'hidden' + '<% } %>" style="display: block;padding-left: <%= level*16 + 24 %>px;">',
                     '<% if (hasSubItems) { %>',
                         '<div class="tree-caret img-commonctrl ' + '<% if (!isExpanded) { %>' + 'up' + '<% } %>' + '" style="margin-left: <%= level*16 %>px;"></div>',
@@ -183,6 +183,19 @@ define([
                         '<div class="name"><%= Common.Utils.String.htmlEncode(name) %></div>',
                     '<% } %>',
                     '</div>'
+                ].join('')) : _.template([
+                    '<div id="<%= id %>" class="tree-item <% if (!isVisible) { %>' + 'hidden' + '<% } %>" style="display: block;padding-right: <%= level*16 + 24 %>px;">',
+                    '<% if (hasSubItems) { %>',
+                        '<div class="tree-caret img-commonctrl ' + '<% if (!isExpanded) { %>' + 'up' + '<% } %>' + '" style="margin-right: <%= level*16 %>px;"></div>',
+                    '<% } %>',
+                    '<% if (isNotHeader) { %>',
+                        '<div class="name not-header"><%= Common.Utils.String.htmlEncode(name) %></div>',
+                    '<% } else if (isEmptyItem) { %>',
+                        '<div class="name empty">' + options.emptyItemText + '</div>',
+                    '<% } else { %>',
+                        '<div class="name"><%= Common.Utils.String.htmlEncode(name) %></div>',
+                    '<% } %>',
+                    '</div>'
                 ].join(''));
                 Common.UI.DataView.prototype.initialize.call(this, options);
             },
diff --git a/apps/common/main/lib/template/CommentsPanel.template b/apps/common/main/lib/template/CommentsPanel.template
index 5a0bb9a5a..34ed29581 100644
--- a/apps/common/main/lib/template/CommentsPanel.template
+++ b/apps/common/main/lib/template/CommentsPanel.template
@@ -12,7 +12,7 @@
     </div>
     <div id="comments-header" class="">
         <label><%=textComments%></label>
-        <div id="comments-btn-close" style="float:right;margin-left: 4px;"></div>
-        <div id="comments-btn-sort" style="float:right;"></div>
+        <div id="comments-btn-close"></div>
+        <div id="comments-btn-sort"></div>
     </div>
 </div>
diff --git a/apps/common/main/resources/less/chat.less b/apps/common/main/resources/less/chat.less
index 566e58cab..6f68facb1 100644
--- a/apps/common/main/resources/less/chat.less
+++ b/apps/common/main/resources/less/chat.less
@@ -20,6 +20,11 @@
         margin-top: 5px;
         margin-bottom: 5px;
         right: 4px !important;
+
+        .rtl & {
+            right: unset !important;
+            left: 4px !important;
+        }
     }
 
     #chat-title {
@@ -60,6 +65,10 @@
             height: 12px;
             border: 1px solid @border-toolbar-ie;
             border: 1px solid @border-toolbar;
+
+            .rtl & {
+                margin: 0 0 3px 5px;
+            }
         }
 
         .name {
@@ -119,6 +128,10 @@
                     border: 1px solid @border-toolbar;
                     margin: 0 5px 3px 0;
                     vertical-align: middle;
+
+                    .rtl & {
+                        margin: 0 0 3px 5px;
+                    }
                 }
 
                 .message {
diff --git a/apps/common/main/resources/less/comments.less b/apps/common/main/resources/less/comments.less
index c911a59e1..e4e0b2361 100644
--- a/apps/common/main/resources/less/comments.less
+++ b/apps/common/main/resources/less/comments.less
@@ -23,6 +23,25 @@
             .font-weight-bold();
             margin-top: 2px;
         }
+
+        #comments-btn-close {
+            float: right;
+            margin-left: 4px;
+
+            .rtl & {
+                float: left;
+                margin-left: 0;
+                margin-right: 4px;
+            }
+        }
+
+        #comments-btn-sort {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
     }
 
     .messages-ct {
@@ -44,6 +63,11 @@
             margin-top: 5px;
             margin-bottom: 5px;
             right: 4px !important;
+
+            .rtl & {
+                right: unset !important;
+                left: 4px !important;
+            }
         }
 
         .dataview-ct.inner {
@@ -110,9 +134,19 @@
     .btn {
         &.add {
             margin-left: 20px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 20px;
+            }
         }
         &.cancel {
             margin-left: 7px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 7px;
+            }
         }
     }
 }
@@ -175,6 +209,10 @@
         padding: 10px 65px 0 0px;
         height: 26px;
         cursor: default;
+
+        .rtl & {
+            padding: 10px 0px 0 65px;
+        }
     }
 
     .color {
@@ -184,6 +222,10 @@
         border: @scaled-one-px-value solid @border-toolbar;
         margin: 0 5px 3px 0;
         vertical-align: middle;
+
+        .rtl & {
+            margin: 0 0 3px 5px;
+        }
     }
 
     .user-name-colored {
@@ -272,6 +314,12 @@
         top: 0;
         margin: 11px 21px 10px 10px;
         height: 20px;
+
+        .rtl & {
+            right: unset;
+            left: 0;
+            margin: 11px 10px 10px 21px;
+        }
     }
 
     .btns-reply-ct {
@@ -280,6 +328,11 @@
         top: 0;
         height: 30px;
         margin-top: 11px;
+
+        .rtl & {
+            right: unset;
+            left: 0;
+        }
     }
 
     .reply-item-ct {
@@ -291,6 +344,10 @@
     div[class^=btn-] {
         float: left;
         cursor: pointer;
+
+        .rtl & {
+            float: right;
+        }
     }
 
     .btn-edit,.btn-delete, .btn-resolve, .icon-resolve, .btn-resolve-check, .btn-accept, .btn-reject, .btn-goto {
@@ -298,6 +355,10 @@
         height: 16px;
         margin: 0 0 0 5px;
         background-color: transparent;
+
+        .rtl & {
+            margin: 0 5px 0 0;
+        }
     }
 
     .icon-resolve {
diff --git a/apps/common/main/resources/less/searchdialog.less b/apps/common/main/resources/less/searchdialog.less
index e96e720ef..ac0dfd6fb 100644
--- a/apps/common/main/resources/less/searchdialog.less
+++ b/apps/common/main/resources/less/searchdialog.less
@@ -132,6 +132,10 @@
 
         #search-btn-close {
             float: right;
+
+            .rtl & {
+                float: left;
+            }
         }
     }
 
@@ -170,6 +174,11 @@
         .search-nav-btns {
             display: inline-block;
             float: right;
+
+            .rtl & {
+                float: left;
+            }
+
             div {
                 display: inline-block;
             }
@@ -200,6 +209,11 @@
         cursor: pointer;
         margin-left: 15px;
 
+        .rtl & {
+            margin-left: 0;
+            margin-right: 15px;
+        }
+
         .search-options-txt {
             display: inline-block;
             padding: 5px 0;
@@ -214,6 +228,13 @@
             left: 0;
             cursor: pointer;
             margin-left: 8px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 8px;
+                left: unset;
+                right: 0;
+            }
         }
 
     }
@@ -234,6 +255,10 @@
         }
         .search-options-caret {
             transform: rotate(270deg);
+
+            .rtl & {
+                transform: rotate(90deg);
+            }
         }
     }
 
diff --git a/apps/common/main/resources/less/treeview.less b/apps/common/main/resources/less/treeview.less
index 059dfddff..78b5875f4 100644
--- a/apps/common/main/resources/less/treeview.less
+++ b/apps/common/main/resources/less/treeview.less
@@ -79,8 +79,17 @@
     left: 0;
     cursor: pointer;
 
+    .rtl & {
+      left: unset;
+      right: 0;
+    }
+
     &.up {
       transform: rotate(270deg);
+
+      .rtl & {
+        transform: rotate(90deg);
+      }
     }
   }
 }
diff --git a/apps/documenteditor/main/app/view/Navigation.js b/apps/documenteditor/main/app/view/Navigation.js
index 3fec05e5f..d9ce8ce20 100644
--- a/apps/documenteditor/main/app/view/Navigation.js
+++ b/apps/documenteditor/main/app/view/Navigation.js
@@ -51,8 +51,8 @@ define([
             '<div id="navigation-box" class="layout-ct vbox">',
             '<div id="navigation-header" className="">',
                 '<label><%= scope.strNavigate%></label>',
-                '<div id="navigation-btn-close" style="float:right;margin-left: 4px;"></div>',
-                '<div id="navigation-btn-settings" style="float:right;"></div>',
+                '<div id="navigation-btn-close"></div>',
+                '<div id="navigation-btn-settings"></div>',
             '</div>',
                 '<div id="navigation-list" class="">',
                 '</div>',
diff --git a/apps/documenteditor/main/resources/less/navigation.less b/apps/documenteditor/main/resources/less/navigation.less
index 9fd80ddb9..505ab8b81 100644
--- a/apps/documenteditor/main/resources/less/navigation.less
+++ b/apps/documenteditor/main/resources/less/navigation.less
@@ -18,6 +18,25 @@
             .font-weight-bold();
             margin-top: 2px;
         }
+
+        #navigation-btn-close {
+            float: right;
+            margin-left: 4px;
+
+            .rtl & {
+                float: left;
+                margin-left: 0;
+                margin-right: 4px;
+            }
+        }
+
+        #navigation-btn-settings {
+            float: right;
+
+            .rtl & {
+                float: left;
+            }
+        }
     }
 
     #navigation-list {
diff --git a/apps/spreadsheeteditor/main/app/view/Spellcheck.js b/apps/spreadsheeteditor/main/app/view/Spellcheck.js
index 82bcf0673..a4de2cce1 100644
--- a/apps/spreadsheeteditor/main/app/view/Spellcheck.js
+++ b/apps/spreadsheeteditor/main/app/view/Spellcheck.js
@@ -65,7 +65,7 @@ define([
                         '<label class="header" style="display: block;"><%= scope.txtDictionaryLanguage %></label>',
                         '<div id="spellcheck-dictionary-language"></div>',
                         '<div id="spellcheck-complete" class="hidden">',
-                            '<i class="btn-resolve" style="display: inline-block;margin-right: 10px;"></i>',
+                            '<i class="btn-resolve"></i>',
                             '<%= scope.txtComplete %>' ,
                         '</div>',
                     '</div>',
@@ -110,7 +110,6 @@ define([
 
             this.buttonNext = new Common.UI.Button({
                 parentEl: $('#spellcheck-next'),
-                style: 'margin-left: 5px;',
                 cls: 'btn-toolbar bg-white',
                 iconCls: 'toolbar__icon btn-nextitem',
                 hint: this.txtNextTip,
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index 0694bfe19..9bd8e6042 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -889,6 +889,11 @@
                 &:last-child {
                     width: 36%;
                 }
+
+                .rtl & {
+                    padding-left: 0;
+                    padding-right: 4px;
+                }
             }
         }
         .search-items {
@@ -911,6 +916,11 @@
                     &:last-child {
                         width: 36%;
                     }
+
+                    .rtl & {
+                        padding-left: 0;
+                        padding-right: 4px;
+                    }
                 }
             }
         }
diff --git a/apps/spreadsheeteditor/main/resources/less/spellcheck.less b/apps/spreadsheeteditor/main/resources/less/spellcheck.less
index 2f7f4cebf..f9f7b9d0f 100644
--- a/apps/spreadsheeteditor/main/resources/less/spellcheck.less
+++ b/apps/spreadsheeteditor/main/resources/less/spellcheck.less
@@ -40,6 +40,11 @@
                 margin-top: 5px;
                 margin-bottom: 5px;
                 right: 4px !important;
+
+                .rtl & {
+                    right: unset !important;
+                    left: 4px !important;
+                }
             }
         }
     }
@@ -52,6 +57,15 @@
 
     #spellcheck-next {
         display: inline-block;
+
+        .btn {
+            margin-left: 5px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 5px;
+            }
+        }
     }
 
     #spellcheck-suggestions-list {
@@ -70,6 +84,11 @@
     #spellcheck-ignore {
         margin-left: 9px;
         display: inline-block;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 9px;
+        }
     }
 
     #spellcheck-add-to-dictionary {
@@ -86,6 +105,16 @@
 
     #spellcheck-complete {
         display: flex;
+
+        .btn-resolve {
+            display: inline-block;
+            margin-right: 10px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 10px;
+            }
+        }
     }
     .btn-resolve
     {

From 63d796c549a906bc943aa6e14dc30fd1e756d5ae Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <julia.svinaryva@onlyoffice.com>
Date: Wed, 2 Nov 2022 22:38:45 +0300
Subject: [PATCH 26/42] [rtl] Fix advanced settings for DE

---
 .../less/advanced-settings-window.less        |   5 +
 apps/common/main/resources/less/window.less   |  10 +
 .../template/ImageSettingsAdvanced.template   |  20 +-
 .../ParagraphSettingsAdvanced.template        |  42 ++--
 .../template/TableSettingsAdvanced.template   |  22 +-
 .../app/view/ParagraphSettingsAdvanced.js     |   1 -
 .../main/app/view/TableSettingsAdvanced.js    |   1 -
 .../resources/less/advanced-settings.less     | 231 ++++++++++++++++++
 8 files changed, 288 insertions(+), 44 deletions(-)

diff --git a/apps/common/main/resources/less/advanced-settings-window.less b/apps/common/main/resources/less/advanced-settings-window.less
index 2cfd6bbf6..a813e5f4a 100644
--- a/apps/common/main/resources/less/advanced-settings-window.less
+++ b/apps/common/main/resources/less/advanced-settings-window.less
@@ -22,6 +22,11 @@
                 line-height: normal;
                 height: auto;
                 white-space: normal;
+
+                .rtl & {
+                    text-align: right;
+                    padding: 9px 12px 9px 2px;
+                }
             }
         }
 
diff --git a/apps/common/main/resources/less/window.less b/apps/common/main/resources/less/window.less
index 5ba0d02e7..4ccc6286d 100644
--- a/apps/common/main/resources/less/window.less
+++ b/apps/common/main/resources/less/window.less
@@ -256,6 +256,11 @@
             button {
                 &:not(:first-child) {
                     margin-left: 10px;
+
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: 10px;
+                    }
                 }
             }
         }
@@ -314,6 +319,11 @@
         button {
             &:not(:first-child) {
                 margin-left: 10px;
+
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 10px;
+                }
             }
         }
     }
diff --git a/apps/documenteditor/main/app/template/ImageSettingsAdvanced.template b/apps/documenteditor/main/app/template/ImageSettingsAdvanced.template
index 8af0473dc..47630167d 100644
--- a/apps/documenteditor/main/app/template/ImageSettingsAdvanced.template
+++ b/apps/documenteditor/main/app/template/ImageSettingsAdvanced.template
@@ -41,7 +41,7 @@
             <td style="vertical-align: bottom; padding-bottom: 19px;">
                 <div id="shape-radio-hsizepc"></div>
             </td>
-            <td class="padding-large" style="padding-right: 15px;">
+            <td class="padding-large padding-right">
                 <label class="input-label"><%= scope.textRelativeWH %></label>
                 <div id="shape-advanced-spin-width-rel"></div>
             </td>
@@ -68,7 +68,7 @@
             <td style="vertical-align: bottom; padding-bottom: 19px;">
                 <div id="shape-radio-vsizepc"></div>
             </td>
-            <td class="padding-large" style="padding-right: 15px;">
+            <td class="padding-large padding-right">
                 <label class="input-label"><%= scope.textRelativeWH %></label>
                 <div id="shape-advanced-spin-height-rel"></div>
             </td>
@@ -94,7 +94,7 @@
     <div class="inner-content  padding-large">
         <div style="width: 100%;">
             <label class="input-label"><%= scope.textAngle %></label>
-            <div id="image-advanced-spin-angle" style="display: inline-block; margin-left: 5px;"></div>
+            <div id="image-advanced-spin-angle" style="display: inline-block;"></div>
         </div>
     </div>
     <div class="separator horizontal padding-large"></div>
@@ -102,7 +102,7 @@
         <table cols="2">
             <tr>
                 <td rowspan="2" class="padding-small" style="vertical-align: top;">
-                    <label class="input-label" style="margin-right: 15px;vertical-align: top;"><%= scope.textFlipped %></label>
+                    <label class="input-label flipped" style="vertical-align: top;"><%= scope.textFlipped %></label>
                 </td>
                 <td class="padding-small">
                     <div id="image-advanced-checkbox-hor"></div>
@@ -120,14 +120,14 @@
     <div class="inner-content padding-large">
         <label class="header padding-small"><%= scope.textWrap %></label>
         <div class="padding-small">
-            <div id="image-advanced-button-wrap-inline" style="display: inline-block; margin-right:7px;"></div>
-            <div id="image-advanced-button-wrap-square" style="display: inline-block; margin-right:7px;"></div>
-            <div id="image-advanced-button-wrap-tight" style="display: inline-block; margin-right:7px;"></div>
-            <div id="image-advanced-button-wrap-through" style="display: inline-block; margin-right:7px;"></div>
+            <div id="image-advanced-button-wrap-inline" class="margin-right" style="display: inline-block;"></div>
+            <div id="image-advanced-button-wrap-square" class="margin-right" style="display: inline-block;"></div>
+            <div id="image-advanced-button-wrap-tight" class="margin-right" style="display: inline-block;"></div>
+            <div id="image-advanced-button-wrap-through" class="margin-right" style="display: inline-block;"></div>
         </div>
         <div class="padding-small">
-            <div id="image-advanced-button-wrap-topbottom" style="display: inline-block; margin-right:7px;"></div>
-            <div id="image-advanced-button-wrap-infront" style="display: inline-block; margin-right:7px;"></div>
+            <div id="image-advanced-button-wrap-topbottom" class="margin-right" style="display: inline-block;"></div>
+            <div id="image-advanced-button-wrap-infront" class="margin-right" style="display: inline-block;"></div>
             <div id="image-advanced-button-wrap-behind" style="display: inline-block;"></div>
         </div>
     </div>
diff --git a/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template b/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
index 22de247ca..e955e7855 100644
--- a/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
+++ b/apps/documenteditor/main/app/template/ParagraphSettingsAdvanced.template
@@ -5,18 +5,18 @@
                     <label class="input-label"><%= scope.textAlign %></label>
                     <div id="paragraphadv-spin-text-alignment"></div>
                 </div>
-                <div class="padding-large text-only" style="float: right;">
+                <div class="padding-large text-only outline-level">
                     <label class="input-label"><%= scope.strIndentsOutlinelevel %></label>
                     <div id="paragraphadv-spin-outline-level"></div>
                 </div>
             </div>
             <div><label class="header padding-very-small"><%= scope.strIndent %></label></div>
             <div>
-                <div class="padding-large" style="display: inline-block;margin-right: 3px;">
+                <div class="padding-large margin-right" style="display: inline-block;">
                  <label class="input-label"><%= scope.strIndentsLeftText %></label>
                     <div id="paragraphadv-spin-indent-left"></div>
                 </div><!--
-             --><div class="padding-large" style="display: inline-block;margin-right: 3px;">
+             --><div class="padding-large margin-right" style="display: inline-block;">
                     <label class="input-label"><%= scope.strIndentsRightText %></label>
                     <div id="paragraphadv-spin-indent-right"></div>
                 </div><!--
@@ -25,18 +25,18 @@
                         <label class="input-label"><%= scope.strIndentsSpecial %></label>
                     </div>
                 <div>
-                        <div id="paragraphadv-spin-special" style="display: inline-block; margin-right: 3px;"></div><!--
+                        <div id="paragraphadv-spin-special" class="margin-right" style="display: inline-block;"></div><!--
                      --><div id="paragraphadv-spin-special-by" style="display: inline-block;"></div>
                     </div>
                 </div>
             </div>
             <div><label class="header padding-very-small"><%= scope.strSpacing %></label></div>
             <div>
-                <div style="display: inline-block;margin-right: 3px;">
+                <div class="margin-right" style="display: inline-block;">
                     <label class="input-label"><%= scope.strIndentsSpacingBefore %></label>
                     <div id="paragraphadv-spin-spacing-before"></div>
                 </div><!--
-             --><div style="display: inline-block;margin-right: 3px;">
+             --><div class="margin-right" style="display: inline-block;">
                     <label class="input-label"><%= scope.strIndentsSpacingAfter %></label>
                     <div id="paragraphadv-spin-spacing-after"></div>
                 </div><!--
@@ -45,7 +45,7 @@
                         <label class="input-label"><%= scope.strIndentsLineSpacing %></label>
                     </div>
                     <div>
-                        <div id="paragraphadv-spin-line-rule" style="display: inline-block;margin-right: 3px;"></div><!--
+                        <div id="paragraphadv-spin-line-rule" class="margin-right" style="display: inline-block;"></div><!--
                      --><div id="paragraphadv-spin-line-height" style="display: inline-block;"></div>
                     </div>
                 </div>
@@ -92,7 +92,7 @@
         <div style="width: 100%;" class="padding-small">
             <label class="input-label"><%= scope.textBorderWidth %></label>
             <div id="paragraphadv-combo-border-size" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
-            <div style="display: inline-block; vertical-align: middle; padding-left: 20px;">
+            <div class="border-color" style="display: inline-block; vertical-align: middle;">
                 <label class="input-label" ><%= scope.textBorderColor %></label>
                 <div id="paragraphadv-border-color-btn" style="display: inline-block;"></div>
             </div>
@@ -100,7 +100,7 @@
         <label class="input-label padding-small" style="width: 100%;"><%= scope.textBorderDesc %></label>
         <div style="width: 100%;" class="padding-large">
             <div id="id-deparagraphstyler" style="display: inline-block; vertical-align: middle; width: 200px; height: 170px;outline: 1px solid #ccc; margin-top: 2px;"></div>
-            <div style="display: inline-block; vertical-align: top; width: 76px; text-align: right; height: 170px; padding-top: 0px; margin-left: 9px;">
+            <div class="border-types" style="display: inline-block; vertical-align: top; width: 76px; height: 170px; padding-top: 0px;">
                 <div id="paragraphadv-button-border-top" style="display: inline-block;"></div>
                 <div id="paragraphadv-button-border-inner-hor" style="display: inline-block;"></div>
                 <div id="paragraphadv-button-border-bottom" style="display: inline-block;"></div>
@@ -112,7 +112,7 @@
             </div>
         </div>
         <div style="width: 100%;" class="padding-small">
-            <label class="input-label" style="margin-right: 5px;"><%= scope.textBackColor %></label>
+            <label class="input-label back-color"><%= scope.textBackColor %></label>
             <div id="paragraphadv-back-color-btn" style="display: inline-block;"></div>
         </div>
     </div>
@@ -127,7 +127,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-strike"></div>
                 </td>
-                <td class="padding-small" style="padding-left: 40px;">
+                <td class="padding-small padding-left">
                     <div id="paragraphadv-checkbox-subscript"></div>
                 </td>
             </tr>
@@ -135,7 +135,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-double-strike"></div>
                 </td>
-                <td class="padding-small" style="padding-left: 40px;">
+                <td class="padding-small padding-left">
                     <div id="paragraphadv-checkbox-small-caps"></div>
                 </td>
             </tr>
@@ -143,7 +143,7 @@
                 <td class="padding-large">
                     <div id="paragraphadv-checkbox-superscript"></div>
                 </td>
-                <td class="padding-large" style="padding-left: 40px;">
+                <td class="padding-large padding-left">
                     <div id="paragraphadv-checkbox-all-caps"></div>
                 </td>
             </tr>
@@ -156,7 +156,7 @@
                 <label class="input-label"><%= scope.textSpacing %></label>
                 <div id="paragraphadv-spin-spacing"></div>
             </div>
-            <div class="text-only" style="display: inline-block; margin-left: 15px;">
+            <div class="text-only position" style="display: inline-block;">
                 <label class="input-label"><%= scope.textPosition %></label>
                 <div id="paragraphadv-spin-position"></div>
             </div>
@@ -166,7 +166,7 @@
         </div>
         <div class="padding-large">
             <label class="input-label"><%= scope.textLigatures %></label>
-            <div id="paragraphadv-cmb-ligatures" style="display: inline-block; vertical-align: baseline; margin-left: 5px;"></div>
+            <div id="paragraphadv-cmb-ligatures" class="ligatures" style="display: inline-block; vertical-align: baseline;"></div>
         </div>
         <div class="doc-content-color" style="outline: 1px solid #cbcbcb;">
             <div id="paragraphadv-font-img" style="width: 300px; height: 80px; position: relative; margin: 0 auto;"></div>
@@ -181,11 +181,11 @@
 
             </div>
             <div>
-                <div class="padding-large" style="display: inline-block; margin-right: 8px;">
+                <div class="padding-large tab-position" style="display: inline-block;">
                     <label class="input-label"><%= scope.textTabPosition %></label>
                     <div id="paraadv-spin-tab"></div>
                 </div>
-                <div class="padding-large" style=" display: inline-block; margin-right: 9px;">
+                <div class="padding-large margin-right" style=" display: inline-block;">
                     <label class="input-label"><%= scope.textAlign %></label>
                     <div id="paraadv-cmb-align"></div>
                 </div>
@@ -200,8 +200,8 @@
                 </div>
             </div>
             <div>
-                <button type="button" class="btn btn-text-default" id="paraadv-button-add-tab" style="width:108px;margin-right: 9px; display: inline-block;"><%= scope.textSet %></button>
-                <button type="button" class="btn btn-text-default" id="paraadv-button-remove-tab" style="width:108px;margin-right: 9px; display: inline-block;"><%= scope.textRemove %></button>
+                <button type="button" class="btn btn-text-default margin-right" id="paraadv-button-add-tab" style="width: 108px; display: inline-block;"><%= scope.textSet %></button>
+                <button type="button" class="btn btn-text-default margin-right" id="paraadv-button-remove-tab" style="width:108px; display: inline-block;"><%= scope.textRemove %></button>
                 <button type="button" class="btn btn-text-default" id="paraadv-button-remove-all" style="width:108px;display: inline-block;"><%= scope.textRemoveAll %></button>
             </div>
     </div>
@@ -213,7 +213,7 @@
                     <label class="input-label"><%= scope.textTop %></label>
                     <div id="paraadv-number-margin-top"></div>
                 </div>
-                <div class="padding-small" style="display: inline-block; padding-left: 15px;">
+                <div class="padding-small padding-left" style="display: inline-block;">
                     <label class="input-label"><%= scope.textLeft %></label>
                     <div id="paraadv-number-margin-left"></div>
                 </div>
@@ -223,7 +223,7 @@
                     <label class="input-label"><%= scope.textBottom %></label>
                     <div id="paraadv-number-margin-bottom"></div>
                 </div>
-                <div class="padding-small" style="display: inline-block; padding-left: 15px;">
+                <div class="padding-small padding-left" style="display: inline-block;">
                     <label class="input-label"><%= scope.textRight %></label>
                     <div id="paraadv-number-margin-right"></div>
                 </div>
diff --git a/apps/documenteditor/main/app/template/TableSettingsAdvanced.template b/apps/documenteditor/main/app/template/TableSettingsAdvanced.template
index ad82ecbe2..1b1c8edc4 100644
--- a/apps/documenteditor/main/app/template/TableSettingsAdvanced.template
+++ b/apps/documenteditor/main/app/template/TableSettingsAdvanced.template
@@ -12,7 +12,7 @@
                 </td>
                 <td class="padding-small">
                     <label class="input-label"><%= scope.textWidth %></label>
-                    <div id="tableadv-number-width" style="margin-right: 10px;"></div>
+                    <div id="tableadv-number-width" class="margin-right"></div>
                 </td>
                 <td class="padding-small">
                     <label class="input-label"><%= scope.textMeasure %></label>
@@ -88,7 +88,7 @@
                 </td>
                 <td class="padding-large">
                     <label class="input-label"><%= scope.textPrefWidth %></label>
-                    <div id="tableadv-number-prefwidth" style="margin-right: 10px;"></div>
+                    <div id="tableadv-number-prefwidth" class="margin-right"></div>
                 </td>
                 <td class="padding-large">
                     <label class="input-label"><%= scope.textMeasure %></label>
@@ -147,18 +147,18 @@
 <div id="id-adv-table-wrap" class="settings-panel">
     <div class="inner-content padding-large">
         <label class="header padding-small" style="display: block;"><%= scope.textWrappingStyle %></label>
-        <div id="tableadv-button-wrap-none" style="display: inline-block; margin-right:5px;"></div>
-        <div id="tableadv-button-wrap-parallel" style="display: inline-block; margin-right:5px;"></div>
+        <div id="tableadv-button-wrap-none" class="margin-right" style="display: inline-block;"></div>
+        <div id="tableadv-button-wrap-parallel" class="margin-right" style="display: inline-block;"></div>
     </div>
     <div class="padding-small"></div>
     <div class="inner-content">
         <div id="tableadv-panel-align" style="width: 100%;">
             <label class="header padding-small"><%= scope.textAlign %></label>
             <div class="padding-large">
-                <div id="tableadv-button-align-left" style="display: inline-block; margin-right:5px;"></div>
-                <div id="tableadv-button-align-center" style="display: inline-block; margin-right:5px;"></div>
-                <div id="tableadv-button-align-right" style="display: inline-block; margin-right:5px;"></div>
-                <div style="display: inline-block; vertical-align: bottom; margin-left: 20px; margin-bottom: 1px;">
+                <div id="tableadv-button-align-left" class="margin-right" style="display: inline-block;"></div>
+                <div id="tableadv-button-align-center" class="margin-right" style="display: inline-block;"></div>
+                <div id="tableadv-button-align-right" class="margin-right" style="display: inline-block;"></div>
+                <div class="number-indent" style="display: inline-block; vertical-align: bottom; margin-bottom: 1px;">
                     <label class="input-label" style="display: block;"><%= scope.textIndLeft %></label>
                     <div id="tableadv-number-indent"></div>
                 </div>
@@ -200,7 +200,7 @@
         <div style="width: 100%;">
             <label class="input-label"><%= scope.textBorderWidth %></label>
             <div id="tableadv-combo-border-size" style="display: inline-block; vertical-align: middle; width: 93px;"></div>
-            <div style="display: inline-block; float:right;vertical-align: middle;">
+            <div class="border-color" style="display: inline-block; vertical-align: middle;">
                 <label class="input-label" ><%= scope.textBorderColor %></label>
                 <div id="tableadv-border-color-btn" style="display: inline-block;"></div>
             </div>
@@ -210,7 +210,7 @@
         <label class="input-label padding-large" style="width: 100%;"><%= scope.textBorderDesc %></label>
         <div id="tableadv-panel-borders" style="width: 100%;" class="padding-large">
             <div id="id-detablestyler" style="display: inline-block; vertical-align: middle; width: 200px; height: 200px;outline: 1px solid #ccc;"></div>
-            <div style="display: inline-block; vertical-align: middle; width: 76px; height: 200px; padding-top: 10px; padding-left: 10px;">
+            <div class="border-types" style="display: inline-block; vertical-align: middle; width: 76px; height: 200px; padding-top: 10px;">
                 <div id="tableadv-button-border-all"></div>
                 <div id="tableadv-button-border-none"></div>
                 <div id="tableadv-button-border-inner"></div>
@@ -236,7 +236,7 @@
                 <div id="tableadv-button-back-color" style="display: inline-block;"></div>
             </div>
             <div id="tableadv-panel-table-back" style="display: inline-block;">
-                <label class="input-label" style="margin-right: 5px;"><%= scope.textTableBackColor %></label>
+                <label class="input-label back-color"><%= scope.textTableBackColor %></label>
                 <div id="tableadv-button-table-back-color" style="display: inline-block;"></div>
             </div>
         </div>
diff --git a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
index 2fd57511c..f31d45750 100644
--- a/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/ParagraphSettingsAdvanced.js
@@ -411,7 +411,6 @@ define([    'text!documenteditor/main/app/template/ParagraphSettingsAdvanced.tem
             _.each(_arrBorderPresets, function(item, index, list){
                 var _btn = new Common.UI.Button({
                     parentEl: $('#'+item[2]),
-                    style: 'margin-left: 4px; margin-bottom: 4px;',
                     cls: 'btn-options large border-off',
                     iconCls: item[1],
                     strId   :item[0],
diff --git a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
index 87ce9d700..4b59cc5de 100644
--- a/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
+++ b/apps/documenteditor/main/app/view/TableSettingsAdvanced.js
@@ -948,7 +948,6 @@ define([    'text!documenteditor/main/app/template/TableSettingsAdvanced.templat
             _.each(_arrBorderPresets, function(item, index, list){
                 var _btn = new Common.UI.Button({
                     parentEl: $('#'+item[2]),
-                    style: 'margin-left: 4px; margin-bottom: 4px;',
                     cls: 'btn-options large border-off',
                     iconCls: item[1],
                     strId   :item[0],
diff --git a/apps/documenteditor/main/resources/less/advanced-settings.less b/apps/documenteditor/main/resources/less/advanced-settings.less
index 84d9d48f1..f937fc767 100644
--- a/apps/documenteditor/main/resources/less/advanced-settings.less
+++ b/apps/documenteditor/main/resources/less/advanced-settings.less
@@ -72,4 +72,235 @@
 #id-text-table-spn-fixed, #bookmarks-radio-location {
     display: inline-block;
     vertical-align: middle;
+}
+
+#id-adv-paragraph-indents {
+    .outline-level {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+
+    .margin-right {
+        margin-right: 3px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 3px;
+        }
+    }
+}
+
+#id-adv-paragraph-borders {
+    .border-color {
+        padding-left: 20px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 20px;
+        }
+    }
+
+    .back-color {
+        margin-right: 5px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
+
+    .border-types {
+        text-align: right;
+        margin-left: 9px;
+
+        .rtl & {
+            text-align: left;
+            margin-left: 0;
+            margin-right: 9px;
+        }
+
+        .btn {
+            margin-left: 4px;
+            margin-bottom: 4px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 4px;
+            }
+        }
+    }
+}
+
+#id-adv-paragraph-font {
+    .padding-left {
+        padding-left: 40px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 40px;
+        }
+    }
+
+    .position {
+        margin-left: 15px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 15px;
+        }
+    }
+
+    .ligatures {
+        margin-left: 5px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+        }
+    }
+}
+
+#id-adv-paragraph-tabs {
+    .tab-position {
+        margin-right: 8px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 8px;
+        }
+    }
+
+    .margin-right {
+        margin-right: 9px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 9px;
+        }
+    }
+}
+
+#id-adv-paragraph-margins {
+    .padding-left {
+        padding-left: 15px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 15px;
+        }
+    }
+}
+
+#id-adv-table-width, #id-adv-table-cell-props {
+    .margin-right {
+        margin-right: 10px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 10px;
+        }
+    }
+}
+
+#id-adv-table-borders {
+    .border-color {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+
+    .border-types {
+        padding-left: 10px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 10px;
+        }
+
+        .btn {
+            margin-left: 4px;
+            margin-bottom: 4px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 4px;
+            }
+        }
+    }
+
+    .back-color {
+        margin-right: 5px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
+}
+
+#id-adv-table-wrap {
+    .margin-right {
+        margin-right: 5px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
+
+    .number-indent {
+        margin-left: 20px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 20px;
+        }
+    }
+}
+
+#id-adv-image-rotate {
+    #image-advanced-spin-angle {
+        margin-left: 5px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+        }
+    }
+
+    .flipped {
+        margin-right: 15px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 15px;
+        }
+    }
+}
+
+#id-adv-image-wrap {
+    .margin-right {
+        margin-right: 7px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 7px;
+        }
+    }
+}
+
+#id-adv-shape-size {
+    .padding-right {
+        padding-right: 15px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 15px;
+        }
+    }
 }
\ No newline at end of file

From 48a52afb28ce5dde2a5b5ba4c5ad7f50f461cb79 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Thu, 3 Nov 2022 19:45:05 +0300
Subject: [PATCH 27/42] [rtl] Fix advanced settings for SSE

---
 .../app/template/ChartSettingsDlg.template    | 102 ++++----
 .../template/ImageSettingsAdvanced.template   |   4 +-
 .../ParagraphSettingsAdvanced.template        |  26 +-
 .../template/PivotSettingsAdvanced.template   |   2 +-
 .../template/ShapeSettingsAdvanced.template   |   4 +-
 .../template/SlicerSettingsAdvanced.template  |   6 +-
 .../resources/less/advanced-settings.less     | 228 ++++++++++++++++++
 7 files changed, 300 insertions(+), 72 deletions(-)

diff --git a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
index 34d49c39e..97b619b78 100644
--- a/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template
@@ -16,37 +16,37 @@
             <tr>
                 <td class="padding-small" width="50%">
                     <label class="input-label"><%= scope.textChartTitle %></label>
-                    <div id="chart-dlg-combo-chart-title" class="input-group-nr" style="margin-right: 7px;"></div>
+                    <div id="chart-dlg-combo-chart-title" class="input-group-nr margin-right"></div>
                 </td>
                 <td class="padding-small" width="50%">
-                    <label class="input-label" style="margin-left: 7px;"><%= scope.textLegendPos %></label>
-                    <div id="chart-dlg-combo-legend-pos" class="input-group-nr" style="margin-left: 7px;"></div>
+                    <label class="input-label margin-left"><%= scope.textLegendPos %></label>
+                    <div id="chart-dlg-combo-legend-pos" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
             <tr>
                 <td class="padding-small" width="50%">
                     <label class="input-label"><%= scope.textDataLabels %></label>
-                    <div id="chart-dlg-combo-data-labels" class="input-group-nr" style="margin-right: 7px;"></div>
+                    <div id="chart-dlg-combo-data-labels" class="input-group-nr margin-right"></div>
                 </td>
                 <td rowspan="2" class="padding-small" width="50%">
-                    <div id="chart-dlg-check-series" style="margin: 20px 0 9px 7px;"></div>
-                    <div id="chart-dlg-check-category" style="margin: 0 0 9px 7px;"></div>
-                    <div id="chart-dlg-check-value" style="margin: 0 0 5px 7px;"></div>
+                    <div id="chart-dlg-check-series"></div>
+                    <div id="chart-dlg-check-category"></div>
+                    <div id="chart-dlg-check-value"></div>
                 </td>
             </tr>
             <tr>
                 <td class="padding-small" width="50%">
                     <label class="input-label"><%= scope.textSeparator %></label>
-                    <div id="chart-dlg-txt-separator" class="input-row"  style="margin-right: 7px;"></div>
+                    <div id="chart-dlg-txt-separator" class="input-row margin-right"></div>
                 </td>
             </tr>
             <tr>
                 <td width="50%">
                     <label id="chart-dlg-label-lines" class="input-label"><%= scope.textLines %></label>
-                    <div id="chart-dlg-combo-lines" class="input-group-nr padding-small" style="margin-right: 7px;"></div>
+                    <div id="chart-dlg-combo-lines" class="input-group-nr padding-small margin-right"></div>
                 </td>
                 <td style="vertical-align: bottom;" width="50%">
-                    <div id="chart-dlg-check-markers" style="margin: 0 0 12px 7px;"></div>
+                    <div id="chart-dlg-check-markers"></div>
                 </td>
             </tr>
         </table>
@@ -66,8 +66,8 @@
                     <div id="chart-dlg-combo-vert-title-0" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textGridLines %></label>
-                    <div id="chart-dlg-combo-vert-grid-0" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textGridLines %></label>
+                    <div id="chart-dlg-combo-vert-grid-0" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
         </table>
@@ -76,7 +76,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMinValue %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" width="115">
                     <div id="chart-dlg-combo-mintype-0"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -87,7 +87,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMaxValue %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" width="115">
                     <div id="chart-dlg-combo-maxtype-0"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -98,7 +98,7 @@
                 <td class="padding-large" width="100">
                     <label class="input-label"><%= scope.textAxisCrosses %></label>
                 </td>
-                <td class="padding-large" width="115" style="padding-right: 10px;">
+                <td class="padding-large padding-right" width="115">
                     <div id="chart-dlg-combo-v-crosstype-0"></div>
                 </td>
                 <td class="padding-large" width="90">
@@ -125,9 +125,9 @@
                     <div id="chart-dlg-check-v-logscale-0"></div>
                 </td>
                 <td class="padding-large">
-                    <div style="float: right;">
+                    <div class="base">
                         <label class="input-label"><%= scope.textBase %></label>
-                        <div id="chart-dlg-input-base-0" style="display: inline-block;margin-left: 5px;"></div>
+                        <div id="chart-dlg-input-base-0" style="display: inline-block;"></div>
                     </div>
                 </td>
             </tr>
@@ -146,8 +146,8 @@
                     <div id="chart-dlg-combo-v-major-type-0" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
-                    <div id="chart-dlg-combo-v-minor-type-0" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textMinorType %></label>
+                    <div id="chart-dlg-combo-v-minor-type-0" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -167,7 +167,7 @@
                     <div id="chart-dlg-combo-v-label-pos-0" class="input-group-nr"></div>
                 </td>
                 <td>
-                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-v-format-0" style="min-width: 100px;margin-left: 15px;"><%= scope.textFormat %></button>
+                    <button type="button" class="btn btn-text-default auto margin-left" id="chart-dlg-btn-v-format-0" style="min-width: 100px;"><%= scope.textFormat %></button>
                 </td>
             </tr>
         </table>
@@ -187,8 +187,8 @@
                     <div id="chart-dlg-combo-vert-title-1" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textGridLines %></label>
-                    <div id="chart-dlg-combo-vert-grid-1" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textGridLines %></label>
+                    <div id="chart-dlg-combo-vert-grid-1" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
         </table>
@@ -197,7 +197,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMinValue %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" width="115">
                     <div id="chart-dlg-combo-mintype-1"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -208,7 +208,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMaxValue %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" width="115">
                     <div id="chart-dlg-combo-maxtype-1"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -219,7 +219,7 @@
                 <td class="padding-large" width="100">
                     <label class="input-label"><%= scope.textAxisCrosses %></label>
                 </td>
-                <td class="padding-large" width="115" style="padding-right: 10px;">
+                <td class="padding-large padding-right" width="115">
                     <div id="chart-dlg-combo-v-crosstype-1"></div>
                 </td>
                 <td class="padding-large" width="90">
@@ -246,9 +246,9 @@
                     <div id="chart-dlg-check-v-logscale-1"></div>
                 </td>
                 <td class="padding-large">
-                    <div style="float: right;">
+                    <div class="base">
                         <label class="input-label"><%= scope.textBase %></label>
-                        <div id="chart-dlg-input-base-1" style="display: inline-block;margin-left: 5px;"></div>
+                        <div id="chart-dlg-input-base-1" style="display: inline-block;"></div>
                     </div>
                 </td>
             </tr>
@@ -267,8 +267,8 @@
                     <div id="chart-dlg-combo-v-major-type-1" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
-                    <div id="chart-dlg-combo-v-minor-type-1" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textMinorType %></label>
+                    <div id="chart-dlg-combo-v-minor-type-1" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -288,7 +288,7 @@
                     <div id="chart-dlg-combo-v-label-pos-1" class="input-group-nr" ></div>
                 </td>
                 <td>
-                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-v-format-1" style="min-width: 100px;margin-left: 15px;"><%= scope.textFormat %></button>
+                    <button type="button" class="btn btn-text-default auto margin-left" id="chart-dlg-btn-v-format-1" style="min-width: 100px;"><%= scope.textFormat %></button>
                 </td>
             </tr>
         </table>
@@ -308,8 +308,8 @@
                     <div id="chart-dlg-combo-hor-title-0" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textGridLines %></label>
-                    <div id="chart-dlg-combo-hor-grid-0" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textGridLines %></label>
+                    <div id="chart-dlg-combo-hor-grid-0" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
         </table>
@@ -318,7 +318,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textAxisCrosses %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small axis-crosses-combo" width="115">
                     <div id="chart-dlg-combo-h-crosstype-0"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -353,8 +353,8 @@
                     <div id="chart-dlg-combo-h-major-type-0" class="input-group-nr"></div>
                 </td>
                 <td class="padding-small">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
-                    <div id="chart-dlg-combo-h-minor-type-0" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textMinorType %></label>
+                    <div id="chart-dlg-combo-h-minor-type-0" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -384,8 +384,8 @@
                     <div id="chart-dlg-combo-h-label-pos-0" class="input-group-nr"></div>
                 </td>
                 <td class="padding-small">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textLabelDist %></label>
-                    <div id="chart-dlg-input-label-dist-0" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textLabelDist %></label>
+                    <div id="chart-dlg-input-label-dist-0" class="margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -396,8 +396,8 @@
             <tr>
                 <td width="100%" colspan="2">
                     <div id="chart-dlg-combo-label-int-0" class="input-group-nr" style="display: inline-block;width: 100px;vertical-align: middle;"></div>
-                    <div id="chart-dlg-input-label-int-0" style="display: inline-block;margin-left: 3px;width: 60px;vertical-align: middle;"></div>
-                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-h-format-0" style="min-width:100px; margin-left: 5px;vertical-align: middle;float: right;"><%= scope.textFormat %></button>
+                    <div id="chart-dlg-input-label-int-0" style="display: inline-block;width: 60px;vertical-align: middle;"></div>
+                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-h-format-0" style="min-width:100px; vertical-align: middle;"><%= scope.textFormat %></button>
                 </td>
             </tr>
         </table>
@@ -417,8 +417,8 @@
                     <div id="chart-dlg-combo-hor-title-1" class="input-group-nr"></div>
                 </td>
                 <td class="padding-large">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textGridLines %></label>
-                    <div id="chart-dlg-combo-hor-grid-1" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textGridLines %></label>
+                    <div id="chart-dlg-combo-hor-grid-1" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
         </table>
@@ -427,7 +427,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textAxisCrosses %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" width="115">
                     <div id="chart-dlg-combo-h-crosstype-1"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -462,8 +462,8 @@
                     <div id="chart-dlg-combo-h-major-type-1" class="input-group-nr"></div>
                 </td>
                 <td class="padding-small">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textMinorType %></label>
-                    <div id="chart-dlg-combo-h-minor-type-1" class="input-group-nr" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textMinorType %></label>
+                    <div id="chart-dlg-combo-h-minor-type-1" class="input-group-nr margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -493,8 +493,8 @@
                     <div id="chart-dlg-combo-h-label-pos-1" class="input-group-nr"></div>
                 </td>
                 <td class="padding-small">
-                    <label class="input-label" style="margin-left: 15px;"><%= scope.textLabelDist %></label>
-                    <div id="chart-dlg-input-label-dist-1" style="margin-left: 15px;"></div>
+                    <label class="input-label margin-left"><%= scope.textLabelDist %></label>
+                    <div id="chart-dlg-input-label-dist-1" class="margin-left"></div>
                 </td>
             </tr>
             <tr>
@@ -506,7 +506,7 @@
                 <td width="100%" colspan="2">
                     <div id="chart-dlg-combo-label-int-1" class="input-group-nr" style="display: inline-block;width: 100px;vertical-align: middle;"></div>
                     <div id="chart-dlg-input-label-int-1" style="display: inline-block;margin-left: 3px;width: 60px;vertical-align: middle;"></div>
-                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-h-format-1" style="min-width:100px; margin-left: 5px;vertical-align: middle;float: right;"><%= scope.textFormat %></button>
+                    <button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-h-format-1" style="min-width:100px;vertical-align: middle;"><%= scope.textFormat %></button>
                 </td>
             </tr>
         </table>
@@ -518,7 +518,7 @@
             <tr>
                 <td class="padding-large">
                     <label class="header"><%= scope.textType %></label>
-                    <div id="spark-dlg-button-type" style="margin-right: 15px;"></div>
+                    <div id="spark-dlg-button-type"></div>
                 </td>
                 <td class="padding-large">
                     <label class="header"><%= scope.textStyle %></label>
@@ -537,7 +537,7 @@
             <tr>
                 <td class="padding-small" width="230">
                     <label class="input-label"><%= scope.textShowEmptyCells %></label>
-                    <div id="spark-dlg-combo-empty" class="input-group-nr" style="margin-right: 10px;"></div>
+                    <div id="spark-dlg-combo-empty" class="input-group-nr"></div>
                 </td>
                 <td></td>
             </tr>
@@ -566,7 +566,7 @@
                 <td class="padding-small" width="100">
                     <label class="input-label"><%= scope.textMinValue %></label>
                 </td>
-                <td class="padding-small" width="115" style="padding-right: 10px;">
+                <td class="padding-small padding-right" width="115">
                     <div id="spark-dlg-combo-mintype"></div>
                 </td>
                 <td class="padding-small" width="90">
@@ -577,7 +577,7 @@
                 <td class="padding-large" width="100">
                     <label class="input-label"><%= scope.textMaxValue %></label>
                 </td>
-                <td class="padding-large" width="115" style="padding-right: 10px;">
+                <td class="padding-large padding-right" width="115">
                     <div id="spark-dlg-combo-maxtype"></div>
                 </td>
                 <td class="padding-large" width="90">
diff --git a/apps/spreadsheeteditor/main/app/template/ImageSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/ImageSettingsAdvanced.template
index 9c5fb1c05..252d13ee3 100644
--- a/apps/spreadsheeteditor/main/app/template/ImageSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/ImageSettingsAdvanced.template
@@ -2,7 +2,7 @@
     <div class="inner-content  padding-large">
         <div style="width: 100%;">
             <label class="input-label"><%= scope.textAngle %></label>
-            <div id="image-advanced-spin-angle" style="display: inline-block; margin-left: 5px;"></div>
+            <div id="image-advanced-spin-angle" style="display: inline-block;"></div>
         </div>
     </div>
     <div class="separator horizontal padding-large"></div>
@@ -10,7 +10,7 @@
         <table cols="2">
             <tr>
                 <td rowspan="2" class="padding-small" style="vertical-align: top;">
-                    <label class="input-label" style="margin-right: 15px;vertical-align: top;"><%= scope.textFlipped %></label>
+                    <label class="input-label flipped" style="vertical-align: top;"><%= scope.textFlipped %></label>
                 </td>
                 <td class="padding-small">
                     <div id="image-advanced-checkbox-hor"></div>
diff --git a/apps/spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.template
index 397e41ebd..fb2079162 100644
--- a/apps/spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/ParagraphSettingsAdvanced.template
@@ -8,11 +8,11 @@
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strIndent %></label></div>
         <div>
-            <div class="padding-large" style="display: inline-block;margin-right: 3px;">
+            <div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsLeftText %></label>
                 <div id="paragraphadv-spin-indent-left"></div>
             </div><!--
-         --><div class="padding-large" style="display: inline-block;margin-right: 3px;">
+         --><div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsRightText %></label>
                 <div id="paragraphadv-spin-indent-right"></div>
             </div><!--
@@ -21,18 +21,18 @@
                     <label class="input-label"><%= scope.strIndentsSpecial %></label>
                 </div>
                 <div>
-                    <div id="paragraphadv-spin-special" style="display: inline-block;margin-right: 3px;"></div><!--
+                    <div id="paragraphadv-spin-special" class="margin-right" style="display: inline-block;"></div><!--
                  --><div id="paragraphadv-spin-special-by" style="display: inline-block;"></div>
                 </div>
             </div>
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strSpacing %></label></div>
         <div>
-            <div style="display: inline-block;margin-right: 3px;">
+            <div class="margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsSpacingBefore %></label>
                 <div id="paragraphadv-spin-spacing-before"></div>
             </div><!--
-         --><div style="display: inline-block;margin-right: 3px;">
+         --><div class="margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsSpacingAfter %></label>
                 <div id="paragraphadv-spin-spacing-after"></div>
             </div><!--
@@ -41,7 +41,7 @@
                     <label class="input-label"><%= scope.strIndentsLineSpacing %></label>
                 </div>
                 <div>
-                    <div id="paragraphadv-spin-line-rule" style="display: inline-block;margin-right: 3px;"></div><!--
+                    <div id="paragraphadv-spin-line-rule" class="margin-right" style="display: inline-block;"></div><!--
                  --><div id="paragraphadv-spin-line-height" style="display: inline-block;"></div>
                 </div>
             </div>
@@ -63,7 +63,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-strike"></div>
                 </td>
-                <td class="padding-small" style="padding-left: 40px;">
+                <td class="padding-small padding-left">
                     <div id="paragraphadv-checkbox-subscript"></div>
                 </td>
             </tr>
@@ -71,7 +71,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-double-strike"></div>
                 </td>
-                <td class="padding-small" style="padding-left: 40px;">
+                <td class="padding-small padding-left">
                     <div id="paragraphadv-checkbox-small-caps"></div>
                 </td>
             </tr>
@@ -79,7 +79,7 @@
                 <td class="padding-large">
                     <div id="paragraphadv-checkbox-superscript"></div>
                 </td>
-                <td class="padding-large" style="padding-left: 40px;">
+                <td class="padding-large padding-left">
                     <div id="paragraphadv-checkbox-all-caps"></div>
                 </td>
             </tr>
@@ -105,11 +105,11 @@
 
         </div>
         <div>
-            <div class="padding-large" style="display: inline-block; margin-right: 9px;">
+            <div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.textTabPosition %></label>
                 <div id="paraadv-spin-tab"></div>
             </div>
-            <div class="padding-large" style=" display: inline-block; margin-right: 9px;">
+            <div class="padding-large margin-right" style=" display: inline-block;">
                 <label class="input-label"><%= scope.textAlign %></label>
                 <div id="paraadv-cmb-align"></div>
             </div>
@@ -120,8 +120,8 @@
             </div>
         </div>
         <div>
-            <button type="button" class="btn btn-text-default" id="paraadv-button-add-tab" style="width:108px;margin-right: 9px; display: inline-block;"><%= scope.textSet %></button>
-            <button type="button" class="btn btn-text-default" id="paraadv-button-remove-tab" style="width:108px;margin-right: 9px; display: inline-block;"><%= scope.textRemove %></button>
+            <button type="button" class="btn btn-text-default margin-right" id="paraadv-button-add-tab" style="width:108px; display: inline-block;"><%= scope.textSet %></button>
+            <button type="button" class="btn btn-text-default margin-right" id="paraadv-button-remove-tab" style="width:108px; display: inline-block;"><%= scope.textRemove %></button>
             <button type="button" class="btn btn-text-default" id="paraadv-button-remove-all" style="width:108px;display: inline-block;"><%= scope.textRemoveAll %></button>
         </div>
     </div>
diff --git a/apps/spreadsheeteditor/main/app/template/PivotSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/PivotSettingsAdvanced.template
index f782fa415..53d6b2620 100644
--- a/apps/spreadsheeteditor/main/app/template/PivotSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/PivotSettingsAdvanced.template
@@ -42,7 +42,7 @@
                     <label id="pivot-adv-label-wrap" class="input-label"></label>
                 </td>
                 <td class="padding-large">
-                    <div id="pivot-adv-spin-wrap" style="float: right; width: 85px;"></div>
+                    <div id="pivot-adv-spin-wrap" style="width: 85px;"></div>
                 </td>
             </tr>
             <tr>
diff --git a/apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template
index b33dd3e97..81aca2a20 100644
--- a/apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template
@@ -21,7 +21,7 @@
     <div class="inner-content  padding-large">
         <div style="width: 100%;">
             <label class="input-label"><%= scope.textAngle %></label>
-            <div id="shape-advanced-spin-angle" style="display: inline-block; margin-left: 5px;"></div>
+            <div id="shape-advanced-spin-angle" style="display: inline-block;"></div>
         </div>
     </div>
     <div class="separator horizontal padding-large"></div>
@@ -29,7 +29,7 @@
         <table cols="2">
             <tr>
                 <td rowspan="2" class="padding-small" style="vertical-align: top;">
-                    <label class="input-label" style="margin-right: 15px;vertical-align: top;"><%= scope.textFlipped %></label>
+                    <label class="input-label flipped" style="vertical-align: top;"><%= scope.textFlipped %></label>
                 </td>
                 <td class="padding-small">
                     <div id="shape-advanced-checkbox-hor"></div>
diff --git a/apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template b/apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template
index 93668bc1a..a2b276810 100644
--- a/apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template
+++ b/apps/spreadsheeteditor/main/app/template/SlicerSettingsAdvanced.template
@@ -13,11 +13,11 @@
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strSize %></label></div>
         <div>
-            <div class="padding-large" style="display: inline-block; margin-right: 5px;">
+            <div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strWidth %></label>
                 <div id="sliceradv-spin-width"></div>
             </div>
-            <div id="sliceradv-button-ratio" style="display: inline-block; margin-right: 5px;"></div>
+            <div id="sliceradv-button-ratio" class="margin-right" style="display: inline-block;"></div>
             <div class="padding-large" style="display: inline-block;">
                 <label class="input-label"><%= scope.strHeight %></label>
                 <div id="sliceradv-spin-height"></div>
@@ -25,7 +25,7 @@
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strButtons %></label></div>
         <div>
-            <div style="display: inline-block; margin-right: 5px;">
+            <div class="margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strColumns %></label>
                 <div id="sliceradv-spin-columns"></div>
             </div>
diff --git a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
index eaa2ab0f4..b646af85a 100644
--- a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
+++ b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
@@ -84,4 +84,232 @@
 .preview-canvas-container {
     border: @scaled-one-px-value-ie solid @border-regular-control-ie;
     border: @scaled-one-px-value solid @border-regular-control;
+}
+
+#id-adv-shape-rotate, #id-adv-image-rotate {
+    #shape-advanced-spin-angle, #image-advanced-spin-angle {
+        margin-left: 5px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+        }
+    }
+
+    .flipped {
+        margin-right: 15px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 15px;
+        }
+    }
+}
+
+#id-chart-settings-dlg-layout {
+    .margin-right {
+        margin-right: 7px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 7px;
+        }
+    }
+
+    .margin-left {
+        margin-left: 7px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 7px;
+        }
+    }
+
+    #chart-dlg-check-series {
+        margin: 20px 0 9px 7px;
+
+        .rtl & {
+            margin: 20px 7px 9px 0;
+        }
+    }
+
+    #chart-dlg-check-category {
+        margin: 0 0 9px 7px;
+
+        .rtl & {
+            margin: 0 7px 9px 0;
+        }
+    }
+
+    #chart-dlg-check-value {
+        margin: 0 0 5px 7px;
+
+        .rtl & {
+            margin: 0 7px 5px 0;
+        }
+    }
+
+    #hart-dlg-check-markers {
+        margin: 0 0 12px 7px;
+
+        .rtl & {
+            margin: 0 7px 12px 0;
+        }
+    }
+}
+
+#id-chart-settings-dlg-vert,
+#id-chart-settings-dlg-vert-sec,
+#id-chart-settings-dlg-hor-sec,
+#id-spark-settings-dlg-axis {
+    .margin-left {
+        margin-left: 15px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 15px;
+        }
+    }
+
+    .padding-right {
+        padding-right: 10px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 10px;
+        }
+    }
+
+    .base, #chart-dlg-btn-h-format-1 {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+
+    #chart-dlg-input-base-0,
+    #chart-dlg-input-base-1,
+    #chart-dlg-btn-h-format-1 {
+        margin-left: 5px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+        }
+    }
+}
+
+#id-chart-settings-dlg-hor {
+    .margin-left {
+        margin-left: 15px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 15px;
+        }
+    }
+
+    #chart-dlg-input-label-int-0 {
+        margin-left: 3px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 3px;
+        }
+    }
+
+    #chart-dlg-btn-h-format-0 {
+        margin-left: 5px;
+        float: right;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+            float: left;
+        }
+    }
+
+    .axis-crosses-combo {
+        padding-right: 10px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 10px;
+        }
+    }
+}
+
+#id-spark-settings-dlg-style {
+    #spark-dlg-button-type {
+        margin-right: 15px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 15px;
+        }
+    }
+
+    #spark-dlg-combo-empty {
+        margin-right: 10px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 10px;
+        }
+    }
+}
+
+#id-adv-paragraph-indents {
+    .margin-right {
+        margin-right: 3px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 3px;
+        }
+    }
+}
+
+#id-adv-paragraph-font {
+    .padding-left {
+        padding-left: 40px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 40px;
+        }
+    }
+}
+
+#id-adv-paragraph-tabs {
+    .margin-right {
+        margin-right: 9px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 9px;
+        }
+    }
+}
+
+#id-adv-pivot-layout {
+    #pivot-adv-spin-wrap {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+}
+
+#id-adv-slicer-style {
+    .margin-right {
+        margin-right: 5px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
 }
\ No newline at end of file

From 8cf3b498d62fa7ffe29c89dcb0bdf06a5fe22cd3 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Thu, 3 Nov 2022 20:29:58 +0300
Subject: [PATCH 28/42] [rtl] Fix advanced settings for PE

---
 .../template/ImageSettingsAdvanced.template   |  4 +-
 .../ParagraphSettingsAdvanced.template        | 26 ++++-----
 .../template/ShapeSettingsAdvanced.template   |  4 +-
 .../resources/less/advanced-settings.less     | 54 +++++++++++++++++++
 4 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/apps/presentationeditor/main/app/template/ImageSettingsAdvanced.template b/apps/presentationeditor/main/app/template/ImageSettingsAdvanced.template
index bd32ccc50..74c05616f 100644
--- a/apps/presentationeditor/main/app/template/ImageSettingsAdvanced.template
+++ b/apps/presentationeditor/main/app/template/ImageSettingsAdvanced.template
@@ -58,7 +58,7 @@
     <div class="inner-content  padding-large">
         <div style="width: 100%;">
             <label class="input-label"><%= scope.textAngle %></label>
-            <div id="image-advanced-spin-angle" style="display: inline-block; margin-left: 5px;"></div>
+            <div id="image-advanced-spin-angle" style="display: inline-block;"></div>
         </div>
     </div>
     <div class="separator horizontal padding-large"></div>
@@ -66,7 +66,7 @@
         <table cols="2">
             <tr>
                 <td rowspan="2" class="padding-small" style="vertical-align: top;">
-                    <label class="input-label" style="margin-right: 15px;vertical-align: top;"><%= scope.textFlipped %></label>
+                    <label class="input-label flipped" style="vertical-align: top;"><%= scope.textFlipped %></label>
                 </td>
                 <td class="padding-small">
                     <div id="image-advanced-checkbox-hor"></div>
diff --git a/apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template b/apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template
index 397e41ebd..fb2079162 100644
--- a/apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template
+++ b/apps/presentationeditor/main/app/template/ParagraphSettingsAdvanced.template
@@ -8,11 +8,11 @@
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strIndent %></label></div>
         <div>
-            <div class="padding-large" style="display: inline-block;margin-right: 3px;">
+            <div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsLeftText %></label>
                 <div id="paragraphadv-spin-indent-left"></div>
             </div><!--
-         --><div class="padding-large" style="display: inline-block;margin-right: 3px;">
+         --><div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsRightText %></label>
                 <div id="paragraphadv-spin-indent-right"></div>
             </div><!--
@@ -21,18 +21,18 @@
                     <label class="input-label"><%= scope.strIndentsSpecial %></label>
                 </div>
                 <div>
-                    <div id="paragraphadv-spin-special" style="display: inline-block;margin-right: 3px;"></div><!--
+                    <div id="paragraphadv-spin-special" class="margin-right" style="display: inline-block;"></div><!--
                  --><div id="paragraphadv-spin-special-by" style="display: inline-block;"></div>
                 </div>
             </div>
         </div>
         <div class="padding-very-small"><label class="header"><%= scope.strSpacing %></label></div>
         <div>
-            <div style="display: inline-block;margin-right: 3px;">
+            <div class="margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsSpacingBefore %></label>
                 <div id="paragraphadv-spin-spacing-before"></div>
             </div><!--
-         --><div style="display: inline-block;margin-right: 3px;">
+         --><div class="margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.strIndentsSpacingAfter %></label>
                 <div id="paragraphadv-spin-spacing-after"></div>
             </div><!--
@@ -41,7 +41,7 @@
                     <label class="input-label"><%= scope.strIndentsLineSpacing %></label>
                 </div>
                 <div>
-                    <div id="paragraphadv-spin-line-rule" style="display: inline-block;margin-right: 3px;"></div><!--
+                    <div id="paragraphadv-spin-line-rule" class="margin-right" style="display: inline-block;"></div><!--
                  --><div id="paragraphadv-spin-line-height" style="display: inline-block;"></div>
                 </div>
             </div>
@@ -63,7 +63,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-strike"></div>
                 </td>
-                <td class="padding-small" style="padding-left: 40px;">
+                <td class="padding-small padding-left">
                     <div id="paragraphadv-checkbox-subscript"></div>
                 </td>
             </tr>
@@ -71,7 +71,7 @@
                 <td class="padding-small">
                     <div id="paragraphadv-checkbox-double-strike"></div>
                 </td>
-                <td class="padding-small" style="padding-left: 40px;">
+                <td class="padding-small padding-left">
                     <div id="paragraphadv-checkbox-small-caps"></div>
                 </td>
             </tr>
@@ -79,7 +79,7 @@
                 <td class="padding-large">
                     <div id="paragraphadv-checkbox-superscript"></div>
                 </td>
-                <td class="padding-large" style="padding-left: 40px;">
+                <td class="padding-large padding-left">
                     <div id="paragraphadv-checkbox-all-caps"></div>
                 </td>
             </tr>
@@ -105,11 +105,11 @@
 
         </div>
         <div>
-            <div class="padding-large" style="display: inline-block; margin-right: 9px;">
+            <div class="padding-large margin-right" style="display: inline-block;">
                 <label class="input-label"><%= scope.textTabPosition %></label>
                 <div id="paraadv-spin-tab"></div>
             </div>
-            <div class="padding-large" style=" display: inline-block; margin-right: 9px;">
+            <div class="padding-large margin-right" style=" display: inline-block;">
                 <label class="input-label"><%= scope.textAlign %></label>
                 <div id="paraadv-cmb-align"></div>
             </div>
@@ -120,8 +120,8 @@
             </div>
         </div>
         <div>
-            <button type="button" class="btn btn-text-default" id="paraadv-button-add-tab" style="width:108px;margin-right: 9px; display: inline-block;"><%= scope.textSet %></button>
-            <button type="button" class="btn btn-text-default" id="paraadv-button-remove-tab" style="width:108px;margin-right: 9px; display: inline-block;"><%= scope.textRemove %></button>
+            <button type="button" class="btn btn-text-default margin-right" id="paraadv-button-add-tab" style="width:108px; display: inline-block;"><%= scope.textSet %></button>
+            <button type="button" class="btn btn-text-default margin-right" id="paraadv-button-remove-tab" style="width:108px; display: inline-block;"><%= scope.textRemove %></button>
             <button type="button" class="btn btn-text-default" id="paraadv-button-remove-all" style="width:108px;display: inline-block;"><%= scope.textRemoveAll %></button>
         </div>
     </div>
diff --git a/apps/presentationeditor/main/app/template/ShapeSettingsAdvanced.template b/apps/presentationeditor/main/app/template/ShapeSettingsAdvanced.template
index d8da572f2..49b3bc75a 100644
--- a/apps/presentationeditor/main/app/template/ShapeSettingsAdvanced.template
+++ b/apps/presentationeditor/main/app/template/ShapeSettingsAdvanced.template
@@ -56,7 +56,7 @@
     <div class="inner-content  padding-large">
         <div style="width: 100%;">
             <label class="input-label"><%= scope.textAngle %></label>
-            <div id="shape-advanced-spin-angle" style="display: inline-block; margin-left: 5px;"></div>
+            <div id="shape-advanced-spin-angle" style="display: inline-block;"></div>
         </div>
     </div>
     <div class="separator horizontal padding-large"></div>
@@ -64,7 +64,7 @@
         <table cols="2">
             <tr>
                 <td rowspan="2" class="padding-small" style="vertical-align: top;">
-                    <label class="input-label" style="margin-right: 15px;vertical-align: top;"><%= scope.textFlipped %></label>
+                    <label class="input-label flipped" style="vertical-align: top;"><%= scope.textFlipped %></label>
                 </td>
                 <td class="padding-small">
                     <div id="shape-advanced-checkbox-hor"></div>
diff --git a/apps/presentationeditor/main/resources/less/advanced-settings.less b/apps/presentationeditor/main/resources/less/advanced-settings.less
index 7d3cf7c5f..93674bfc6 100644
--- a/apps/presentationeditor/main/resources/less/advanced-settings.less
+++ b/apps/presentationeditor/main/resources/less/advanced-settings.less
@@ -7,4 +7,58 @@
     }
 }
 
+#id-adv-shape-rotate,
+#id-adv-image-rotate {
+    #shape-advanced-spin-angle, #image-advanced-spin-angle {
+        margin-left: 5px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+        }
+    }
+
+    .flipped {
+        margin-right: 15px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 15px;
+        }
+    }
+}
+
+#id-adv-paragraph-indents {
+    .margin-right {
+        margin-right: 3px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 3px;
+        }
+    }
+}
+
+#id-adv-paragraph-font {
+    .padding-left {
+        padding-left: 40px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 40px;
+        }
+    }
+}
+
+#id-adv-paragraph-tabs {
+    .margin-right {
+        margin-right: 9px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 9px;
+        }
+    }
+}
+
 

From 79800e9db5f7913518cc381fa46ebeabc3c585f5 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Tue, 8 Nov 2022 21:54:29 +0300
Subject: [PATCH 29/42] [rtl] Fix list settings, cell styles, custom color

---
 .../lib/template/ExtendedColorDialog.template |  2 +-
 .../resources/less/extended-color-picker.less | 13 +++++
 .../main/resources/less/hsb-colorpicker.less  |  6 +++
 .../main/app/view/ListSettingsDialog.js       | 16 +++---
 apps/documenteditor/main/app/view/Toolbar.js  | 12 ++---
 .../main/resources/less/toolbar.less          | 50 +++++++++++++++++++
 .../main/resources/less/toolbar.less          |  5 ++
 7 files changed, 89 insertions(+), 15 deletions(-)

diff --git a/apps/common/main/lib/template/ExtendedColorDialog.template b/apps/common/main/lib/template/ExtendedColorDialog.template
index e7321fc99..65cda0513 100644
--- a/apps/common/main/lib/template/ExtendedColorDialog.template
+++ b/apps/common/main/lib/template/ExtendedColorDialog.template
@@ -2,7 +2,7 @@
     <div id="id-hsb-colorpicker" style="vertical-align:top;">
     </div>
     <div class="color-info" style="">
-        <div style="margin-left:15px;">
+        <div class="color-preview">
             <label class="color-label"><%= txtNew %></label>
             <div id="field-new-color" class="color-cnt top"></div>
             <div id="field-start-color" class="color-cnt bottom"></div>
diff --git a/apps/common/main/resources/less/extended-color-picker.less b/apps/common/main/resources/less/extended-color-picker.less
index 92b809b6e..e082906e1 100644
--- a/apps/common/main/resources/less/extended-color-picker.less
+++ b/apps/common/main/resources/less/extended-color-picker.less
@@ -57,6 +57,10 @@
             &:before {
                 height: 64px;
                 transform: translate(29px, -22px) rotate(73deg);
+
+                .rtl & {
+                    transform: translate(-29px, -22px) rotate(73deg);
+                }
             }
         }
     }
@@ -78,4 +82,13 @@
             }
         }
     }
+
+    .color-preview {
+        margin-left: 15px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 15px;
+        }
+    }
 }
\ No newline at end of file
diff --git a/apps/common/main/resources/less/hsb-colorpicker.less b/apps/common/main/resources/less/hsb-colorpicker.less
index 526418eec..6f9987229 100644
--- a/apps/common/main/resources/less/hsb-colorpicker.less
+++ b/apps/common/main/resources/less/hsb-colorpicker.less
@@ -82,6 +82,12 @@
         margin-left: calc(-3px - @scaled-one-px-value);
         position: absolute;
         background-position: -12px -196px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: -4px;
+            margin-right: calc(-3px - @scaled-one-px-value);
+        }
     }
 
     .empty-color {
diff --git a/apps/documenteditor/main/app/view/ListSettingsDialog.js b/apps/documenteditor/main/app/view/ListSettingsDialog.js
index debd1b0d4..1cc113b23 100644
--- a/apps/documenteditor/main/app/view/ListSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/ListSettingsDialog.js
@@ -72,11 +72,11 @@ define([
         }, options || {});
 
             this.template = [
-                '<div class="box">',
+                '<div class="box list-settings">',
                 '<% if (type == 2) { %>',
                     '<table cols="4" style="width: 100%;">',
                         '<tr>',
-                            '<td style="padding-right: 5px;">',
+                            '<td class="padding-right">',
                                 '<label class="input-label">' + this.txtType + '</label>',
                                 '<div id="id-dlg-numbering-format" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
@@ -88,7 +88,7 @@ define([
                                 '<label class="input-label">' + this.txtSize + '</label>',
                                 '<div id="id-dlg-bullet-size" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
-                            '<td style="padding-left: 5px;">',
+                            '<td class="padding-left">',
                                 '<label class="input-label">' + this.txtColor + '</label>',
                                 '<div id="id-dlg-bullet-color" style="margin-bottom: 10px;"></div>',
                             '</td>',
@@ -97,7 +97,7 @@ define([
                 '<% } else {%>',
                     '<table cols="2" style="width: 100%;">',
                         '<tr>',
-                            '<td style="padding-right: 5px;">',
+                            '<td class="padding-right">',
                                 '<% if (type == 0) { %>',
                                 '<label class="input-label">' + this.txtBullet + '</label>',
                                 '<button type="button" class="btn btn-text-default" id="id-dlg-bullet-font" style="width: 100%;margin-bottom: 10px;">' + this.txtFont + '</button>',
@@ -106,17 +106,17 @@ define([
                                 '<div id="id-dlg-numbering-format" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                                 '<% } %>',
                             '</td>',
-                            '<td style="padding-left: 5px;">',
+                            '<td class="padding-left">',
                                 '<label class="input-label">' + this.txtAlign + '</label>',
                                 '<div id="id-dlg-bullet-align" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
                         '</tr>',
                         '<tr>',
-                            '<td style="padding-right: 5px;">',
+                            '<td class="padding-right">',
                                 '<label class="input-label">' + this.txtSize + '</label>',
                                 '<div id="id-dlg-bullet-size" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
-                            '<td style="padding-left: 5px;">',
+                            '<td class="padding-left">',
                                 '<label class="input-label">' + this.txtColor + '</label>',
                                 '<div id="id-dlg-bullet-color" style="margin-bottom: 10px;"></div>',
                             '</td>',
@@ -125,7 +125,7 @@ define([
                 '<% } %>',
                 '<table cols="2" style="width: 100%;">',
                         '<tr>',
-                            '<td class="<% if (type != 2) { %> hidden <% } %>" style="width: 50px; padding-right: 10px;">',
+                            '<td class="padding-right-big <% if (type != 2) { %> hidden <% } %>" style="width: 50px;">',
                                 '<label>' + this.textLevel + '</label>',
                                 '<div id="levels-list" class="no-borders" style="width:100%; height:208px;margin-top: 2px; "></div>',
                             '</td>',
diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
index 62b029361..d73ef7729 100644
--- a/apps/documenteditor/main/app/view/Toolbar.js
+++ b/apps/documenteditor/main/app/view/Toolbar.js
@@ -2079,11 +2079,11 @@ define([
                         cls: 'shifted-left',
                         style: 'min-width: 145px',
                         items: [
-                            {template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 153px; margin: 0 0 0 9px;"></div>')},
+                            {template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 153px;"></div>')},
                             {caption: '--'},
                             this.mnuMarkerChangeLevel = new Common.UI.MenuItem({
+                                cls: 'list-level',
                                 caption: this.textChangeLevel,
-                                style: 'padding-right:20px;',
                                 disabled: (this.mnuMarkersPicker.conf.index || 0)==0,
                                 menu: new Common.UI.Menu({
                                     cls: 'list-settings-level',
@@ -2110,11 +2110,11 @@ define([
                     new Common.UI.Menu({
                         cls: 'shifted-left',
                         items: [
-                            {template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 361px; margin: 0 0 0 9px;"></div>')},
+                            {template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 361px;"></div>')},
                             {caption: '--'},
                             this.mnuNumberChangeLevel = new Common.UI.MenuItem({
+                                cls: 'list-level',
                                 caption: this.textChangeLevel,
-                                style: 'padding-right:20px;',
                                 disabled: (this.mnuNumbersPicker.conf.index || 0)==0,
                                 menu: new Common.UI.Menu({
                                     cls: 'list-settings-level',
@@ -2141,11 +2141,11 @@ define([
                         cls: 'shifted-left',
                         style: 'min-width: 177px',
                         items: [
-                            {template: _.template('<div id="id-toolbar-menu-multilevels" class="menu-markers" style="width: 362px; margin: 0 0 0 9px;"></div>')},
+                            {template: _.template('<div id="id-toolbar-menu-multilevels" class="menu-markers" style="width: 362px;"></div>')},
                             {caption: '--'},
                             this.mnuMultiChangeLevel = new Common.UI.MenuItem({
+                                cls: 'list-level',
                                 caption: this.textChangeLevel,
-                                style: 'padding-right:20px;',
                                 disabled: (this.mnuMultilevelPicker.conf.index || 0)==0,
                                 menu: new Common.UI.Menu({
                                     cls: 'list-settings-level',
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index 768d27e72..9d6fe4db8 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -217,3 +217,53 @@
         }
     }
 }
+
+#id-toolbar-btn-markers,
+#id-toolbar-btn-numbering,
+#id-toolbar-btn-multilevels {
+    .menu-markers {
+        margin: 0 0 0 9px;
+
+        .rtl & {
+            margin: 0 9px 0 0;
+        }
+    }
+
+    .list-level > a {
+        padding-right: 20px;
+
+        .rtl & {
+            padding-right: 12px;
+            padding-left: 20px;
+        }
+    }
+}
+
+.list-settings {
+    .padding-right {
+        padding-right: 5px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 5px;
+        }
+    }
+
+    .padding-left {
+        padding-left: 5px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 5px;
+        }
+    }
+
+    .padding-right-big {
+        padding-right: 10px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 10px;
+        }
+    }
+}
diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less
index 3e9be97c1..14790def0 100644
--- a/apps/spreadsheeteditor/main/resources/less/toolbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less
@@ -222,6 +222,11 @@
     .group-description {
         padding: 3px 0 3px 10px;
         .font-weight-bold();
+
+        .rtl & {
+            padding: 3px 10px 3px 0;
+            text-align: right;
+        }
     } 
     
     .group-items-container {

From f8d9a6d5e4dd774d86701977e4a0a58fcd005c49 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Wed, 9 Nov 2022 16:58:55 +0300
Subject: [PATCH 30/42] [rtl] Fix settings in dialogs for DE

---
 .../main/app/view/BookmarksDialog.js          |  13 +-
 .../main/app/view/CaptionDialog.js            |  11 +-
 .../main/app/view/CrossReferenceDialog.js     |   9 +-
 .../main/app/view/CustomColumnsDialog.js      |   5 +-
 .../main/app/view/HyperlinkSettingsDialog.js  |   5 +-
 .../main/app/view/LineNumbersDialog.js        |   5 +-
 .../main/app/view/NoteSettingsDialog.js       |   7 +-
 .../main/app/view/PageMarginsDialog.js        |  10 +-
 .../main/app/view/PageSizeDialog.js           |   2 +-
 .../main/app/view/TableOfContentsSettings.js  |  15 +-
 .../resources/less/advanced-settings.less     |   6 -
 .../main/resources/less/toolbar.less          | 226 ++++++++++++++++++
 12 files changed, 271 insertions(+), 43 deletions(-)

diff --git a/apps/documenteditor/main/app/view/BookmarksDialog.js b/apps/documenteditor/main/app/view/BookmarksDialog.js
index 1d69c9716..5a9336441 100644
--- a/apps/documenteditor/main/app/view/BookmarksDialog.js
+++ b/apps/documenteditor/main/app/view/BookmarksDialog.js
@@ -52,7 +52,8 @@ define([
         options: {
             contentWidth: 310,
             height: 366,
-            buttons: null
+            buttons: null,
+            id: 'window-bookmarks'
         },
 
         initialize : function(options) {
@@ -72,13 +73,13 @@ define([
                                     '</tr>',
                                     '<tr>',
                                         '<td class="padding-large">',
-                                            '<div id="bookmarks-txt-name" style="display:inline-block;vertical-align: top;margin-right: 10px;"></div>',
+                                            '<div id="bookmarks-txt-name" class="margin-right" style="display:inline-block;vertical-align: top;"></div>',
                                             '<button type="button" result="add" class="btn btn-text-default" id="bookmarks-btn-add" style="vertical-align: top;">', me.textAdd,'</button>',
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
                                         '<td class="padding-extra-small">',
-                                            '<label class="header" style="margin-right: 10px;">', me.textSort,'</label>',
+                                            '<label class="header margin-right">', me.textSort,'</label>',
                                             '<div id="bookmarks-radio-name"></div>',
                                             '<div id="bookmarks-radio-location"></div>',
                                         '</td>',
@@ -90,15 +91,15 @@ define([
                                     '</tr>',
                                     '<tr>',
                                         '<td class="padding-large">',
-                                            '<button type="button" class="btn btn-text-default" id="bookmarks-btn-goto" style="margin-right: 5px;">', me.textGoto,'</button>',
+                                            '<button type="button" class="btn btn-text-default" id="bookmarks-btn-goto">', me.textGoto,'</button>',
                                             '<div style="display: inline-block; position: relative;">',
                                                 '<button type="button" class="btn btn-text-default auto dropdown-toggle move-focus" id="bookmarks-btn-link" style="min-width: 75px;" data-toggle="dropdown">', me.textGetLink,'</button>',
                                                 '<div id="id-clip-copy-box" class="dropdown-menu" style="width: 291px; left: -80px; padding: 10px;">',
                                                     '<div id="id-dlg-clip-copy"></div>',
-                                                    '<button id="id-dlg-copy-btn" class="btn btn-text-default" style="margin-left: 5px; width: 86px;">' + me.textCopy + '</button>',
+                                                    '<button id="id-dlg-copy-btn" class="btn btn-text-default" style="width: 86px;">' + me.textCopy + '</button>',
                                                 '</div>',
                                             '</div>',
-                                            '<button type="button" class="btn btn-text-default" id="bookmarks-btn-delete" style="float: right;">', me.textDelete,'</button>',
+                                            '<button type="button" class="btn btn-text-default" id="bookmarks-btn-delete">', me.textDelete,'</button>',
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
diff --git a/apps/documenteditor/main/app/view/CaptionDialog.js b/apps/documenteditor/main/app/view/CaptionDialog.js
index ca5c85884..c7eae492b 100644
--- a/apps/documenteditor/main/app/view/CaptionDialog.js
+++ b/apps/documenteditor/main/app/view/CaptionDialog.js
@@ -49,7 +49,8 @@ define([
     DE.Views.CaptionDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 351,
-            height: 350
+            height: 350,
+            id: 'window-caption'
         },
 
         initialize : function(options) {
@@ -65,7 +66,7 @@ define([
                                     '<tr>',
                                         '<td colspan="3" class="padding-small">',
                                             '<label class="input-label">', me.textCaption,'</label>',
-                                            '<div id="caption-txt-caption" style="margin-right: 10px;"></div>',
+                                            '<div id="caption-txt-caption" class="margin-right"></div>',
                                         '</td>',
                                         '<td class="padding-small">',
                                             '<label class="input-label">', me.textInsert,'</label>',
@@ -75,10 +76,10 @@ define([
                                     '<tr>',
                                         '<td colspan="2" class="padding-small">',
                                             '<label class="input-label">', me.textLabel,'</label>',
-                                            '<div id="caption-combo-label" class="input-group-nr" style="width:160px;margin-right: 10px;"></div>',
+                                            '<div id="caption-combo-label" class="input-group-nr margin-right" style="width:160px;"></div>',
                                         '</td>',
                                         '<td class="padding-small" style="vertical-align: bottom;">',
-                                            '<button type="button" result="add" class="btn btn-text-default" id="caption-btn-add" style="margin-right: 10px;">', me.textAdd,'</button>',
+                                            '<button type="button" result="add" class="btn btn-text-default margin-right" id="caption-btn-add">', me.textAdd,'</button>',
                                         '</td>',
                                         '<td class="padding-small" style="vertical-align: bottom;">',
                                             '<button type="button" result="add" class="btn btn-text-default" id="caption-btn-delete">', me.textDelete,'</button>',
@@ -107,7 +108,7 @@ define([
                                     '<tr>',
                                         '<td colspan="2" class="padding-small">',
                                             '<label class="input-label">', me.textChapter,'</label>',
-                                            '<div id="caption-combo-chapter" class="input-group-nr" style="width:160px;margin-right: 10px;"></div>',
+                                            '<div id="caption-combo-chapter" class="input-group-nr margin-right" style="width:160px;"></div>',
                                         '</td>',
                                         '<td colspan="2" class="padding-small">',
                                             '<label class="input-label" >', me.textSeparator,'</label>',
diff --git a/apps/documenteditor/main/app/view/CrossReferenceDialog.js b/apps/documenteditor/main/app/view/CrossReferenceDialog.js
index fa8174f5c..bf58e6bc8 100644
--- a/apps/documenteditor/main/app/view/CrossReferenceDialog.js
+++ b/apps/documenteditor/main/app/view/CrossReferenceDialog.js
@@ -49,7 +49,8 @@ define([
             height: 410,
             style: 'min-width: 240px;',
             cls: 'modal-dlg',
-            modal: false
+            modal: false,
+            id: 'window-cross-ref'
         },
 
         initialize : function(options) {
@@ -62,11 +63,11 @@ define([
                 '<div class="box">',
                     '<table cols="2" style="width: 100%;">',
                         '<tr>',
-                            '<td style="padding-right: 5px;">',
+                            '<td class="padding-right">',
                                 '<label class="input-label">' + this.txtType + '</label>',
                                 '<div id="id-dlg-cross-type" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
-                            '<td style="padding-left: 5px;">',
+                            '<td class="padding-left">',
                                 '<label class="input-label">' + this.txtReference + '</label>',
                                 '<div id="id-dlg-cross-ref" class="input-group-nr" style="width: 100%;margin-bottom: 10px;"></div>',
                             '</td>',
@@ -83,7 +84,7 @@ define([
                         '</tr>',
                         '<tr>',
                             '<td colspan="2" style="padding-bottom: 10px;">',
-                                '<div id="id-dlg-cross-separate" style="display: inline-block;vertical-align: middle;margin-right: 10px;"></div>',
+                                '<div id="id-dlg-cross-separate" style="display: inline-block;vertical-align: middle;"></div>',
                                 '<div id="id-dlg-cross-separator" style="display: inline-block;vertical-align: middle;"></div>',
                             '</td>',
                         '</tr>',
diff --git a/apps/documenteditor/main/app/view/CustomColumnsDialog.js b/apps/documenteditor/main/app/view/CustomColumnsDialog.js
index 8e9eacafb..f37e99785 100644
--- a/apps/documenteditor/main/app/view/CustomColumnsDialog.js
+++ b/apps/documenteditor/main/app/view/CustomColumnsDialog.js
@@ -50,6 +50,7 @@ define([
             header: true,
             style: 'min-width: 216px;',
             cls: 'modal-dlg',
+            id: 'window-custom-columns',
             buttons: ['ok', 'cancel']
         },
 
@@ -61,10 +62,10 @@ define([
             this.template = [
                 '<div class="box" style="height: 90px;">',
                     '<div class="input-row" style="margin: 10px 0;">',
-                        '<label class="input-label">' + this.textColumns + '</label><div id="custom-columns-spin-num" style="float: right;"></div>',
+                        '<label class="input-label">' + this.textColumns + '</label><div id="custom-columns-spin-num"></div>',
                     '</div>',
                     '<div class="input-row" style="margin: 10px 0;">',
-                        '<label class="input-label">' + this.textSpacing + '</label><div id="custom-columns-spin-spacing" style="float: right;"></div>',
+                        '<label class="input-label">' + this.textSpacing + '</label><div id="custom-columns-spin-spacing"></div>',
                     '</div>',
                     '<div class="input-row" style="margin: 10px 0;">',
                         '<div id="custom-columns-separator"></div>',
diff --git a/apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js b/apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js
index 9fc36273c..19f53afaf 100644
--- a/apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/HyperlinkSettingsDialog.js
@@ -58,6 +58,7 @@ define([
             width: 350,
             style: 'min-width: 230px;',
             cls: 'modal-dlg',
+            id: 'window-hyperlink',
             buttons: ['ok', 'cancel']
         },
 
@@ -69,8 +70,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.textExternal,'</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.textInternal,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-external">', this.textExternal,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-hyperlink-internal">', this.textInternal,'</button>',
                     '</div>',
                     '<div id="id-external-link">',
                         '<div class="input-row">',
diff --git a/apps/documenteditor/main/app/view/LineNumbersDialog.js b/apps/documenteditor/main/app/view/LineNumbersDialog.js
index 4183e5dff..3bf4471a7 100644
--- a/apps/documenteditor/main/app/view/LineNumbersDialog.js
+++ b/apps/documenteditor/main/app/view/LineNumbersDialog.js
@@ -51,6 +51,7 @@ define([
             header: true,
             style: 'min-width: 290px;',
             cls: 'modal-dlg',
+            id: 'window-line-numbers',
             buttons: ['ok', 'cancel']
         },
 
@@ -63,8 +64,8 @@ define([
                 '<div class="box" style="">',
                 '<div id="line-numbers-add-line-numbering" style="margin-bottom: 15px;"></div>',
                 '<div style="margin-bottom: 15px;">',
-                    '<div style="display: inline-block; margin-right: 9px;"><label>' + this.textStartAt + '</label><div id="line-numbers-start-at"></div></div>',
-                    '<div style="display: inline-block; margin-right: 9px;"><label>' + this.textFromText + '</label><div id="line-numbers-from-text"></div></div>',
+                    '<div class="margin-right" style="display: inline-block;"><label>' + this.textStartAt + '</label><div id="line-numbers-start-at"></div></div>',
+                    '<div class="margin-right" style="display: inline-block;"><label>' + this.textFromText + '</label><div id="line-numbers-from-text"></div></div>',
                     '<div style="display: inline-block;"><label>' + this.textCountBy + '</label><div id="line-numbers-count-by"></div></div>',
                 '</div>',
                 '<div style="margin-bottom: 8px;"><label>' + this.textNumbering + '</label></div>',
diff --git a/apps/documenteditor/main/app/view/NoteSettingsDialog.js b/apps/documenteditor/main/app/view/NoteSettingsDialog.js
index 72d518d72..fe2c7426c 100644
--- a/apps/documenteditor/main/app/view/NoteSettingsDialog.js
+++ b/apps/documenteditor/main/app/view/NoteSettingsDialog.js
@@ -50,6 +50,7 @@ define([
         options: {
             contentWidth: 300,
             height: 395,
+            id: 'window-note-settings',
             buttons: null
         },
 
@@ -71,13 +72,13 @@ define([
                                     '<tr>',
                                         '<td class="padding-small">',
                                             '<div id="note-settings-radio-foot" style="margin-top: 4px;display: inline-block"></div>',
-                                            '<div id="note-settings-combo-footnote" class="input-group-nr" style="display: inline-block; width:150px;float:right;"></div>',
+                                            '<div id="note-settings-combo-footnote" class="input-group-nr" style="display: inline-block; width:150px;"></div>',
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
                                         '<td class="padding-large">',
                                             '<div id="note-settings-radio-end" style="margin-top: 4px;display: inline-block"></div>',
-                                            '<div id="note-settings-combo-endnote" class="input-group-nr" style="display: inline-block; width:150px;float:right;"></div>',
+                                            '<div id="note-settings-combo-endnote" class="input-group-nr" style="display: inline-block; width:150px;"></div>',
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
@@ -87,7 +88,7 @@ define([
                                     '</tr>',
                                     '<tr>',
                                         '<td class="padding-small">',
-                                            '<div style="display: inline-block; margin-right: 10px; vertical-align: middle;">',
+                                            '<div class="margin-right" style="display: inline-block; vertical-align: middle;">',
                                                 '<label class="input-label">', me.textNumFormat,'</label>',
                                                 '<div id="note-settings-combo-format" class="input-group-nr" style="width:150px;"></div>',
                                             '</div>','<div style="display: inline-block; vertical-align: middle;">',
diff --git a/apps/documenteditor/main/app/view/PageMarginsDialog.js b/apps/documenteditor/main/app/view/PageMarginsDialog.js
index 9a65bdb86..6fa5cd983 100644
--- a/apps/documenteditor/main/app/view/PageMarginsDialog.js
+++ b/apps/documenteditor/main/app/view/PageMarginsDialog.js
@@ -60,14 +60,14 @@ define([
 
             this.template = [
                 '<div class="box" style="height: 245px;">',
-                    '<div style="float: left;">',
+                    '<div class="margins-settings">',
                         '<label style="font-weight: bold;">' + this.textTitle + '</label>',
                         '<div style="margin-top: 2px;">',
                             '<div style="display: inline-block;">',
                                 '<label class="input-label">' + this.textTop + '</label>',
                                 '<div id="page-margins-spin-top"></div>',
                             '</div>',
-                            '<div style="display: inline-block; margin-left: 8px;">',
+                            '<div class="margin-left" style="display: inline-block;">',
                                 '<label class="input-label">' + this.textBottom + '</label>',
                                 '<div id="page-margins-spin-bottom"></div>',
                             '</div>',
@@ -77,7 +77,7 @@ define([
                                 '<label class="input-label" id="margin-left-label">' + this.textLeft + '</label>',
                                 '<div id="page-margins-spin-left"></div>',
                             '</div>',
-                            '<div style="display: inline-block; margin-left: 8px;">',
+                            '<div class="margin-left" style="display: inline-block;">',
                                 '<label class="input-label" id="margin-right-label">' + this.textRight + '</label>',
                                 '<div id="page-margins-spin-right"></div>',
                             '</div>',
@@ -86,7 +86,7 @@ define([
                             '<label style="font-weight: bold;">' + this.textGutterPosition + '</label>',
                             '<div>',
                                 '<div style="display: inline-block;" id="page-margins-spin-gutter"></div>',
-                                '<div style="display: inline-block; margin-left: 8px;" id="page-margins-spin-gutter-position"></div>',
+                                '<div style="display: inline-block;" id="page-margins-spin-gutter-position" class="margin-left"></div>',
                             '</div>',
                         '</div>',
                         '<div style="margin-top: 10px;">',
@@ -98,7 +98,7 @@ define([
                             '<div id="page-margins-cmb-multiple-pages"></div>',
                         '</div>',
                     '</div>',
-                    '<div style="float: right;">',
+                    '<div class="margins-preview">',
                         '<label style="font-weight: bold;">' + this.textPreview + '</label>',
                         '<div id="page-margins-preview" style="margin-top: 2px; height: 120px; width: 162px;"></div>',
                     '</div>',
diff --git a/apps/documenteditor/main/app/view/PageSizeDialog.js b/apps/documenteditor/main/app/view/PageSizeDialog.js
index 44655c846..ef66d699b 100644
--- a/apps/documenteditor/main/app/view/PageSizeDialog.js
+++ b/apps/documenteditor/main/app/view/PageSizeDialog.js
@@ -68,7 +68,7 @@ define([
                             '</td>',
                         '</tr>',
                         '<tr>',
-                            '<td style="padding-right: 10px;">',
+                            '<td class="padding-right">',
                                 '<label class="input-label">' + this.textWidth + '</label>',
                                 '<div id="page-size-spin-width"></div>',
                             '</td>',
diff --git a/apps/documenteditor/main/app/view/TableOfContentsSettings.js b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
index a417d0e7c..fd7887fea 100644
--- a/apps/documenteditor/main/app/view/TableOfContentsSettings.js
+++ b/apps/documenteditor/main/app/view/TableOfContentsSettings.js
@@ -49,7 +49,8 @@ define([
     DE.Views.TableOfContentsSettings = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 500,
-            height: 455
+            height: 455,
+            id: 'window-table-contents'
         },
 
         initialize : function(options) {
@@ -69,7 +70,7 @@ define([
                                         '<div id="tableofcontents-chb-pages"></div>',
                                         '</td>',
                                         '<td rowspan="5" class="padding-small" style="vertical-align: top;">',
-                                        '<div class="canvas-box" style="width: 240px; height: 182px; float: right;position:relative;overflow:hidden;">',
+                                        '<div class="canvas-box" style="width: 240px; height: 182px; position:relative; overflow:hidden;">',
                                             '<div id="tableofcontents-img" style="width: 230px; height: 100%;"></div>',
                                         '</div>',
                                         '</td>',
@@ -82,7 +83,7 @@ define([
                                     '<tr>',
                                         '<td class="padding-large">',
                                             '<label class="input-label">' + me.textLeader + '</label>',
-                                            '<div id="tableofcontents-combo-leader" class="input-group-nr" style="display: inline-block; width:95px; margin-left: 10px;"></div>',
+                                            '<div id="tableofcontents-combo-leader" class="input-group-nr margin-left" style="display: inline-block; width:95px;"></div>',
                                         '</td>',
                                     '</tr>',
                                     '<tr>',
@@ -116,11 +117,11 @@ define([
                                         '<% } else { %>',
                                             '<div id="tableofcontents-from-levels" style="width:220px;">',
                                                 '<label class="input-label">' + me.textLevels + '</label>',
-                                                '<div id="tableofcontents-spin-levels" style="display: inline-block; width:95px; margin-left: 10px;"></div>',
+                                                '<div id="tableofcontents-spin-levels" class="margin-left" style="display: inline-block; width:95px;"></div>',
                                             '</div>',
                                             '<div id="tableofcontents-from-styles" class="hidden">',
                                                 '<table><tr><td style="height: 25px;">',
-                                                        '<label class="input-label" style="width: 144px; margin-left: 23px;">' + me.textStyle + '</label>',
+                                                        '<label class="input-label label-style" style="width: 144px;">' + me.textStyle + '</label>',
                                                         '<label class="input-label" style="">' + me.textLevel + '</label>',
                                                     '</td></tr>',
                                                     '<tr><td>',
@@ -130,8 +131,8 @@ define([
                                         '<% } %>',
                                         '</td>',
                                         '<td class="padding-small" style="vertical-align: top;">',
-                                            '<label class="input-label" style="margin-left: 10px;">' + me.textStyles + '</label>',
-                                            '<div id="tableofcontents-combo-styles" class="input-group-nr" style="display: inline-block; width:95px; margin-left: 10px;"></div>',
+                                            '<label class="input-label margin-left">' + me.textStyles + '</label>',
+                                            '<div id="tableofcontents-combo-styles" class="input-group-nr margin-left" style="display: inline-block; width:95px;"></div>',
                                         '</td>',
                                     '</tr>',
                                 '</table>',
diff --git a/apps/documenteditor/main/resources/less/advanced-settings.less b/apps/documenteditor/main/resources/less/advanced-settings.less
index f937fc767..bc4a1fa99 100644
--- a/apps/documenteditor/main/resources/less/advanced-settings.less
+++ b/apps/documenteditor/main/resources/less/advanced-settings.less
@@ -63,12 +63,6 @@
     }
 }
 
-#bookmarks-radio-name {
-    display: inline-block;
-    margin-right: 10px;
-    vertical-align: middle;
-}
-
 #id-text-table-spn-fixed, #bookmarks-radio-location {
     display: inline-block;
     vertical-align: middle;
diff --git a/apps/documenteditor/main/resources/less/toolbar.less b/apps/documenteditor/main/resources/less/toolbar.less
index 9d6fe4db8..d7e949d6a 100644
--- a/apps/documenteditor/main/resources/less/toolbar.less
+++ b/apps/documenteditor/main/resources/less/toolbar.less
@@ -267,3 +267,229 @@
         }
     }
 }
+
+#window-page-margins {
+    .margins-settings {
+        float: left;
+
+        .rtl & {
+            float: right;
+        }
+    }
+
+    .margins-preview {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+
+    .margin-left {
+        margin-left: 8px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 8px;
+        }
+    }
+}
+
+#window-page-size {
+    .padding-right {
+        padding-right: 10px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 10px;
+        }
+    }
+}
+
+#window-line-numbers {
+    .margin-right {
+        margin-right: 9px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 9px;
+        }
+    }
+}
+
+#window-custom-columns {
+    #custom-columns-spin-num, #custom-columns-spin-spacing {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+}
+
+#window-note-settings {
+    #note-settings-combo-footnote,
+    #note-settings-combo-endnote {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+
+    .margin-right {
+        margin-right: 10px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 10px;
+        }
+    }
+}
+
+#window-table-contents {
+    .canvas-box {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+
+    .margin-left {
+        margin-left: 10px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 10px;
+        }
+    }
+
+    .label-style {
+        margin-left: 23px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 23px;
+        }
+    }
+}
+
+#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;
+        }
+    }
+}
+
+#window-bookmarks {
+    .margin-right {
+        margin-right: 10px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 10px;
+        }
+    }
+
+    #bookmarks-btn-goto {
+        margin-right: 5px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
+
+    #id-dlg-copy-btn {
+        margin-left: 5px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 5px;
+        }
+    }
+
+    #bookmarks-btn-delete {
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+    }
+
+    #bookmarks-radio-name {
+        display: inline-block;
+        margin-right: 10px;
+        vertical-align: middle;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 10px;
+        }
+    }
+}
+
+#window-caption {
+    .margin-right {
+        margin-right: 10px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 10px;
+        }
+    }
+}
+
+#window-cross-ref {
+    .padding-right {
+        padding-right: 5px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 5px;
+        }
+    }
+
+    .padding-left {
+        padding-left: 5px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 5px;
+        }
+    }
+
+    #id-dlg-cross-separate {
+        margin-right: 10px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 10px;
+        }
+    }
+}

From 8ee178e56c00505e862e2892caeb1b9837c54044 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Tue, 15 Nov 2022 17:54:32 +0300
Subject: [PATCH 31/42] [rtl] Fix settings in header/footer dialog, chart type
 dialog, chart data range dialog, dialogs and menu from toolbar for SSE

---
 apps/common/main/resources/less/toolbar.less  |  18 +++
 .../main/app/view/ChartDataDialog.js          |  15 +-
 .../main/app/view/ChartDataRangeDialog.js     |   6 +-
 .../main/app/view/ChartTypeDialog.js          |   8 +-
 .../main/app/view/HeaderFooterDialog.js       |  43 +++---
 .../main/app/view/Toolbar.js                  |  14 +-
 .../resources/less/advanced-settings.less     | 134 ++++++++++++++++++
 .../main/resources/less/toolbar.less          |  73 ++++++++++
 8 files changed, 269 insertions(+), 42 deletions(-)

diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 10bb87fbd..70a59ebc3 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -884,8 +884,22 @@
 .menu-iconsets {
     margin: 5px 5px 0 10px;
 
+    .rtl & {
+        margin: 5px 10px 0 5px;
+    }
+
+    .group-description {
+        text-align: right;
+    }
+
     .group-items-container > div {
         margin-right: 8px !important;
+
+        .rtl & {
+            margin-right: 4px !important;
+            margin-left: 8px !important;
+        }
+
         &:not(:hover),
         &:not(.selected) {
             .box-shadow(none);
@@ -894,6 +908,10 @@
     .item-iconset {
         img {
             margin: 2px;
+
+            .rtl & {
+                float: right;
+            }
         }
 
         width: 100px;
diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js
index 98e599c10..400376053 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartDataDialog.js
@@ -50,7 +50,8 @@ define([
     SSE.Views.ChartDataDialog = Common.Views.AdvancedSettingsWindow.extend(_.extend({
         options: {
             contentWidth: 370,
-            height: 490
+            height: 490,
+            id: 'window-chart-data'
         },
 
         initialize : function(options) {
@@ -81,12 +82,12 @@ define([
                                 '</tr>',
                                 '<tr>',
                                     '<td class="padding-large">',
-                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-add" style="min-width: 70px;margin-right:5px;">', me.textAdd, '</button>',
-                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-edit" style="min-width: 70px;margin-right:5px;">', me.textEdit, '</button>',
-                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-delete" style="min-width: 70px;margin-right:5px;">', me.textDelete, '</button>',
-                                        '<div style="display: inline-block; float: right;">',
-                                        '<div id="chart-dlg-btn-up" style="display: inline-block;margin-right: 2px;"></div>',
-                                        '<div id="chart-dlg-btn-down" style="display: inline-block;"></div>',
+                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-add">', me.textAdd, '</button>',
+                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-edit">', me.textEdit, '</button>',
+                                        '<button type="button" class="btn btn-text-default auto" id="chart-dlg-btn-delete">', me.textDelete, '</button>',
+                                        '<div class="up-down-btns">',
+                                        '<div id="chart-dlg-btn-up"></div>',
+                                        '<div id="chart-dlg-btn-down"></div>',
                                         '</div>',
                                     '</td>',
                                 '</tr>',
diff --git a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js
index 8bf492c6c..204b48c45 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartDataRangeDialog.js
@@ -76,7 +76,7 @@ define([
                         '<div id="id-dlg-chart-range-range1"></div>',
                     '</td>',
                     '<td style="padding-bottom: 8px;">',
-                        '<label id="id-dlg-chart-range-lbl1" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 5px;margin-top: 4px;">' + this.txtChoose + '</label>',
+                        '<label id="id-dlg-chart-range-lbl1" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px;">' + this.txtChoose + '</label>',
                     '</td>',
                 '</tr>',
                 '<% if (type==1) { %>',
@@ -90,7 +90,7 @@ define([
                         '<div id="id-dlg-chart-range-range2"></div>',
                     '</td>',
                     '<td style="padding-bottom: 8px;">',
-                        '<label id="id-dlg-chart-range-lbl2" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 5px;margin-top: 4px;"></label>',
+                        '<label id="id-dlg-chart-range-lbl2" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px;"></label>',
                     '</td>',
                 '</tr>',
                 '<% if (isScatter) { %>',
@@ -104,7 +104,7 @@ define([
                         '<div id="id-dlg-chart-range-range3"></div>',
                     '</td>',
                     '<td style="padding-bottom: 8px;">',
-                        '<label id="id-dlg-chart-range-lbl3" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 5px;margin-top: 4px;"></label>',
+                        '<label id="id-dlg-chart-range-lbl3" style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px;"></label>',
                     '</td>',
                 '</tr>',
                 '<% } %>',
diff --git a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
index 13a6a14e8..7083d0b12 100644
--- a/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ChartTypeDialog.js
@@ -197,10 +197,10 @@ define([
                 template: _.template(['<div class="listview inner" style=""></div>'].join('')),
                 itemTemplate: _.template([
                     '<div class="list-item" style="width: 100%;" id="chart-type-dlg-item-<%= seriesIndex %>">',
-                        '<div style="width:8px;height:12px;display: inline-block;vertical-align: middle;" id="chart-type-dlg-series-preview-<%= seriesIndex %>"></div>',
-                        '<div style="width:95px;padding-left: 5px;display: inline-block;vertical-align: middle;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;"><%= value %></div>',
-                        '<div style="width: 110px;padding-left: 5px;display: inline-block;vertical-align: middle;"><div id="chart-type-dlg-cmb-series-<%= seriesIndex %>" class="input-group-nr" style=""></div></div>',
-                        '<div style="padding-left: 55px;display: inline-block;vertical-align: middle;"><div id="chart-type-dlg-chk-series-<%= seriesIndex %>" style=""></div></div>',
+                        '<div class="series-color" id="chart-type-dlg-series-preview-<%= seriesIndex %>"></div>',
+                        '<div class="series-value"><%= value %></div>',
+                        '<div class="series-cmb"><div id="chart-type-dlg-cmb-series-<%= seriesIndex %>" class="input-group-nr" style=""></div></div>',
+                        '<div class="series-chk"><div id="chart-type-dlg-chk-series-<%= seriesIndex %>" style=""></div></div>',
                     '</div>'
                 ].join(''))
             });
diff --git a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
index 711839b95..d082600cc 100644
--- a/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/HeaderFooterDialog.js
@@ -52,7 +52,8 @@ define([
             style: 'min-width: 350px;',
             cls: 'modal-dlg enable-key-events',
             animate: {mask: false},
-            buttons: ['ok', 'cancel']
+            buttons: ['ok', 'cancel'],
+            id: 'window-header-footer'
         },
 
         initialize : function(options) {
@@ -103,24 +104,24 @@ define([
                     '<div class="input-row input-row--tabs" style="margin-bottom: 15px;">',
                         '<button type="button" class="btn btn-text-default auto" id="id-dlg-hf-btn-all" style="border-radius: 0;">', this.textAll,'</button>',
                         '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-odd" style="border-radius: 0;">', this.textOdd,'</button>',
-                        '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-even" style="border-radius: 0; margin-left:-1px;">', this.textEven,'</button>',
-                        '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-first" style="border-radius: 0; margin-left:-1px;">', this.textFirst,'</button>',
+                        '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-even" style="border-radius: 0;">', this.textEven,'</button>',
+                        '<button type="button" class="btn btn-text-default auto hidden" id="id-dlg-hf-btn-first" style="border-radius: 0;">', this.textFirst,'</button>',
                     '</div>',
                     '<label style="display: block; margin-bottom: 3px;">' + this.textHeader + '</label>',
                     '<div id="id-dlg-h-presets" class="input-row" style="display: inline-block; vertical-align: middle;"></div>',
-                    '<div id="id-dlg-h-insert" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
-                    '<div id="id-dlg-h-fonts" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
-                    '<div id="id-dlg-h-font-size" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
-                    '<div id="id-dlg-h-textcolor" style="display: inline-block;margin-left: 6px;"></div>',
-                    '<div id="id-dlg-h-bold" style="display: inline-block;margin-left: 2px;"></div>','<div id="id-dlg-h-italic" style="display: inline-block;margin-left: 6px;"></div>',
-                    '<div id="id-dlg-h-underline" style="display: inline-block;margin-left: 6px;"></div>','<div id="id-dlg-h-strikeout" style="display: inline-block;margin-left: 6px;"></div>',
-                    '<div id="id-dlg-h-subscript" style="display: inline-block;margin-left: 6px;"></div>','<div id="id-dlg-h-superscript" style="display: inline-block;margin-left: 6px;"></div>',
-                        '<div style="display: inline-block;margin-right: -1px;margin-top: 7px;vertical-align: middle;">',
+                    '<div id="id-dlg-h-insert" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
+                    '<div id="id-dlg-h-fonts" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
+                    '<div id="id-dlg-h-font-size" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
+                    '<div id="id-dlg-h-textcolor" class="margin-left-big" style="display: inline-block;"></div>',
+                    '<div id="id-dlg-h-bold" class="margin-left-small" style="display: inline-block;"></div>','<div id="id-dlg-h-italic" class="margin-left-big" style="display: inline-block;"></div>',
+                    '<div id="id-dlg-h-underline" class="margin-left-big" style="display: inline-block;"></div>','<div id="id-dlg-h-strikeout" class="margin-left-big" style="display: inline-block;"></div>',
+                    '<div id="id-dlg-h-subscript" class="margin-left-big" style="display: inline-block;"></div>','<div id="id-dlg-h-superscript" class="margin-left-big" style="display: inline-block;"></div>',
+                        '<div class="preview-container" style="display: inline-block;margin-top: 7px;vertical-align: middle;">',
                             '<div class="preview-canvas-container" style="width: 206px; height: 92px; position:relative; overflow:hidden;">',
                                 '<div id="header-left-img" style="width: 190px; height: 100%;"></div>',
                             '</div>',
                         '</div>',
-                        '<div style="display: inline-block;margin-right: -1px;margin-top: 7px;vertical-align: middle;">',
+                        '<div class="preview-container" style="display: inline-block;margin-top: 7px;vertical-align: middle;">',
                             '<div class="preview-canvas-container" style="width: 206px; height: 92px; position:relative; overflow:hidden;">',
                                 '<div id="header-center-img" style="width: 190px; height: 100%;"></div>',
                             '</div>',
@@ -132,19 +133,19 @@ define([
                         '</div>',
                     '<label style="display: block; margin-top: 10px;margin-bottom: 3px;">' + this.textFooter + '</label>',
                     '<div id="id-dlg-f-presets" class="input-row" style="display: inline-block; vertical-align: middle;"></div>',
-                    '<div id="id-dlg-f-insert" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
-                    '<div id="id-dlg-f-fonts" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
-                    '<div id="id-dlg-f-font-size" class="input-row" style="display: inline-block; vertical-align: middle; margin-left: 2px;"></div>',
-                    '<div id="id-dlg-f-textcolor" style="display: inline-block;margin-left: 6px;"></div>',
-                    '<div id="id-dlg-f-bold" style="display: inline-block;margin-left: 2px;"></div>','<div id="id-dlg-f-italic" style="display: inline-block;margin-left: 6px;"></div>',
-                    '<div id="id-dlg-f-underline" style="display: inline-block;margin-left: 6px;"></div>','<div id="id-dlg-f-strikeout" style="display: inline-block;margin-left: 6px;"></div>',
-                    '<div id="id-dlg-f-subscript" style="display: inline-block;margin-left: 6px;"></div>','<div id="id-dlg-f-superscript" style="display: inline-block;margin-left: 6px;"></div>',
-                        '<div style="display: inline-block;margin-right: -1px;margin-top: 7px;vertical-align: middle;">',
+                    '<div id="id-dlg-f-insert" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
+                    '<div id="id-dlg-f-fonts" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
+                    '<div id="id-dlg-f-font-size" class="input-row margin-left-small" style="display: inline-block; vertical-align: middle;"></div>',
+                    '<div id="id-dlg-f-textcolor" class="margin-left-big" style="display: inline-block;"></div>',
+                    '<div id="id-dlg-f-bold" class="margin-left-small" style="display: inline-block;"></div>','<div id="id-dlg-f-italic" class="margin-left-big" style="display: inline-block;"></div>',
+                    '<div id="id-dlg-f-underline" class="margin-left-big" style="display: inline-block;"></div>','<div class="margin-left-big" id="id-dlg-f-strikeout" style="display: inline-block;"></div>',
+                    '<div id="id-dlg-f-subscript" class="margin-left-big" style="display: inline-block;"></div>','<div id="id-dlg-f-superscript" class="margin-left-big" style="display: inline-block;"></div>',
+                        '<div class="preview-container" style="display: inline-block;margin-top: 7px;vertical-align: middle;">',
                             '<div class="preview-canvas-container" style="width: 206px; height: 92px; position:relative; overflow:hidden;">',
                                 '<div id="footer-left-img" style="width: 190px; height: 100%;"></div>',
                             '</div>',
                         '</div>',
-                        '<div style="display: inline-block;margin-right: -1px;margin-top: 7px;vertical-align: middle;">',
+                        '<div class="preview-container" style="display: inline-block;margin-top: 7px;vertical-align: middle;">',
                             '<div class="preview-canvas-container" style="width: 206px; height: 92px; position:relative; overflow:hidden;">',
                                 '<div id="footer-center-img" style="width: 190px; height: 100%;"></div>',
                             '</div>',
diff --git a/apps/spreadsheeteditor/main/app/view/Toolbar.js b/apps/spreadsheeteditor/main/app/view/Toolbar.js
index b6b777cf4..d8e34e79b 100644
--- a/apps/spreadsheeteditor/main/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Toolbar.js
@@ -269,8 +269,8 @@ define([
                         _.template([
                             '<% _.each(items, function(item) { %>',
                             '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
-                            '<div style="position: relative;"><div style="position: absolute; left: 0; width: 100px;"><%= scope.getDisplayValue(item) %></div>',
-                            '<div style="display: inline-block; width: 100%; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-align: right; vertical-align: bottom; padding-left: 100px; color: silver;white-space: nowrap;"><%= item.exampleval ? item.exampleval : "" %></div>',
+                            '<div style="position: relative;"><div class="display-value"><%= scope.getDisplayValue(item) %></div>',
+                            '<div class="example-val"><%= item.exampleval ? item.exampleval : "" %></div>',
                             '</div></a></li>',
                             '<% }); %>',
                             '<li class="divider">',
@@ -1381,8 +1381,8 @@ define([
                     _.template([
                         '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">',
-                        '<div style="position: relative;"><div style="position: absolute; left: 0; width: 100px;"><%= scope.getDisplayValue(item) %></div>',
-                        '<div style="display: inline-block; width: 100%; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-align: right; vertical-align: bottom; padding-left: 100px; color: silver;white-space: nowrap;"><%= item.exampleval ? item.exampleval : "" %></div>',
+                        '<div style="position: relative;"><div class="display-value"><%= scope.getDisplayValue(item) %></div>',
+                        '<div class="example-val"><%= item.exampleval ? item.exampleval : "" %></div>',
                         '</div></a></li>',
                         '<% }); %>',
                         '<li class="divider">',
@@ -2527,7 +2527,7 @@ define([
                             id          : 'id-toolbar-mnu-item-border-color',
                             caption     : this.textBordersColor,
                             iconCls     : 'mnu-icon-item mnu-border-color',
-                            template    : _.template('<a id="<%= id %>"tabindex="-1" type="menuitem"><span class="menu-item-icon" style="background-image: none; width: 12px; height: 12px; margin: 2px 9px 0 -11px; border-style: solid; border-width: 3px; border-color: #000;"></span><%= caption %></a>'),
+                            template    : _.template('<a id="<%= id %>"tabindex="-1" type="menuitem"><span class="menu-item-icon"></span><%= caption %></a>'),
                             menu        : new Common.UI.Menu({
                                 menuAlign   : 'tl-tr',
                                 cls: 'shifted-left',
@@ -2535,7 +2535,7 @@ define([
                                     {
                                         id: 'id-toolbar-menu-auto-bordercolor',
                                         caption: this.textAutoColor,
-                                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto" style="background-image: none; width: 12px; height: 12px; margin: 1px 7px 0 1px; background-color: #000;"></span><%= caption %></a>'),
+                                        template: _.template('<a tabindex="-1" type="menuitem"><span class="menu-item-icon color-auto"></span><%= caption %></a>'),
                                         stopPropagation: true
                                     },
                                     {caption: '--'},
@@ -2543,7 +2543,7 @@ define([
                                     {caption: '--'},
                                     {
                                         id: "id-toolbar-menu-new-bordercolor",
-                                        template: _.template('<a tabindex="-1" type="menuitem" style="padding-left:12px;">' + this.textNewColor + '</a>'),
+                                        template: _.template('<a tabindex="-1" type="menuitem">' + this.textNewColor + '</a>'),
                                         stopPropagation: true
                                     }
                                 ]
diff --git a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
index b646af85a..3130a9507 100644
--- a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
+++ b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
@@ -312,4 +312,138 @@
             margin-left: 5px;
         }
     }
+}
+
+#window-chart-data {
+    .up-down-btns {
+        display: inline-block;
+        float: right;
+
+        .rtl & {
+            float: left;
+        }
+
+        #chart-dlg-btn-up {
+            display: inline-block;
+            margin-right: 2px;
+
+            .rtl & {
+                margin-right: 0;
+                margin-left: 2px;
+            }
+        }
+
+        #chart-dlg-btn-down {
+            display: inline-block;
+        }
+    }
+
+    #chart-dlg-btn-add,
+    #chart-dlg-btn-edit,
+    #chart-dlg-btn-delete {
+        min-width: 70px;
+        margin-right: 5px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
+}
+
+#id-dlg-chart-range-lbl1,
+#id-dlg-chart-range-lbl2,
+#id-dlg-chart-range-lbl3 {
+    margin-left: 5px;
+
+    .rtl & {
+        margin-left: 0;
+        margin-right: 5px;
+    }
+}
+
+#chart-type-dlg-series-list {
+    .series-color {
+        width: 8px;
+        height: 12px;
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    .series-value {
+        width: 95px;
+        padding-left: 5px;
+        display: inline-block;
+        vertical-align: middle;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 5px;
+        }
+    }
+
+    .series-cmb {
+        width: 110px;
+        padding-left: 5px;
+        display: inline-block;
+        vertical-align: middle;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 5px;
+        }
+    }
+
+    .series-chk {
+        padding-left: 55px;
+        display: inline-block;
+        vertical-align: middle;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 55px;
+        }
+    }
+}
+
+#window-header-footer {
+    #id-dlg-hf-btn-even,
+    #id-dlg-hf-btn-first {
+        margin-left: -1px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: -1px;
+        }
+    }
+
+    .margin-left-small {
+        margin-left: 2px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 2px;
+        }
+    }
+
+    .margin-left-big {
+        margin-left: 6px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 6px;
+        }
+    }
+
+    .preview-container {
+        margin-right: -1px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: -1px;
+        }
+    }
 }
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/main/resources/less/toolbar.less b/apps/spreadsheeteditor/main/resources/less/toolbar.less
index 14790def0..66b02b9d3 100644
--- a/apps/spreadsheeteditor/main/resources/less/toolbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/toolbar.less
@@ -249,3 +249,76 @@
         }
     }
 }
+
+#id-toolbar-mnu-item-border-color {
+    > span {
+        background-image: none;
+        width: 12px;
+        height: 12px;
+        margin: 2px 9px 0 -11px;
+        border-style: solid;
+        border-width: 3px;
+        border-color: #000;
+
+        .rtl & {
+            margin: 2px -11px 0 9px;
+        }
+    }
+}
+
+#id-toolbar-menu-new-bordercolor {
+    > a {
+        padding-left: 12px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 12px;
+        }
+    }
+}
+
+#id-toolbar-menu-auto-bordercolor {
+    .color-auto {
+        background-image: none;
+        width: 12px;
+        height: 12px;
+        margin: 1px 7px 0 1px;
+        background-color: #000;
+
+        .rtl & {
+            margin: 1px 1px 0 7px;
+        }
+    }
+}
+
+#slot-btn-format {
+    .display-value {
+        position: absolute;
+        left: 0;
+        width: 100px;
+
+        .rtl & {
+            left: auto;
+            right: 0;
+        }
+    }
+
+    .example-val {
+        display: inline-block;
+        width: 100%;
+        max-width: 300px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: right;
+        vertical-align: bottom;
+        padding-left: 100px;
+        color: silver;
+        white-space: nowrap;
+
+        .rtl & {
+            text-align: left;
+            padding-left: 0;
+            padding-right: 100px;
+        }
+    }
+}

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 32/42] [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

From 783e40e018f3f4af4a8ad6fffdb709e4c41f9f59 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Fri, 25 Nov 2022 00:15:24 +0300
Subject: [PATCH 33/42] [rtl] Fix settings in dialogs from toolbar for PE

---
 .../main/lib/view/ListSettingsDialog.js       | 25 ++++----
 .../less/advanced-settings-window.less        | 39 ++++++++++++
 apps/common/main/resources/less/toolbar.less  |  5 ++
 .../app/template/HeaderFooterDialog.template  | 10 +--
 .../main/app/template/Toolbar.template        |  2 +-
 .../main/app/view/HeaderFooterDialog.js       |  7 ++-
 .../main/app/view/SlideSizeSettings.js        |  4 +-
 .../resources/less/advanced-settings.less     | 61 +++++++++++++++++++
 8 files changed, 130 insertions(+), 23 deletions(-)

diff --git a/apps/common/main/lib/view/ListSettingsDialog.js b/apps/common/main/lib/view/ListSettingsDialog.js
index 8a0feeecb..6714cf849 100644
--- a/apps/common/main/lib/view/ListSettingsDialog.js
+++ b/apps/common/main/lib/view/ListSettingsDialog.js
@@ -64,6 +64,7 @@ define([
             height: 261,
             style: 'min-width: 240px;',
             cls: 'modal-dlg',
+            id: 'window-list-settings',
             split: false,
             buttons: ['ok', 'cancel']
         },
@@ -78,35 +79,35 @@ define([
             this.template = [
                 '<div class="box">',
                     '<div style="margin-bottom: 16px;">',
-                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-list-bullet" style="border-top-right-radius: 0;border-bottom-right-radius: 0;">', this.textBulleted,'</button>',
-                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-list-numbering" style="border-top-left-radius: 0;border-bottom-left-radius: 0;border-left-width: 0;margin-left: -1px;">', this.textNumbering,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-list-bullet">', this.textBulleted,'</button>',
+                        '<button type="button" class="btn btn-text-default auto" id="id-dlg-list-numbering">', this.textNumbering,'</button>',
                     '</div>',
                     '<div style="height:120px;">',
                         '<table cols="3">',
                             '<tr>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtType + '</label>',
                                 '</td>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-numbering-format" class="input-group-nr" style="width: 105px;"></div>',
                                     '<div id="id-dlg-list-bullet-format" class="input-group-nr" style="width: 105px;"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;"></td>',
                             '</tr>',
                             '<tr class="image">',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtImport + '</label>',
                                 '</td>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-image" style="width: 105px;"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;"></td>',
                             '</tr>',
                             '<tr>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtSize + '</label>',
                                 '</td>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-size"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;">',
@@ -114,19 +115,19 @@ define([
                                 '</td>',
                             '</tr>',
                             '<tr class="numbering">',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text" style="white-space: nowrap;">' + this.txtStart + '</label>',
                                 '</td>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-start"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;"></td>',
                             '</tr>',
                             '<tr class="color">',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;min-width: 50px;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;min-width: 50px;">',
                                     '<label class="text">' + this.txtColor + '</label>',
                                 '</td>',
-                                '<td style="padding-right: 5px;padding-bottom: 8px;width: 105px;">',
+                                '<td class="padding-right" style="padding-bottom: 8px;width: 105px;">',
                                     '<div id="id-dlg-list-color"></div>',
                                 '</td>',
                                 '<td style="padding-bottom: 8px;"></td>',
diff --git a/apps/common/main/resources/less/advanced-settings-window.less b/apps/common/main/resources/less/advanced-settings-window.less
index a813e5f4a..68c983069 100644
--- a/apps/common/main/resources/less/advanced-settings-window.less
+++ b/apps/common/main/resources/less/advanced-settings-window.less
@@ -83,3 +83,42 @@
     width:44px;
     height:20px;
 }
+
+#window-list-settings {
+    #id-dlg-list-bullet {
+        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-list-numbering {
+        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;
+        }
+    }
+
+    .padding-right {
+        padding-right: 5px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 5px;
+        }
+    }
+}
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 70a59ebc3..13348400b 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -211,6 +211,11 @@
         -ms-flex: 1;
         padding-right: 6px;
 
+        .rtl & {
+            padding-right: 0;
+            padding-left: 6px;
+        }
+
         .panel:not(.active) {
             display: none;
         }
diff --git a/apps/presentationeditor/main/app/template/HeaderFooterDialog.template b/apps/presentationeditor/main/app/template/HeaderFooterDialog.template
index 386e70bae..0b5c3a1a1 100644
--- a/apps/presentationeditor/main/app/template/HeaderFooterDialog.template
+++ b/apps/presentationeditor/main/app/template/HeaderFooterDialog.template
@@ -3,18 +3,18 @@
         <div id="hf-dlg-chb-datetime"></div>
     </td></tr>
     <tr><td class="padding-large">
-        <table id="hf-dlg-tbl-datetime" cols="2" style="margin-left: 22px;">
+        <table id="hf-dlg-tbl-datetime" cols="2">
             <tr>
                 <td colspan="2" class="padding-very-small">
                     <div id="hf-dlg-radio-update"></div>
                 </td>
             </tr>
             <tr>
-                <td class="padding-small" style="padding-left: 22px;">
+                <td class="padding-small format-combo">
                     <label  style="display:block;" class="input-label"><%= scope.textFormat %></label>
                     <div id="hf-dlg-combo-format" style="width: 100%;"></div>
                 </td>
-                <td class="padding-small" style="padding-left: 5px;">
+                <td class="padding-small lang-combo">
                     <label  style="display:block;" class="input-label"><%= scope.textLang %></label>
                     <div id="hf-dlg-combo-lang" style="width: 100%;"></div>
                 </td>
@@ -26,7 +26,7 @@
             </tr>
             <tr>
                 <td colspan="2">
-                    <div id="hf-dlg-input-fixed" class="input-row" style="margin-left: 22px;"></div>
+                    <div id="hf-dlg-input-fixed" class="input-row"></div>
                 </td>
             </tr>
         </table>
@@ -38,7 +38,7 @@
         <div id="hf-dlg-chb-text"></div>
     </td></tr>
     <tr><td class="padding-large">
-        <div id="hf-dlg-text" class="input-row" style="margin-left: 22px;"></div>
+        <div id="hf-dlg-text" class="input-row"></div>
     </td></tr>
     <tr><td class="padding-small"></td></tr>
     <tr><td class="padding-small">
diff --git a/apps/presentationeditor/main/app/template/Toolbar.template b/apps/presentationeditor/main/app/template/Toolbar.template
index 837d0642f..5571fe19d 100644
--- a/apps/presentationeditor/main/app/template/Toolbar.template
+++ b/apps/presentationeditor/main/app/template/Toolbar.template
@@ -46,7 +46,7 @@
                         <span class="btn-slot split" id="slot-btn-changeslide"></span>
                     </div>
                     <div class="elset">
-                        <span class="btn-slot" id="slot-btn-preview"></span>
+                        <span class="btn-slot split" id="slot-btn-preview"></span>
                     </div>
                 </div>
                 <div class="separator long"></div>
diff --git a/apps/presentationeditor/main/app/view/HeaderFooterDialog.js b/apps/presentationeditor/main/app/view/HeaderFooterDialog.js
index b1fb2b1a1..ecd95af09 100644
--- a/apps/presentationeditor/main/app/view/HeaderFooterDialog.js
+++ b/apps/presentationeditor/main/app/view/HeaderFooterDialog.js
@@ -49,7 +49,8 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
         options: {
             contentWidth: 360,
             height: 380,
-            buttons: null
+            buttons: null,
+            id: 'window-header-footer'
         },
 
         initialize : function(options) {
@@ -67,8 +68,8 @@ define(['text!presentationeditor/main/app/template/HeaderFooterDialog.template',
                             '</div>',
                             '<div class="separator"></div>',
                             '<div class="menu-panel" style="width: 130px; padding-top: 17px;">',
-                                '<label  style="display:block; margin-left: 15px;" class="input-label">' + me.textPreview + '</label>',
-                                '<div style="width: 100px; height: 80px; padding: 5px; margin-left: 15px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;">',
+                                '<label  style="display:block;" class="input-label preview-label">' + me.textPreview + '</label>',
+                                '<div class="preview-canvas" style="width: 100px; height: 80px; padding: 5px; border: 1px solid #AFAFAF; border-radius: 2px; background: #ffffff;">',
                                     '<div id="hf-dlg-canvas-preview" style="width: 100%;height: 100%;"></div>',
                                 '</div>',
                             '</div>',
diff --git a/apps/presentationeditor/main/app/view/SlideSizeSettings.js b/apps/presentationeditor/main/app/view/SlideSizeSettings.js
index eb183f4c9..95ced9d9f 100644
--- a/apps/presentationeditor/main/app/view/SlideSizeSettings.js
+++ b/apps/presentationeditor/main/app/view/SlideSizeSettings.js
@@ -66,11 +66,11 @@ define([
                     '<div id="slide-size-combo" class="" style="margin-bottom: 10px;"></div>',
                     '<table cols="2" style="width: 100%;margin-bottom: 7px;">',
                         '<tr>',
-                            '<td class="padding-small" style="padding-right: 10px;">',
+                            '<td class="padding-small padding-right">',
                                 '<label class="input-label" style="font-weight: bold;">' + this.textWidth + '</label>',
                                 '<div id="slide-size-spin-width"></div>',
                             '</td>',
-                            '<td class="padding-small" style="padding-left: 10px;">',
+                            '<td class="padding-small padding-left">',
                                 '<label class="input-label" style="font-weight: bold;">' + this.textHeight + '</label>',
                                 '<div id="slide-size-spin-height"></div>',
                             '</td>',
diff --git a/apps/presentationeditor/main/resources/less/advanced-settings.less b/apps/presentationeditor/main/resources/less/advanced-settings.less
index 93674bfc6..0c84e2427 100644
--- a/apps/presentationeditor/main/resources/less/advanced-settings.less
+++ b/apps/presentationeditor/main/resources/less/advanced-settings.less
@@ -61,4 +61,65 @@
     }
 }
 
+#window-slide-size-settings {
+    .padding-right {
+        padding-right: 10px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 10px;
+        }
+    }
+
+    .padding-left {
+        padding-left: 10px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 10px;
+        }
+    }
+}
+
+#window-header-footer {
+    #hf-dlg-tbl-datetime,
+    #hf-dlg-input-fixed,
+    #hf-dlg-text {
+        margin-left: 22px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 22px;
+        }
+    }
+
+    .format-combo {
+        padding-left: 22px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 22px;
+        }
+    }
+
+    .lang-combo {
+        padding-left: 5px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 5px;
+        }
+    }
+
+    .preview-label,
+    .preview-canvas {
+        margin-left: 15px;
+
+        .rtl & {
+            margin-left: 0;
+            margin-right: 15px;
+        }
+    }
+}
+
 

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 34/42] [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;

From 35b454811c9692997d9815d73cd8505ab4a98e7a Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Tue, 29 Nov 2022 21:07:36 +0300
Subject: [PATCH 35/42] [rtl] Fix dialogs, pivot styles combobox, warning
 windows for SSE

---
 .../main/lib/component/ComboDataView.js       |  2 +-
 apps/common/main/lib/component/Window.js      |  5 ++-
 apps/common/main/resources/less/buttons.less  |  5 +++
 .../main/resources/less/combo-dataview.less   | 17 +++++++++
 apps/common/main/resources/less/window.less   | 14 +++++++
 .../main/app/template/NameManagerDlg.template |  2 +-
 .../main/app/view/NameManagerDlg.js           |  3 +-
 .../main/app/view/PageMarginsDialog.js        |  4 +-
 .../main/app/view/PivotTable.js               |  5 ++-
 .../main/app/view/ScaleDialog.js              |  5 ++-
 .../resources/less/advanced-settings.less     | 38 +++++++++++++++++++
 11 files changed, 90 insertions(+), 10 deletions(-)

diff --git a/apps/common/main/lib/component/ComboDataView.js b/apps/common/main/lib/component/ComboDataView.js
index 8b8c2eb73..799840cf4 100644
--- a/apps/common/main/lib/component/ComboDataView.js
+++ b/apps/common/main/lib/component/ComboDataView.js
@@ -299,7 +299,7 @@ define([
                 var itemMargins = parseFloat(itemEl.css('margin-left')) + parseFloat(itemEl.css('margin-right'));
 
                 var fieldPickerEl = this.fieldPicker.$el;
-                var fieldPickerPadding = parseFloat(fieldPickerEl.css('padding-right'));
+                var fieldPickerPadding = parseFloat(fieldPickerEl.css(Common.UI.isRTL() ? 'padding-left' : 'padding-right'));
                 var fieldPickerBorder = parseFloat(fieldPickerEl.css('border-width'));
                 var dataviewPaddings = parseFloat(this.fieldPicker.$el.find('.dataview').css('padding-left')) + parseFloat(this.fieldPicker.$el.find('.dataview').css('padding-right'));
 
diff --git a/apps/common/main/lib/component/Window.js b/apps/common/main/lib/component/Window.js
index 5b2d2f430..88919eb6f 100644
--- a/apps/common/main/lib/component/Window.js
+++ b/apps/common/main/lib/component/Window.js
@@ -456,7 +456,7 @@ define([
             
             var template =  '<div class="info-box">' +
                                 '<% if (typeof iconCls !== "undefined") { %><div class="icon <%= iconCls %>"></div><% } %>' +
-                                '<div class="text" <% if (typeof iconCls == "undefined") { %> style="padding-left:10px;" <% } %>><span><%= msg %></span>' +
+                                '<div class="text" dir="ltr" <% if (typeof iconCls == "undefined") { %> style="padding-left:10px;" <% } %>><span><%= msg %></span>' +
                                     '<% if (dontshow) { %><div class="dont-show-checkbox"></div><% } %>' +
                                 '</div>' +
                             '</div>' +
@@ -491,7 +491,8 @@ define([
                     text_cnt.height(Math.max(text.height(), icon_height) + ((check.length>0) ? (check.height() + parseInt(check.css('margin-top'))) : 0));
                     body.height(parseInt(text_cnt.css('height')) + parseInt(footer.css('height')));
                     var span_el = check.find('span');
-                     window.setSize(Math.max(text.width(), span_el.length>0 ? span_el.position().left + span_el.width() : 0) + text.position().left + parseInt(text_cnt.css('padding-right')),
+                    window.setSize(Math.max(text.width(), span_el.length>0 ? span_el.position().left + span_el.width() : 0) + text.position().left + parseInt(text_cnt.css('padding-right')) +
+                        (Common.UI.isRTL() && icon.length > 0 ? icon.width() + parseInt(icon.css('margin-right')) + parseInt(icon.css('margin-left')) : 0),
                         parseInt(body.css('height')) + parseInt(header.css('height')));
                 } else {
                     text.css('white-space', 'normal');
diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
index bb408bce1..0ac31790b 100644
--- a/apps/common/main/resources/less/buttons.less
+++ b/apps/common/main/resources/less/buttons.less
@@ -1074,6 +1074,11 @@
         border: @scaled-one-px-value-ie solid @border-regular-control-ie;
         border: @scaled-one-px-value solid @border-regular-control;
         position: relative;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 3px;
+        }
     }
 
     &.sheet-template-table {
diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less
index 731eb9ef8..667f18a3f 100644
--- a/apps/common/main/resources/less/combo-dataview.less
+++ b/apps/common/main/resources/less/combo-dataview.less
@@ -265,6 +265,13 @@
         margin-right: -@combo-dataview-button-width;
         padding-right: @combo-dataview-button-width;
 
+        .rtl & {
+            margin-right: 0;
+            padding-right: 0;
+            margin-left: -@combo-dataview-button-width;
+            padding-left: @combo-dataview-button-width;
+        }
+
         .dataview {
             padding: 2px;
         }
@@ -399,6 +406,11 @@
     position: absolute;
     padding-right: 12px;
 
+    .rtl & {
+        padding-right: 0;
+        padding-left: 12px;
+    }
+
     .more-container & {
         position: static;
     }
@@ -428,6 +440,11 @@
             .group-description {
                 padding: 3px 0 3px 10px;
                 .font-weight-bold();
+
+                .rtl & {
+                    padding: 3px 10px 3px 0;
+                    text-align: right;
+                }
             } 
         }
     }
diff --git a/apps/common/main/resources/less/window.less b/apps/common/main/resources/less/window.less
index 4ccc6286d..057112677 100644
--- a/apps/common/main/resources/less/window.less
+++ b/apps/common/main/resources/less/window.less
@@ -205,6 +205,11 @@
         .icon {
             float: left;
             margin: 0 0 0 10px;
+
+            .rtl & {
+                float: right;
+                margin: 0 10px 0 10px;
+            }
         }
 
         min-height: 90px;
@@ -215,9 +220,18 @@
                 padding: 20px 20px 20px 10px;
                 height: 50px;
 
+                .rtl & {
+                    padding: 20px 10px 20px 20px;
+                }
+
                 .text {
                     padding-left: 60px;
 
+                    .rtl & {
+                        padding-left: 0;
+                        padding-right: 60px;
+                    }
+
                     span {
                         font-size: 12px;
                         white-space: nowrap;
diff --git a/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template b/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
index 8ae841cca..ef016148f 100644
--- a/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
+++ b/apps/spreadsheeteditor/main/app/template/NameManagerDlg.template
@@ -25,7 +25,7 @@
             </tr>
             <tr>
                 <td class="padding-large">
-                    <button type="button" class="btn btn-text-default" id="name-manager-btn-new" style="min-width: 100px;margin-right:5px;"><%= scope.textNew %></button>
+                    <button type="button" class="btn btn-text-default" id="name-manager-btn-new" style="min-width: 100px;"><%= scope.textNew %></button>
                     <button type="button" class="btn btn-text-default" id="name-manager-btn-edit" style="min-width: 100px;"><%= scope.textEdit %></button>
                 </td>
                 <td class="padding-large" style="text-align: right;width:90px;">
diff --git a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
index 328e0ab7b..20ba92c6b 100644
--- a/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
+++ b/apps/spreadsheeteditor/main/app/view/NameManagerDlg.js
@@ -54,7 +54,8 @@ define([  'text!spreadsheeteditor/main/app/template/NameManagerDlg.template',
             alias: 'NameManagerDlg',
             contentWidth: 525,
             height: 353,
-            buttons: null
+            buttons: null,
+            id: 'window-name-manager'
         },
 
         initialize: function (options) {
diff --git a/apps/spreadsheeteditor/main/app/view/PageMarginsDialog.js b/apps/spreadsheeteditor/main/app/view/PageMarginsDialog.js
index 8a12e4371..9f321c478 100644
--- a/apps/spreadsheeteditor/main/app/view/PageMarginsDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/PageMarginsDialog.js
@@ -62,7 +62,7 @@ define([
                 '<div class="box" style="height: 85px;">',
                     '<table cols="2" style="width: 100%;margin-bottom: 10px;">',
                         '<tr>',
-                            '<td style="padding-right: 10px;padding-bottom: 8px;">',
+                            '<td class="padding-right" style="padding-bottom: 8px;">',
                                 '<label class="input-label">' + this.textTop + '</label>',
                                 '<div id="page-margins-spin-top"></div>',
                             '</td>',
@@ -72,7 +72,7 @@ define([
                             '</td>',
                         '</tr>',
                         '<tr>',
-                            '<td class="padding-small" style="padding-right: 10px;">',
+                            '<td class="padding-small padding-right">',
                                 '<label class="input-label">' + this.textLeft + '</label>',
                                 '<div id="page-margins-spin-left"></div>',
                             '</td>',
diff --git a/apps/spreadsheeteditor/main/app/view/PivotTable.js b/apps/spreadsheeteditor/main/app/view/PivotTable.js
index bfe698038..786d3f25e 100644
--- a/apps/spreadsheeteditor/main/app/view/PivotTable.js
+++ b/apps/spreadsheeteditor/main/app/view/PivotTable.js
@@ -306,7 +306,10 @@ define([
                             if (menuWidth>Common.Utils.innerWidth())
                                 menuWidth = Math.max(Math.floor((Common.Utils.innerWidth()-17)/(itemMargin + itemWidth)), 2) * (itemMargin + itemWidth) + 17;
                             var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - Math.min(menuWidth, buttonOffsetLeft) - 1;
-                            menu.setOffset(Math.min(offset, 0));
+                            if (Common.UI.isRTL()) {
+                                offset = cmp.openButton.$el.width() + parseFloat($(cmp.$el.find('.combo-dataview').get(0)).css('padding-left'));
+                            }
+                            menu.setOffset(Common.UI.isRTL() ? offset : Math.min(offset, 0));
 
                             menu.cmpEl.css({
                                 'width': menuWidth,
diff --git a/apps/spreadsheeteditor/main/app/view/ScaleDialog.js b/apps/spreadsheeteditor/main/app/view/ScaleDialog.js
index 9f02ce49c..3421f5597 100644
--- a/apps/spreadsheeteditor/main/app/view/ScaleDialog.js
+++ b/apps/spreadsheeteditor/main/app/view/ScaleDialog.js
@@ -50,6 +50,7 @@ define([
             header: true,
             style: 'min-width: 215px;',
             cls: 'modal-dlg',
+            id: 'window-scale',
             buttons: ['ok', 'cancel']
         },
 
@@ -66,7 +67,7 @@ define([
             this.template = [
                 '<div class="box">',
                 '<div id="radio-fit-to" style="margin-bottom: 4px;"></div>',
-                '<div style="padding-left: 22px;">',
+                '<div class="padding-left">',
                     '<div>',
                         '<label style="height: 22px;width: 55px;padding-top: 4px;display: inline-block;margin-bottom: 4px;">' + this.textWidth + '</label>',
                         '<div id="scale-width" style="display: inline-block;margin-bottom: 4px;"></div>',
@@ -77,7 +78,7 @@ define([
                     '</div>',
                 '</div>',
                 '<div id="radio-scale-to" style="margin-bottom: 6px;"></div>',
-                '<div id="scale" style="padding-left: 22px; margin-bottom: 6px;"></div>',
+                '<div id="scale" class="padding-left" style="margin-bottom: 6px;"></div>',
                 '</div>'
             ].join('');
 
diff --git a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
index 39ea9f3ea..618d0fc06 100644
--- a/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
+++ b/apps/spreadsheeteditor/main/resources/less/advanced-settings.less
@@ -74,6 +74,11 @@
 .sort-dialog-btn-text {
     min-width: 100px;
     margin-right: 5px;
+
+    .rtl & {
+        margin-right: 0;
+        margin-left: 5px;
+    }
 }
 
 .input-row--tabs {
@@ -570,4 +575,37 @@
     .checkbox-indeterminate {
         position:absolute;
     }
+}
+
+#window-page-margins {
+    .padding-right {
+        padding-right: 10px;
+
+        .rtl & {
+            padding-right: 0;
+            padding-left: 10px;
+        }
+    }
+}
+
+#window-scale {
+    .padding-left {
+        padding-left: 22px;
+
+        .rtl & {
+            padding-left: 0;
+            padding-right: 22px;
+        }
+    }
+}
+
+#window-name-manager {
+    #name-manager-btn-new {
+        margin-right: 5px;
+
+        .rtl & {
+            margin-right: 0;
+            margin-left: 5px;
+        }
+    }
 }
\ No newline at end of file

From 2f70498c5c7b9463e41ad40211f92062ec1934dd Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Wed, 7 Dec 2022 19:47:20 +0300
Subject: [PATCH 36/42] [rtl] Fix settings in file menu after merge

---
 .../main/resources/less/filemenu.less         | 21 ++++++++++++++++
 .../main/resources/less/leftmenu.less         | 21 ++++++++++++++++
 .../main/resources/less/leftmenu.less         | 25 +++++++++++++++++++
 3 files changed, 67 insertions(+)

diff --git a/apps/documenteditor/main/resources/less/filemenu.less b/apps/documenteditor/main/resources/less/filemenu.less
index e57f5b4a0..59a2aa0bf 100644
--- a/apps/documenteditor/main/resources/less/filemenu.less
+++ b/apps/documenteditor/main/resources/less/filemenu.less
@@ -104,11 +104,19 @@
   #panel-saveas, #panel-savecopy {
     &.content-box {
       padding: 0 0 0 20px;
+
+      .rtl & {
+        padding: 0 20px 0 0;
+      }
     }
 
     .content-container {
       margin: 30px 0 0 10px;
 
+      .rtl & {
+        margin: 30px 10px 0 0;
+      }
+
       .header {
         font-size: 16px;
         margin-bottom: 20px;
@@ -119,6 +127,11 @@
           float: left;
           margin: 0 24px 34px 0;
 
+          .rtl & {
+            float: right;
+            margin: 0 0 34px 24px;
+          }
+
           .btn-doc-format {
             width: 70px;
             height: 90px;
@@ -654,10 +667,18 @@
 
   #fms-btn-delete-pwd {
     margin-left: 16px;
+    .rtl & {
+      margin-left: 0;
+      margin-right: 16px;
+    }
   }
 
   .signature-view-link {
     margin-right: 20px;
+    .rtl & {
+      margin-right: 0;
+      margin-left: 20px;
+    }
   }
 
   .signature-tip {
diff --git a/apps/presentationeditor/main/resources/less/leftmenu.less b/apps/presentationeditor/main/resources/less/leftmenu.less
index 1d377fc03..de5cdc574 100644
--- a/apps/presentationeditor/main/resources/less/leftmenu.less
+++ b/apps/presentationeditor/main/resources/less/leftmenu.less
@@ -204,11 +204,19 @@
         #panel-saveas, #panel-savecopy {
             &.content-box {
                 padding: 0 0 0 20px;
+
+                .rtl & {
+                    padding: 0 20px 0 0;
+                }
             }
 
             .content-container {
                 margin: 30px 0 0 10px;
 
+                .rtl & {
+                    margin: 30px 10px 0 0;
+                }
+
                 .header {
                     font-size: 16px;
                     margin-bottom: 20px;
@@ -219,6 +227,11 @@
                         float: left;
                         margin: 0 24px 34px 0;
 
+                        .rtl & {
+                            float: right;
+                            margin: 0 0 34px 24px;
+                        }
+
                         .btn-doc-format {
                             width: 70px;
                             height: 90px;
@@ -602,10 +615,18 @@
 
             #fms-btn-delete-pwd {
                 margin-left: 16px;
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 16px;
+                }
             }
 
             .signature-view-link {
                 margin-right: 20px;
+                .rtl & {
+                    margin-right: 0;
+                    margin-left: 20px;
+                }
             }
 
             .signature-tip {
diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
index c0ce807fe..2015b7d31 100644
--- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less
+++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less
@@ -195,11 +195,19 @@
         #panel-saveas, #panel-savecopy  {
             &.content-box {
                 padding: 0 0 0 20px;
+
+                .rtl & {
+                    padding: 0 20px 0 0;
+                }
             }
 
             .content-container {
                 margin: 30px 0 0 10px;
 
+                .rtl & {
+                    margin: 30px 10px 0 0;
+                }
+
                 .header {
                     font-size: 16px;
                     margin-bottom: 20px;
@@ -210,6 +218,11 @@
                         float: left;
                         margin: 0 24px 34px 0;
 
+                        .rtl & {
+                            float: right;
+                            margin: 0 0 34px 24px;
+                        }
+
                         .btn-doc-format {
                             width: 70px;
                             height: 90px;
@@ -679,10 +692,18 @@
 
             #fms-btn-delete-pwd {
                 margin-left: 16px;
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 16px;
+                }
             }
 
             .signature-view-link {
                 margin-right: 20px;
+                .rtl & {
+                    margin-right: 0;
+                    margin-left: 20px;
+                }
             }
 
             .signature-tip {
@@ -757,6 +778,10 @@
                 .pages {
                     label, #print-spin-pages-from {
                         margin-right: 6px;
+                        .rtl & {
+                            margin-right: 0;
+                            margin-left: 6px;
+                        }
                     }
                     label, div {
                         display: inline-block;

From 2db8a58b49207fdb5810b41ba63e119926386b11 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Sat, 10 Dec 2022 23:36:26 +0300
Subject: [PATCH 37/42] [rtl] Make display/hide more button in toolbar

---
 apps/common/main/lib/component/Mixtbar.js    | 279 ++++++++++++++++++-
 apps/common/main/resources/less/toolbar.less |  30 ++
 2 files changed, 297 insertions(+), 12 deletions(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index 0361f6c1d..5d8527755 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -403,7 +403,7 @@ define([
                             me.setMoreButton($active.attr('data-tab'), $active);
                         }
                         if ( !_rightedge ) {
-                            _rightedge = $active.get(0).getBoundingClientRect().right;
+                            _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
                         }
                         if ( !_btns ) {
                             _btns = [];
@@ -421,12 +421,12 @@ define([
                             data.flex = _flex;
                         }
 
-                        if ( (_rightedge > _maxright)) {
+                        if ( (Common.UI.isRTL() && _rightedge < 0) || (_rightedge > _maxright)) {
                             if (!more_section.is(':visible') ) {
                                 if (_flex.length>0) {
                                     for (var i=0; i<_flex.length; i++) {
                                         var item = _flex[i].el;
-                                        _rightedge = $active.get(0).getBoundingClientRect().right;
+                                        _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
                                         if (item.outerWidth() > parseInt(item.css('min-width'))) {
                                             data.rightedge = _rightedge;
                                             return;
@@ -438,8 +438,8 @@ define([
                                     var btn = _btns[i];
                                     if ( !btn.hasClass('compactwidth') && !btn.hasClass('slot-btn-more')) {
                                         btn.addClass('compactwidth');
-                                        _rightedge = $active.get(0).getBoundingClientRect().right;
-                                        if (_rightedge <= _maxright)
+                                        _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
+                                        if ((Common.UI.isRTL() && _rightedge >= 0) || (_rightedge <= _maxright))
                                             break;
                                     }
                                 }
@@ -453,10 +453,10 @@ define([
                                     var btn = _btns[i];
                                     if ( btn.hasClass('compactwidth') ) {
                                         btn.removeClass('compactwidth');
-                                        _rightedge = $active.get(0).getBoundingClientRect().right;
-                                        if ( _rightedge > _maxright) {
+                                        _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
+                                        if ( (Common.UI.isRTL() && _rightedge < 0) || (_rightedge > _maxright)) {
                                             btn.addClass('compactwidth');
-                                            _rightedge = $active.get(0).getBoundingClientRect().right;
+                                            _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
                                             break;
                                         }
                                     }
@@ -466,7 +466,7 @@ define([
                                     for (var i=0; i<_flex.length; i++) {
                                         var item = _flex[i];
                                         item.el.css('width', item.width);
-                                        data.rightedge = $active.get(0).getBoundingClientRect().right;
+                                        data.rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
                                     }
                                 }
                             }
@@ -506,7 +506,7 @@ define([
                 var me = this;
                 if (!btnsMore[tab]) {
                     var top = panel.position().top;
-                    var box = $('<div class="more-box" style="position: absolute;right: 0; top:'+ top +'px; padding-left: 12px;padding-right: 6px;display: none;">' +
+                    var box = $('<div class="more-box" style="top:'+ top +'px;">' +
                         '<div class="separator long" style="position: relative;display: table-cell;"></div>' +
                         '<div class="group" style=""><span class="btn-slot text x-huge slot-btn-more"></span></div>' +
                         '</div>');
@@ -545,6 +545,10 @@ define([
             },
 
             resizeToolbar: function(reset) {
+                if (Common.UI.isRTL()) {
+                    this.resizeToolbarRTL(reset);
+                    return;
+                }
                 var $active = this.$panels.filter('.active'),
                     more_section = $active.find('.more-box');
 
@@ -567,7 +571,7 @@ define([
 
                 if ( (reset || delta<0) && (_rightedge > _maxright)) { // from toolbar to more section
                     if (!more_section.is(':visible') ) {
-                        more_section.css('display', "");
+                        more_section.css('display', "block");
                         _maxright -= parseInt(more_section.css('width'));
                     }
                     var last_separator = null,
@@ -790,6 +794,256 @@ define([
                 hideAllMenus && Common.UI.Menu.Manager.hideAll();
             },
 
+            resizeToolbarRTL: function(reset) {
+                var $active = this.$panels.filter('.active'),
+                    more_section = $active.find('.more-box');
+
+                if (more_section.length===0) {
+                    this.setMoreButton($active.attr('data-tab'), $active);
+                }
+
+                var more_section_width = parseInt(more_section.css('width')) || 0,
+                    box_controls_width = $active.parents('.box-controls').width(),
+                    _maxright = box_controls_width,
+                    _minLeft = 0,
+                    _leftedge = $active.get(0).getBoundingClientRect().left,
+                    delta = (this._prevBoxWidth) ? (_maxright - this._prevBoxWidth) : -1,
+                    hideAllMenus = false;
+                this._prevBoxWidth = _maxright;
+                if (more_section.is(':visible')) {
+                    _maxright -= more_section_width;
+                    _minLeft +=  more_section_width;
+                }
+
+                if (this.$moreBar && this.$moreBar.parent().is(':visible')) {
+                    this.$moreBar.parent().css('max-width', Common.Utils.innerWidth());
+                }
+
+                if ( (reset || delta<0) && (_leftedge < _minLeft)) { // from toolbar to more section
+                    if (!more_section.is(':visible') ) {
+                        more_section.css('display', 'block');
+                        _minLeft += parseInt(more_section.css('width'));
+                    }
+                    var last_separator = null,
+                        last_group = null,
+                        prevchild = this.$moreBar.children().filter("[data-hidden-tb-item!=true]");
+                    if (prevchild.length>0) {
+                        prevchild = $(prevchild[0]);
+                        if (prevchild.hasClass('separator'))
+                            last_separator = prevchild;
+                        if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
+                            last_group = prevchild;
+                    }
+                    var items = $active.find('> div:not(.more-box)');
+                    var need_break = false;
+                    for (var i=items.length-1; i>=0; i--) {
+                        var item = $(items[i]);
+                        if (!item.is(':visible') && !item.attr('hidden-on-resize')) { // move invisible items as is and set special attr
+                            item.attr('data-hidden-tb-item', true);
+                            this.$moreBar.prepend(item);
+                            hideAllMenus = true;
+                        } else if (item.hasClass('group')) {
+                            _leftedge = $active.get(0).getBoundingClientRect().left;
+                            if (_leftedge >= _minLeft) // stop moving items
+                                break;
+
+                            var offset = item.offset(),
+                                item_width = item.outerWidth(),
+                                children = item.children();
+                            if (!item.attr('inner-width') && item.attr('group-state') !== 'open') {
+                                item.attr('inner-width', item_width);
+                                for (var j=children.length-1; j>=0; j--) {
+                                    var child = $(children[j]);
+                                    child.attr('inner-width', child.outerWidth());
+                                }
+                            }
+                            if ((offset.left < _minLeft || children.length==1) && item.attr('group-state') != 'open') {
+                                // move group
+                                this.$moreBar.prepend(item);
+                                if (last_separator) {
+                                    last_separator.css('display', '');
+                                    last_separator.removeAttr('hidden-on-resize');
+                                }
+                                hideAllMenus = true;
+                            } else if ( offset.left < _minLeft ) {
+                                // move buttons from group
+                                for (var j=children.length-1; j>=0; j--) {
+                                    var child = $(children[j]);
+                                    if (child.hasClass('elset')) {
+                                        this.$moreBar.prepend(item);
+                                        if (last_separator) {
+                                            last_separator.css('display', '');
+                                            last_separator.removeAttr('hidden-on-resize');
+                                        }
+                                        hideAllMenus = true;
+                                        break;
+                                    } else {
+                                        var child_offset = child.offset(),
+                                            child_width = child.outerWidth();
+                                        if (child_offset.left < _minLeft) {
+                                            if (!last_group) {
+                                                last_group = $('<div></div>');
+                                                last_group.addClass(items[i].className);
+                                                var attrs = items[i].attributes;
+                                                for (var k = 0; k < attrs.length; k++) {
+                                                    last_group.attr(attrs[k].name, attrs[k].value);
+                                                }
+                                                this.$moreBar.prepend(last_group);
+                                                if (last_separator) {
+                                                    last_separator.css('display', '');
+                                                    last_separator.removeAttr('hidden-on-resize');
+                                                }
+                                            }
+                                            last_group.prepend(child);
+                                            hideAllMenus = true;
+                                        } else {
+                                            need_break = true;
+                                            break;
+                                        }
+                                    }
+                                }
+                                if (item.children().length<1) { // all buttons are moved
+                                    item.remove();
+                                    last_group && last_group.removeAttr('group-state').attr('inner-width', item.attr('inner-width'));
+                                    last_group = null;
+                                } else {
+                                    last_group && last_group.attr('group-state', 'open') && item.attr('group-state', 'open');
+                                }
+                                if (need_break)
+                                    break;
+                            } else {
+                                break;
+                            }
+                            last_separator = null;
+                        } else if (item.hasClass('separator')) {
+                            this.$moreBar.prepend(item);
+                            item.css('display', 'none');
+                            item.attr('hidden-on-resize', true);
+                            last_separator = item;
+                            hideAllMenus = true;
+                        }
+                    }
+                } else if ((reset || delta>0) && more_section.is(':visible')) {
+                    var last_separator = null,
+                        last_group = null,
+                        prevchild = $active.find('> div:not(.more-box)');
+                    var last_width = 0;
+                    if (prevchild.length>0) {
+                        prevchild = $(prevchild[prevchild.length-1]);
+                        if (prevchild.hasClass('separator')) {
+                            last_separator = prevchild;
+                            last_width = parseInt(last_separator.css('margin-left')) + parseInt(last_separator.css('margin-right')) + 1;
+                        }
+                        if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
+                            last_group = prevchild;
+                    }
+
+                    var items = this.$moreBar.children();
+                    if (items.length>0) {
+                        // from more panel to toolbar
+                        for (var i=0; i<items.length; i++) {
+                            var item = $(items[i]);
+                            _leftedge = $active.get(0).getBoundingClientRect().left;
+                            if (!item.is(':visible') && item.attr('data-hidden-tb-item')) { // move invisible items as is
+                                item.removeAttr('data-hidden-tb-item');
+                                more_section.before(item);
+                                if (this.$moreBar.children().filter('.group').length == 0) {
+                                    this.hideMoreBtns();
+                                    more_section.css('display', "none");
+                                }
+                            } else if (item.hasClass('group')) {
+                                var islast = false;
+                                if (this.$moreBar.children().filter('.group').length == 1) {
+                                    _maxright = box_controls_width; // try to move last group
+                                    islast = true;
+                                }
+
+                                var item_width = parseInt(item.attr('inner-width') || 0);
+                                if (_leftedge > _minLeft && item.attr('group-state') != 'open') {
+                                    // move group
+                                    more_section.before(item);
+                                    if (last_separator) {
+                                        last_separator.css('display', '');
+                                        last_separator.removeAttr('hidden-on-resize');
+                                    }
+                                    if (this.$moreBar.children().filter('.group').length == 0) {
+                                        this.hideMoreBtns();
+                                        more_section.css('display', "none");
+                                    }
+                                    hideAllMenus = true;
+                                } else if ( _leftedge < _minLeft) {
+                                    // move buttons from group
+                                    var children = item.children();
+                                    _maxright = box_controls_width - more_section_width;
+                                    for (var j=0; j<children.length; j++) {
+                                        if (islast && j==children.length-1)
+                                            _maxright = box_controls_width; // try to move last item from last group
+                                        _leftedge = $active.get(0).getBoundingClientRect().left;
+                                        var child = $(children[j]);
+                                        if (child.hasClass('elset')) { // don't add group - no enough space
+                                            need_break = true;
+                                            break;
+                                        } else {
+                                            var child_width = parseInt(child.attr('inner-width') || 0) + (!last_group ? parseInt(item.css('padding-left')) : 0); // if new group is started add left-padding
+                                            if (_leftedge < _minLeft) {
+                                                if (!last_group) {
+                                                    last_group = $('<div></div>');
+                                                    last_group.addClass(items[i].className);
+                                                    var attrs = items[i].attributes;
+                                                    for (var k = 0; k < attrs.length; k++) {
+                                                        last_group.attr(attrs[k].name, attrs[k].value);
+                                                    }
+                                                    if (last_group.hasClass('flex')) { // need to update flex groups list
+                                                        $active.data().flex = null;
+                                                    }
+                                                    more_section.before(last_group);
+                                                    if (last_separator) {
+                                                        last_separator.css('display', '');
+                                                        last_separator.removeAttr('hidden-on-resize');
+                                                    }
+                                                }
+                                                last_group.append(child);
+                                                hideAllMenus = true;
+                                            } else {
+                                                need_break = true;
+                                                break;
+                                            }
+                                        }
+                                    }
+                                    if (item.children().length<1) { // all buttons are moved
+                                        item.remove();
+                                        last_group && last_group.removeAttr('group-state').attr('inner-width', item.attr('inner-width'));
+                                        last_group = null;
+                                        if (this.$moreBar.children().filter('.group').length == 0) {
+                                            this.hideMoreBtns();
+                                            more_section.css('display', "none");
+                                        }
+                                    } else {
+                                        last_group && last_group.attr('group-state', 'open') && item.attr('group-state', 'open');
+                                    }
+                                    if (need_break)
+                                        break;
+                                } else {
+                                    break;
+                                }
+                                last_separator = null; last_width = 0;
+                            } else if (item.hasClass('separator')) {
+                                more_section.before(item);
+                                item.css('display', 'none');
+                                item.attr('hidden-on-resize', true);
+                                last_separator = item;
+                                last_width = parseInt(last_separator.css('margin-left')) + parseInt(last_separator.css('margin-right')) + 1;
+                                hideAllMenus = true;
+                            }
+                        }
+                    } else {
+                        this.hideMoreBtns();
+                        more_section.css('display', "none");
+                    }
+                }
+                hideAllMenus && Common.UI.Menu.Manager.hideAll();
+            },
+
             onMoreHide: function(btn, e) {
                 var moreContainer = btn.panel.parent();
                 if (btn.pressed) {
@@ -809,7 +1063,8 @@ define([
                     right = Common.Utils.innerWidth() - (showxy.left - parentxy.left + target.width()),
                     top = showxy.top - parentxy.top + target.height() + 10;
 
-                moreContainer.css({right: right, left: 'auto', top : top, 'max-width': Common.Utils.innerWidth() + 'px'});
+                var styles = Common.UI.isRTL() ? {left: '6px', right: 'auto', top : top, 'max-width': Common.Utils.innerWidth() + 'px'} : {right: right, left: 'auto', top : top, 'max-width': Common.Utils.innerWidth() + 'px'}
+                moreContainer.css(styles);
                 moreContainer.show();
             },
 
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index fba1fd987..b86a58eb6 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -250,6 +250,9 @@
         padding: 12px 10px 7px 0;
         border-radius: 0;
         z-index:999;
+        .rtl & {
+            padding: 12px 0 7px 10px;
+        }
         .compactwidth {
             .btn-group, .btn-toolbar {
                 &.x-huge {
@@ -285,6 +288,18 @@
     .more-box {
         background-color: @background-toolbar-ie;
         background-color: @background-toolbar;
+        position: absolute;
+        right: 0;
+        padding-left: 12px;
+        padding-right: 6px;
+        display: none;
+
+        .rtl & {
+            right: unset;
+            left: 0;
+            padding-left: 6px;
+            padding-right: 12px;
+        }
     }
 
     background-color: @background-toolbar-ie;
@@ -301,11 +316,26 @@
         padding-left: 6px;
         font-size: 0;
 
+        .rtl & {
+            padding-left: 0;
+            padding-right: 6px;
+        }
+
         &.small {
             padding-left: 10px;
 
+            .rtl & {
+                padding-left: 0;
+                padding-right: 10px;
+            }
+
             + .separator:not(.invisible) {
                 margin-left: 10px;
+
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 10px;
+                }
             }
         }
 

From 6d1faf06472d84d600688014162d373f798014e1 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Sat, 24 Dec 2022 17:35:40 +0300
Subject: [PATCH 38/42] [rtl] Fix hiding of buttons in toolbar into more
 section

---
 apps/common/main/lib/component/Mixtbar.js | 299 ++--------------------
 1 file changed, 25 insertions(+), 274 deletions(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index 5d8527755..24944dcff 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -393,7 +393,8 @@ define([
                 function _fc() {
                     var $active = panel || me.$panels.filter('.active');
                     if ( $active && $active.length ) {
-                        var _maxright = $active.parents('.box-controls').width();
+                        var _maxright = $active.parents('.box-controls').width(),
+                            _staticPanelWidth = $active.parents('.box-controls').find('.panel.static').outerWidth();
                         var data = $active.data(),
                             _rightedge = data.rightedge,
                             _btns = data.buttons,
@@ -403,7 +404,7 @@ define([
                             me.setMoreButton($active.attr('data-tab'), $active);
                         }
                         if ( !_rightedge ) {
-                            _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
+                            _rightedge = $active.outerWidth() + _staticPanelWidth;
                         }
                         if ( !_btns ) {
                             _btns = [];
@@ -421,12 +422,13 @@ define([
                             data.flex = _flex;
                         }
 
-                        if ( (Common.UI.isRTL() && _rightedge < 0) || (_rightedge > _maxright)) {
+                        if (_rightedge > _maxright) {
                             if (!more_section.is(':visible') ) {
                                 if (_flex.length>0) {
                                     for (var i=0; i<_flex.length; i++) {
                                         var item = _flex[i].el;
-                                        _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
+                                        //_rightedge = $active.get(0).getBoundingClientRect().right;
+                                        _rightedge = $active.outerWidth() + _staticPanelWidth;
                                         if (item.outerWidth() > parseInt(item.css('min-width'))) {
                                             data.rightedge = _rightedge;
                                             return;
@@ -438,8 +440,8 @@ define([
                                     var btn = _btns[i];
                                     if ( !btn.hasClass('compactwidth') && !btn.hasClass('slot-btn-more')) {
                                         btn.addClass('compactwidth');
-                                        _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
-                                        if ((Common.UI.isRTL() && _rightedge >= 0) || (_rightedge <= _maxright))
+                                        _rightedge = $active.outerWidth() + _staticPanelWidth;
+                                        if (_rightedge <= _maxright)
                                             break;
                                     }
                                 }
@@ -453,10 +455,10 @@ define([
                                     var btn = _btns[i];
                                     if ( btn.hasClass('compactwidth') ) {
                                         btn.removeClass('compactwidth');
-                                        _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
-                                        if ( (Common.UI.isRTL() && _rightedge < 0) || (_rightedge > _maxright)) {
+                                        _rightedge = $active.outerWidth() + _staticPanelWidth;
+                                        if (_rightedge > _maxright) {
                                             btn.addClass('compactwidth');
-                                            _rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
+                                            _rightedge = $active.outerWidth() + _staticPanelWidth;
                                             break;
                                         }
                                     }
@@ -466,7 +468,7 @@ define([
                                     for (var i=0; i<_flex.length; i++) {
                                         var item = _flex[i];
                                         item.el.css('width', item.width);
-                                        data.rightedge = Common.UI.isRTL() ? $active.get(0).getBoundingClientRect().left : $active.get(0).getBoundingClientRect().right;
+                                        data.rightedge = $active.get(0).getBoundingClientRect().right;
                                     }
                                 }
                             }
@@ -530,10 +532,11 @@ define([
             },
 
             clearMoreButton: function(tab) {
+                console.log('clearMoreButton');
                 var panel = this.$panels.filter('[data-tab=' + tab + ']');
                 if ( panel.length ) {
                     var data = panel.data();
-                    data.buttons = data.flex = data.rightedge = undefined;
+                    data.buttons = data.flex = data.rightedge = data.leftedge = undefined;
                     panel.find('.more-box').remove();
                 }
                 if (btnsMore[tab]) {
@@ -545,10 +548,6 @@ define([
             },
 
             resizeToolbar: function(reset) {
-                if (Common.UI.isRTL()) {
-                    this.resizeToolbarRTL(reset);
-                    return;
-                }
                 var $active = this.$panels.filter('.active'),
                     more_section = $active.find('.more-box');
 
@@ -558,8 +557,9 @@ define([
 
                 var more_section_width = parseInt(more_section.css('width')) || 0,
                     box_controls_width = $active.parents('.box-controls').width(),
+                    _staticPanelWidth = $active.parents('.box-controls').find('.panel.static').outerWidth(),
                     _maxright = box_controls_width,
-                    _rightedge = $active.get(0).getBoundingClientRect().right,
+                    _rightedge = $active.outerWidth() + _staticPanelWidth,
                     delta = (this._prevBoxWidth) ? (_maxright - this._prevBoxWidth) : -1,
                     hideAllMenus = false;
                 this._prevBoxWidth = _maxright;
@@ -593,11 +593,12 @@ define([
                             this.$moreBar.prepend(item);
                             hideAllMenus = true;
                         } else if (item.hasClass('group')) {
-                            _rightedge = $active.get(0).getBoundingClientRect().right;
+                            //_rightedge = $active.get(0).getBoundingClientRect().right;
+                            _rightedge = $active.outerWidth() + _staticPanelWidth;
                             if (_rightedge <= _maxright) // stop moving items
                                 break;
 
-                            var offset = item.offset(),
+                            var rect = item.get(0).getBoundingClientRect(),
                                 item_width = item.outerWidth(),
                                 children = item.children();
                             if (!item.attr('inner-width') && item.attr('group-state') !== 'open') {
@@ -607,7 +608,7 @@ define([
                                     child.attr('inner-width', child.outerWidth());
                                 }
                             }
-                            if ((offset.left > _maxright || children.length==1) && item.attr('group-state') != 'open') {
+                            if (((rect.left > _maxright || Common.UI.isRTL() && box_controls_width - rect.right > _maxright) || children.length==1) && item.attr('group-state') != 'open') {
                                 // move group
                                 this.$moreBar.prepend(item);
                                 if (last_separator) {
@@ -615,7 +616,7 @@ define([
                                     last_separator.removeAttr('hidden-on-resize');
                                 }
                                 hideAllMenus = true;
-                            } else if ( offset.left+item_width > _maxright ) {
+                            } else if ((Common.UI.isRTL() ? box_controls_width - rect.right : rect.left)+item_width > _maxright ) {
                                 // move buttons from group
                                 for (var j=children.length-1; j>=0; j--) {
                                     var child = $(children[j]);
@@ -628,9 +629,9 @@ define([
                                         hideAllMenus = true;
                                         break;
                                     } else {
-                                        var child_offset = child.offset(),
+                                        var child_rect = child.get(0).getBoundingClientRect(),
                                             child_width = child.outerWidth();
-                                        if (child_offset.left+child_width>_maxright) {
+                                        if ((Common.UI.isRTL() ? box_controls_width - child_rect.right : child_rect.left)+child_width>_maxright) {
                                             if (!last_group) {
                                                 last_group = $('<div></div>');
                                                 last_group.addClass(items[i].className);
@@ -693,7 +694,7 @@ define([
                         // from more panel to toolbar
                         for (var i=0; i<items.length; i++) {
                             var item = $(items[i]);
-                            _rightedge = $active.get(0).getBoundingClientRect().right;
+                            _rightedge = $active.outerWidth() + _staticPanelWidth;
                             if (!item.is(':visible') && item.attr('data-hidden-tb-item')) { // move invisible items as is
                                 item.removeAttr('data-hidden-tb-item');
                                 more_section.before(item);
@@ -728,7 +729,7 @@ define([
                                     for (var j=0; j<children.length; j++) {
                                         if (islast && j==children.length-1)
                                              _maxright = box_controls_width; // try to move last item from last group
-                                        _rightedge = $active.get(0).getBoundingClientRect().right;
+                                        _rightedge = $active.outerWidth() + _staticPanelWidth;
                                         var child = $(children[j]);
                                         if (child.hasClass('elset')) { // don't add group - no enough space
                                             need_break = true;
@@ -794,256 +795,6 @@ define([
                 hideAllMenus && Common.UI.Menu.Manager.hideAll();
             },
 
-            resizeToolbarRTL: function(reset) {
-                var $active = this.$panels.filter('.active'),
-                    more_section = $active.find('.more-box');
-
-                if (more_section.length===0) {
-                    this.setMoreButton($active.attr('data-tab'), $active);
-                }
-
-                var more_section_width = parseInt(more_section.css('width')) || 0,
-                    box_controls_width = $active.parents('.box-controls').width(),
-                    _maxright = box_controls_width,
-                    _minLeft = 0,
-                    _leftedge = $active.get(0).getBoundingClientRect().left,
-                    delta = (this._prevBoxWidth) ? (_maxright - this._prevBoxWidth) : -1,
-                    hideAllMenus = false;
-                this._prevBoxWidth = _maxright;
-                if (more_section.is(':visible')) {
-                    _maxright -= more_section_width;
-                    _minLeft +=  more_section_width;
-                }
-
-                if (this.$moreBar && this.$moreBar.parent().is(':visible')) {
-                    this.$moreBar.parent().css('max-width', Common.Utils.innerWidth());
-                }
-
-                if ( (reset || delta<0) && (_leftedge < _minLeft)) { // from toolbar to more section
-                    if (!more_section.is(':visible') ) {
-                        more_section.css('display', 'block');
-                        _minLeft += parseInt(more_section.css('width'));
-                    }
-                    var last_separator = null,
-                        last_group = null,
-                        prevchild = this.$moreBar.children().filter("[data-hidden-tb-item!=true]");
-                    if (prevchild.length>0) {
-                        prevchild = $(prevchild[0]);
-                        if (prevchild.hasClass('separator'))
-                            last_separator = prevchild;
-                        if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
-                            last_group = prevchild;
-                    }
-                    var items = $active.find('> div:not(.more-box)');
-                    var need_break = false;
-                    for (var i=items.length-1; i>=0; i--) {
-                        var item = $(items[i]);
-                        if (!item.is(':visible') && !item.attr('hidden-on-resize')) { // move invisible items as is and set special attr
-                            item.attr('data-hidden-tb-item', true);
-                            this.$moreBar.prepend(item);
-                            hideAllMenus = true;
-                        } else if (item.hasClass('group')) {
-                            _leftedge = $active.get(0).getBoundingClientRect().left;
-                            if (_leftedge >= _minLeft) // stop moving items
-                                break;
-
-                            var offset = item.offset(),
-                                item_width = item.outerWidth(),
-                                children = item.children();
-                            if (!item.attr('inner-width') && item.attr('group-state') !== 'open') {
-                                item.attr('inner-width', item_width);
-                                for (var j=children.length-1; j>=0; j--) {
-                                    var child = $(children[j]);
-                                    child.attr('inner-width', child.outerWidth());
-                                }
-                            }
-                            if ((offset.left < _minLeft || children.length==1) && item.attr('group-state') != 'open') {
-                                // move group
-                                this.$moreBar.prepend(item);
-                                if (last_separator) {
-                                    last_separator.css('display', '');
-                                    last_separator.removeAttr('hidden-on-resize');
-                                }
-                                hideAllMenus = true;
-                            } else if ( offset.left < _minLeft ) {
-                                // move buttons from group
-                                for (var j=children.length-1; j>=0; j--) {
-                                    var child = $(children[j]);
-                                    if (child.hasClass('elset')) {
-                                        this.$moreBar.prepend(item);
-                                        if (last_separator) {
-                                            last_separator.css('display', '');
-                                            last_separator.removeAttr('hidden-on-resize');
-                                        }
-                                        hideAllMenus = true;
-                                        break;
-                                    } else {
-                                        var child_offset = child.offset(),
-                                            child_width = child.outerWidth();
-                                        if (child_offset.left < _minLeft) {
-                                            if (!last_group) {
-                                                last_group = $('<div></div>');
-                                                last_group.addClass(items[i].className);
-                                                var attrs = items[i].attributes;
-                                                for (var k = 0; k < attrs.length; k++) {
-                                                    last_group.attr(attrs[k].name, attrs[k].value);
-                                                }
-                                                this.$moreBar.prepend(last_group);
-                                                if (last_separator) {
-                                                    last_separator.css('display', '');
-                                                    last_separator.removeAttr('hidden-on-resize');
-                                                }
-                                            }
-                                            last_group.prepend(child);
-                                            hideAllMenus = true;
-                                        } else {
-                                            need_break = true;
-                                            break;
-                                        }
-                                    }
-                                }
-                                if (item.children().length<1) { // all buttons are moved
-                                    item.remove();
-                                    last_group && last_group.removeAttr('group-state').attr('inner-width', item.attr('inner-width'));
-                                    last_group = null;
-                                } else {
-                                    last_group && last_group.attr('group-state', 'open') && item.attr('group-state', 'open');
-                                }
-                                if (need_break)
-                                    break;
-                            } else {
-                                break;
-                            }
-                            last_separator = null;
-                        } else if (item.hasClass('separator')) {
-                            this.$moreBar.prepend(item);
-                            item.css('display', 'none');
-                            item.attr('hidden-on-resize', true);
-                            last_separator = item;
-                            hideAllMenus = true;
-                        }
-                    }
-                } else if ((reset || delta>0) && more_section.is(':visible')) {
-                    var last_separator = null,
-                        last_group = null,
-                        prevchild = $active.find('> div:not(.more-box)');
-                    var last_width = 0;
-                    if (prevchild.length>0) {
-                        prevchild = $(prevchild[prevchild.length-1]);
-                        if (prevchild.hasClass('separator')) {
-                            last_separator = prevchild;
-                            last_width = parseInt(last_separator.css('margin-left')) + parseInt(last_separator.css('margin-right')) + 1;
-                        }
-                        if (prevchild.hasClass('group') && prevchild.attr('group-state') == 'open')
-                            last_group = prevchild;
-                    }
-
-                    var items = this.$moreBar.children();
-                    if (items.length>0) {
-                        // from more panel to toolbar
-                        for (var i=0; i<items.length; i++) {
-                            var item = $(items[i]);
-                            _leftedge = $active.get(0).getBoundingClientRect().left;
-                            if (!item.is(':visible') && item.attr('data-hidden-tb-item')) { // move invisible items as is
-                                item.removeAttr('data-hidden-tb-item');
-                                more_section.before(item);
-                                if (this.$moreBar.children().filter('.group').length == 0) {
-                                    this.hideMoreBtns();
-                                    more_section.css('display', "none");
-                                }
-                            } else if (item.hasClass('group')) {
-                                var islast = false;
-                                if (this.$moreBar.children().filter('.group').length == 1) {
-                                    _maxright = box_controls_width; // try to move last group
-                                    islast = true;
-                                }
-
-                                var item_width = parseInt(item.attr('inner-width') || 0);
-                                if (_leftedge > _minLeft && item.attr('group-state') != 'open') {
-                                    // move group
-                                    more_section.before(item);
-                                    if (last_separator) {
-                                        last_separator.css('display', '');
-                                        last_separator.removeAttr('hidden-on-resize');
-                                    }
-                                    if (this.$moreBar.children().filter('.group').length == 0) {
-                                        this.hideMoreBtns();
-                                        more_section.css('display', "none");
-                                    }
-                                    hideAllMenus = true;
-                                } else if ( _leftedge < _minLeft) {
-                                    // move buttons from group
-                                    var children = item.children();
-                                    _maxright = box_controls_width - more_section_width;
-                                    for (var j=0; j<children.length; j++) {
-                                        if (islast && j==children.length-1)
-                                            _maxright = box_controls_width; // try to move last item from last group
-                                        _leftedge = $active.get(0).getBoundingClientRect().left;
-                                        var child = $(children[j]);
-                                        if (child.hasClass('elset')) { // don't add group - no enough space
-                                            need_break = true;
-                                            break;
-                                        } else {
-                                            var child_width = parseInt(child.attr('inner-width') || 0) + (!last_group ? parseInt(item.css('padding-left')) : 0); // if new group is started add left-padding
-                                            if (_leftedge < _minLeft) {
-                                                if (!last_group) {
-                                                    last_group = $('<div></div>');
-                                                    last_group.addClass(items[i].className);
-                                                    var attrs = items[i].attributes;
-                                                    for (var k = 0; k < attrs.length; k++) {
-                                                        last_group.attr(attrs[k].name, attrs[k].value);
-                                                    }
-                                                    if (last_group.hasClass('flex')) { // need to update flex groups list
-                                                        $active.data().flex = null;
-                                                    }
-                                                    more_section.before(last_group);
-                                                    if (last_separator) {
-                                                        last_separator.css('display', '');
-                                                        last_separator.removeAttr('hidden-on-resize');
-                                                    }
-                                                }
-                                                last_group.append(child);
-                                                hideAllMenus = true;
-                                            } else {
-                                                need_break = true;
-                                                break;
-                                            }
-                                        }
-                                    }
-                                    if (item.children().length<1) { // all buttons are moved
-                                        item.remove();
-                                        last_group && last_group.removeAttr('group-state').attr('inner-width', item.attr('inner-width'));
-                                        last_group = null;
-                                        if (this.$moreBar.children().filter('.group').length == 0) {
-                                            this.hideMoreBtns();
-                                            more_section.css('display', "none");
-                                        }
-                                    } else {
-                                        last_group && last_group.attr('group-state', 'open') && item.attr('group-state', 'open');
-                                    }
-                                    if (need_break)
-                                        break;
-                                } else {
-                                    break;
-                                }
-                                last_separator = null; last_width = 0;
-                            } else if (item.hasClass('separator')) {
-                                more_section.before(item);
-                                item.css('display', 'none');
-                                item.attr('hidden-on-resize', true);
-                                last_separator = item;
-                                last_width = parseInt(last_separator.css('margin-left')) + parseInt(last_separator.css('margin-right')) + 1;
-                                hideAllMenus = true;
-                            }
-                        }
-                    } else {
-                        this.hideMoreBtns();
-                        more_section.css('display', "none");
-                    }
-                }
-                hideAllMenus && Common.UI.Menu.Manager.hideAll();
-            },
-
             onMoreHide: function(btn, e) {
                 var moreContainer = btn.panel.parent();
                 if (btn.pressed) {

From a630e74c53157a09a791e5072ce4ff753690563a Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Mon, 26 Dec 2022 14:19:47 +0300
Subject: [PATCH 39/42] [rtl] Fix tabs scrolling

---
 apps/common/main/lib/component/Mixtbar.js | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index 24944dcff..1ecf96d83 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -93,6 +93,7 @@ define([
                 Common.UI.BaseView.prototype.initialize.call(this, options);
 
                 var _template_tabs =
+                    !Common.UI.isRTL() ?
                     '<section class="tabs">' +
                         '<a class="scroll left" data-hint="0" data-hint-direction="bottom" data-hint-offset="-7, 0" data-hint-title="V"></a>' +
                         '<ul>' +
@@ -108,6 +109,22 @@ define([
                             '<% } %>' +
                         '</ul>' +
                         '<a class="scroll right" data-hint="0" data-hint-direction="bottom" data-hint-offset="-7, 0" data-hint-title="R"></a>' +
+                    '</section>' :
+                    '<section class="tabs">' +
+                        '<a class="scroll right" data-hint="0" data-hint-direction="bottom" data-hint-offset="-7, 0" data-hint-title="R"></a>' +
+                        '<ul>' +
+                            '<% for(var i in items) { %>' +
+                                '<% if (typeof items[i] == "object") { %>' +
+                                '<li class="ribtab' +
+                                        '<% if (items[i].haspanel===false) print(" x-lone") %>' +
+                                        '<% if (items[i].extcls) print(\' \' + items[i].extcls) %>"' +
+                                        '<% if (typeof items[i].layoutname == "string") print(" data-layout-name=" + \' \' +  items[i].layoutname) + \' \' %>>' +
+                                    '<a data-tab="<%= items[i].action %>" data-title="<%= items[i].caption %>" data-hint="0" data-hint-direction="bottom" data-hint-offset="small" <% if (typeof items[i].dataHintTitle !== "undefined") { %> data-hint-title="<%= items[i].dataHintTitle %>" <% } %>><%= items[i].caption %></a>' +
+                                '</li>' +
+                                '<% } %>' +
+                            '<% } %>' +
+                        '</ul>' +
+                        '<a class="scroll left" data-hint="0" data-hint-direction="bottom" data-hint-offset="-7, 0" data-hint-title="V"></a>' +
                     '</section>';
 
                 this.$layout = $(options.template({
@@ -365,13 +382,13 @@ define([
                 var _left_bound_ = Math.round($boxTabs.offset().left),
                     _right_bound_ = Math.round(_left_bound_ + $boxTabs.width());
 
-                var tab = this.$tabs.filter(':visible:first').get(0);
+                var tab = this.$tabs.filter(Common.UI.isRTL() ? ':visible:last' : ':visible:first').get(0);
                 if ( !tab ) return false;
 
                 var rect = tab.getBoundingClientRect();
 
                 if ( !(Math.round(rect.left) < _left_bound_) ) {
-                    tab = this.$tabs.filter(':visible:last').get(0);
+                    tab = this.$tabs.filter(Common.UI.isRTL() ? ':visible:first' : ':visible:last').get(0);
                     rect = tab.getBoundingClientRect();
 
                     if (!(Math.round(rect.right) > _right_bound_))
@@ -532,7 +549,6 @@ define([
             },
 
             clearMoreButton: function(tab) {
-                console.log('clearMoreButton');
                 var panel = this.$panels.filter('[data-tab=' + tab + ']');
                 if ( panel.length ) {
                     var data = panel.data();

From 727b344c89f820ef80f3feca1c8ecbc94f86c6b6 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Tue, 27 Dec 2022 22:44:58 +0300
Subject: [PATCH 40/42] [rtl] Fix toolbar in view and comment mode

---
 apps/common/main/lib/component/Mixtbar.js    |  9 +++++----
 apps/common/main/lib/controller/Plugins.js   |  2 +-
 apps/common/main/resources/less/toolbar.less | 10 ++++++++++
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/apps/common/main/lib/component/Mixtbar.js b/apps/common/main/lib/component/Mixtbar.js
index 1ecf96d83..692d3b43c 100644
--- a/apps/common/main/lib/component/Mixtbar.js
+++ b/apps/common/main/lib/component/Mixtbar.js
@@ -56,7 +56,7 @@ define([
 
         var onScrollTabs = function(opts, e) {
             var sv = $boxTabs.scrollLeft();
-            if ( sv || opts == 'right' ) {
+            if (sv || opts == 'right' || Common.UI.isRTL() && opts == 'left') {
                 $boxTabs.animate({scrollLeft: opts == 'left' ? sv - 100 : sv + 100}, 200);
             }
         };
@@ -412,6 +412,7 @@ define([
                     if ( $active && $active.length ) {
                         var _maxright = $active.parents('.box-controls').width(),
                             _staticPanelWidth = $active.parents('.box-controls').find('.panel.static').outerWidth();
+                        if (!_staticPanelWidth) _staticPanelWidth = 0;
                         var data = $active.data(),
                             _rightedge = data.rightedge,
                             _btns = data.buttons,
@@ -444,7 +445,6 @@ define([
                                 if (_flex.length>0) {
                                     for (var i=0; i<_flex.length; i++) {
                                         var item = _flex[i].el;
-                                        //_rightedge = $active.get(0).getBoundingClientRect().right;
                                         _rightedge = $active.outerWidth() + _staticPanelWidth;
                                         if (item.outerWidth() > parseInt(item.css('min-width'))) {
                                             data.rightedge = _rightedge;
@@ -574,8 +574,9 @@ define([
                 var more_section_width = parseInt(more_section.css('width')) || 0,
                     box_controls_width = $active.parents('.box-controls').width(),
                     _staticPanelWidth = $active.parents('.box-controls').find('.panel.static').outerWidth(),
-                    _maxright = box_controls_width,
-                    _rightedge = $active.outerWidth() + _staticPanelWidth,
+                    _maxright = box_controls_width;
+                if (!_staticPanelWidth) _staticPanelWidth = 0;
+                var _rightedge = $active.outerWidth() + _staticPanelWidth,
                     delta = (this._prevBoxWidth) ? (_maxright - this._prevBoxWidth) : -1,
                     hideAllMenus = false;
                 this._prevBoxWidth = _maxright;
diff --git a/apps/common/main/lib/controller/Plugins.js b/apps/common/main/lib/controller/Plugins.js
index 8b589d926..2cd7d2b91 100644
--- a/apps/common/main/lib/controller/Plugins.js
+++ b/apps/common/main/lib/controller/Plugins.js
@@ -263,7 +263,7 @@ define([
                     } else {
                         _group.appendTo(me.$toolbarPanelPlugins);
                         $('<div class="separator long invisible"></div>').appendTo(me.$toolbarPanelPlugins);
-                        _group = $('<div class="group" style="padding-left: 0;"></div>');
+                        _group = $('<div class="group" style="' + (Common.UI.isRTL() ? 'padding-right: 0;' : 'padding-left: 0;') + '"></div>');
                     }
 
                     var btn = me.panelPlugins.createPluginButton(model);
diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index b86a58eb6..201fcd2fd 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -169,6 +169,11 @@
                 &:after {
                     transform: rotate(135deg);
                     margin-left: 8px;
+
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: 4px;
+                    }
                 }
             }
             &.right{
@@ -178,6 +183,11 @@
                 &:after {
                     transform: rotate(-45deg);
                     margin-left: 4px;
+
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: 8px;
+                    }
                 }
             }
 

From f56ab702c8ad2f005675a5c3da10d19bbfc361b5 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Fri, 30 Dec 2022 00:23:13 +0300
Subject: [PATCH 41/42] [rtl] Fix statusbar in DE, PE, SSE

---
 apps/common/main/lib/view/LanguageDialog.js   |   4 +-
 .../main/resources/less/language-dialog.less  |  18 ++
 .../common/main/resources/less/separator.less |   6 +
 .../main/app/template/StatusBar.template      |   6 +-
 .../main/resources/less/statusbar.less        |  65 +++++-
 .../main/app/template/StatusBar.template      |  14 +-
 .../main/resources/less/statusbar.less        |  97 ++++++++-
 .../main/app/template/StatusBar.template      |   4 +-
 .../main/app/view/Statusbar.js                |  61 ++++--
 .../main/resources/less/statusbar.less        | 191 ++++++++++++++++++
 10 files changed, 428 insertions(+), 38 deletions(-)

diff --git a/apps/common/main/lib/view/LanguageDialog.js b/apps/common/main/lib/view/LanguageDialog.js
index e36d87523..e26b87f62 100644
--- a/apps/common/main/lib/view/LanguageDialog.js
+++ b/apps/common/main/lib/view/LanguageDialog.js
@@ -93,7 +93,7 @@ define([
                     '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
                         '<% _.each(items, function(item) { %>',
                         '<li id="<%= item.id %>" data-value="<%= item.value %>">',
-                            '<a tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= item.value %>">',
+                            '<a tabindex="-1" type="menuitem" langval="<%= item.value %>">',
                                 '<i class="icon <% if (item.spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>',
                                 '<%= scope.getDisplayValue(item) %>',
                             '</a>',
@@ -137,7 +137,7 @@ define([
 
     onLangSelect: function(cmb, rec, e) {
         cmb.$el.find('.input-icon').toggleClass('spellcheck-lang', rec && rec.spellcheck);
-        cmb._input.css('padding-left', rec && rec.spellcheck ? 25 : 3);
+        cmb._input.css(Common.UI.isRTL() ? 'padding-right' : 'padding-left', rec && rec.spellcheck ? 25 : 3);
     },
 
     onPrimary: function() {
diff --git a/apps/common/main/resources/less/language-dialog.less b/apps/common/main/resources/less/language-dialog.less
index 04731f1e7..dee71416b 100644
--- a/apps/common/main/resources/less/language-dialog.less
+++ b/apps/common/main/resources/less/language-dialog.less
@@ -8,6 +8,9 @@
 li {
   .icon.spellcheck-lang {
     margin: -3px 4px 0 -24px;
+    .rtl & {
+      margin: -3px -24px 0 4px;
+    }
   }
 
   &.selected, a.checked {
@@ -39,6 +42,13 @@ li {
     li .icon.lang-flag {
       margin-top: 1px;
     }
+    li a {
+      padding-left: 28px !important;
+      .rtl & {
+        padding-left: 0 !important;
+        padding-right: 28px !important;
+      }
+    }
   }
 
   .input-icon {
@@ -46,10 +56,18 @@ li {
     &.spellcheck-lang { // spell check indicator
       left: 2px;
       top: 1px;
+      .rtl & {
+        left: auto;
+        right: 2px;
+      }
     }
     &.lang-flag { // language flags
       left: 5px;
       top: 5px;
+      .rtl & {
+        left: auto;
+        right: 5px;
+      }
     }
   }
 }
diff --git a/apps/common/main/resources/less/separator.less b/apps/common/main/resources/less/separator.less
index d54ba5aed..e570c479d 100644
--- a/apps/common/main/resources/less/separator.less
+++ b/apps/common/main/resources/less/separator.less
@@ -15,6 +15,12 @@
     padding: 0;
     width: 0;
 
+    .rtl & {
+        border-left: none;
+        border-right: @scaled-one-px-value-ie solid @border-divider-ie;
+        border-right: @scaled-one-px-value solid @border-divider;
+    }
+
     &.horizontal {
         height: 0;
         display: block;
diff --git a/apps/documenteditor/main/app/template/StatusBar.template b/apps/documenteditor/main/app/template/StatusBar.template
index 15fffff40..1ee6d1b28 100644
--- a/apps/documenteditor/main/app/template/StatusBar.template
+++ b/apps/documenteditor/main/app/template/StatusBar.template
@@ -1,9 +1,9 @@
 
 <div class="statusbar" style="display:table;">
     <div class="status-group dropup">
-        <label id="label-pages" class="status-label dropdown-toggle margin-top-large" style="margin-left: 40px;" data-toggle="dropdown" data-hint="0" data-hint-direction="top"><%= textPageNumber %></label>
+        <label id="label-pages" class="status-label dropdown-toggle margin-top-large" data-toggle="dropdown" data-hint="0" data-hint-direction="top"><%= textPageNumber %></label>
         <div id="status-goto-box" class="dropdown-menu">
-            <label style="float:left;line-height:22px;"><%= textGotoPage %></label>
+            <label><%= textGotoPage %></label>
             <div id="status-goto-page" style="display:inline-block;"></div>
         </div>
     </div>
@@ -31,6 +31,6 @@
                 <label id="label-zoom" class="status-label">Zoom 100%</label>
             </div>
         </div>
-        <button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small" style="margin-right:40px;"><span class="icon toolbar__icon btn-zoomup">&nbsp;</span></button>
+        <button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small"><span class="icon toolbar__icon btn-zoomup">&nbsp;</span></button>
     </div>
 </div>
diff --git a/apps/documenteditor/main/resources/less/statusbar.less b/apps/documenteditor/main/resources/less/statusbar.less
index b59016d5d..da9e369a1 100644
--- a/apps/documenteditor/main/resources/less/statusbar.less
+++ b/apps/documenteditor/main/resources/less/statusbar.less
@@ -6,6 +6,22 @@
         position: relative;
     }
 
+    #label-pages {
+        margin-left: 40px;
+        .rtl & {
+            margin-left: 0;
+            margin-right: 40px;
+        }
+    }
+
+    #btn-zoom-up {
+        margin-right: 40px;
+        .rtl & {
+            margin-right: 0;
+            margin-left: 40px;
+        }
+    }
+
     #label-pages, #label-zoom {
         cursor: pointer;
     }
@@ -26,12 +42,12 @@
         text-align: center;
     }
 
-    #btn-zoom-topage {
-        margin-right: 8px;
-    }
-
-    #btn-zoom-towidth {
+    #btn-zoom-topage, #btn-zoom-towidth {
         margin-right: 8px;
+        .rtl & {
+            margin-right: 0;
+            margin-left: 8px;
+        }
     }
 
     .status-group {
@@ -80,6 +96,11 @@
             min-width: 80px;
             margin-left: -4px;
 
+            .rtl & {
+                margin-left: 0;
+                margin-right: -4px;
+            }
+
             li {
                 text-align: center;
 
@@ -96,6 +117,9 @@
 
         li {
             text-align: left;
+            .rtl & {
+                text-align: right;
+            }
         }
     }
 
@@ -105,9 +129,21 @@
         margin-bottom: 2px;
         min-width: 130px;
 
+        .rtl & {
+            margin-left: 0;
+            margin-right: 40px;
+        }
+
         > label {
             display: inline-block;
             margin-right: 10px;
+            float:left;
+            line-height:22px;
+            .rtl & {
+                margin-right: 0;
+                margin-left: 10px;
+                float: right;
+            }
         }
 
         > input[type=text] {
@@ -124,6 +160,12 @@
         width: 285px;
         font-size: 12px;
 
+        .rtl & {
+            padding: 14px 14px 14px 0;
+            margin-left: 0;
+            margin-right: 137px;
+        }
+
         > label {
             white-space: normal;
         }
@@ -144,6 +186,11 @@
                     margin-right: 15px;
                     overflow: hidden;
 
+                    .rtl & {
+                        margin-right: 0;
+                        margin-left: 15px;
+                    }
+
                     &.offline, &.viewmode {
                         display: none;
                     }
@@ -166,6 +213,10 @@
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 vertical-align: middle;
+                .rtl & {
+                    padding-left: 0;
+                    padding-right: 16px;
+                }
             }
         }
     }
@@ -176,5 +227,9 @@
 
     #btn-select-tool {
         margin-right: 8px;
+        .rtl & {
+            margin-right: 0;
+            margin-left: 8px;
+        }
     }
 }
diff --git a/apps/presentationeditor/main/app/template/StatusBar.template b/apps/presentationeditor/main/app/template/StatusBar.template
index 8df4781e6..fd7cd0465 100644
--- a/apps/presentationeditor/main/app/template/StatusBar.template
+++ b/apps/presentationeditor/main/app/template/StatusBar.template
@@ -1,27 +1,27 @@
 
 <div class="statusbar" style="display:table;">
     <div class="status-group">
-        <div id="slot-status-btn-preview" style="display: inline-block;margin-left: 9px;" class="margin-top-small"></div>
+        <div id="slot-status-btn-preview" style="display: inline-block;" class="margin-top-small"></div>
     </div>
     <div class="status-group dropup">
-        <label id="status-label-pages" class="status-label dropdown-toggle margin-top-large" style="margin-left: 7px; display: none;" data-toggle="dropdown" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
+        <label id="status-label-pages" class="status-label dropdown-toggle margin-top-large" style="display: none;" data-toggle="dropdown" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
         <div id="status-goto-box" class="dropdown-menu">
-            <label style="float:left;line-height:22px;"><%= scope.goToPageText %></label>
+            <label><%= scope.goToPageText %></label>
             <div id="status-goto-page" style="display:inline-block;"></div>
         </div>
     </div>
     <div id="status-users-ct" class="status-group dropup" style="display:none;">
-        <div class="separator short" style="margin-right: 12px; margin-left: 40px;"></div>
+        <div class="separator short"></div>
         <div id="status-users-block" style="display:inline-block; cursor:pointer;">
             <span id="status-users-icon" class="img-commonctrl" style="margin-bottom: 2px;"></span>
             <label id="status-users-count" class="status-label" style="font-size: 14px; font-weight: normal; margin-top: -1px;">+</label>
         </div>
         <div id="status-users-menu" class="dropdown-menu">
-            <label style="display: block;margin-right: 14px;"><%= scope.tipUsers %></label>
+            <label class="tip-users" style="display: block;"><%= scope.tipUsers %></label>
             <div id="status-users-list"></div>
             <label id="status-change-rights" class="link" style="margin-top: 15px;"><%= scope.txAccessRights %></label>
         </div>
-        <div class="separator short" style="margin-left: 10px;"></div>
+        <div class="separator short"></div>
     </div>
     <div class="status-group" style="width:100%; text-align:center;">
         <label id="status-label-action" class="status-label margin-top-large" data-layout-name="statusBar-actionStatus"></label>
@@ -40,6 +40,6 @@
                 <label id="status-label-zoom" class="status-label">Zoom 100%</label>
             </div>
         </div>
-        <button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small" style="margin-right:40px;"><span class="icon toolbar__icon btn-zoomup">&nbsp;</span></button>
+        <button id="btn-zoom-up" type="button" class="btn small btn-toolbar margin-top-small"><span class="icon toolbar__icon btn-zoomup">&nbsp;</span></button>
     </div>
 </div>
diff --git a/apps/presentationeditor/main/resources/less/statusbar.less b/apps/presentationeditor/main/resources/less/statusbar.less
index 06767765a..330fa6d01 100644
--- a/apps/presentationeditor/main/resources/less/statusbar.less
+++ b/apps/presentationeditor/main/resources/less/statusbar.less
@@ -27,12 +27,12 @@
         text-align: center;
     }
 
-    #btn-zoom-topage {
-        margin-right: 8px;
-    }
-
-    #btn-zoom-towidth {
+    #btn-zoom-topage, #btn-zoom-towidth {
         margin-right: 8px;
+        .rtl & {
+            margin-right: 0;
+            margin-left: 8px;
+        }
     }
 
     .status-group {
@@ -52,6 +52,30 @@
         .margin-top-small > .btn-group {
             margin-top: 3px;
         }
+
+        #slot-status-btn-preview {
+            margin-left: 9px;
+            .rtl & {
+                margin-left: 0;
+                margin-right: 9px;
+            }
+        }
+
+        #status-label-pages {
+            margin-left: 7px;
+            .rtl & {
+                margin-left: 0;
+                margin-right: 7px;
+            }
+        }
+
+        #btn-zoom-up {
+            margin-right: 40px;
+            .rtl & {
+                margin-right: 0;
+                margin-left: 40px;
+            }
+        }
     }
 
     .separator {
@@ -81,6 +105,11 @@
             min-width: 80px;
             margin-left: -4px;
 
+            .rtl & {
+                margin-left: 0;
+                margin-right: -4px;
+            }
+
             li {
                 text-align: center;
 
@@ -98,9 +127,21 @@
         margin-bottom: 2px;
         min-width: 130px;
 
+        .rtl & {
+            margin-left: 0;
+            margin-right: 40px;
+        }
+
         > label {
             display: inline-block;
             margin-right: 10px;
+            float: left;
+            line-height: 22px;
+            .rtl & {
+                margin-right: 0;
+                margin-left: 10px;
+                float: right;
+            }
         }
 
         > input[type=text] {
@@ -116,6 +157,12 @@
         width: 285px;
         font-size: 12px;
 
+        .rtl & {
+            padding: 14px 14px 14px 0;
+            margin-left: 0;
+            margin-right: 142px;
+        }
+
         > label {
             white-space: normal;
         }
@@ -136,6 +183,11 @@
                     margin-right: 15px;
                     overflow: hidden;
 
+                    .rtl & {
+                        margin-right: 0;
+                        margin-left: 15px;
+                    }
+
                     &.offline, &.viewmode {
                         display: none;
                     }
@@ -158,7 +210,42 @@
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 vertical-align: middle;
+
+                .rtl & {
+                    padding-left: 0;
+                    padding-right: 16px;
+                }
+            }
+        }
+
+        .tip-users {
+            margin-right: 14px;
+            .rtl & {
+                margin-right: 0;
+                margin-left: 14px;
             }
         }
     }
+
+    #status-users-ct {
+        .separator {
+            &:first-of-type {
+                margin-right: 12px;
+                margin-left: 40px;
+                .rtl & {
+                    margin-right: 40px;
+                    margin-left: 12px;
+                }
+            }
+
+            &:last-of-type {
+                margin-left: 10px;
+                .rtl & {
+                    margin-left: 0;
+                    margin-right: 10px;
+                }
+            }
+        }
+
+    }
 }
diff --git a/apps/spreadsheeteditor/main/app/template/StatusBar.template b/apps/spreadsheeteditor/main/app/template/StatusBar.template
index e7ab60c19..8ee23cdb7 100644
--- a/apps/spreadsheeteditor/main/app/template/StatusBar.template
+++ b/apps/spreadsheeteditor/main/app/template/StatusBar.template
@@ -1,6 +1,6 @@
 
 <div class="statusbar">
-    <div id="status-tabs-scroll" class="status-group">
+    <div id="status-tabs-scroll" class="status-group" dir="ltr">
         <button id="status-btn-tabback" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="G"><i class="icon toolbar__icon btn-previtem">&nbsp;</i></button>
         <button id="status-btn-tabnext" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small" data-hint-title="J"><i class="icon toolbar__icon btn-nextitem">&nbsp;</i></button>
     </div>
@@ -18,7 +18,7 @@
                 <label id="status-label-zoom" class="status-label">Zoom 100%</label>
             </div>
         </div>
-        <button id="status-btn-zoomup" type="button" class="btn small btn-toolbar" style="margin-right:40px;"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
+        <button id="status-btn-zoomup" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomup">&nbsp;</i></button>
     </div>
     <div id="status-math-box" class="status-group">
         <div class="separator short"></div>
diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js
index 8a013f483..00fd9306b 100644
--- a/apps/spreadsheeteditor/main/app/view/Statusbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js
@@ -824,12 +824,20 @@ define([
                 var visible = false;
                 var right = parseInt(this.boxZoom.css('width'));
                 if (this.boxMath.is(':visible')) {
-                    this.boxMath.css({'right': right + 'px'});
+                    if (Common.UI.isRTL()) {
+                        this.boxMath.css({'left': right + 'px'});
+                    } else {
+                        this.boxMath.css({'right': right + 'px'});
+                    }
                     right += parseInt(this.boxMath.css('width'));
                     visible = true;
                 }
                 if (this.boxFiltered.is(':visible')) {
-                    this.boxFiltered.css({'right': right + 'px'});
+                    if (Common.UI.isRTL()) {
+                        this.boxFiltered.css({'left': right + 'px'});
+                    } else {
+                        this.boxFiltered.css({'right': right + 'px'});
+                    }
                     right += parseInt(this.boxFiltered.css('width'));
                     visible = true;
                 }
@@ -840,11 +848,21 @@ define([
                         var actionWidth = this.actionWidth || 140;
                         if (Common.Utils.innerWidth() - right - 129 - actionWidth - tabsWidth > 0) { // docWidth - right - left - this.boxAction.width
                             var left = tabsWidth + 129;
-                            this.boxAction.css({'right': right + 'px', 'left': left + 'px', 'width': 'auto'});
-                            this.boxAction.find('.separator').css('border-left-color', 'transparent');
+                            if (Common.UI.isRTL()) {
+                                this.boxAction.css({'left': right + 'px', 'right': left + 'px', 'width': 'auto'});
+                                this.boxAction.find('.separator').css('border-right-color', 'transparent');
+                            } else {
+                                this.boxAction.css({'right': right + 'px', 'left': left + 'px', 'width': 'auto'});
+                                this.boxAction.find('.separator').css('border-left-color', 'transparent');
+                            }
                         } else {
-                            this.boxAction.css({'right': right + 'px', 'left': 'auto', 'width': actionWidth + 'px'});
-                            this.boxAction.find('.separator').css('border-left-color', '');
+                            if (Common.UI.isRTL()) {
+                                this.boxAction.css({'left': right + 'px', 'right': 'auto', 'width': actionWidth + 'px'});
+                                this.boxAction.find('.separator').css('border-right-color', '');
+                            } else {
+                                this.boxAction.css({'right': right + 'px', 'left': 'auto', 'width': actionWidth + 'px'});
+                                this.boxAction.find('.separator').css('border-left-color', '');
+                            }
                             visible = true;
                         }
                         right += parseInt(this.boxAction.css('width'));
@@ -853,18 +871,32 @@ define([
                     this.boxMath.is(':visible') && this.boxMath.css({'top': '0px', 'bottom': 'auto'});
                     this.boxFiltered.is(':visible') && this.boxFiltered.css({'top': '0px', 'bottom': 'auto'});
                     this.boxZoom.css({'top': '0px', 'bottom': 'auto'});
-                    this.tabBarBox.css('right', right + 'px');
+                    if (Common.UI.isRTL()) {
+                        this.tabBarBox.css('left', right + 'px');
+                    } else {
+                        this.tabBarBox.css('right', right + 'px');
+                    }
                 } else {
                     if (this.boxAction.is(':visible')) {
-                        this.boxAction.css({'right': right + 'px', 'left': '135px', 'width': 'auto'});
-                        this.boxAction.find('.separator').css('border-left-color', 'transparent');
+                        if (Common.UI.isRTL()) {
+                            this.boxAction.css({'left': right + 'px', 'right': '135px', 'width': 'auto'});
+                            this.boxAction.find('.separator').css('border-right-color', 'transparent');
+                        } else {
+                            this.boxAction.css({'right': right + 'px', 'left': '135px', 'width': 'auto'});
+                            this.boxAction.find('.separator').css('border-left-color', 'transparent');
+                        }
                     }
                     this.boxMath.is(':visible') && this.boxMath.css({'top': 'auto', 'bottom': '0px'});
                     this.boxFiltered.is(':visible') && this.boxFiltered.css({'top': 'auto', 'bottom': '0px'});
                     this.boxZoom.css({'top': 'auto', 'bottom': '0px'});
-                    this.tabBarBox.css('right', '0px');
+                    if (Common.UI.isRTL()) {
+                        this.tabBarBox.css('left', '0px');
+                        this.boxZoom.find('.separator').css('border-right-color', visible ? '' : 'transparent');
+                    } else {
+                        this.tabBarBox.css('right', '0px');
+                        this.boxZoom.find('.separator').css('border-left-color', visible ? '' : 'transparent');
+                    }
                 }
-                this.boxZoom.find('.separator').css('border-left-color', visible ? '' : 'transparent');
 
                 if (this.statusMessage) {
                     var status = this.getStatusMessage(this.statusMessage);
@@ -890,11 +922,12 @@ define([
             },
 
             changeViewMode: function (mode) {
-                var edit = mode.isEdit;
+                var edit = mode.isEdit,
+                    styleLeft = Common.UI.isRTL() ? 'right' : 'left';
                 if (edit) {
-                    this.tabBarBox.css('left', '129px');
+                    this.tabBarBox.css(styleLeft, '129px');
                 } else {
-                    this.tabBarBox.css('left', '');
+                    this.tabBarBox.css(styleLeft, '');
                 }
 
                 this.tabbar.options.draggable = edit;
diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less
index ec2de36cb..e01b81193 100644
--- a/apps/spreadsheeteditor/main/resources/less/statusbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less
@@ -7,6 +7,11 @@
         float: left;
         padding: 3px 12px 0 10px;
         height: 25px;
+
+        .rtl & {
+            float: right;
+            padding: 3px 10px 0 12px;
+        }
     }
 
     #status-zoom-box {
@@ -16,12 +21,30 @@
         right: 0;
         height: 25px;
 
+        .rtl & {
+            right: auto;
+            left: 0;
+        }
+
         .separator {
             margin-top: -3px;
         }
 
+        #status-btn-zoomup {
+            margin-right: 40px;
+            .rtl & {
+                margin-right: 0;
+                margin-left: 40px;
+            }
+        }
+
         #status-btn-zoomdown {
             margin-left: 10px;
+
+            .rtl & {
+                margin-left: 0;
+                margin-right: 10px;
+            }
         }
 
         #status-label-zoom {
@@ -39,6 +62,10 @@
         float: right;
         height: 100%;
 
+        .rtl & {
+            float: left;
+        }
+
         #status-users-icon,#status-users-count {
             display: inline-block;
             cursor: pointer;
@@ -67,6 +94,14 @@
             left: auto;
             right: 0;
 
+            .rtl & {
+                padding: 14px 14px 14px 0;
+                margin-right: 0;
+                margin-left: 160px;
+                right: auto;
+                left: 0;
+            }
+
             > label {
                 white-space: normal;
             }
@@ -87,6 +122,11 @@
                         margin-right: 15px;
                         overflow: hidden;
 
+                        .rtl & {
+                            margin-right: 0;
+                            margin-left: 15px;
+                        }
+
                         &.offline, &.viewmode {
                             display: none;
                         }
@@ -109,6 +149,11 @@
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     vertical-align: middle;
+
+                    .rtl & {
+                        padding-left: 0;
+                        padding-right: 16px;
+                    }
                 }
             }
         }
@@ -122,6 +167,10 @@
         border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
         border-right: @scaled-one-px-value solid @border-toolbar;
         height: 25px;
+
+        .rtl & {
+            float: right;
+        }
     }
 
     #status-math-box,
@@ -136,21 +185,42 @@
             position: relative;
             padding-right: 11px;
             margin-top: -6px;
+
+            .rtl & {
+                padding-right: 0;
+                padding-left: 11px;
+            }
         }
     }
 
     #status-math-box {
         padding-right: 4px;
+        .rtl & {
+            padding-right: 0;
+            padding-left: 4px;
+        }
         label {
             padding-right: 10px;
+            .rtl & {
+                padding-right: 0;
+                padding-left: 10px;
+            }
         }
     }
 
     #status-filtered-box {
         padding-right: 14px;
+        .rtl & {
+            padding-right: 0;
+            padding-left: 14px;
+        }
         label {
             &:not(:last-child) {
                 padding-right: 10px;
+                .rtl & {
+                    padding-right: 0;
+                    padding-left: 10px;
+                }
             }
         }
     }
@@ -162,6 +232,11 @@
         left: 66px;
         right: 160px;
         //margin-right: 3px;
+
+        .rtl & {
+            left: 160px;
+            right: 66px;
+        }
     }
 
     #status-sheets-bar {
@@ -183,12 +258,21 @@
                 &:first-of-type {
                     span {
                         border-left: none;
+                        .rtl & {
+                            border-left: @scaled-one-px-value-ie solid @border-toolbar-ie;
+                            border-left: @scaled-one-px-value solid @border-toolbar;
+                            border-right: none;
+                        }
                     }
                 }
 
                 &:last-of-type {
                     span {
                         margin-right: 0;
+
+                        .rtl & {
+                            margin-left: 0;
+                        }
                     }
                 }
 
@@ -215,6 +299,11 @@
                     border-top: @scaled-one-px-value-ie solid @border-toolbar-ie;
                     border-top: @scaled-one-px-value solid @border-toolbar;
 
+                    .rtl & {
+                        margin-right: 0;
+                        margin-left: -1px;
+                    }
+
                     &:hover {
                         border-top-color: @border-toolbar-ie;
                         border-top-color: @border-toolbar;
@@ -272,12 +361,25 @@
                         bottom: 0;
                         margin-left: -7px;
                         left: 100%;
+
+                        .rtl & {
+                            border-left: none;
+                            border-right: 7px solid transparent;
+                            margin-left: 0;
+                            margin-right: -7px;
+                            left: auto;
+                            right: 100%;
+                        }
                     }
                 }
 
                 &.icon-visible {
                     > span {
                         padding-left: 25px;
+                        .rtl & {
+                            padding-left: 0;
+                            padding-right: 25px;
+                        }
                         > .toolbar__icon {
                             width: 20px;
                             height: 20px;
@@ -285,6 +387,10 @@
                             top: 0;
                             left: 0;
                             margin: 3px;
+                            .rtl & {
+                                left: auto;
+                                right: 0;
+                            }
                         }
                     }
                 }
@@ -305,6 +411,10 @@
                     &:first-child {
                         > span {
                             padding-left: 8px;
+                            .rtl & {
+                                padding-left: 0;
+                                padding-right: 8px;
+                            }
                         }
                     }
 
@@ -312,6 +422,13 @@
                         border-left: 2px solid @text-normal-ie;
                         border-left: 2px solid @text-normal;
                         padding-left: 9px;
+                        .rtl & {
+                            border-left: none;
+                            padding-left: 0;
+                            border-right: 2px solid @text-normal-ie;
+                            border-right: 2px solid @text-normal;
+                            padding-right: 9px;
+                        }
                     }
                     
                     &.right {
@@ -322,15 +439,33 @@
                             border-right: 2px solid @text-normal;
                             padding-right: 9px;
                             padding-left: 10px;
+                            .rtl & {
+                                border-left: none;
+                                border-right: none;
+                                border-right: @scaled-one-px-value-ie solid @border-toolbar-ie;
+                                border-right: @scaled-one-px-value solid @border-toolbar;
+                                border-left: 2px solid @text-normal-ie;
+                                border-left: 2px solid @text-normal;
+                                padding-right: 10px;
+                                padding-left: 9px;
+                            }
                         }
                     }
                     &.icon-visible {
                         > span {
                             padding-left: 24px;
+                            .rtl & {
+                                padding-left: 0;
+                                padding-right: 24px;
+                            }
                         }
                         &.right {
                             > span {
                                 padding-left: 25px;
+                                .rtl & {
+                                    padding-left: 0;
+                                    padding-right: 25px;
+                                }
                             }
                         }
                     }
@@ -340,6 +475,10 @@
                     margin-left: 20px;
                     width: @scaled-one-px-value-ie;
                     width: @scaled-one-px-value;
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: 20px;
+                    }
                     > span {
                         display: none;
                         padding: 0;
@@ -421,23 +560,43 @@
             min-width: 112px;
             margin-left: -4px;
 
+            .rtl & {
+                margin-left: 0;
+                margin-right: -4px;
+            }
+
             li {
                 text-align: left;
+                .rtl & {
+                    text-align: right;
+                }
                 a {
                     position: relative;
                     padding-left: 26px;
+                    .rtl & {
+                        padding-left: 0;
+                        padding-right: 26px;
+                    }
                     .color {
                         height: 21px;
                         width: 4px;
                         position: absolute;
                         top: 2px;
                         left: 0;
+                        .rtl & {
+                            left: auto;
+                            right: 0;
+                        }
                     }
                 }
                 .hidden-mark {
                     margin-left: 12px;
                     font-style: italic;
                     color: @text-secondary;
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: 12px;
+                    }
                 }
             }
         }
@@ -452,6 +611,11 @@
             min-width: 80px;
             margin-left: -4px;
 
+            .rtl & {
+                margin-left: 0;
+                margin-right: -4px;
+            }
+
             li {
                 text-align: center;
 
@@ -468,6 +632,9 @@
 
         li {
             text-align: left;
+            .rtl & {
+                text-align: right;
+            }
         }
     }
 
@@ -482,11 +649,22 @@
     .dropdown-menu {
         margin-top: 0;
         margin-left: -7px;
+        .rtl & {
+            margin-left: 0;
+            margin-right: -7px;
+        }
         li {
             > a {
                 padding: 5px 12px 5px 26px;
+                .rtl & {
+                    padding: 5px 56px 5px 12px;
+                }
                 &::before {
                     margin-left: -22px;
+                    .rtl & {
+                        margin-left: 0;
+                        margin-right: -22px;
+                    }
                 }
                 .item-caption {
                     min-width: 98px;
@@ -500,6 +678,11 @@
                     padding-left: 5px;
                     color: silver;
                     cursor: pointer;
+                    .rtl & {
+                        text-align: left;
+                        padding-left: 0;
+                        padding-right: 5px;
+                    }
                 }
             }
         }
@@ -516,8 +699,16 @@
     background-color: @background-toolbar-ie;
     background-color: @background-toolbar;
     z-index: @zindex-modal - 1;
+    .rtl & {
+        left: auto;
+        right: 115px;
+    }
 }
 
 .over-box {
     display: none;
+}
+
+.rtl .nav {
+    padding-right: 0;
 }
\ No newline at end of file

From 49e96c73e3d5a1a09b5e0e184b0c8d1938514168 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Fri, 30 Dec 2022 23:48:18 +0300
Subject: [PATCH 42/42] [rtl] Fix menu position in statusbar for DE, PE, SSE

---
 apps/common/main/lib/component/Menu.js             | 14 ++++++++++++++
 apps/common/main/lib/component/TabBar.js           |  4 ++--
 apps/documenteditor/main/app/view/Statusbar.js     |  2 +-
 .../main/resources/less/statusbar.less             | 10 ++++++++++
 apps/presentationeditor/main/app/view/Statusbar.js |  2 +-
 .../main/resources/less/statusbar.less             | 10 ++++++++++
 apps/spreadsheeteditor/main/app/view/Statusbar.js  |  7 ++++---
 .../main/resources/less/statusbar.less             |  2 +-
 8 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/apps/common/main/lib/component/Menu.js b/apps/common/main/lib/component/Menu.js
index 9ecbf461f..a05566b4d 100644
--- a/apps/common/main/lib/component/Menu.js
+++ b/apps/common/main/lib/component/Menu.js
@@ -180,6 +180,8 @@ define([
                         this.menuAlign = 'tr-br';
                     } else if (this.menuAlign === 'tr-br') {
                         this.menuAlign = 'tl-bl';
+                    } else if (this.menuAlign === 'bl-tl') {
+                        this.menuAlign = 'br-tr';
                     }
                 }
 
@@ -789,6 +791,18 @@ define([
             this.scrollAlwaysVisible = this.options.scrollAlwaysVisible;
             this.search = this.options.search;
 
+            if (Common.UI.isRTL()) {
+                if (this.menuAlign === 'tl-tr') {
+                    this.menuAlign = 'tr-tl';
+                } else if (this.menuAlign === 'tl-bl') {
+                    this.menuAlign = 'tr-br';
+                } else if (this.menuAlign === 'tr-br') {
+                    this.menuAlign = 'tl-bl';
+                } else if (this.menuAlign === 'bl-tl') {
+                    this.menuAlign = 'br-tr';
+                }
+            }
+
             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/lib/component/TabBar.js b/apps/common/main/lib/component/TabBar.js
index d7a16a04c..cfeadd6ac 100644
--- a/apps/common/main/lib/component/TabBar.js
+++ b/apps/common/main/lib/component/TabBar.js
@@ -569,8 +569,8 @@ define([
 
         checkInvisible: function(suppress) {
             var result = {
-                first: !this.isTabVisible(0),
-                last: !this.isTabVisible(this.tabs.length-1)
+                first: !this.isTabVisible(Common.UI.isRTL() ? this.tabs.length-1 : 0),
+                last: !this.isTabVisible(Common.UI.isRTL() ? 0 : this.tabs.length-1)
             };
 
             !suppress && this.fireEvent('tab:invisible', this, result);
diff --git a/apps/documenteditor/main/app/view/Statusbar.js b/apps/documenteditor/main/app/view/Statusbar.js
index 072bc49c4..019699b58 100644
--- a/apps/documenteditor/main/app/view/Statusbar.js
+++ b/apps/documenteditor/main/app/view/Statusbar.js
@@ -247,7 +247,7 @@ define([
                     style: 'margin-top:-5px;',
                     restoreHeight: 285,
                     itemTemplate: _.template([
-                        '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value.value %>" class="<% if (checked) { %> checked <% } %>">',
+                        '<a id="<%= id %>" tabindex="-1" type="menuitem" langval="<%= value.value %>" class="<% if (checked) { %> checked <% } %>">',
                             '<i class="icon <% if (spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>',
                             '<%= caption %>',
                         '</a>'
diff --git a/apps/documenteditor/main/resources/less/statusbar.less b/apps/documenteditor/main/resources/less/statusbar.less
index da9e369a1..36b02abe6 100644
--- a/apps/documenteditor/main/resources/less/statusbar.less
+++ b/apps/documenteditor/main/resources/less/statusbar.less
@@ -232,4 +232,14 @@
             margin-left: 8px;
         }
     }
+
+    .lang-menu {
+        li a {
+            padding-left: 28px !important;
+            .rtl & {
+                padding-left: 20px !important;
+                padding-right: 28px !important;
+            }
+        }
+    }
 }
diff --git a/apps/presentationeditor/main/app/view/Statusbar.js b/apps/presentationeditor/main/app/view/Statusbar.js
index e0895aa1e..33015369e 100644
--- a/apps/presentationeditor/main/app/view/Statusbar.js
+++ b/apps/presentationeditor/main/app/view/Statusbar.js
@@ -257,7 +257,7 @@ define([
                     style: 'margin-top:-5px;',
                     restoreHeight: 285,
                     itemTemplate: _.template([
-                        '<a id="<%= id %>" tabindex="-1" type="menuitem" style="padding-left: 28px !important;" langval="<%= value.value %>" class="<% if (checked) { %> checked <% } %>">',
+                        '<a id="<%= id %>" tabindex="-1" type="menuitem" langval="<%= value.value %>" class="<% if (checked) { %> checked <% } %>">',
                         '<i class="icon <% if (spellcheck) { %> toolbar__icon btn-ic-docspell spellcheck-lang <% } %>"></i>',
                         '<%= caption %>',
                         '</a>'
diff --git a/apps/presentationeditor/main/resources/less/statusbar.less b/apps/presentationeditor/main/resources/less/statusbar.less
index 330fa6d01..22f852a9f 100644
--- a/apps/presentationeditor/main/resources/less/statusbar.less
+++ b/apps/presentationeditor/main/resources/less/statusbar.less
@@ -248,4 +248,14 @@
         }
 
     }
+
+    .lang-menu {
+        li a {
+            padding-left: 28px !important;
+            .rtl & {
+                padding-left: 20px !important;
+                padding-right: 28px !important;
+            }
+        }
+    }
 }
diff --git a/apps/spreadsheeteditor/main/app/view/Statusbar.js b/apps/spreadsheeteditor/main/app/view/Statusbar.js
index 00fd9306b..823a9fc63 100644
--- a/apps/spreadsheeteditor/main/app/view/Statusbar.js
+++ b/apps/spreadsheeteditor/main/app/view/Statusbar.js
@@ -763,7 +763,8 @@ define([
                         this.tabMenu.atposition = (function () {
                             return {
                                 top : rect.top,
-                                left: rect.left - parentPos.left - 2
+                                left: rect.left - parentPos.left - 2,
+                                right: rect.right - parentPos.left + 2
                             };
                         })();
 
@@ -779,7 +780,7 @@ define([
 
             onTabMenuAfterShow: function (obj) {
                 if (obj.atposition) {
-                    obj.setOffset(obj.atposition.left);
+                    obj.setOffset(Common.UI.isRTL() ? (obj.atposition.right - $(obj.el).width()) : obj.atposition.left);
                 }
 
                 this.enableKeyEvents = true;
@@ -952,7 +953,7 @@ define([
                 if (obj.atposition) {
                     var statusHeight = $(this.el).height(),
                         offsetTop = !this.isCompact && (obj.atposition.top - $(this.el).offset().top > statusHeight/2) ? statusHeight/2 : 0;
-                    obj.setOffset(obj.atposition.left, offsetTop);
+                    obj.setOffset(Common.UI.isRTL() ? (obj.atposition.left - $(this.el).width() + 2) : obj.atposition.left, offsetTop);
                 }
                 this.enableKeyEvents = true;
             },
diff --git a/apps/spreadsheeteditor/main/resources/less/statusbar.less b/apps/spreadsheeteditor/main/resources/less/statusbar.less
index e01b81193..c46ed652f 100644
--- a/apps/spreadsheeteditor/main/resources/less/statusbar.less
+++ b/apps/spreadsheeteditor/main/resources/less/statusbar.less
@@ -657,7 +657,7 @@
             > a {
                 padding: 5px 12px 5px 26px;
                 .rtl & {
-                    padding: 5px 56px 5px 12px;
+                    padding: 5px 26px 5px 12px;
                 }
                 &::before {
                     margin-left: -22px;