[stylesheets] repaired combobox for border size

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

@@ -77,7 +77,10 @@ define([
     Common.UI.ComboBorderSize = Common.UI.ComboBox.extend(_.extend({
         template: _.template([
             '<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
-                '<div class="form-control" style="padding-top:2px; <%= style %>"></div>',
+                '<div class="form-control" style="<%= style %>">',
+                    '<i class="image"></i>',
+                    '<span class="text"></span>',
+                '</div>',
                 '<div style="display: table-cell;"></div>',
                 '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
                 '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
@@ -138,14 +141,15 @@ define([
 
         updateFormControl: function(record) {
             var formcontrol = $(this.el).find('.form-control');
+            var image = formcontrol.find('> .image');
+            var text = formcontrol.find('> .text');
 
             if (record.get('value')>0) {
-                formcontrol[0].innerHTML = '';
+                image.css('background-position', '10px -' + record.get('offsety') + 'px').show();
-                formcontrol.removeClass('text').addClass('image');
+                text.hide();
-                formcontrol.css('background-position', '10px -' + record.get('offsety') + 'px');
             } else {
-                formcontrol[0].innerHTML = this.txtNoBorders;
+                image.hide();
-                formcontrol.removeClass('image').addClass('text');
+                text.text(this.txtNoBorders).show();
             }
         },
 
@@ -162,9 +166,7 @@ define([
                 this.updateFormControl(this._selectedItem);
                 $('#' + this._selectedItem.get('id'), $(this.el)).addClass('selected');
             } else {
-                var formcontrol = $(this.el).find('.form-control');
+                $(this.el).find('.form-control > .text').text("").show();
-                formcontrol[0].innerHTML = '';
-                formcontrol.removeClass('image').addClass('text');
             }
         },
 
@@ -224,7 +226,9 @@ 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="form-control" style="<%= style %>"></div>',
+                '<div class="form-control" style="<%= style %>">',
+                    '<i class="image"></i>',
+                '</div>',
                 '<div style="display: table-cell;"></div>',
                 '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret img-commonctrl"></span></button>',
                 '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
@@ -262,10 +266,8 @@ define([
         },
 
         updateFormControl: function(record) {
-            var formcontrol = $(this.el).find('.form-control');
+            $(this.el).find('.form-control > .image')
-            formcontrol[0].innerHTML = '';
+                .css('background-position', '10px -' + record.get('offsety') + 'px');
-            formcontrol.removeClass('text').addClass('image');
-            formcontrol.css('background-position', '10px -' + record.get('offsety') + 'px');
         }
     }, Common.UI.ComboBorderType || {}));
 

apps/common/main/resources/less/combo-border-size.less

@@ -22,8 +22,17 @@
         }
     }
 
+    .image {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+        background-color: transparent;
+        margin: -1px 0 0 -3px;
+    }
+
     img, .image {
-        background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0 @{background-normal}";
+        background: ~"url(@{common-image-const-path}/combo-border-size/BorderSize.png) no-repeat 0 0";
 
         @media only screen {
             //@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9),

apps/common/main/resources/less/combobox.less

@@ -1,3 +1,6 @@
+@img-borders-filter: var(--image-border-types-filter);
+@img-borders-filter-selected: var(--image-border-types-filter-selected);
+
 .combobox {
     display: block;
 
@@ -28,6 +31,11 @@
         position: static;
         z-index: auto;
         float: none;
+
+        .image {
+            -webkit-filter: @img-borders-filter;
+            filter: @img-borders-filter;
+        }
     }
 
     .btn {
@@ -93,9 +101,6 @@
     // Font combobox
     // ------------------------
     li {
-        @img-borders-filter: var(--image-border-types-filter);
-        @img-borders-filter-selected: var(--image-border-types-filter-selected);
-
         img {
             -webkit-filter: @img-borders-filter;
             filter: @img-borders-filter;