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

Merge remote-tracking branch 'origin/master'

research/test
Kobi 10 months ago
parent
8fb7f87852 65743b588e
commit
4127618721
8 changed files with 130 additions and 85 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. 154
      packages/fineui/src/base/foundation/message.js
  2. 26
      packages/fineui/src/case/button/switch.js
  3. 2
      packages/fineui/src/less/lib/colors.less
  4. 2
      packages/fineui/src/less/lib/constant.less
  5. 5
      packages/fineui/src/less/lib/font.less
  6. 5
      packages/fineui/src/less/resource/font.less
  7. 16
      packages/fineui/typescript/base/foundation/message.ts
  8. 5
      packages/fineui/typescript/case/button/switch.ts

154
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,13 @@ 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,
cls: "bi-card bi-border-radius",
width: 450,
hgap: 32,
attributes: { attributes: {
tabIndex: 1, tabIndex: 1,
}, },
@ -194,75 +226,57 @@ function _show(hasCancel, title, message, callback, config) {
} catch (e) { } catch (e) {
} }
}, },
cls: "bi-card", items: [
items: { {
north: {
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,
}
], ],
}; };

26
packages/fineui/src/case/button/switch.js
Unescape View File

@ -1,15 +1,13 @@
import { AbsoluteLayout, shortcut, i18nText } from "@/core"; import { AbsoluteLayout, shortcut, i18nText } from "@/core";
import { TextButton, Label, BasicButton } from "@/base"; import { TextButton, Label, BasicButton } from "@/base";
const CIRCLE_SIZE = 12;
@shortcut() @shortcut()
export class Switch extends BasicButton { export class Switch extends BasicButton {
static xtype = "bi.switch"; static xtype = "bi.switch";
static EVENT_CHANGE = "EVENT_CHANGE"; static EVENT_CHANGE = "EVENT_CHANGE";
constants = {
CIRCLE_SIZE: 12,
};
props = { props = {
extraCls: "bi-switch", extraCls: "bi-switch",
attributes: { attributes: {
@ -18,12 +16,12 @@ export class Switch extends BasicButton {
height: 20, height: 20,
width: 44, width: 44,
showTip: false, showTip: false,
textGap: 8,
}; };
render() { render() {
const o = this.options, const { selected, width, height, textGap, showTip } = this.options;
c = this.constants; const tgap = (height - CIRCLE_SIZE) / 2;
const tgap = (o.height - c.CIRCLE_SIZE) / 2;
return { return {
type: AbsoluteLayout.xtype, type: AbsoluteLayout.xtype,
@ -39,15 +37,15 @@ export class Switch extends BasicButton {
width: 12, width: 12,
height: 12, height: 12,
top: tgap, top: tgap,
left: o.selected ? 28 : 4, left: selected ? width - height + tgap : tgap,
}, },
{ {
type: Label.xtype, type: Label.xtype,
text: i18nText("BI-Basic_Simple_Open"), text: i18nText("BI-Basic_Simple_Open"),
cls: "content-tip", cls: "content-tip",
left: 8, left: textGap,
top: tgap - 2, top: tgap - 2,
invisible: !(o.showTip && o.selected), invisible: !(showTip && selected),
ref: _ref => { ref: _ref => {
this.openTip = _ref; this.openTip = _ref;
}, },
@ -56,9 +54,9 @@ export class Switch extends BasicButton {
type: Label.xtype, type: Label.xtype,
text: i18nText("BI-Basic_Simple_Close"), text: i18nText("BI-Basic_Simple_Close"),
cls: "content-tip", cls: "content-tip",
right: 8, right: textGap,
top: tgap - 2, top: tgap - 2,
invisible: !(o.showTip && !o.selected), invisible: !(showTip && !selected),
ref: _ref => { ref: _ref => {
this.closeTip = _ref; this.closeTip = _ref;
}, },
@ -78,7 +76,9 @@ export class Switch extends BasicButton {
setSelected(v) { setSelected(v) {
super.setSelected(...arguments); super.setSelected(...arguments);
this.layout.attr("items")[0].left = v ? 28 : 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.layout.resize();
this.options.showTip && this.openTip.setVisible(v); this.options.showTip && this.openTip.setVisible(v);
this.options.showTip && this.closeTip.setVisible(!v); this.options.showTip && this.closeTip.setVisible(!v);

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
} }

5
packages/fineui/typescript/case/button/switch.ts
Unescape View File

@ -1,6 +1,11 @@
import { BasicButton } from "../../base/single/button/button.basic"; import { BasicButton } from "../../base/single/button/button.basic";
export declare class Switch extends BasicButton { export declare class Switch extends BasicButton {
props: {
textGap: number;
} & BasicButton['props']
static xtype: string; static xtype: string;
static EVENT_CHANGE: string; static EVENT_CHANGE: string;
} }

Write Preview
Loading…
Cancel
Save