Browse Source

Pull request #3674: BI-129591 feat: HexColorChooserPopup 支持配置自动和透明

Merge in VISUAL/fineui from ~DAILER/fineui:master to master

* commit '8e67cef3f787f72c8ab172ad96c95c8659493119':
  BI-129591 feat: HexColorChooserPopup 支持配置自动和透明
research/test
Dailer-刘荣歆 1 year ago
parent
commit
9df9b64314
  1. 2
      packages/fineui/src/case/colorchooser/colorchooser.popup.hex.js
  2. 15
      packages/fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js

2
packages/fineui/src/case/colorchooser/colorchooser.popup.hex.js

@ -69,6 +69,8 @@ export class HexColorChooserPopup extends Widget {
: HexColorPickerEditor.xtype, : HexColorPickerEditor.xtype,
value: o.value, value: o.value,
height: o.simple ? 36 : 70, height: o.simple ? 36 : 70,
transparent: o.transparent,
auto: o.auto,
listeners: [ listeners: [
{ {
eventName: ColorPickerEditor.EVENT_CHANGE, eventName: ColorPickerEditor.EVENT_CHANGE,

15
packages/fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js

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

Loading…
Cancel
Save