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] [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