BI-91199 颜色选择器新交互

changelog.md

@@ -1,5 +1,6 @@
 # 更新日志
 2.0(2021-07)
+- 修改了颜色选择器交互
 - 新增bi.horizontal_fill、bi.vertical_fill布局
 - 增加module定义插件版本号
 - bubble使用popper.js实现

i18n/i18n.cn.js

@@ -195,5 +195,6 @@ BI.i18n = {
     "BI-Basic_Year_Range_Error": "请选择{R1}年-{R2}年的日期",
     "BI-Basic_Year_Month_Range_Error": "请选择{R1}年{R2}月-{R3}年{R4}月的日期",
     "BI-Basic_Year_Quarter_Range_Error": "请选择{R1}年{R2}季度-{R3}年{R4}季度的日期",
-    "BI-Basic_Search_And_Patch_Paste": "搜索，支持批量粘贴、粘贴值通过换行识别"
+    "BI-Basic_Search_And_Patch_Paste": "搜索，支持批量粘贴、粘贴值通过换行识别",
+    "BI-Basic_Recommend_Color": "推荐色"
 };

src/case/colorchooser/colorchooser.custom.js

@@ -38,9 +38,9 @@ BI.CustomColorChooser = BI.inherit(BI.Widget, {
                 type: "bi.absolute",
                 items: [{
                     el: this.editor,
-                    left: 0,
+                    left: 10,
                     top: 0,
-                    right: 0
+                    right: 10
                 }],
                 height: 50
             }, {

src/case/colorchooser/colorchooser.js

@@ -38,6 +38,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, {
             popup: {
                 el: BI.extend({
                     type: "bi.hex_color_chooser_popup",
+                    recommendColorsGetter: o.recommendColorsGetter,
                     ref: function (_ref) {
                         self.colorPicker = _ref;
                     },

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

@@ -8,23 +8,24 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
     props: {
         baseCls: "bi-color-chooser-popup",
         width: 292,
-        height: 195,
+        recommendColorsGetter: BI.emptyFn, // 推荐色获取接口
         simple: false // 简单模式, popup中没有自动和透明
     },
 
     render: function () {
         var self = this, o = this.options;
-
+        var hasRecommendColors = BI.isNotNull(o.recommendColorsGetter());
-        return {
+        return [{
-            type: "bi.absolute",
-            items: [{
             el: {
-                    type: "bi.vtape",
+                type: 'bi.vertical',
                 items: [{
-                        el: BI.extend({
+                    el: {
+                        type: "bi.vertical",
+                        hgap: 10,
+                        items: [BI.extend({
                             type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor",
                             value: o.value,
-                            height: 30,
+                            height: o.simple ? 30 : 64,
                             listeners: [{
                                 eventName: BI.ColorPickerEditor.EVENT_CHANGE,
                                 action: function () {
@@ -36,17 +37,12 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
                             ref: function (_ref) {
                                 self.colorEditor = _ref;
                             }
-                        }, o.editor),
+                        }, o.editor), {
-                        height: 50
-                    }, {
                             el: {
-                            type: "bi.absolute",
+                                type: "bi.hex_color_picker",
-                            items: [{
-                                el: {
-                                    type: "bi.color_picker",
                                 cls: "bi-border-bottom bi-border-right",
                                 items: [this._digestStoreColors(this._getStoreColors())],
-                                    height: 34,
+                                height: 22,
                                 value: o.value,
                                 listeners: [{
                                     eventName: BI.ColorPicker.EVENT_CHANGE,
@@ -60,18 +56,50 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
                                     self.storeColors = _ref;
                                 }
                             },
-                                left: 10,
+                            tgap: 10,
-                                right: 10,
+                            height: 22
-                                top: 5
+                        }, {
+                            el: hasRecommendColors ? {
+                                type: 'bi.vertical',
+                                items: [{
+                                    type: 'bi.label',
+                                    text: BI.i18nText('BI-Basic_Recommend_Color'),
+                                    textAlign: 'left',
+                                    height: 24,
+                                }, {
+                                    type: "bi.hex_color_picker",
+                                    cls: "bi-border-bottom bi-border-right",
+                                    items: [this._digestStoreColors(o.recommendColorsGetter())],
+                                    height: 22,
+                                    value: o.value,
+                                    listeners: [{
+                                        eventName: BI.ColorPicker.EVENT_CHANGE,
+                                        action: function () {
+                                            self.setValue(this.getValue()[0]);
+                                            self._dealStoreColors();
+                                            self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
+                                        }
+                                    }],
+                                    ref: function (_ref) {
+                                        self.recommendColors = _ref;
+                                    }
                                 }]
-                        },
+                            } : { type: 'bi.layout' },
-                        height: 38
+                            tgap: hasRecommendColors ? 10 : 0,
+                            height: hasRecommendColors ? 47 : 0
                         }, {
                             el: {
-                            type: "bi.absolute",
+                                type: 'bi.layout',
+                                cls: 'bi-border-top',
+                            },
+                            vgap: 10,
+                            height: 1
+                        }, {
+                            type: 'bi.absolute',
                             items: [{
                                 el: {
-                                    type: "bi.color_picker",
+                                    type: "bi.hex_color_picker",
+                                    space: true,
                                     value: o.value,
                                     listeners: [{
                                         eventName: BI.ColorPicker.EVENT_CHANGE,
@@ -83,12 +111,14 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
                                     }],
                                     ref: function (_ref) {
                                         self.colorPicker = _ref;
-                                    }
                                     },
-                                left: 10,
+                                },
-                                right: 10,
+                                top: 0,
-                                top: 5,
+                                left: 0,
-                                bottom: 10
+                                right: 0,
+                                bottom: 1,
+                            }],
+                            height: 80,
                         }]
                     }
                 }, {
@@ -153,6 +183,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
                             self.more = _ref;
                         }
                     },
+                    tgap: 10,
                     height: 24
                 }]
             },
@@ -161,6 +192,8 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
             top: 0,
             bottom: 0
         }, {
+            type: "bi.absolute",
+            items: [{
                 el: {
                     type: "bi.layout",
                     cls: "disable-mask",
@@ -174,7 +207,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
                 top: 0,
                 bottom: 0
             }]
-        };
+        }];
     },
 
     // 这里就实现的不好了，setValue里面有个editor，editor的setValue会检测错误然后出bubble提示
@@ -194,7 +227,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
     _dealStoreColors: function () {
         var color = this.getValue();
         var colors = this._getStoreColors();
-        var que = new BI.Queue(8);
+        var que = new BI.Queue(12);
         que.fromArray(colors);
         que.remove(color);
         que.unshift(color);
@@ -209,9 +242,9 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
                 value: color
             };
         });
-        BI.count(colors.length, 8, function (i) {
+        BI.count(colors.length, 12, function (i) {
             items.push({
-                value: "",
+                value: "empty",
                 disabled: true
             });
         });
@@ -242,6 +275,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
         this.colorEditor.setValue(color);
         this.colorPicker.setValue(color);
         this.storeColors.setValue(color);
+        this.recommendColors && this.recommendColors.setValue(color);
     },
 
     getValue: function () {

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

@@ -17,8 +17,14 @@ BI.ColorPickerButton = BI.inherit(BI.BasicButton, {
     _init: function () {
         BI.ColorPickerButton.superclass._init.apply(this, arguments);
         var self = this, o = this.options;
-        if (o.value) {
+        if (BI.isNotNull(o.value)) {
+            if (o.value === '') {
+                this.element.addClass("auto-color-normal-background");
+            } else if (o.value === "transparent") {
+                this.element.addClass("trans-color-background");
+            } else {
                 this.element.css("background-color", o.value);
+            }
             var name = this.getName();
             this.element.hover(function () {
                 self._createMask();

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

@@ -0,0 +1,53 @@
+/**
+ * @author windy
+ * @version 2.0
+ * Created by windy on 2021/7/28
+ */
+BI.ColorChooserShowButton = BI.inherit(BI.BasicButton, {
+
+    props: {
+        baseCls: 'bi-color-chooser-show-button bi-border bi-list-item-effect',
+    },
+
+    render: function () {
+        var self = this, o = this.options;
+        return {
+            type: 'bi.htape',
+            items: [{
+                el: {
+                    type: "bi.icon_label",
+                    cls: o.iconCls,
+                    ref: function (_ref) {
+                        self.icon = _ref;
+                    },
+                    iconWidth: 16,
+                    iconHeight: 16,
+                },
+                hgap: 20,
+                width: 16,
+            }, {
+                type: 'bi.label',
+                textAlign: 'left',
+                text: o.text,
+            }]
+        }
+    },
+
+    doClick: function () {
+        BI.ColorChooserShowButton.superclass.doClick.apply(this, arguments);
+        if (this.isValid()) {
+            this.fireEvent(BI.ColorChooserShowButton.EVENT_CHANGE, this);
+        }
+    },
+
+    setSelected: function (b) {
+        BI.ColorChooserShowButton.superclass.setSelected.apply(this, arguments);
+        if (b) {
+            this.icon.element.addClass("active");
+        } else {
+            this.icon.element.removeClass("active");
+        }
+    },
+});
+BI.ColorChooserShowButton.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.color_picker_show_button", BI.ColorChooserShowButton);

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

@@ -0,0 +1,170 @@
+/**
+ * @author windy
+ * @version 2.0
+ * Created by windy on 2021/7/28
+ */
+BI.HexColorPicker = BI.inherit(BI.Widget, {
+
+    props: {
+        baseCls: "bi-hex-color-picker",
+        items: null,
+    },
+
+    _items: [
+        [{
+            value: "#808080"
+        }, {
+            value: "#ffffff"
+        }, {
+            value: "#ffebe5"
+        }, {
+            value: "#ffddba"
+        }, {
+            value: "#ffeebb"
+        }, {
+            value: "#d4e9bf"
+        }, {
+            value: "#c7e1e1"
+        }, {
+            value: "#bfe3f0"
+        }, {
+            value: "#ccd6eb"
+        }],
+        [{
+            value: "#616161"
+        }, {
+            value: "#f2f2f2"
+        }, {
+            value: "#ffd6cc"
+        }, {
+            value: "#ffb87a"
+        }, {
+            value: "#ffdf91"
+        }, {
+            value: "#b7d2b6"
+        }, {
+            value: "#a3d2c9"
+        }, {
+            value: "#8ab6d6"
+        }, {
+            value: "#bcbce0"
+        }],
+        [{
+            value: "#404040"
+        }, {
+            value: "#dedede"
+        }, {
+            value: "#ffab9b"
+        }, {
+            value: "#eb8a3a"
+        }, {
+            value: "#ffc947"
+        }, {
+            value: "#8aa964"
+        }, {
+            value: "#5eaaa0"
+        }, {
+            value: "#2978b5"
+        }, {
+            value: "#8f8faa"
+        }],
+        [{
+            value: "#202020"
+        }, {
+            value: "#bfbfbf"
+        }, {
+            value: "#df7461"
+        }, {
+            value: "#cf7536"
+        }, {
+            value: "#e6b63b"
+        }, {
+            value: "#5b8a72"
+        }, {
+            value: "#3b9aa3"
+        }, {
+            value: "#336291"
+        }, {
+            value: "#58568f"
+        }],
+        [{
+            value: "#000000"
+        }, {
+            value: "#a1a1a1"
+        }, {
+            value: "#b55140"
+        }, {
+            value: "#a6713c"
+        }, {
+            value: "#ad975f"
+        }, {
+            value: "#5f7d6e"
+        }, {
+            value: "#3b7480"
+        }, {
+            value: "#425d78"
+        }, {
+            value: "#62608a"
+        }]
+    ],
+
+    render: function () {
+        var self = this, o = this.options;
+        this.colors = BI.createWidget();
+
+        return {
+            type: "bi.button_group",
+            items: this._digest(o.items || this._items),
+            layouts: [{
+                type: "bi.grid",
+            }],
+            value: o.value,
+            listeners: [{
+                eventName: BI.ButtonGroup.EVENT_CHANGE,
+                action: function () {
+                    self.fireEvent(BI.HexColorPicker.EVENT_CHANGE, arguments);
+                }
+            }],
+            ref: function (_ref) {
+                self.colors = _ref;
+            }
+        };
+    },
+
+    _digest: function (items) {
+        var o = this.options;
+        var blocks = [];
+        BI.each(items, function (idx, row) {
+            var bRow = [];
+            BI.each(row, function (idx, item) {
+                bRow.push(BI.extend({
+                    type: "bi.color_picker_button",
+                    once: false,
+                    cls: o.space ? 'bi-border-right' : '',
+                }, item));
+                if (o.space && idx < row.length - 1) {
+                    bRow.push({ type: 'bi.layout' });
+                }
+            });
+            blocks.push(bRow);
+        });
+
+        return blocks;
+    },
+
+    populate: function (items) {
+        var args = [].slice.call(arguments);
+        args[0] = this._digest(items);
+        this.colors.populate.apply(this.colors, args);
+    },
+
+    setValue: function (color) {
+        this.colors.setValue(color);
+    },
+
+    getValue: function () {
+        return this.colors.getValue();
+    }
+});
+BI.HexColorPicker.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.hex_color_picker", BI.HexColorPicker);

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

@@ -8,15 +8,14 @@
 BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
 
     constants: {
-        RGB_WIDTH: 32,
+        RGB_WIDTH: 36,
         HEX_WIDTH: 70,
         HEX_PREFIX_POSITION: 1
     },
 
     props: {
         baseCls: "bi-color-picker-editor",
-        // width: 200,
+        height: 30
-        height: 50
     },
 
     render: function () {
@@ -59,8 +58,68 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
             items: [{
                 el: {
                     type: "bi.vertical",
-                    tgap: 5,
+                    tgap: 10,
                     items: [{
+                        type: 'bi.vertical_adapt',
+                        columnSize: [0.5, 'fill'],
+                        height: 24,
+                        items: [{
+                            type: "bi.color_picker_show_button",
+                            iconCls: "trans-color-icon",
+                            height: 22,
+                            title: BI.i18nText("BI-Transparent_Color"),
+                            text: BI.i18nText("BI-Transparent_Color"),
+                            listeners: [{
+                                eventName: BI.ColorChooserShowButton.EVENT_CHANGE,
+                                action: function () {
+                                    if (this.isSelected()) {
+                                        self.lastColor = self.getValue();
+                                        self.setValue("transparent");
+                                    } else {
+                                        if (self.lastColor === "transparent") {
+                                            self.lastColor = "";
+                                        }
+                                        self.setValue(self.lastColor || "#ffffff");
+                                    }
+                                    if ((self.R.isValid() && self.G.isValid() && self.B.isValid()) ||
+                                        self._isEmptyRGB()) {
+                                        self.colorShow.element.css("background-color", self.getValue());
+                                        self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
+                                    }
+                                }
+                            }],
+                            ref: function (_ref) {
+                                self.transparent = _ref;
+                            }
+                        }, {
+                            el: {
+                                type: "bi.color_picker_show_button",
+                                iconCls: "auto-color-icon",
+                                height: 22,
+                                title: BI.i18nText("BI-Basic_Auto"),
+                                text: BI.i18nText("BI-Basic_Auto"),
+                                listeners: [{
+                                    eventName: BI.ColorChooserShowButton.EVENT_CHANGE,
+                                    action: function () {
+                                        if (this.isSelected()) {
+                                            self.lastColor = self.getValue();
+                                            self.setValue("");
+                                        } else {
+                                            self.setValue(self.lastColor || "#ffffff");
+                                        }
+                                        if ((self.R.isValid() && self.G.isValid() && self.B.isValid()) || self._isEmptyRGB()) {
+                                            self.colorShow.element.css("background-color", self.getValue());
+                                            self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
+                                        }
+                                    }
+                                }],
+                                ref: function (_ref) {
+                                    self.none = _ref;
+                                }
+                            },
+                            lgap: 10,
+                        }]
+                    }, {
                         type: "bi.vertical_adapt",
                         rgap: 5,
                         items: [{
@@ -100,116 +159,32 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
 
                                 }
                             }]
-                        }, {
+                        }, RGB[0], {
                             el: BI.extend(Ws[0], {
                                 ref: function (_ref) {
                                     self.R = _ref
                                 }
                             }),
                             width: c.RGB_WIDTH
-                        }, {
+                        }, RGB[1], {
                             el: BI.extend(Ws[1], {
                                 ref: function (_ref) {
                                     self.G = _ref
                                 }
                             }),
                             width: c.RGB_WIDTH
-                        }, {
+                        }, RGB[2], {
                             el: BI.extend(Ws[2], {
                                 ref: function (_ref) {
                                     self.B = _ref
                                 }
                             }),
                             width: c.RGB_WIDTH
-                        }, {
-                            el: {
-                                type: "bi.icon_button",
-                                cls: "trans-color-icon",
-                                width: 16,
-                                height: 16,
-                                iconWidth: 16,
-                                iconHeight: 16,
-                                title: BI.i18nText("BI-Transparent_Color"),
-                                listeners: [{
-                                    eventName: BI.IconButton.EVENT_CHANGE,
-                                    action: function () {
-                                        if (this.isSelected()) {
-                                            self.lastColor = self.getValue();
-                                            self.setValue("transparent");
-                                        } else {
-                                            if (self.lastColor === "transparent") {
-                                                self.lastColor = "";
-                                            }
-                                            self.setValue(self.lastColor || "#ffffff");
-                                        }
-                                        if ((self.R.isValid() && self.G.isValid() && self.B.isValid()) ||
-                                            self._isEmptyRGB()) {
-                                            self.colorShow.element.css("background-color", self.getValue());
-                                            self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
-                                        }
-                                    }
-                                }],
-                                ref: function (_ref) {
-                                    self.transparent = _ref;
-                                }
-                            },
-                            width: 16,
-                            lgap: 5
-                        }, {
-                            el: {
-                                type: "bi.icon_button",
-                                cls: "auto-color-icon",
-                                width: 16,
-                                height: 16,
-                                iconWidth: 16,
-                                iconHeight: 16,
-                                title: BI.i18nText("BI-Basic_Auto"),
-                                listeners: [{
-                                    eventName: BI.IconButton.EVENT_CHANGE,
-                                    action: function () {
-                                        if (this.isSelected()) {
-                                            self.lastColor = self.getValue();
-                                            self.setValue("");
-                                        } else {
-                                            self.setValue(self.lastColor || "#ffffff");
-                                        }
-                                        if ((self.R.isValid() && self.G.isValid() && self.B.isValid()) || self._isEmptyRGB()) {
-                                            self.colorShow.element.css("background-color", self.getValue());
-                                            self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
-                                        }
-                                    }
-                                }],
-                                ref: function (_ref) {
-                                    self.none = _ref;
-                                }
-                            },
-                            width: 16,
-                            lgap: 5
-                        }]
-                    }, {
-                        type: "bi.vertical_adapt",
-                        items: [{
-                            el: {
-                                type: "bi.label",
-                                cls: "color-picker-editor-label",
-                                height: 20,
-                                text: "HEX"
-                            },
-                            lgap: 60
-                        },{
-                            el: RGB[0].el,
-                            lgap: 44
-                        }, {
-                            el: RGB[1].el,
-                            lgap: 28
-                        }, {
-                            el: RGB[2].el,
-                            lgap: 28
                         }]
                     }]
                 },
-                left: 10,
+                left: 0,
-                right: 10,
+                right: 0,
                 top: 0,
                 bottom: 0
             }]

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

@@ -6,15 +6,14 @@
 BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
 
     constants: {
-        RGB_WIDTH: 40,
+        RGB_WIDTH: 36,
         HEX_WIDTH: 70,
         HEX_PREFIX_POSITION: 1
     },
 
     props: {
         baseCls: "bi-color-picker-editor",
-        // width: 200,
+        height: 30
-        height: 50
     },
 
     render: function () {
@@ -54,10 +53,10 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
 
         return {
             type: "bi.vertical",
-            tgap: 5,
+            tgap: 10,
             items: [{
                 type: "bi.vertical_adapt",
-                rgap: 10,
+                rgap: 5,
                 items: [{
                     el: {
                         type: "bi.layout",
@@ -69,8 +68,6 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
                         }
                     },
                     width: 16,
-                    lgap: 10,
-                    rgap: 5
                 }, {
                     type: "bi.label",
                     text: "#",
@@ -96,21 +93,21 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
                             }
                         }
                     }]
-                }, {
+                }, RGB[0], {
                     el: BI.extend(Ws[0], {
                         ref: function (_ref) {
                             self.R = _ref
                         }
                     }),
                     width: c.RGB_WIDTH
-                }, {
+                }, RGB[1], {
                     el: BI.extend(Ws[1], {
                         ref: function (_ref) {
                             self.G = _ref
                         }
                     }),
                     width: c.RGB_WIDTH
-                }, {
+                }, RGB[2], {
                     el: BI.extend(Ws[2], {
                         ref: function (_ref) {
                             self.B = _ref
@@ -118,26 +115,6 @@ BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
                     }),
                     width: c.RGB_WIDTH
                 }]
-            }, {
-                type: "bi.vertical_adapt",
-                items: [{
-                    el: {
-                        type: "bi.label",
-                        cls: "color-picker-editor-label",
-                        height: 20,
-                        text: "HEX"
-                    },
-                    lgap: 86
-                },{
-                    el: RGB[0].el,
-                    lgap: 50
-                }, {
-                    el: RGB[1].el,
-                    lgap: 40
-                }, {
-                    el: RGB[2].el,
-                    lgap: 40
-                }]
             }]
 
         }

src/less/base/colorchooser/colorpicker/button.colorshow.less

@@ -0,0 +1,7 @@
+@import "../../../index";
+
+.bi-color-chooser-show-button {
+  &.active, &:active {
+    border-color: @color-bi-border-highlight;
+  }
+}