Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Pull request #3721: BI-137665 feat: 修改弹窗样式 

Merge in VISUAL/fineui from ~IMP/fineui_fui:master to master

* commit '44f7380f3f9fdd0e17fca8f4cac8ee1b8d5d1053':
  BI-137665 feat: 修改弹窗样式
research/test
imp-张健 11 months ago
parent
e235b29531 44f7380f3f
commit
11c8910eb1
6 changed files with 111 additions and 71 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. 152
      packages/fineui/src/base/foundation/message.js
  2. 2
      packages/fineui/src/less/lib/colors.less
  3. 2
      packages/fineui/src/less/lib/constant.less
  4. 5
      packages/fineui/src/less/lib/font.less
  5. 5
      packages/fineui/src/less/resource/font.less
  6. 16
      packages/fineui/typescript/base/foundation/message.ts

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

@ -17,9 +17,13 @@ import {
i18nText, i18nText,
KeyCode, KeyCode,
isPlainObject, isPlainObject,
SIZE_CONSANTS SIZE_CONSANTS,
CenterAdaptLayout,
VerticalLayout,
HTapeLayout,
RightVerticalAdaptLayout
} from "../../core"; } from "../../core";
import { Toast } from "../single"; import { Button, IconLabel, Label, Toast } from "../single";
let $mask, $pop; let $mask, $pop;
@ -27,15 +31,33 @@ const messageShows = [];
const toastStack = []; const toastStack = [];
const defaultConfig = { const AlertLevel = {
buttonHeight: 24, 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 = { export const Msg = {
alert(title, message, callback, config = defaultConfig) { alert(title, message, callback, config) {
_show(false, 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); _show(true, title, message, callback, config);
}, },
toast(message, options, context) { 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) && isNull($mask) &&
($mask = Widget._renderEngine ($mask = Widget._renderEngine
.createElement("<div class=\"bi-z-index-mask\">") .createElement("<div class=\"bi-z-index-mask\">")
@ -138,9 +167,9 @@ function _show(hasCancel, title, message, callback, config) {
if (hasCancel === true) { if (hasCancel === true) {
controlItems.push({ controlItems.push({
el: { el: {
type: "bi.button", type: Button.xtype,
height: config.buttonHeight, height: config.buttonHeight,
text: i18nText("BI-Basic_Cancel"), text: config.cancelText,
light: true, light: true,
handler() { handler() {
close(); close();
@ -153,9 +182,9 @@ function _show(hasCancel, title, message, callback, config) {
} }
controlItems.push({ controlItems.push({
el: { el: {
type: "bi.button", type: Button.xtype,
height: config.buttonHeight, height: config.buttonHeight,
text: i18nText("BI-Basic_OK"), text: config.sureText,
handler() { handler() {
close(); close();
if (isFunction(callback)) { if (isFunction(callback)) {
@ -166,10 +195,11 @@ function _show(hasCancel, title, message, callback, config) {
}); });
const conf = { const conf = {
element: $pop, element: $pop,
type: "bi.center_adapt", type: CenterAdaptLayout.xtype,
items: [ items: [
{ {
type: "bi.border", type: VerticalLayout.xtype,
width: 450,
attributes: { attributes: {
tabIndex: 1, tabIndex: 1,
}, },
@ -195,74 +225,58 @@ function _show(hasCancel, title, message, callback, config) {
} }
}, },
cls: "bi-card", cls: "bi-card",
items: { hgap: 32,
north: { items: [
{
el: { el: {
type: "bi.border", type: HTapeLayout.xtype,
cls: "bi-message-title bi-background", height: 24,
items: { items: [
center: { {
el: { type: IconLabel.xtype,
type: "bi.label", cls: `${getIconCls(config.level)} icon-size-20`,
cls: "bi-font-bold", width: 24,
text: title || i18nText("BI-Basic_Prompt"), height: 24,
textAlign: "left",
hgap: 20,
height: 40,
},
}, },
east: { {
el: { type: Label.xtype,
type: "bi.icon_button", css: { "font-size": 16 },
cls: "bi-message-close close-font", cls: 'bi-font-bold', // 16px
// height: 50, textAlign: 'left',
handler() { width: 'fill',
close(); text: title || i18nText('BI-Basic_Prompt'),
if (isFunction(callback)) { lgap: 16,
callback.apply(null, [false]);
}
},
},
width: 56,
}, },
}, ],
}, },
height: 40, tgap: 32,
}, },
center: { {
el: isPlainObject(message) el: isPlainObject(message)
? message ? message
: { : {
type: "bi.label", type: Label.xtype,
vgap: 10, css: { "font-size": 14 },
hgap: 20, cls: 'alert-content',
whiteSpace: "normal", textAlign: 'left',
text: message, text: message,
whiteSpace: 'normal',
}, },
height: 'fill',
tgap: 12,
lgap: 40,
}, },
south: { {
el: { el: config.footer && isFunction(config.footer) ? config.footer(close) : {
type: "bi.absolute", type: RightVerticalAdaptLayout.xtype,
items: [ lgap: 12,
{ items: controlItems,
el: {
type: "bi.right_vertical_adapt",
lgap: 10,
items: controlItems,
},
top: 0,
left: 20,
right: 20,
bottom: 0,
}
],
}, },
height: 44, tgap: 32,
bgap: 24,
}, },
}, ],
width: 450, },
height: 200,
}
], ],
}; };

2
packages/fineui/src/less/lib/colors.less
Unescape View File

@ -132,3 +132,5 @@
@color-bi-border-warning: @border-color-warning; @color-bi-border-warning: @border-color-warning;
//边框提亮 //边框提亮
@color-bi-border-highlight: @border-color-highlight; @color-bi-border-highlight: @border-color-highlight;
@color-bi-alert-warning: @color-bi-orange;

2
packages/fineui/src/less/lib/constant.less
Unescape View File

@ -248,3 +248,5 @@
//box-shadow效果 //box-shadow效果
@box-shadow-toast: 0 6px 20px -2px rgba(9, 30, 64, 0.16); @box-shadow-toast: 0 6px 20px -2px rgba(9, 30, 64, 0.16);
@color-bi-orange: #f0ac3c;

5
packages/fineui/src/less/lib/font.less
Unescape View File

@ -58,3 +58,8 @@
@font-key: "e1d0"; @font-key: "e1d0";
@font-add: "e1c7"; @font-add: "e1c7";
@font-alert-warning: 'e755';
@font-alert-success: 'e6de';
@font-alert-info: 'e74b';
@font-alert-error: 'e757';

5
packages/fineui/src/less/resource/font.less
Unescape View File

@ -118,3 +118,8 @@
.font(text-align-left-font, @font-align-left); .font(text-align-left-font, @font-align-left);
.font(text-align-center-font, @font-align-center); .font(text-align-center-font, @font-align-center);
.font(text-align-right-font, @font-align-right); .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);

16
packages/fineui/typescript/base/foundation/message.ts
Unescape View File

@ -8,11 +8,23 @@ type toastOptions = {
export declare namespace Msg { export declare namespace Msg {
function alert(title: string, message?: string | { function alert(title: string, message?: string | {
[key: string]: any [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 | { function confirm(title: string, message?: string | {
[key: string]: any [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 function toast(message: string | Obj, options?: toastOptions | string, context?: HTMLElement): Function
} }

Write Preview
Loading…
Cancel
Save