fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

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

research/test
dailer 1 year ago
parent
430ea2fb55
commit
a122490af8
3 changed files with 107 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 88
      packages/fineui/src/base/foundation/message.js
  2. 66
      packages/fineui/src/base/layer/layer.popover.js
  3. 30
      packages/fineui/src/case/combo/bubblecombo/popup.bubble.js

88
packages/fineui/src/base/foundation/message.js
Unescape View File

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

66
packages/fineui/src/base/layer/layer.popover.js
Unescape View File

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

30
packages/fineui/src/case/combo/bubblecombo/popup.bubble.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save