diff --git a/src/case/colorchooser/colorchooser.popup.hex.js b/src/case/colorchooser/colorchooser.popup.hex.js index 347dd0401..24ede8718 100644 --- a/src/case/colorchooser/colorchooser.popup.hex.js +++ b/src/case/colorchooser/colorchooser.popup.hex.js @@ -16,32 +16,59 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { var self = this, o = this.options; var hasRecommendColors = BI.isNotNull(o.recommendColorsGetter()); return [{ - el: { - type: 'bi.vertical', - items: [{ - el: { - type: "bi.vertical", - hgap: 15, - items: [BI.extend({ - type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor", + type: "bi.vertical", + items: [{ + el: { + type: "bi.vertical", + 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 ? 36 : 70, + listeners: [{ + eventName: BI.ColorPickerEditor.EVENT_CHANGE, + action: function () { + self.setValue(this.getValue()); + self._dealStoreColors(); + self.fireEvent(BI.ColorChooserPopup.EVENT_VALUE_CHANGE, arguments); + } + }], + ref: function (_ref) { + self.colorEditor = _ref; + } + }, 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, - height: o.simple ? 36 : 70, listeners: [{ - eventName: BI.ColorPickerEditor.EVENT_CHANGE, + eventName: BI.ColorPicker.EVENT_CHANGE, action: function () { - self.setValue(this.getValue()); + self.setValue(this.getValue()[0]); self._dealStoreColors(); - self.fireEvent(BI.ColorChooserPopup.EVENT_VALUE_CHANGE, arguments); + self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments); } }], ref: function (_ref) { - self.colorEditor = _ref; + self.storeColors = _ref; } - }, o.editor), { - el: { + }, + 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())], + items: [this._digestStoreColors(o.recommendColorsGetter())], height: 22, value: o.value, listeners: [{ @@ -53,144 +80,111 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { } }], ref: function (_ref) { - self.storeColors = _ref; + self.recommendColors = _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(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' }, - 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.hex_color_picker", - space: true, - 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.colorPicker = _ref; - }, - }, - 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, + }] + } : {type: "bi.layout"}, + tgap: hasRecommendColors ? 10 : 0, + height: hasRecommendColors ? 47 : 0 + }, { 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") + "..." + type: "bi.layout", + cls: "bi-border-top" }, - popup: { - type: "bi.popup_panel", - buttons: [BI.i18nText("BI-Basic_Cancel"), BI.i18nText("BI-Basic_Save")], - title: BI.i18nText("BI-Custom_Color"), + vgap: 10, + height: 1 + }, { + type: "bi.absolute", + items: [{ el: { - type: "bi.custom_color_chooser", - editor: o.editor, + type: "bi.hex_color_picker", + space: true, + 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.customColorChooser = _ref; + self.colorPicker = _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; - } - } - }] + 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.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.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; - } + }] }, - tgap: 10, - 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 + }] }, { type: "bi.absolute", items: [{ @@ -212,7 +206,6 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { // 这里就实现的不好了，setValue里面有个editor，editor的setValue会检测错误然后出bubble提示 mounted: function () { - var self = this; var o = this.options; if (BI.isNotNull(o.value)) { this.setValue(o.value); @@ -251,7 +244,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, { return items; }, - _getStoreColors: function() { + _getStoreColors: function () { var self = this, o = this.options; var colorsArray = BI.string2Array(BI.Cache.getItem("colors") || ""); return BI.filter(colorsArray, function (idx, color) { diff --git a/src/case/colorchooser/colorpicker/colorpicker.hex.js b/src/case/colorchooser/colorpicker/colorpicker.hex.js index fad7c5b84..993607841 100644 --- a/src/case/colorchooser/colorpicker/colorpicker.hex.js +++ b/src/case/colorchooser/colorpicker/colorpicker.hex.js @@ -110,8 +110,6 @@ BI.HexColorPicker = BI.inherit(BI.Widget, { render: function () { var self = this, o = this.options; - this.colors = BI.createWidget(); - return { type: "bi.button_group", items: this._digest(o.items || this._items), @@ -167,4 +165,4 @@ BI.HexColorPicker = BI.inherit(BI.Widget, { } }); BI.HexColorPicker.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.hex_color_picker", BI.HexColorPicker); \ No newline at end of file +BI.shortcut("bi.hex_color_picker", BI.HexColorPicker); diff --git a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js index 0326c9130..d2be8a8f9 100644 --- a/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js +++ b/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js @@ -61,7 +61,7 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { tgap: 10, items: [{ type: 'bi.vertical_adapt', - columnSize: [0.5, 'fill'], + columnSize: ["fill", 'fill'], height: 24, items: [{ type: "bi.color_picker_show_button", @@ -284,4 +284,4 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, { } }); BI.HexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE"; -BI.shortcut("bi.hex_color_picker_editor", BI.HexColorPickerEditor); \ No newline at end of file +BI.shortcut("bi.hex_color_picker_editor", BI.HexColorPickerEditor);