From 35d47faf1820c33817f5b6b2a20004b281239901 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Thu, 29 Jul 2021 09:37:19 +0800 Subject: [PATCH 1/3] =?UTF-8?q?BI-91199=20=E9=A2=9C=E8=89=B2=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E5=99=A8=E6=96=B0=E4=BA=A4=E4=BA=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- changelog.md | 1 + i18n/i18n.cn.js | 3 +- src/case/colorchooser/colorchooser.custom.js | 4 +- src/case/colorchooser/colorchooser.js | 1 + .../colorchooser/colorchooser.popup.hex.js | 248 ++++++++++-------- .../colorpicker/button/button.colorpicker.js | 10 +- .../colorpicker/button/button.colorshow.js | 53 ++++ .../colorpicker/colorpicker.hex.js | 170 ++++++++++++ .../colorpicker/editor.colorpicker.hex.js | 161 +++++------- .../editor.colorpicker.hex.simple.js | 37 +-- .../colorpicker/button.colorshow.less | 7 + 11 files changed, 460 insertions(+), 235 deletions(-) create mode 100644 src/case/colorchooser/colorpicker/button/button.colorshow.js create mode 100644 src/case/colorchooser/colorpicker/colorpicker.hex.js create mode 100644 src/less/base/colorchooser/colorpicker/button.colorshow.less diff --git a/changelog.md b/changelog.md index b9aecbc54..9e23a72dc 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,6 @@ # 更新日志 2.0(2021-07) +- 修改了颜色选择器交互 - 新增bi.horizontal_fill、bi.vertical_fill布局 - 增加module定义插件版本号 - bubble使用popper.js实现 diff --git a/i18n/i18n.cn.js b/i18n/i18n.cn.js index 7ddf7b225..fa58fd897 100644 --- a/i18n/i18n.cn.js +++ b/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": "推荐色" }; \ No newline at end of file diff --git a/src/case/colorchooser/colorchooser.custom.js b/src/case/colorchooser/colorchooser.custom.js index 5a3c6b552..49091a10a 100644 --- a/src/case/colorchooser/colorchooser.custom.js +++ b/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 }, { diff --git a/src/case/colorchooser/colorchooser.js b/src/case/colorchooser/colorchooser.js index ac3efd910..ff10a642a 100644 --- a/src/case/colorchooser/colorchooser.js +++ b/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; }, diff --git a/src/case/colorchooser/colorchooser.popup.hex.js b/src/case/colorchooser/colorchooser.popup.hex.js index 9ecaba408..a17682433 100644 --- a/src/case/colorchooser/colorchooser.popup.hex.js +++ b/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; - - return { - type: "bi.absolute", - items: [{ - el: { - type: "bi.vtape", - items: [{ - el: BI.extend({ + var hasRecommendColors = BI.isNotNull(o.recommendColorsGetter()); + return [{ + el: { + type: 'bi.vertical', + items: [{ + 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,40 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { ref: function (_ref) { self.colorEditor = _ref; } - }, o.editor), - height: 50 - }, { - el: { - type: "bi.absolute", - items: [{ - el: { - type: "bi.color_picker", + }, o.editor), { + el: { + type: "bi.hex_color_picker", + cls: "bi-border-bottom bi-border-right", + items: [this._digestStoreColors(this._getStoreColors())], + 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.storeColors = _ref; + } + }, + tgap: 10, + height: 22 + }, { + 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(this._getStoreColors())], - height: 34, + items: [this._digestStoreColors(o.recommendColorsGetter())], + height: 22, value: o.value, listeners: [{ eventName: BI.ColorPicker.EVENT_CHANGE, @@ -57,21 +81,25 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { } }], ref: function (_ref) { - self.storeColors = _ref; + self.recommendColors = _ref; } - }, - left: 10, - right: 10, - top: 5 - }] - }, - height: 38 - }, { - el: { - type: "bi.absolute", + }] + } : { type: 'bi.layout' }, + tgap: hasRecommendColors ? 10 : 0, + height: hasRecommendColors ? 47 : 0 + }, { + el: { + 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,84 +111,89 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { }], ref: function (_ref) { self.colorPicker = _ref; - } + }, }, - left: 10, - right: 10, - top: 5, - bottom: 10 - }] - } - }, { + top: 0, + left: 0, + right: 0, + bottom: 1, + }], + height: 80, + }] + } + }, { + el: { + type: "bi.combo", + cls: "bi-border-top", + container: null, + direction: "right,top", + isNeedAdjustHeight: false, el: { - type: "bi.combo", - cls: "bi-border-top", - container: null, - direction: "right,top", - isNeedAdjustHeight: false, + type: "bi.text_item", + cls: "color-chooser-popup-more bi-list-item", + textAlign: "center", + height: 24, + textLgap: 10, + text: BI.i18nText("BI-Basic_More") + "..." + }, + popup: { + type: "bi.popup_panel", + buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")], + title: BI.i18nText("BI-Custom_Color"), el: { - type: "bi.text_item", - cls: "color-chooser-popup-more bi-list-item", - textAlign: "center", - height: 24, - textLgap: 10, - text: BI.i18nText("BI-Basic_More") + "..." - }, - popup: { - type: "bi.popup_panel", - buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")], - title: BI.i18nText("BI-Custom_Color"), - el: { - type: "bi.custom_color_chooser", - editor: o.editor, - ref: function (_ref) { - self.customColorChooser = _ref; - } - }, - stopPropagation: false, - bgap: -1, - rgap: 1, - lgap: 1, - minWidth: 227, - listeners: [{ - eventName: BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, - action: function (index) { - switch (index) { - case 0: - self.more.hideView(); - break; - case 1: - var color = self.customColorChooser.getValue(); - // farbtastic选择器没有透明和自动选项，点击保存不应该设置透明 - if (BI.isNotEmptyString(color)) { - self.setValue(color); - self._dealStoreColors(); - } - self.more.hideView(); - self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments); - break; - } - } - }] + type: "bi.custom_color_chooser", + editor: o.editor, + ref: function (_ref) { + self.customColorChooser = _ref; + } }, + stopPropagation: false, + bgap: -1, + rgap: 1, + lgap: 1, + minWidth: 227, listeners: [{ - eventName: BI.Combo.EVENT_AFTER_POPUPVIEW, - action: function () { - self.customColorChooser.setValue(self.getValue()); + eventName: BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON, + action: function (index) { + switch (index) { + case 0: + self.more.hideView(); + break; + case 1: + var color = self.customColorChooser.getValue(); + // farbtastic选择器没有透明和自动选项，点击保存不应该设置透明 + if (BI.isNotEmptyString(color)) { + self.setValue(color); + self._dealStoreColors(); + } + self.more.hideView(); + self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments); + break; + } } - }], - ref: function (_ref) { - self.more = _ref; - } + }] }, - height: 24 - }] - }, - left: 0, - right: 0, - top: 0, - bottom: 0 - }, { + listeners: [{ + eventName: BI.Combo.EVENT_AFTER_POPUPVIEW, + action: function () { + self.customColorChooser.setValue(self.getValue()); + } + }], + ref: function (_ref) { + self.more = _ref; + } + }, + tgap: 10, + height: 24 + }] + }, + left: 0, + right: 0, + 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 () { diff --git a/src/case/colorchooser/colorpicker/button/button.colorpicker.js b/src/case/colorchooser/colorpicker/button/button.colorpicker.js index caa895620..f2630a785 100644 --- a/src/case/colorchooser/colorpicker/button/button.colorpicker.js +++ b/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) { - this.element.css("background-color", 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(); diff --git a/src/case/colorchooser/colorpicker/button/button.colorshow.js b/src/case/colorchooser/colorpicker/button/button.colorshow.js new file mode 100644 index 000000000..fec971237 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/src/case/colorchooser/colorpicker/colorpicker.hex.js b/src/case/colorchooser/colorpicker/colorpicker.hex.js new file mode 100644 index 000000000..fad7c5b84 --- /dev/null +++ b/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); \ No newline at end of file diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js index 14fead2df..36eb279f3 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js +++ b/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: 50 + height: 30 }, 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, - right: 10, + left: 0, + right: 0, top: 0, bottom: 0 }] diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js index 0440d25db..c1eb023cc 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js +++ b/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: 50 + height: 30 }, 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 - }] }] } diff --git a/src/less/base/colorchooser/colorpicker/button.colorshow.less b/src/less/base/colorchooser/colorpicker/button.colorshow.less new file mode 100644 index 000000000..d0f3411e5 --- /dev/null +++ b/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; + } +} \ No newline at end of file From 1df5ad6d9113513e9a427d6dd08b46e25d29cedb Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Thu, 29 Jul 2021 09:39:55 +0800 Subject: [PATCH 2/3] demo --- demo/js/case/demo.color_chooser.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/demo/js/case/demo.color_chooser.js b/demo/js/case/demo.color_chooser.js index cca2fc0ff..81a719864 100644 --- a/demo/js/case/demo.color_chooser.js +++ b/demo/js/case/demo.color_chooser.js @@ -9,6 +9,9 @@ Demo.Func = BI.inherit(BI.Widget, { items: [{ el: { type: "bi.color_chooser", + recommendColorsGetter: function () { + return ["#ffffff", "#9d775f", "#dd4b4b", "#ef8b07", "#fcc800"] + }, width: 24, height: 24 }, From 1be3a333d0529347735e290ef720f8e4317084e7 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Thu, 29 Jul 2021 10:52:07 +0800 Subject: [PATCH 3/3] comment --- .../colorpicker/button/button.colorshow.js | 10 ---------- .../colorchooser/colorpicker/editor.colorpicker.hex.js | 4 ++-- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/src/case/colorchooser/colorpicker/button/button.colorshow.js b/src/case/colorchooser/colorpicker/button/button.colorshow.js index fec971237..740a5d0a7 100644 --- a/src/case/colorchooser/colorpicker/button/button.colorshow.js +++ b/src/case/colorchooser/colorpicker/button/button.colorshow.js @@ -16,7 +16,6 @@ BI.ColorChooserShowButton = BI.inherit(BI.BasicButton, { items: [{ el: { type: "bi.icon_label", - cls: o.iconCls, ref: function (_ref) { self.icon = _ref; }, @@ -39,15 +38,6 @@ BI.ColorChooserShowButton = BI.inherit(BI.BasicButton, { 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); \ No newline at end of file diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js index 36eb279f3..f20cc58a3 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js @@ -65,7 +65,7 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { height: 24, items: [{ type: "bi.color_picker_show_button", - iconCls: "trans-color-icon", + cls: "trans-color-icon", height: 22, title: BI.i18nText("BI-Transparent_Color"), text: BI.i18nText("BI-Transparent_Color"), @@ -94,7 +94,7 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { }, { el: { type: "bi.color_picker_show_button", - iconCls: "auto-color-icon", + cls: "auto-color-icon", height: 22, title: BI.i18nText("BI-Basic_Auto"), text: BI.i18nText("BI-Basic_Auto"),