From 8e67cef3f787f72c8ab172ad96c95c8659493119 Mon Sep 17 00:00:00 2001 From: dailer Date: Tue, 31 Oct 2023 16:15:03 +0800 Subject: [PATCH] =?UTF-8?q?BI-129591=20feat:=20HexColorChooserPopup=20?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE=E8=87=AA=E5=8A=A8=E5=92=8C?= =?UTF-8?q?=E9=80=8F=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../colorchooser/colorchooser.popup.hex.js | 2 + .../colorpicker/editor.colorpicker.hex.js | 47 +++++++++++-------- 2 files changed, 29 insertions(+), 20 deletions(-) diff --git a/packages/fineui/src/case/colorchooser/colorchooser.popup.hex.js b/packages/fineui/src/case/colorchooser/colorchooser.popup.hex.js index 0a9f9a24c..afde53a6a 100644 --- a/packages/fineui/src/case/colorchooser/colorchooser.popup.hex.js +++ b/packages/fineui/src/case/colorchooser/colorchooser.popup.hex.js @@ -69,6 +69,8 @@ export class HexColorChooserPopup extends Widget { : HexColorPickerEditor.xtype, value: o.value, height: o.simple ? 36 : 70, + transparent: o.transparent, + auto: o.auto, listeners: [ { eventName: ColorPickerEditor.EVENT_CHANGE, diff --git a/packages/fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js b/packages/fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js index 25ffb0a2a..02ea9293c 100644 --- a/packages/fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js +++ b/packages/fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js @@ -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,