Browse Source

BI-91199 颜色选择器新交互

es6
windy 3 years ago
parent
commit
35d47faf18
  1. 1
      changelog.md
  2. 3
      i18n/i18n.cn.js
  3. 4
      src/case/colorchooser/colorchooser.custom.js
  4. 1
      src/case/colorchooser/colorchooser.js
  5. 248
      src/case/colorchooser/colorchooser.popup.hex.js
  6. 10
      src/case/colorchooser/colorpicker/button/button.colorpicker.js
  7. 53
      src/case/colorchooser/colorpicker/button/button.colorshow.js
  8. 170
      src/case/colorchooser/colorpicker/colorpicker.hex.js
  9. 161
      src/case/colorchooser/colorpicker/editor.colorpicker.hex.js
  10. 37
      src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js
  11. 7
      src/less/base/colorchooser/colorpicker/button.colorshow.less

1
changelog.md

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

3
i18n/i18n.cn.js

@ -195,5 +195,6 @@ BI.i18n = {
"BI-Basic_Year_Range_Error": "请选择{R1}年-{R2}年的日期", "BI-Basic_Year_Range_Error": "请选择{R1}年-{R2}年的日期",
"BI-Basic_Year_Month_Range_Error": "请选择{R1}年{R2}月-{R3}年{R4}月的日期", "BI-Basic_Year_Month_Range_Error": "请选择{R1}年{R2}月-{R3}年{R4}月的日期",
"BI-Basic_Year_Quarter_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": "推荐色"
}; };

4
src/case/colorchooser/colorchooser.custom.js

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

1
src/case/colorchooser/colorchooser.js

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

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

@ -8,23 +8,24 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
props: { props: {
baseCls: "bi-color-chooser-popup", baseCls: "bi-color-chooser-popup",
width: 292, width: 292,
height: 195, recommendColorsGetter: BI.emptyFn, // 推荐色获取接口
simple: false // 简单模式, popup中没有自动和透明 simple: false // 简单模式, popup中没有自动和透明
}, },
render: function () { render: function () {
var self = this, o = this.options; var self = this, o = this.options;
var hasRecommendColors = BI.isNotNull(o.recommendColorsGetter());
return { return [{
type: "bi.absolute", el: {
items: [{ type: 'bi.vertical',
el: { items: [{
type: "bi.vtape", el: {
items: [{ type: "bi.vertical",
el: BI.extend({ hgap: 10,
items: [BI.extend({
type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor", type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor",
value: o.value, value: o.value,
height: 30, height: o.simple ? 30 : 64,
listeners: [{ listeners: [{
eventName: BI.ColorPickerEditor.EVENT_CHANGE, eventName: BI.ColorPickerEditor.EVENT_CHANGE,
action: function () { action: function () {
@ -36,17 +37,40 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
ref: function (_ref) { ref: function (_ref) {
self.colorEditor = _ref; self.colorEditor = _ref;
} }
}, o.editor), }, o.editor), {
height: 50 el: {
}, { type: "bi.hex_color_picker",
el: { cls: "bi-border-bottom bi-border-right",
type: "bi.absolute", items: [this._digestStoreColors(this._getStoreColors())],
items: [{ height: 22,
el: { value: o.value,
type: "bi.color_picker", 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", cls: "bi-border-bottom bi-border-right",
items: [this._digestStoreColors(this._getStoreColors())], items: [this._digestStoreColors(o.recommendColorsGetter())],
height: 34, height: 22,
value: o.value, value: o.value,
listeners: [{ listeners: [{
eventName: BI.ColorPicker.EVENT_CHANGE, eventName: BI.ColorPicker.EVENT_CHANGE,
@ -57,21 +81,25 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
} }
}], }],
ref: function (_ref) { ref: function (_ref) {
self.storeColors = _ref; self.recommendColors = _ref;
} }
}, }]
left: 10, } : { type: 'bi.layout' },
right: 10, tgap: hasRecommendColors ? 10 : 0,
top: 5 height: hasRecommendColors ? 47 : 0
}] }, {
}, el: {
height: 38 type: 'bi.layout',
}, { cls: 'bi-border-top',
el: { },
type: "bi.absolute", vgap: 10,
height: 1
}, {
type: 'bi.absolute',
items: [{ items: [{
el: { el: {
type: "bi.color_picker", type: "bi.hex_color_picker",
space: true,
value: o.value, value: o.value,
listeners: [{ listeners: [{
eventName: BI.ColorPicker.EVENT_CHANGE, eventName: BI.ColorPicker.EVENT_CHANGE,
@ -83,84 +111,89 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
}], }],
ref: function (_ref) { ref: function (_ref) {
self.colorPicker = _ref; self.colorPicker = _ref;
} },
}, },
left: 10, top: 0,
right: 10, left: 0,
top: 5, right: 0,
bottom: 10 bottom: 1,
}] }],
} height: 80,
}, { }]
}
}, {
el: {
type: "bi.combo",
cls: "bi-border-top",
container: null,
direction: "right,top",
isNeedAdjustHeight: false,
el: { el: {
type: "bi.combo", type: "bi.text_item",
cls: "bi-border-top", cls: "color-chooser-popup-more bi-list-item",
container: null, textAlign: "center",
direction: "right,top", height: 24,
isNeedAdjustHeight: false, 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: { el: {
type: "bi.text_item", type: "bi.custom_color_chooser",
cls: "color-chooser-popup-more bi-list-item", editor: o.editor,
textAlign: "center", ref: function (_ref) {
height: 24, self.customColorChooser = _ref;
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;
}
}
}]
}, },
stopPropagation: false,
bgap: -1,
rgap: 1,
lgap: 1,
minWidth: 227,
listeners: [{ listeners: [{
eventName: BI.Combo.EVENT_AFTER_POPUPVIEW, eventName: BI.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON,
action: function () { action: function (index) {
self.customColorChooser.setValue(self.getValue()); 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 listeners: [{
}] eventName: BI.Combo.EVENT_AFTER_POPUPVIEW,
}, action: function () {
left: 0, self.customColorChooser.setValue(self.getValue());
right: 0, }
top: 0, }],
bottom: 0 ref: function (_ref) {
}, { self.more = _ref;
}
},
tgap: 10,
height: 24
}]
},
left: 0,
right: 0,
top: 0,
bottom: 0
}, {
type: "bi.absolute",
items: [{
el: { el: {
type: "bi.layout", type: "bi.layout",
cls: "disable-mask", cls: "disable-mask",
@ -174,7 +207,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
top: 0, top: 0,
bottom: 0 bottom: 0
}] }]
}; }];
}, },
// 这里就实现的不好了,setValue里面有个editor,editor的setValue会检测错误然后出bubble提示 // 这里就实现的不好了,setValue里面有个editor,editor的setValue会检测错误然后出bubble提示
@ -194,7 +227,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
_dealStoreColors: function () { _dealStoreColors: function () {
var color = this.getValue(); var color = this.getValue();
var colors = this._getStoreColors(); var colors = this._getStoreColors();
var que = new BI.Queue(8); var que = new BI.Queue(12);
que.fromArray(colors); que.fromArray(colors);
que.remove(color); que.remove(color);
que.unshift(color); que.unshift(color);
@ -209,9 +242,9 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
value: color value: color
}; };
}); });
BI.count(colors.length, 8, function (i) { BI.count(colors.length, 12, function (i) {
items.push({ items.push({
value: "", value: "empty",
disabled: true disabled: true
}); });
}); });
@ -242,6 +275,7 @@ BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
this.colorEditor.setValue(color); this.colorEditor.setValue(color);
this.colorPicker.setValue(color); this.colorPicker.setValue(color);
this.storeColors.setValue(color); this.storeColors.setValue(color);
this.recommendColors && this.recommendColors.setValue(color);
}, },
getValue: function () { getValue: function () {

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

@ -17,8 +17,14 @@ BI.ColorPickerButton = BI.inherit(BI.BasicButton, {
_init: function () { _init: function () {
BI.ColorPickerButton.superclass._init.apply(this, arguments); BI.ColorPickerButton.superclass._init.apply(this, arguments);
var self = this, o = this.options; var self = this, o = this.options;
if (o.value) { if (BI.isNotNull(o.value)) {
this.element.css("background-color", 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(); var name = this.getName();
this.element.hover(function () { this.element.hover(function () {
self._createMask(); self._createMask();

53
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);

170
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);

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

@ -8,15 +8,14 @@
BI.HexColorPickerEditor = BI.inherit(BI.Widget, { BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
constants: { constants: {
RGB_WIDTH: 32, RGB_WIDTH: 36,
HEX_WIDTH: 70, HEX_WIDTH: 70,
HEX_PREFIX_POSITION: 1 HEX_PREFIX_POSITION: 1
}, },
props: { props: {
baseCls: "bi-color-picker-editor", baseCls: "bi-color-picker-editor",
// width: 200, height: 30
height: 50
}, },
render: function () { render: function () {
@ -59,8 +58,68 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
items: [{ items: [{
el: { el: {
type: "bi.vertical", type: "bi.vertical",
tgap: 5, tgap: 10,
items: [{ 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", type: "bi.vertical_adapt",
rgap: 5, rgap: 5,
items: [{ items: [{
@ -100,116 +159,32 @@ BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
} }
}] }]
}, { }, RGB[0], {
el: BI.extend(Ws[0], { el: BI.extend(Ws[0], {
ref: function (_ref) { ref: function (_ref) {
self.R = _ref self.R = _ref
} }
}), }),
width: c.RGB_WIDTH width: c.RGB_WIDTH
}, { }, RGB[1], {
el: BI.extend(Ws[1], { el: BI.extend(Ws[1], {
ref: function (_ref) { ref: function (_ref) {
self.G = _ref self.G = _ref
} }
}), }),
width: c.RGB_WIDTH width: c.RGB_WIDTH
}, { }, RGB[2], {
el: BI.extend(Ws[2], { el: BI.extend(Ws[2], {
ref: function (_ref) { ref: function (_ref) {
self.B = _ref self.B = _ref
} }
}), }),
width: c.RGB_WIDTH 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, top: 0,
bottom: 0 bottom: 0
}] }]

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

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

7
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;
}
}
Loading…
Cancel
Save