[Common] Change ColorButton component

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

@@ -49,25 +49,17 @@ define([
             '<div class="btn-group" id="<%= id %>">',
                 '<button type="button" class="btn btn-color dropdown-toggle <%= cls %>" data-toggle="dropdown" style="<%= style %>">',
                     '<span>&nbsp;</span>',
+                    '<span class="inner-box-caret"><i class="caret img-commonctrl"></i></span>',
                 '</button>',
             '</div>'
         ].join('')),
 
         setColor: function(color) {
-            var border_color, clr,
+            var span = $(this.cmpEl).find('button span:nth-child(1)');
-                span = $(this.cmpEl).find('button span');
             this.color = color;
 
-            if ( color== 'transparent' ) {
+            span.toggleClass('color-transparent', color=='transparent');
-                border_color = '#BEBEBE';
+            span.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)});
-                clr = color;
-                span.addClass('color-transparent');
-            } else {
-                border_color = 'transparent';
-                clr = (typeof(color) == 'object') ? '#'+color.color : '#'+color;
-                span.removeClass('color-transparent');
-            }
-            span.css({'background-color': clr, 'border-color': border_color});
         }
     });
 });

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

@@ -544,16 +544,25 @@
 }
 
 .btn-color {
-    padding: 2px;
+    height: 22px;
+    padding: 1px 11px 1px 1px;
     border:1px solid @input-border;
     .border-radius(@border-radius-small);
 
-    span {
+    span:nth-child(1) {
-        display:block;
+        float: left;
-        border:1px solid @input-border;
+        width: 100%;
+        height: 100%;
+        border: 1px solid rgba(0, 0, 0, 0.2);
         background-color: transparent;
     }
 
+    .inner-box-caret {
+        position: absolute;
+        right: 0;
+        top: 2px;
+    }
+
     &,
     &:hover,
     .over,
@@ -570,11 +579,19 @@
 
     .color-transparent {
         &:before {
-            height: 40px;
+            border-right: 1px solid red;
-            transform: translate(20px, -12px) rotate(69deg);
+            height: 34px;
+            transform: translate(16px, -9px) rotate(62deg);
             left: 0;
         }
     }
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        .caret {
+            background-position: @arrow-small-offset-x @arrow-small-offset-y;
+        }
+    }
 }
 
 .btn-options {