|
|
|
@ -41,6 +41,8 @@ export class HexColorPickerEditor extends Widget {
|
|
|
|
|
props = { |
|
|
|
|
baseCls: "bi-color-picker-editor bi-hex-color-picker-editor", |
|
|
|
|
height: 30, |
|
|
|
|
transparent: true, |
|
|
|
|
auto: true, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
@ -95,23 +97,27 @@ export class HexColorPickerEditor extends Widget {
|
|
|
|
|
height: 24, |
|
|
|
|
items: [ |
|
|
|
|
{ |
|
|
|
|
type: ColorChooserShowButton.xtype, |
|
|
|
|
cls: "trans-color-icon", |
|
|
|
|
height: 22, |
|
|
|
|
title: i18nText("BI-Transparent_Color"), |
|
|
|
|
text: i18nText("BI-Transparent_Color"), |
|
|
|
|
listeners: [ |
|
|
|
|
{ |
|
|
|
|
eventName: ColorChooserShowButton.EVENT_CHANGE, |
|
|
|
|
action: () => { |
|
|
|
|
this.setValue("transparent"); |
|
|
|
|
this.fireEvent(ColorPickerEditor.EVENT_CHANGE); |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
ref: _ref => { |
|
|
|
|
this.transparent = _ref; |
|
|
|
|
el: { |
|
|
|
|
type: ColorChooserShowButton.xtype, |
|
|
|
|
cls: "trans-color-icon", |
|
|
|
|
height: 22, |
|
|
|
|
title: i18nText("BI-Transparent_Color"), |
|
|
|
|
text: i18nText("BI-Transparent_Color"), |
|
|
|
|
invisible: !this.options.transparent, |
|
|
|
|
listeners: [ |
|
|
|
|
{ |
|
|
|
|
eventName: ColorChooserShowButton.EVENT_CHANGE, |
|
|
|
|
action: () => { |
|
|
|
|
this.setValue("transparent"); |
|
|
|
|
this.fireEvent(ColorPickerEditor.EVENT_CHANGE); |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
ref: _ref => { |
|
|
|
|
this.transparent = _ref; |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
rgap: this.options.auto ? 5 : 0, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
el: { |
|
|
|
@ -120,6 +126,7 @@ export class HexColorPickerEditor extends Widget {
|
|
|
|
|
height: 22, |
|
|
|
|
title: i18nText("BI-Basic_Auto"), |
|
|
|
|
text: i18nText("BI-Basic_Auto"), |
|
|
|
|
invisible: !this.options.auto, |
|
|
|
|
listeners: [ |
|
|
|
|
{ |
|
|
|
|
eventName: ColorChooserShowButton.EVENT_CHANGE, |
|
|
|
@ -133,7 +140,7 @@ export class HexColorPickerEditor extends Widget {
|
|
|
|
|
this.none = _ref; |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
lgap: 10, |
|
|
|
|
lgap: this.options.transparent ? 5 : 0, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
@ -176,6 +183,9 @@ export class HexColorPickerEditor extends Widget {
|
|
|
|
|
{ |
|
|
|
|
eventName: "EVENT_CHANGE", |
|
|
|
|
action: () => { |
|
|
|
|
if (isEmptyString(this.hexEditor.getValue())) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
this._checkHexEditor(); |
|
|
|
|
if ( |
|
|
|
|
checker(this.storeValue.r) && |
|
|
|
@ -261,9 +271,6 @@ export class HexColorPickerEditor extends Widget {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_checkHexEditor() { |
|
|
|
|
if (isEmptyString(this.hexEditor.getValue())) { |
|
|
|
|
this.hexEditor.setValue("000000"); |
|
|
|
|
} |
|
|
|
|
const json = DOM.rgb2json(DOM.hex2rgb(`#${this.hexEditor.getValue()}`)); |
|
|
|
|
this.storeValue = { |
|
|
|
|
r: json.r || 0, |
|
|
|
|