Browse Source

BI-74454 feat: 单色选择控件支持输入16进制颜色编号

es6
windy 4 years ago
parent
commit
bab8d03a8d
  1. 1
      changelog.md
  2. 12
      src/case/colorchooser/colorchooser.custom.js
  3. 4
      src/case/colorchooser/colorchooser.js
  4. 250
      src/case/colorchooser/colorchooser.popup.hex.js
  5. 49
      src/case/colorchooser/colorchooser.popup.hex.simple.js
  6. 2
      src/case/colorchooser/colorchooser.popup.simple.js
  7. 2
      src/case/colorchooser/colorchooser.simple.js
  8. 297
      src/case/colorchooser/colorpicker/editor.colorpicker.hex.js
  9. 167
      src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js
  10. 14
      src/case/colorchooser/colorpicker/editor.colorpicker.js
  11. 10
      src/case/colorchooser/colorpicker/editor.colorpicker.simple.js

1
changelog.md

@ -1,5 +1,6 @@
# 更新日志
2.0(2020-11)
- 颜色选择器支持输入16进制颜色编号
- bi.textarea_editor支持气泡提示报错
2.0(2020-10)

12
src/case/colorchooser/colorchooser.custom.js

@ -10,8 +10,8 @@ BI.CustomColorChooser = BI.inherit(BI.Widget, {
_defaultConfig: function () {
return BI.extend(BI.CustomColorChooser.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-custom-color-chooser",
width: 227,
height: 245
width: 292,
height: 265
});
},
@ -19,7 +19,7 @@ BI.CustomColorChooser = BI.inherit(BI.Widget, {
BI.CustomColorChooser.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.editor = BI.createWidget(o.editor, {
type: "bi.simple_color_picker_editor"
type: "bi.simple_hex_color_picker_editor"
});
this.editor.on(BI.ColorPickerEditor.EVENT_CHANGE, function () {
self.setValue(this.getValue());
@ -42,13 +42,13 @@ BI.CustomColorChooser = BI.inherit(BI.Widget, {
top: 0,
right: 0
}],
height: 30
height: 50
}, {
type: "bi.absolute",
items: [{
el: this.farbtastic,
left: 15,
right: 15,
left: 46,
right: 46,
top: 7
}],
height: 215

4
src/case/colorchooser/colorchooser.js

@ -38,7 +38,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, {
}, o.el),
popup: {
el: BI.extend({
type: "bi.color_chooser_popup",
type: "bi.hex_color_chooser_popup",
ref: function (_ref) {
self.colorPicker = _ref;
},
@ -59,7 +59,7 @@ BI.ColorChooser = BI.inherit(BI.Widget, {
}]
}, o.popup),
value: o.value,
width: 230
width: 292
},
value: o.value
});

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

@ -0,0 +1,250 @@
/**
* @author windy
* @version 2.0
* Created by windy on 2020/11/10
*/
BI.HexColorChooserPopup = BI.inherit(BI.Widget, {
props: {
baseCls: "bi-color-chooser-popup",
width: 292,
height: 195,
simple: false // 简单模式, popup中没有自动和透明
},
render: function () {
var self = this, o = this.options;
this.customColorChooser = BI.createWidget();
return {
type: "bi.absolute",
items: [{
el: {
type: "bi.vtape",
items: [{
el: BI.extend({
type: o.simple ? "bi.simple_hex_color_picker_editor" : "bi.hex_color_picker_editor",
value: o.value,
height: 30,
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),
height: 50
}, {
el: {
type: "bi.absolute",
items: [{
el: {
type: "bi.color_picker",
cls: "bi-border-bottom bi-border-right",
items: [this._digestStoreColors(this._getStoreColors())],
height: 34,
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;
}
},
left: 10,
right: 10,
top: 5
}]
},
height: 38
}, {
el: {
type: "bi.absolute",
items: [{
el: {
type: "bi.color_picker",
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;
}
},
left: 10,
right: 10,
top: 5,
bottom: 10
}]
}
}, {
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.PopupPanel.EVENT_CLICK_TOOLBAR_BUTTON,
action: function (index) {
switch (index) {
case 0:
self.more.hideView();
break;
case 1:
self.setValue(self.customColorChooser.getValue());
self._dealStoreColors();
self.more.hideView();
self.fireEvent(BI.ColorChooserPopup.EVENT_CHANGE, arguments);
break;
}
}
}]
},
listeners: [{
eventName: BI.Combo.EVENT_AFTER_POPUPVIEW,
action: function () {
self.customColorChooser.setValue(self.getValue());
}
}],
ref: function (_ref) {
self.more = _ref;
}
},
height: 24
}]
},
left: 0,
right: 0,
top: 0,
bottom: 0
}, {
el: {
type: "bi.layout",
cls: "disable-mask",
invisible: !o.disabled,
ref: function () {
self.mask = this;
}
},
left: 0,
right: 0,
top: 0,
bottom: 0
}]
};
},
mounted: function () {
var self = this;
var o = this.options;
if (BI.isNotNull(o.value)) {
this.setValue(o.value);
}
},
_setEnable: function (enable) {
BI.ColorChooserPopup.superclass._setEnable.apply(this, arguments);
this.mask.setVisible(!enable);
},
_dealStoreColors: function () {
var color = this.getValue();
var colors = this._getStoreColors();
var que = new BI.Queue(8);
que.fromArray(colors);
que.remove(color);
que.unshift(color);
var array = que.toArray();
BI.Cache.setItem("colors", BI.array2String(array));
this.setStoreColors(array);
},
_digestStoreColors: function (colors) {
var items = BI.map(colors, function (i, color) {
return {
value: color
};
});
BI.count(colors.length, 8, function (i) {
items.push({
value: "",
disabled: true
});
});
return items;
},
_getStoreColors: function() {
var self = this, o = this.options;
var colorsArray = BI.string2Array(BI.Cache.getItem("colors") || "");
return BI.filter(colorsArray, function (idx, color) {
return o.simple ? self._isRGBColor(color) : true;
});
},
_isRGBColor: function (color) {
return BI.isNotEmptyString(color) && color !== "transparent";
},
setStoreColors: function (colors) {
if (BI.isArray(colors)) {
this.storeColors.populate([this._digestStoreColors(colors)]);
// BI-66973 选中颜色的同时选中历史
this.storeColors.setValue(this.getValue());
}
},
setValue: function (color) {
this.colorEditor.setValue(color);
this.colorPicker.setValue(color);
this.storeColors.setValue(color);
},
getValue: function () {
return this.colorEditor.getValue();
}
});
BI.HexColorChooserPopup.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
BI.HexColorChooserPopup.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.hex_color_chooser_popup", BI.HexColorChooserPopup);

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

@ -0,0 +1,49 @@
/**
* @author windy
* @version 2.0
* Created by windy on 2020/11/10
*/
BI.SimpleHexColorChooserPopup = BI.inherit(BI.Widget, {
props: {
baseCls: "bi-color-chooser-popup",
},
render: function () {
var self = this, o = this.options;
return {
type: "bi.hex_color_chooser_popup",
value: o.value,
simple: true, // 是否有自动
listeners: [{
eventName: BI.ColorChooserPopup.EVENT_CHANGE,
action: function () {
self.fireEvent(BI.SimpleColorChooserPopup.EVENT_CHANGE, arguments);
}
}, {
eventName: BI.ColorChooserPopup.EVENT_VALUE_CHANGE,
action: function () {
self.fireEvent(BI.SimpleColorChooserPopup.EVENT_VALUE_CHANGE, arguments);
}
}],
ref: function (_ref) {
self.popup = _ref;
}
}
},
setStoreColors: function (colors) {
this.popup.setStoreColors(colors);
},
setValue: function (color) {
this.popup.setValue(color);
},
getValue: function () {
return this.popup.getValue();
}
});
BI.SimpleHexColorChooserPopup.EVENT_VALUE_CHANGE = "EVENT_VALUE_CHANGE";
BI.SimpleHexColorChooserPopup.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.simple_hex_color_chooser_popup", BI.SimpleHexColorChooserPopup);

2
src/case/colorchooser/colorchooser.popup.simple.js

@ -17,7 +17,7 @@ BI.SimpleColorChooserPopup = BI.inherit(BI.Widget, {
BI.SimpleColorChooserPopup.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.popup = BI.createWidget({
type: "bi.color_chooser_popup",
type: o.hex ? "bi.hex_color_chooser_popup" : "bi.color_chooser_popup",
value: o.value,
element: this,
simple: true // 是否有自动

2
src/case/colorchooser/colorchooser.simple.js

@ -26,7 +26,7 @@ BI.SimpleColorChooser = BI.inherit(BI.Widget, {
width: o.width,
height: o.height,
popup: {
type: "bi.simple_color_chooser_popup"
type: "bi.simple_hex_color_chooser_popup"
}
});
this.combo.on(BI.ColorChooser.EVENT_CHANGE, function () {

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

@ -0,0 +1,297 @@
/**
* 简单选色控件
*
* Created by GUY on 2015/11/16.
* @class BI.ColorPickerEditor
* @extends BI.Widget
*/
BI.HexColorPickerEditor = BI.inherit(BI.Widget, {
constants: {
RGB_WIDTH: 32,
HEX_WIDTH: 70,
HEX_PREFIX_POSITION: 1
},
props: {
baseCls: "bi-color-picker-editor",
// width: 200,
height: 50
},
render: function () {
var self = this, o = this.options, c = this.constants;
this.storeValue = {};
var RGB = BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], {
type: "bi.label",
cls: "color-picker-editor-label",
height: 20
});
var checker = function (v) {
return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
};
var Ws = BI.createWidgets([{}, {}, {}], {
type: "bi.small_text_editor",
cls: "color-picker-editor-input",
validationChecker: checker,
errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
allowBlank: true,
value: 255,
width: c.RGB_WIDTH,
height: 20,
listeners: [{
eventName: BI.TextEditor.EVENT_CHANGE,
action: function () {
self._checkEditors();
if (checker(self.storeValue.r) && checker(self.storeValue.g) && checker(self.storeValue.b)) {
self.colorShow.element.css("background-color", self.getValue());
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
}
}
}]
});
this.R = Ws[0];
this.G = Ws[1];
this.B = Ws[2];
return {
type: "bi.absolute",
items: [{
el: {
type: "bi.vertical",
tgap: 5,
items: [{
type: "bi.vertical_adapt",
rgap: 5,
items: [{
el: {
type: "bi.layout",
cls: "color-picker-editor-display bi-card bi-border",
height: 16,
width: 16,
ref: function (_ref) {
self.colorShow = _ref;
}
},
width: 16
}, {
type: "bi.label",
text: "#",
width: 10
}, {
type: "bi.small_text_editor",
ref: function (_ref) {
self.hexEditor = _ref;
},
cls: "color-picker-editor-input",
validationChecker: this._hexChecker,
errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"),
width: c.HEX_WIDTH,
height: 20,
listeners: [{
eventName: "EVENT_CHANGE",
action: function () {
self.setValue("#" + this.getValue());
self.colorShow.element.css("background-color", self.getValue());
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
}
}]
}, {
el: this.R,
width: c.RGB_WIDTH
}, {
el: this.G,
width: c.RGB_WIDTH
}, {
el: this.B,
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,
top: 0,
bottom: 0
}]
};
},
_hexChecker: function (v) {
return /^[0-9a-fA-F]{6}$/.test(v);
},
_checkEditors: function () {
if(BI.isEmptyString(this.R.getValue())) {
this.R.setValue(0);
}
if(BI.isEmptyString(this.G.getValue())) {
this.G.setValue(0);
}
if(BI.isEmptyString(this.B.getValue())) {
this.B.setValue(0);
}
this.storeValue = {
r: this.R.getValue() || 0,
g: this.G.getValue() || 0,
b: this.B.getValue() || 0
};
this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION));
},
_isEmptyRGB: function () {
return BI.isEmptyString(this.storeValue.r) && BI.isEmptyString(this.storeValue.g) && BI.isEmptyString(this.storeValue.b);
},
_showPreColor: function (color) {
if (color === "") {
this.colorShow.element.css("background-color", "").removeClass("trans-color-background").addClass("auto-color-normal-background");
} else if (color === "transparent") {
this.colorShow.element.css("background-color", "").removeClass("auto-color-normal-background").addClass("trans-color-background");
} else {
this.colorShow.element.css({"background-color": color}).removeClass("auto-color-normal-background").removeClass("trans-color-background");
}
},
_setEnable: function (enable) {
BI.ColorPickerEditor.superclass._setEnable.apply(this, arguments);
if (enable === true) {
this.element.removeClass("base-disabled disabled");
} else if (enable === false) {
this.element.addClass("base-disabled disabled");
}
},
setValue: function (color) {
if (color === "transparent") {
this.transparent.setSelected(true);
this.none.setSelected(false);
this._showPreColor("transparent");
this.R.setValue("");
this.G.setValue("");
this.B.setValue("");
this.hexEditor.setValue("");
this.storeValue = {
r: "",
g: "",
b: ""
};
return;
}
if (!color) {
color = "";
this.none.setSelected(true);
} else {
this.none.setSelected(false);
}
this.transparent.setSelected(false);
this._showPreColor(color);
var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
this.storeValue = {
r: BI.isNull(json.r) ? "" : json.r,
g: BI.isNull(json.g) ? "" : json.g,
b: BI.isNull(json.b) ? "" : json.b
};
this.R.setValue(this.storeValue.r);
this.G.setValue(this.storeValue.g);
this.B.setValue(this.storeValue.b);
this.hexEditor.setValue(color.slice(this.constants.HEX_PREFIX_POSITION));
},
getValue: function () {
if (this._isEmptyRGB() && this.transparent.isSelected()) {
return "transparent";
}
return BI.DOM.rgb2hex(BI.DOM.json2rgb({
r: this.storeValue.r,
g: this.storeValue.g,
b: this.storeValue.b
}));
}
});
BI.HexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.hex_color_picker_editor", BI.HexColorPickerEditor);

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

@ -0,0 +1,167 @@
/**
* @author windy
* @version 2.0
* Created by windy on 2020/11/10
*/
BI.SimpleHexColorPickerEditor = BI.inherit(BI.Widget, {
constants: {
RGB_WIDTH: 40,
HEX_WIDTH: 70,
HEX_PREFIX_POSITION: 1
},
props: {
baseCls: "bi-color-picker-editor",
// width: 200,
height: 50
},
render: function () {
var self = this, o = this.options, c = this.constants;
var RGB = BI.createItems([{text: "R"}, {text: "G"}, {text: "B"}], {
type: "bi.label",
cls: "color-picker-editor-label",
height: 20
});
var checker = function (v) {
return BI.isNumeric(v) && (v | 0) >= 0 && (v | 0) <= 255;
};
var Ws = BI.createWidgets([{}, {}, {}], {
type: "bi.small_text_editor",
cls: "color-picker-editor-input",
validationChecker: checker,
errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
allowBlank: true,
value: 255,
width: c.RGB_WIDTH,
height: 20,
listeners: [{
eventName: BI.TextEditor.EVENT_CHANGE,
action: function () {
self._checkEditors();
if (self.R.isValid() && self.G.isValid() && self.B.isValid()) {
self.colorShow.element.css("background-color", self.getValue());
self.fireEvent(BI.SimpleColorPickerEditor.EVENT_CHANGE);
}
}
}]
});
this.R = Ws[0];
this.G = Ws[1];
this.B = Ws[2];
return {
type: "bi.vertical",
tgap: 5,
items: [{
type: "bi.vertical_adapt",
rgap: 10,
items: [{
el: {
type: "bi.layout",
cls: "color-picker-editor-display bi-card bi-border",
height: 16,
width: 16,
ref: function (_ref) {
self.colorShow = _ref;
}
},
width: 16,
lgap: 10,
rgap: 5
}, {
type: "bi.label",
text: "#",
width: 10
}, {
type: "bi.small_text_editor",
ref: function (_ref) {
self.hexEditor = _ref;
},
cls: "color-picker-editor-input",
validationChecker: this._hexChecker,
errorText: BI.i18nText("BI-Color_Picker_Error_Text_Hex"),
width: c.HEX_WIDTH,
height: 20,
listeners: [{
eventName: "EVENT_CHANGE",
action: function () {
self.setValue("#" + this.getValue());
self.colorShow.element.css("background-color", self.getValue());
self.fireEvent(BI.ColorPickerEditor.EVENT_CHANGE);
}
}]
}, {
el: this.R,
width: c.RGB_WIDTH
}, {
el: this.G,
width: c.RGB_WIDTH
}, {
el: this.B,
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
}]
}]
}
},
_hexChecker: function (v) {
return /^[0-9a-fA-F]{6}$/.test(v);
},
_checkEditors: function () {
if(BI.isEmptyString(this.R.getValue())) {
this.R.setValue(0);
}
if(BI.isEmptyString(this.G.getValue())) {
this.G.setValue(0);
}
if(BI.isEmptyString(this.B.getValue())) {
this.B.setValue(0);
}
this.hexEditor.setValue(this.getValue().slice(this.constants.HEX_PREFIX_POSITION));
},
setValue: function (color) {
this.colorShow.element.css({"background-color": color});
var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
this.R.setValue(BI.isNull(json.r) ? "" : json.r);
this.G.setValue(BI.isNull(json.g) ? "" : json.g);
this.B.setValue(BI.isNull(json.b) ? "" : json.b);
this.hexEditor.setValue(color.slice(this.constants.HEX_PREFIX_POSITION));
},
getValue: function () {
return BI.DOM.rgb2hex(BI.DOM.json2rgb({
r: this.R.getValue(),
g: this.G.getValue(),
b: this.B.getValue()
}));
}
});
BI.SimpleHexColorPickerEditor.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.simple_hex_color_picker_editor", BI.SimpleHexColorPickerEditor);

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

@ -8,7 +8,7 @@
BI.ColorPickerEditor = BI.inherit(BI.Widget, {
constants: {
REB_WIDTH: 32
RGB_WIDTH: 32
},
_defaultConfig: function () {
@ -46,7 +46,7 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
allowBlank: true,
value: 255,
width: c.REB_WIDTH,
width: c.RGB_WIDTH,
height: 20
});
BI.each(Ws, function (i, w) {
@ -124,19 +124,19 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
width: 20
}, {
el: this.R,
width: c.REB_WIDTH
width: c.RGB_WIDTH
}, {
el: RGB[1],
width: 20
}, {
el: this.G,
width: c.REB_WIDTH
width: c.RGB_WIDTH
}, {
el: RGB[2],
width: 20
}, {
el: this.B,
width: c.REB_WIDTH
width: c.RGB_WIDTH
}, {
el: this.transparent,
width: 16,
@ -221,8 +221,8 @@ BI.ColorPickerEditor = BI.inherit(BI.Widget, {
var json = BI.DOM.rgb2json(BI.DOM.hex2rgb(color));
this.storeValue = {
r: BI.isNull(json.r) ? "" : json.r,
g: BI.isNull(json.r) ? "" : json.g,
b: BI.isNull(json.r) ? "" : json.b
g: BI.isNull(json.g) ? "" : json.g,
b: BI.isNull(json.b) ? "" : json.b
};
this.R.setValue(this.storeValue.r);
this.G.setValue(this.storeValue.g);

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

@ -8,7 +8,7 @@
BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
constants: {
REB_WIDTH: 32
RGB_WIDTH: 32
},
_defaultConfig: function () {
@ -45,7 +45,7 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
errorText: BI.i18nText("BI-Color_Picker_Error_Text"),
allowBlank: true,
value: 255,
width: c.REB_WIDTH,
width: c.RGB_WIDTH,
height: 20
});
BI.each(Ws, function (i, w) {
@ -74,19 +74,19 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, {
width: 20
}, {
el: this.R,
width: c.REB_WIDTH
width: c.RGB_WIDTH
}, {
el: RGB[1],
width: 20
}, {
el: this.G,
width: c.REB_WIDTH
width: c.RGB_WIDTH
}, {
el: RGB[2],
width: 20
}, {
el: this.B,
width: c.REB_WIDTH
width: c.RGB_WIDTH
}]
});
},

Loading…
Cancel
Save