REPORT-97636 fix: 修改popover取消按钮样式、增加按钮高度可配

packages/fineui/src/base/foundation/message.js

@@ -3,7 +3,22 @@
  * 弹出提示消息框，用于模拟阻塞操作（通过回调函数实现）
  * @class Msg
  */
-import { Widget, isString, isNull, isFunction, createWidget, remove, each, emptyFn, delay, zIndex_tip, i18nText, KeyCode, isPlainObject, SIZE_CONSANTS } from "../../core";
+import {
+    Widget,
+    isString,
+    isNull,
+    isFunction,
+    createWidget,
+    remove,
+    each,
+    emptyFn,
+    delay,
+    zIndex_tip,
+    i18nText,
+    KeyCode,
+    isPlainObject,
+    SIZE_CONSANTS
+} from "../../core";
 import { Toast } from "../single";
 
 export const Msg = (() => {
@@ -13,17 +28,21 @@ export const Msg = (() => {
 
     const toastStack = [];
 
+    const defaultConfig = {
+        buttonHeight: 24,
+    };
+
     return {
-        alert (title, message, callback) {
-            this._show(false, title, message, callback);
+        alert(title, message, callback, config = defaultConfig) {
+            this._show(false, title, message, callback, config);
         },
-        confirm (title, message, callback) {
-            this._show(true, title, message, callback);
+        confirm(title, message, callback, config = defaultConfig) {
+            this._show(true, title, message, callback, config);
         },
-        prompt (title, message, value, callback, min_width) {
+        prompt(title, message, value, callback, min_width) {
             // Msg.prompt(title, message, value, callback, min_width);
         },
-        toast (message, options, context) {
+        toast(message, options, context) {
             isString(options) && (options = { level: options });
             options = options || {};
             context = context || Widget._renderEngine.createElement("body");
@@ -40,7 +59,7 @@ export const Msg = (() => {
                 listeners: [
                     {
                         eventName: Toast.EVENT_DESTORY,
-                        action () {
+                        action() {
                             remove(toastStack, toast.element);
                             let _height = SIZE_CONSANTS.TOAST_TOP;
                             each(toastStack, (i, element) => {
@@ -72,30 +91,30 @@ export const Msg = (() => {
             toast.element.removeClass("bi-message-leave").addClass("bi-message-enter");
 
             autoClose &&
-                delay(() => {
-                    toast.element.removeClass("bi-message-enter").addClass("bi-message-leave");
-                    toast.destroy?.();
-                }, 5000);
+            delay(() => {
+                toast.element.removeClass("bi-message-enter").addClass("bi-message-leave");
+                toast.destroy?.();
+            }, 5000);
 
-            return function () {
+            return function() {
                 toast.element.removeClass("bi-message-enter").addClass("bi-message-leave");
                 toast.destroy?.();
             };
         },
-        _show (hasCancel, title, message, callback) {
+        _show(hasCancel, title, message, callback, config) {
             isNull($mask) &&
-                ($mask = Widget._renderEngine
-                    .createElement("<div class=\"bi-z-index-mask\">")
-                    .css({
-                        position: "absolute",
-                        zIndex: zIndex_tip - 2,
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        bottom: 0,
-                        opacity: 0.5,
-                    })
-                    .appendTo("body"));
+            ($mask = Widget._renderEngine
+                .createElement("<div class=\"bi-z-index-mask\">")
+                .css({
+                    position: "absolute",
+                    zIndex: zIndex_tip - 2,
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    opacity: 0.5,
+                })
+                .appendTo("body"));
             $pop = Widget._renderEngine
                 .createElement("<div class=\"bi-message-depend\">")
                 .css({
@@ -107,6 +126,7 @@ export const Msg = (() => {
                     bottom: 0,
                 })
                 .appendTo("body");
+
             function close() {
                 messageShows[messageShows.length - 1].destroy();
                 messageShows.pop();
@@ -115,14 +135,16 @@ export const Msg = (() => {
                     $mask = null;
                 }
             }
+
             const controlItems = [];
             if (hasCancel === true) {
                 controlItems.push({
                     el: {
                         type: "bi.button",
+                        height: config.buttonHeight,
                         text: i18nText("BI-Basic_Cancel"),
-                        level: "ignore",
-                        handler () {
+                        light: true,
+                        handler() {
                             close();
                             if (isFunction(callback)) {
                                 callback.apply(null, [false]);
@@ -134,8 +156,9 @@ export const Msg = (() => {
             controlItems.push({
                 el: {
                     type: "bi.button",
+                    height: config.buttonHeight,
                     text: i18nText("BI-Basic_OK"),
-                    handler () {
+                    handler() {
                         close();
                         if (isFunction(callback)) {
                             callback.apply(null, [true]);
@@ -152,7 +175,7 @@ export const Msg = (() => {
                         attributes: {
                             tabIndex: 1,
                         },
-                        mounted () {
+                        mounted() {
                             this.element.keyup(e => {
                                 if (e.keyCode === KeyCode.ENTER) {
                                     close();
@@ -170,7 +193,8 @@ export const Msg = (() => {
                             });
                             try {
                                 this.element.focus();
-                            } catch (e) {}
+                            } catch (e) {
+                            }
                         },
                         cls: "bi-card",
                         items: {
@@ -194,7 +218,7 @@ export const Msg = (() => {
                                                 type: "bi.icon_button",
                                                 cls: "bi-message-close close-font",
                                                 //                                                    height: 50,
-                                                handler () {
+                                                handler() {
                                                     close();
                                                     if (isFunction(callback)) {
                                                         callback.apply(null, [false]);

packages/fineui/src/base/layer/layer.popover.js

@@ -46,6 +46,7 @@ export class Popover extends Widget {
             body: null,
             footer: null,
             footerHeight: 44,
+            footerButtonHeight: 24,
             closable: true, // BI-40839 是否显示右上角的关闭按钮
             bodyHgap: SIZE_CONSANTS.H_GAP_SIZE,
             bodyTgap: SIZE_CONSANTS.V_GAP_SIZE,
@@ -213,6 +214,7 @@ export class Popover extends Widget {
                 }
         );
     }
+
     // mounted之后绑定事件
     mounted() {
         this.dragger.element.mousedown(e => {
@@ -231,9 +233,9 @@ export class Popover extends Widget {
             height,
             0,
             Widget._renderEngine.createElement("body")[0].clientHeight -
-                headerHeight -
-                (footer ? footerHeight : 0) -
-                bodyTgap
+            headerHeight -
+            (footer ? footerHeight : 0) -
+            bodyTgap
         );
     }
 
@@ -273,11 +275,13 @@ export class Popover extends Widget {
             type: sizeValue.type || "default",
         };
     }
+
     setDraggable(b) {
         this.options.draggable = b;
     }
 
-    hide() {}
+    hide() {
+    }
 
     open() {
         this.show();
@@ -305,33 +309,35 @@ export class BarPopover extends Popover {
     }
 
     beforeCreate() {
-        const { footer, warningTitle } = this.options;
+        const { footer, warningTitle, footerButtonHeight } = this.options;
         footer ||
-            (this.options.footer = {
-                type: RightVerticalAdaptLayout.xtype,
-                lgap: 10,
-                items: [
-                    {
-                        type: Button.xtype,
-                        text: this.options.btns[1],
-                        value: 1,
-                        level: "ignore",
-                        handler: v => {
-                            this.fireEvent(Popover.EVENT_CANCEL, v);
-                            this.close(v);
-                        },
+        (this.options.footer = {
+            type: RightVerticalAdaptLayout.xtype,
+            lgap: 10,
+            items: [
+                {
+                    type: Button.xtype,
+                    height: footerButtonHeight,
+                    text: this.options.btns[1],
+                    value: 1,
+                    light: true,
+                    handler: v => {
+                        this.fireEvent(Popover.EVENT_CANCEL, v);
+                        this.close(v);
                     },
-                    {
-                        type: Button.xtype,
-                        text: this.options.btns[0],
-                        warningTitle,
-                        value: 0,
-                        handler: v => {
-                            this.fireEvent(Popover.EVENT_CONFIRM, v);
-                            this.close(v);
-                        },
-                    }
-                ],
-            });
+                },
+                {
+                    type: Button.xtype,
+                    height: footerButtonHeight,
+                    text: this.options.btns[0],
+                    warningTitle,
+                    value: 0,
+                    handler: v => {
+                        this.fireEvent(Popover.EVENT_CONFIRM, v);
+                        this.close(v);
+                    },
+                }
+            ],
+        });
     }
 }

packages/fineui/src/case/combo/bubblecombo/popup.bubble.js

@@ -7,7 +7,7 @@ import { Label } from "@/base/single/label/label";
 @shortcut()
 export class BubblePopupView extends PopupView {
     static xtype = "bi.bubble_popup_view";
-    
+
     _defaultConfig() {
         const config = super._defaultConfig(...arguments);
 
@@ -24,16 +24,16 @@ export class BubblePopupView extends PopupView {
 @shortcut()
 export class BubblePopupBarView extends BubblePopupView {
     static xtype = "bi.bubble_bar_popup_view";
-    
+
     static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON";
 
-    _defaultConfig () {
+    _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
             extraCls: "bi-bubble-bar-popup-view",
             buttons: [{
                 value: false,
                 text: i18nText("BI-Basic_Cancel"),
-                level: "ignore",
+                light: true,
             }, {
                 text: i18nText(i18nText("BI-Basic_OK")),
                 value: true,
@@ -43,7 +43,7 @@ export class BubblePopupBarView extends BubblePopupView {
         });
     }
 
-    _createToolBar () {
+    _createToolBar() {
         const o = this.options;
 
         const items = [];
@@ -66,7 +66,7 @@ export class BubblePopupBarView extends BubblePopupView {
                 });
             }
         });
-        
+
         return createWidget({
             type: "bi.right_vertical_adapt",
             innerVgap: o.innerVgap,
@@ -75,11 +75,11 @@ export class BubblePopupBarView extends BubblePopupView {
         });
     }
 
-    _createContent () {
+    _createContent() {
         return this.options.el;
     }
 
-    _createView () {
+    _createView() {
         const o = this.options;
 
         const view = createWidget({
@@ -99,21 +99,21 @@ export class BubblePopupBarView extends BubblePopupView {
 @shortcut()
 export class TextBubblePopupBarView extends BubblePopupBarView {
     static xtype = "bi.text_bubble_bar_popup_view";
-    
+
     static EVENT_CHANGE = "EVENT_CLICK_TOOLBAR_BUTTON";
-    
-    _defaultConfig () {
+
+    _defaultConfig() {
         const config = super._defaultConfig(...arguments);
-        
+
         return extend(config, {
             baseCls: `${config.baseCls} bi-text-bubble-bar-popup-view`,
             text: "",
         });
     }
 
-    _createContent () {
+    _createContent() {
         const o = this.options;
-        
+
         return {
             type: Label.xtype,
             text: o.text,
@@ -125,7 +125,7 @@ export class TextBubblePopupBarView extends BubblePopupBarView {
         };
     }
 
-    populate (v) {
+    populate(v) {
         this.text.setText(v || this.options.text);
     }
 }