BI-93324 选色控件视觉验收修改

src/case/colorchooser/colorchooser.js

@@ -60,7 +60,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, {
                     }]
                 }, o.popup),
                 value: o.value,
-                width: 292
+                width: 300
             },
             value: o.value
         });

src/case/colorchooser/colorchooser.popup.hex.js

@@ -7,7 +7,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
 
     props: {
         baseCls: "bi-color-chooser-popup",
-        width: 292,
+        width: 300,
         recommendColorsGetter: BI.emptyFn, // 推荐色获取接口
         simple: false // 简单模式, popup中没有自动和透明
     },
@@ -21,11 +21,11 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
                 items: [{
                     el: {
                         type: "bi.vertical",
-                        hgap: 10,
+                        hgap: 15,
                         items: [BI.extend({
                             type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor",
                             value: o.value,
-                            height: o.simple ? 30 : 64,
+                            height: o.simple ? 36 : 70,
                             listeners: [{
                                 eventName: BI.ColorPickerEditor.EVENT_CHANGE,
                                 action: function () {

src/case/colorchooser/colorpicker/button/button.colorpicker.js

@@ -19,7 +19,7 @@ BI.ColorPickerButton = BI.inherit(BI.BasicButton, {
         var self = this, o = this.options;
         if (BI.isNotNull(o.value)) {
             if (o.value === '') {
-                this.element.addClass("auto-color-normal-background");
+                this.element.addClass("auto-color-square-normal-background");
             } else if (o.value === "transparent") {
                 this.element.addClass("trans-color-background");
             } else {

src/case/colorchooser/colorpicker/editor.colorpicker.hex.js

@@ -39,7 +39,7 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
                 allowBlank: true,
                 value: 255,
                 width: c.RGB_WIDTH,
-                height: 20,
+                height: 24,
                 listeners: [{
                     eventName: BI.TextEditor.EVENT_CHANGE,
                     action: function () {
@@ -122,20 +122,20 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
                     }, {
                         el: {
                             type: "bi.vertical_adapt",
-                            columnSize: [16, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH],
+                            columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH],
 
                             rgap: 5,
                             items: [{
                                 el: {
                                     type: "bi.layout",
                                     cls: "color-picker-editor-display bi-card bi-border",
-                                    height: 16,
-                                    width: 16,
+                                    height: 22,
+                                    width: 22,
                                     ref: function (_ref) {
                                         self.colorShow = _ref;
                                     }
                                 },
-                                width: 16
+                                width: 18
                             }, {
                                 type: "bi.label",
                                 text: "#",
@@ -150,7 +150,7 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
                                 allowBlank: true,
                                 errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"),
                                 width: c.HEX_WIDTH,
-                                height: 20,
+                                height: 24,
                                 listeners: [{
                                     eventName: "EVENT_CHANGE",
                                     action: function () {
@@ -239,11 +239,11 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
 
     _showPreColor: function (color) {
         if (color === "") {
-            this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-normal-background");
+            this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-square-normal-background");
         } else if (color === "transparent") {
-            this.colorShow.element.css("background-color", "").removeClass("auto-color-normal-background").addClass("trans-color-background");
+            this.colorShow.element.css("background-color", "").removeClass("auto-color-square-normal-background").addClass("trans-color-background");
         } else {
-            this.colorShow.element.css({"background-color": color}).removeClass("auto-color-normal-background").removeClass("trans-color-background");
+            this.colorShow.element.css({"background-color": color}).removeClass("auto-color-square-normal-background").removeClass("trans-color-background");
         }
     },
 

src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js

@@ -13,7 +13,7 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
 
     props: {
         baseCls: "bi-color-picker-editor",
-        height: 30
+        height: 36
     },
 
     render: function () {
@@ -37,7 +37,7 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
                 allowBlank: true,
                 value: 255,
                 width: c.RGB_WIDTH,
-                height: 20,
+                height: 24,
                 listeners: [{
                     eventName: BI.TextEditor.EVENT_CHANGE,
                     action: function () {
@@ -58,18 +58,18 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
                 el: {
                     type: "bi.vertical_adapt",
                     rgap: 5,
-                    columnSize: [16, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH],
+                    columnSize: [22, 10, 'fill', 12, c.RGB_WIDTH, 12, c.RGB_WIDTH, 12, c.RGB_WIDTH],
                     items: [{
                         el: {
                             type: "bi.layout",
                             cls: "color-picker-editor-display bi-card bi-border",
-                            height: 16,
-                            width: 16,
+                            height: 22,
+                            width: 22,
                             ref: function (_ref) {
                                 self.colorShow = _ref;
                             }
                         },
-                        width: 16,
+                        width: 18,
                     }, {
                         type: "bi.label",
                         text: "#",
@@ -84,7 +84,7 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
                         allowBlank: true,
                         errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"),
                         width: c.HEX_WIDTH,
-                        height: 20,
+                        height: 24,
                         listeners: [{
                             eventName: "EVENT_CHANGE",
                             action: function () {

src/less/base/colorchooser/colorpicker/editor.colorpicker.less

@@ -5,12 +5,4 @@
   & .color-picker-editor-display {
     .border-radius(2px);
   }
-  &.disabled {
-    & .auto-color-normal-background {
-      .auto-color-normal-disabled-background();
-    }
-    & .trans-color-background {
-      .trans-color-disabled-background();
-    }
-  }
 }

src/less/lib/background.less

@@ -4,9 +4,9 @@
 
 //右下角没有小三角
 @background-auto-color-normal: "icon/auto_normal.png";
-@background-auto-color-normal-disabled: "icon/auto_disable.png";
 @background-trans-color: "background/trans_normal.png";
 @background-trans-color-disabled: "background/trans_disable.png";
+@background-auto-color-square-normal: "icon/auto_square_normal.png";
 
 @background-farbtastic-wheel:"background/wheel.png";
 @background-farbtastic-overlay:"background/mask.png";

src/less/lib/icon.less

@@ -50,12 +50,12 @@
 
 //颜色自动、透明
 @icon-auto-normal: "icon/auto_normal.png";
+@icon-auto-square-normal: "icon/auto_square_normal.png";
 @icon-auto-select: "icon/auto_select.png";
-@icon-auto-disable: "icon/auto_disable.png";
 @icon-trans-normal: "icon/trans_normal.png";
 @icon-trans-select: "icon/trans_select.png";
-@icon-trans-disable: "icon/trans_disable.png";
 
+@icon-auto-square-normal-dark: "icon/dark/auto_square_normal.png";
 @icon-trans-normal-dark: "icon/dark/trans_normal.png";
 @icon-trans-select-dark: "icon/dark/trans_select.png";
 @icon-trans-disable-dark: "icon/dark/trans_disable.png";

src/less/resource/background.less

@@ -318,7 +318,11 @@
 }
 
 .auto-color-normal-disabled-background {
-  .image2xPath(@background-auto-color-normal-disabled);
+  .image2xPath(@background-auto-color-disabled);
+}
+
+.auto-color-square-normal-background {
+  .image2xPath(@background-auto-color-square-normal);
 }
 
 .trans-color-background {
@@ -343,7 +347,13 @@
 
 .auto-color-normal-disabled-background {
   &.hack{
-    .imagePath(@background-auto-color-normal-disabled);
+    .imagePath(@background-auto-color-disabled);
+  }
+}
+
+.auto-color-square-normal-background {
+  &.hack{
+    .imagePath(@background-auto-color-square-normal);
   }
 }
 

src/less/resource/icon.less

@@ -26,8 +26,10 @@
 .icon_hover(slider-icon, @icon-slider-normal, @icon-slider-active);
 
 //颜色自动、透明
-.icon_select(auto-color-icon, @icon-auto-normal, @icon-auto-select, @icon-auto-disable);
-.icon_select(trans-color-icon, @icon-trans-normal, @icon-trans-select, @icon-trans-disable);
+.icon_select(auto-color-icon, @icon-auto-normal, @icon-auto-select);
+.icon_select(trans-color-icon, @icon-trans-normal, @icon-trans-select);
+// 方形的自动
+.icon(auto-square-color-icon, @icon-auto-square-normal);
 
 .bi-theme-dark {
   .icon(tree-collapse-icon-type1, @icon-tree-collapse-type1-theme-dark);
@@ -43,4 +45,5 @@
   .icon(tree-vertical-line-type4, @icon-tree-vertical-line-4-theme-dark);
 
   .icon_select(trans-color-icon, @icon-trans-normal-dark, @icon-trans-select-dark, @icon-trans-disable-dark);
+  .icon(auto-square-color-icon, @icon-auto-square-normal-dark);
 }