[rtl] Make ComboBoxColor and ComboBoxIcons components

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="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/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 {

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 {