[rtl] Fix menu position in statusbar for DE, PE, SSE

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);

apps/common/main/lib/component/TabBar.js

@@ -569,8 +569,8 @@ define([
 
         checkInvisible: function(suppress) {
             var result = {
-                first: !this.isTabVisible(0),
+                first: !this.isTabVisible(Common.UI.isRTL() ? this.tabs.length-1 : 0),
-                last: !this.isTabVisible(this.tabs.length-1)
+                last: !this.isTabVisible(Common.UI.isRTL() ? 0 : this.tabs.length-1)
             };
 
             !suppress && this.fireEvent('tab:invisible', this, result);

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>'

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;
+            }
+        }
+    }
 }

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>'

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;
+            }
+        }
+    }
 }

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;
             },

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;