From 45f9161869a73f7ec6e77452f44b1e2577fbdf0c Mon Sep 17 00:00:00 2001 From: jian Date: Fri, 5 Jan 2024 16:56:07 +0800 Subject: [PATCH 1/4] =?UTF-8?q?BI-137665=20feat:=20=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E5=BC=B9=E7=AA=97=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../fineui/src/base/foundation/message.js | 152 ++++++++++-------- packages/fineui/src/less/lib/colors.less | 2 + packages/fineui/src/less/lib/constant.less | 2 + packages/fineui/src/less/lib/font.less | 5 + packages/fineui/src/less/resource/font.less | 5 + .../typescript/base/foundation/message.ts | 16 +- 6 files changed, 111 insertions(+), 71 deletions(-) diff --git a/packages/fineui/src/base/foundation/message.js b/packages/fineui/src/base/foundation/message.js index 90990e37b..3847eba44 100644 --- a/packages/fineui/src/base/foundation/message.js +++ b/packages/fineui/src/base/foundation/message.js @@ -17,9 +17,13 @@ import { i18nText, KeyCode, isPlainObject, - SIZE_CONSANTS + SIZE_CONSANTS, + CenterAdaptLayout, + VerticalLayout, + HTapeLayout, + RightVerticalAdaptLayout } from "../../core"; -import { Toast } from "../single"; +import { Button, IconLabel, Label, Toast } from "../single"; let $mask, $pop; @@ -27,15 +31,33 @@ const messageShows = []; const toastStack = []; -const defaultConfig = { - buttonHeight: 24, -}; +const AlertLevel = { + WARNING: 'warning', + INFO: 'info', + ERROR: 'error', + SUCCESS: 'success', +} + +function getIconCls(level) { + switch (level) { + case AlertLevel.ERROR: + return 'alert-error-font'; + case AlertLevel.SUCCESS: + return 'alert-success-font'; + case AlertLevel.INFO: + return 'alert-info-font'; + case AlertLevel.WARNING: + default: + return 'alert-warning-font'; + } +} + export const Msg = { - alert(title, message, callback, config = defaultConfig) { + alert(title, message, callback, config) { _show(false, title, message, callback, config); }, - confirm(title, message, callback, config = defaultConfig) { + confirm(title, message, callback, config) { _show(true, title, message, callback, config); }, toast(message, options, context) { @@ -99,7 +121,14 @@ export const Msg = { }, }; -function _show(hasCancel, title, message, callback, config) { +function _show(hasCancel, title, message, callback, config = {}) { + config = { + buttonHeight: 24, + cancelText: i18nText("BI-Basic_Cancel"), + sureText: i18nText("BI-Basic_OK"), + level: AlertLevel.WARNING, + ...config, + } isNull($mask) && ($mask = Widget._renderEngine .createElement("
") @@ -138,9 +167,9 @@ function _show(hasCancel, title, message, callback, config) { if (hasCancel === true) { controlItems.push({ el: { - type: "bi.button", + type: Button.xtype, height: config.buttonHeight, - text: i18nText("BI-Basic_Cancel"), + text: config.cancelText, light: true, handler() { close(); @@ -153,9 +182,9 @@ function _show(hasCancel, title, message, callback, config) { } controlItems.push({ el: { - type: "bi.button", + type: Button.xtype, height: config.buttonHeight, - text: i18nText("BI-Basic_OK"), + text: config.sureText, handler() { close(); if (isFunction(callback)) { @@ -166,10 +195,11 @@ function _show(hasCancel, title, message, callback, config) { }); const conf = { element: $pop, - type: "bi.center_adapt", + type: CenterAdaptLayout.xtype, items: [ { - type: "bi.border", + type: VerticalLayout.xtype, + width: 450, attributes: { tabIndex: 1, }, @@ -195,74 +225,58 @@ function _show(hasCancel, title, message, callback, config) { } }, cls: "bi-card", - items: { - north: { + hgap: 32, + items: [ + { el: { - type: "bi.border", - cls: "bi-message-title bi-background", - items: { - center: { - el: { - type: "bi.label", - cls: "bi-font-bold", - text: title || i18nText("BI-Basic_Prompt"), - textAlign: "left", - hgap: 20, - height: 40, - }, + type: HTapeLayout.xtype, + height: 24, + items: [ + { + type: IconLabel.xtype, + cls: `${getIconCls(config.level)} icon-size-20`, + width: 24, + height: 24, }, - east: { - el: { - type: "bi.icon_button", - cls: "bi-message-close close-font", - // height: 50, - handler() { - close(); - if (isFunction(callback)) { - callback.apply(null, [false]); - } - }, - }, - width: 56, + { + type: Label.xtype, + css: { "font-size": 16 }, + cls: 'bi-font-bold', // 16px + textAlign: 'left', + width: 'fill', + text: title || i18nText('BI-Basic_Prompt'), + lgap: 16, }, - }, + ], }, - height: 40, + tgap: 32, }, - center: { + { el: isPlainObject(message) ? message : { - type: "bi.label", - vgap: 10, - hgap: 20, - whiteSpace: "normal", + type: Label.xtype, + css: { "font-size": 14 }, + cls: 'alert-content', + textAlign: 'left', text: message, + whiteSpace: 'normal', }, + height: 'fill', + tgap: 12, + lgap: 40, }, - south: { - el: { - type: "bi.absolute", - items: [ - { - el: { - type: "bi.right_vertical_adapt", - lgap: 10, - items: controlItems, - }, - top: 0, - left: 20, - right: 20, - bottom: 0, - } - ], + { + el: config.footer && isFunction(config.footer) ? config.footer(close) : { + type: RightVerticalAdaptLayout.xtype, + lgap: 12, + items: controlItems, }, - height: 44, + tgap: 32, + bgap: 24, }, - }, - width: 450, - height: 200, - } + ], + }, ], }; diff --git a/packages/fineui/src/less/lib/colors.less b/packages/fineui/src/less/lib/colors.less index fd429ac08..810745b94 100644 --- a/packages/fineui/src/less/lib/colors.less +++ b/packages/fineui/src/less/lib/colors.less @@ -132,3 +132,5 @@ @color-bi-border-warning: @border-color-warning; //边框提亮 @color-bi-border-highlight: @border-color-highlight; + +@color-bi-alert-warning: @color-bi-orange; diff --git a/packages/fineui/src/less/lib/constant.less b/packages/fineui/src/less/lib/constant.less index fa69a4783..eb03e23e8 100644 --- a/packages/fineui/src/less/lib/constant.less +++ b/packages/fineui/src/less/lib/constant.less @@ -248,3 +248,5 @@ //box-shadow效果 @box-shadow-toast: 0 6px 20px -2px rgba(9, 30, 64, 0.16); + +@color-bi-orange: #f0ac3c; diff --git a/packages/fineui/src/less/lib/font.less b/packages/fineui/src/less/lib/font.less index f37ec8615..d8eccc6f7 100644 --- a/packages/fineui/src/less/lib/font.less +++ b/packages/fineui/src/less/lib/font.less @@ -58,3 +58,8 @@ @font-key: "e1d0"; @font-add: "e1c7"; + +@font-alert-warning: 'e755'; +@font-alert-success: 'e6de'; +@font-alert-info: 'e74b'; +@font-alert-error: 'e757'; diff --git a/packages/fineui/src/less/resource/font.less b/packages/fineui/src/less/resource/font.less index d65940802..93330a958 100644 --- a/packages/fineui/src/less/resource/font.less +++ b/packages/fineui/src/less/resource/font.less @@ -118,3 +118,8 @@ .font(text-align-left-font, @font-align-left); .font(text-align-center-font, @font-align-center); .font(text-align-right-font, @font-align-right); + +.font(alert-success-font, @font-alert-success, @color-sea-green-100); +.font(alert-warning-font, @font-alert-warning, @color-bi-alert-warning); +.font(alert-error-font, @font-alert-error, @color-red-100); +.font(alert-info-font, @font-alert-info, @color-bi-text-highlight); diff --git a/packages/fineui/typescript/base/foundation/message.ts b/packages/fineui/typescript/base/foundation/message.ts index 421d6e2a7..68a0c53c7 100644 --- a/packages/fineui/typescript/base/foundation/message.ts +++ b/packages/fineui/typescript/base/foundation/message.ts @@ -8,11 +8,23 @@ type toastOptions = { export declare namespace Msg { function alert(title: string, message?: string | { [key: string]: any - }, callback?: (result?: boolean) => void): void + }, callback?: (result?: boolean) => void, config?: { + buttonHeight?: number, + sureText?: string, + cancelText?: string, + level?: 'success' | 'warning' | 'error' | 'info', + footer?: (onClose: Function) => Obj; + }): void function confirm(title: string, message?: string | { [key: string]: any - }, callback?: (result: boolean) => void): void + }, callback?: (result: boolean) => void, config?: { + buttonHeight?: number, + sureText?: string, + cancelText?: string, + level?: 'success' | 'warning' | 'error' | 'info', + footer?: (onClose: Function) => Obj; + }): void function toast(message: string | Obj, options?: toastOptions | string, context?: HTMLElement): Function } From 04f12cdf173243adf17a477a35657311ef33f6fb Mon Sep 17 00:00:00 2001 From: jian Date: Mon, 8 Jan 2024 12:48:22 +0800 Subject: [PATCH 2/4] =?UTF-8?q?BI-129824=20fix:=20=E6=8E=A7=E4=BB=B6?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fineui/src/base/foundation/message.js | 4 ++-- packages/fineui/src/case/button/switch.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/fineui/src/base/foundation/message.js b/packages/fineui/src/base/foundation/message.js index 3847eba44..e96848c35 100644 --- a/packages/fineui/src/base/foundation/message.js +++ b/packages/fineui/src/base/foundation/message.js @@ -199,7 +199,9 @@ function _show(hasCancel, title, message, callback, config = {}) { items: [ { type: VerticalLayout.xtype, + cls: "bi-card bi-border-radius", width: 450, + hgap: 32, attributes: { tabIndex: 1, }, @@ -224,8 +226,6 @@ function _show(hasCancel, title, message, callback, config = {}) { } catch (e) { } }, - cls: "bi-card", - hgap: 32, items: [ { el: { diff --git a/packages/fineui/src/case/button/switch.js b/packages/fineui/src/case/button/switch.js index 68a5c556a..904f2607e 100644 --- a/packages/fineui/src/case/button/switch.js +++ b/packages/fineui/src/case/button/switch.js @@ -39,7 +39,7 @@ export class Switch extends BasicButton { width: 12, height: 12, top: tgap, - left: o.selected ? 28 : 4, + left: o.selected ? o.width - 16 : 4, }, { type: Label.xtype, @@ -78,7 +78,7 @@ export class Switch extends BasicButton { setSelected(v) { super.setSelected(...arguments); - this.layout.attr("items")[0].left = v ? 28 : 4; + this.layout.attr("items")[0].left = v ? this.options.width - 16 : 4; this.layout.resize(); this.options.showTip && this.openTip.setVisible(v); this.options.showTip && this.closeTip.setVisible(!v); From 84e4135f881013c84ffb67324c1237112b4054f0 Mon Sep 17 00:00:00 2001 From: jian Date: Mon, 8 Jan 2024 15:02:57 +0800 Subject: [PATCH 3/4] =?UTF-8?q?BI-129824=20fix:=20=E6=8E=A7=E4=BB=B6?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fineui/src/case/button/switch.js | 28 +++++++++---------- .../fineui/typescript/case/button/switch.ts | 5 ++++ 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/packages/fineui/src/case/button/switch.js b/packages/fineui/src/case/button/switch.js index 904f2607e..81510ed45 100644 --- a/packages/fineui/src/case/button/switch.js +++ b/packages/fineui/src/case/button/switch.js @@ -1,15 +1,13 @@ import { AbsoluteLayout, shortcut, i18nText } from "@/core"; import { TextButton, Label, BasicButton } from "@/base"; +const CIRCLE_SIZE = 12; + @shortcut() export class Switch extends BasicButton { static xtype = "bi.switch"; static EVENT_CHANGE = "EVENT_CHANGE"; - constants = { - CIRCLE_SIZE: 12, - }; - props = { extraCls: "bi-switch", attributes: { @@ -17,13 +15,13 @@ export class Switch extends BasicButton { }, height: 20, width: 44, - showTip: false, + showTip: true, + textGap: 8, }; render() { - const o = this.options, - c = this.constants; - const tgap = (o.height - c.CIRCLE_SIZE) / 2; + const { selected, width, height, textGap, showTip } = this.options; + const tgap = (height - CIRCLE_SIZE) / 2; return { type: AbsoluteLayout.xtype, @@ -39,15 +37,15 @@ export class Switch extends BasicButton { width: 12, height: 12, top: tgap, - left: o.selected ? o.width - 16 : 4, + left: selected ? width - height + tgap : tgap, }, { type: Label.xtype, text: i18nText("BI-Basic_Simple_Open"), cls: "content-tip", - left: 8, + left: textGap, top: tgap - 2, - invisible: !(o.showTip && o.selected), + invisible: !(showTip && selected), ref: _ref => { this.openTip = _ref; }, @@ -56,9 +54,9 @@ export class Switch extends BasicButton { type: Label.xtype, text: i18nText("BI-Basic_Simple_Close"), cls: "content-tip", - right: 8, + right: textGap, top: tgap - 2, - invisible: !(o.showTip && !o.selected), + invisible: !(showTip && !selected), ref: _ref => { this.closeTip = _ref; }, @@ -78,7 +76,9 @@ export class Switch extends BasicButton { setSelected(v) { super.setSelected(...arguments); - this.layout.attr("items")[0].left = v ? this.options.width - 16 : 4; + const { width, height } = this.options; + const tgap = (height - CIRCLE_SIZE) / 2; + this.layout.attr("items")[0].left = v ? width - height + tgap : tgap; this.layout.resize(); this.options.showTip && this.openTip.setVisible(v); this.options.showTip && this.closeTip.setVisible(!v); diff --git a/packages/fineui/typescript/case/button/switch.ts b/packages/fineui/typescript/case/button/switch.ts index dc4489892..2b08b4b98 100644 --- a/packages/fineui/typescript/case/button/switch.ts +++ b/packages/fineui/typescript/case/button/switch.ts @@ -1,6 +1,11 @@ import { BasicButton } from "../../base/single/button/button.basic"; export declare class Switch extends BasicButton { + + props: { + textGap: number; + } & BasicButton['props'] + static xtype: string; static EVENT_CHANGE: string; } From 5fb3e67484c8182eafa1c83006d0a0a95a10a653 Mon Sep 17 00:00:00 2001 From: jian Date: Mon, 8 Jan 2024 15:04:56 +0800 Subject: [PATCH 4/4] =?UTF-8?q?BI-129824=20fix:=20=E5=A4=9A=E6=8F=90?= =?UTF-8?q?=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fineui/src/case/button/switch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fineui/src/case/button/switch.js b/packages/fineui/src/case/button/switch.js index 81510ed45..6cc3b7912 100644 --- a/packages/fineui/src/case/button/switch.js +++ b/packages/fineui/src/case/button/switch.js @@ -15,7 +15,7 @@ export class Switch extends BasicButton { }, height: 20, width: 44, - showTip: true, + showTip: false, textGap: 8, };