Merge pull request #1967 from ONLYOFFICE/feature/for-rtl

Feature/for rtl

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>',
                     '<% }); %>',
@@ -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="input-group combobox combo-color combobox-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
-            '<div class="form-control" style="padding:2px 14px 2px 3px; <%= style %> display: block;">',
+            '<div class="form-control" style="<%= style %>">',
-                '<div style="display: inline-block;overflow: hidden;width: 100%;height: 100%;"></div>',
+                '<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="input-group combobox combobox-icons combo-color input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
-                '<div class="form-control" style="padding:2px 0 2px 3px; <%= style %> display: block;">',
+                '<div class="form-control" style="<%= style %>">',
-                    '<div style="display: inline-block;overflow: hidden;width: 100%;height: 100%;"></div>',
+                    '<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>',

apps/common/main/resources/less/buttons.less

@@ -249,6 +249,10 @@
 
                 .caret {
                     margin: 0 1px 0 4px;
+
+                    .rtl & {
+                        margin: 0 4px 0 1px;
+                    }
                 }
             }
         }

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

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 {
@@ -176,6 +214,10 @@
 
     .dropdown-menu.menu-absolute {
         position: fixed;
+
+        .rtl & {
+            right: unset;
+        }
     }
 
     .dropdown-menu.show-top {
@@ -190,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 {

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 {
@@ -312,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;
+    }
 }

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 {

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

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;