diff --git a/bi.lessconfig.json b/bi.lessconfig.json index a5f1d669f..321466b7c 100644 --- a/bi.lessconfig.json +++ b/bi.lessconfig.json @@ -10,10 +10,9 @@ "@border-color-dark-line": "#2E3A4D", "@color-sliver-theme-dark": "#363E55", "@border-color-disabled": "#E7E8EB", - "@color-bi-background-active-radio": "transparent", "@color-bi-background-active-radio-content": "#2C60DB", - "@color-bi-background-disabled-active-radio-content": "#D0D4DA", + "@color-bi-background-disabled-active-radio-content": "#FFFFFF", "@color-bi-background-disabled-active-radio-content-theme-dark": "#606479", "@color-bi-background-disabled-active-checkbox-content": "#FFFFFF", "@color-bi-background-disabled-active-checkbox-content-theme-dark": "#606479", diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js index 0aa54de07..195fe06e2 100644 --- a/demo/js/base/button/demo.button.js +++ b/demo/js/base/button/demo.button.js @@ -213,6 +213,35 @@ Demo.Button = BI.inherit(BI.Widget, { }, height: 30 } + }, { + el: { + type: "bi.button", + text: "图标在上面的按钮，而且可以自动撑开高度", + iconCls: "close-font", + iconGap: 24, + iconPosition: "top" + } + }, { + el: { + type: "bi.button", + text: "图标在下面的按钮", + iconCls: "close-font", + iconPosition: "bottom" + } + }, { + el: { + type: "bi.button", + text: "图标在左边的按钮", + iconCls: "close-font", + iconPosition: "left" + } + }, { + el: { + type: "bi.button", + text: "图标在右边的按钮", + iconCls: "close-font", + iconPosition: "right" + } }]; // BI.each(items, function (i, item) { // item.el.handler = function () { @@ -228,4 +257,4 @@ Demo.Button = BI.inherit(BI.Widget, { }; } }); -BI.shortcut("demo.button", Demo.Button); \ No newline at end of file +BI.shortcut("demo.button", Demo.Button); diff --git a/dist/font/iconfont.eot b/dist/font/iconfont.eot index 292fac9bb..713ae9e63 100644 Binary files a/dist/font/iconfont.eot and b/dist/font/iconfont.eot differ diff --git a/dist/font/iconfont.ttf b/dist/font/iconfont.ttf index b511fe144..0d74af078 100644 Binary files a/dist/font/iconfont.ttf and b/dist/font/iconfont.ttf differ diff --git a/dist/font/iconfont.woff b/dist/font/iconfont.woff index faddef125..0fc2f80e0 100644 Binary files a/dist/font/iconfont.woff and b/dist/font/iconfont.woff differ diff --git a/dist/font/iconfont.woff2 b/dist/font/iconfont.woff2 index cbd058258..6bb5e0d2f 100644 Binary files a/dist/font/iconfont.woff2 and b/dist/font/iconfont.woff2 differ diff --git a/package.json b/package.json index 870a4b500..7920adf4d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fineui", - "version": "2.0.20220523172422", + "version": "2.0.20220527170604", "description": "fineui", "main": "dist/fineui.min.js", "types": "dist/lib/index.d.ts", diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index 0863d0935..7c3f4c186 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -1,169 +1,208 @@ -/** - * 文字类型的按钮 - * @class BI.Button - * @extends BI.BasicButton - * - * @cfg {JSON} options 配置属性 - * @cfg {'common'/'success'/'warning'/'ignore'} [options.level='common'] 按钮类型，用不同颜色强调不同的场景 - */ -BI.Button = BI.inherit(BI.BasicButton, { +(function () { + function isVertical(position) { + return position === "top" || position === "bottom"; + } + + /** + * 文字类型的按钮 + * @class BI.Button + * @extends BI.BasicButton + * + * @cfg {JSON} options 配置属性 + * @cfg {'common'/'success'/'warning'/'ignore'} [options.level='common'] 按钮类型，用不同颜色强调不同的场景 + */ + BI.Button = BI.inherit(BI.BasicButton, { - _const: { - iconWidth: 18 - }, + _const: { + iconWidth: 16 + }, - _defaultConfig: function (props) { - var conf = BI.Button.superclass._defaultConfig.apply(this, arguments); - return BI.extend(conf, { - baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""), - attributes: { - tabIndex: 1 - }, - minWidth: (props.block === true || props.clear === true) ? 0 : 80, - height: 24, - shadow: props.clear !== true, - isShadowShowingOnSelected: true, - readonly: true, - iconCls: "", - level: "common", - block: false, // 是否块状显示，即不显示边框，没有最小宽度的限制 - clear: false, // 是否去掉边框和背景 - ghost: false, // 是否幽灵显示, 即正常状态无背景 - textAlign: "center", - whiteSpace: "nowrap", - textWidth: null, - textHeight: null, - hgap: props.clear ? 0 : 10, - vgap: 0, - tgap: 0, - bgap: 0, - lgap: 0, - rgap: 0 - }); - }, + _defaultConfig: function (props) { + var conf = BI.Button.superclass._defaultConfig.apply(this, arguments); + + return BI.extend(conf, { + baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""), + attributes: { + tabIndex: 1 + }, + minWidth: (props.block === true || props.clear === true) ? 0 : 80, + // 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12 + height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24, + shadow: props.clear !== true, + isShadowShowingOnSelected: true, + readonly: true, + iconCls: "", + level: "common", + block: false, // 是否块状显示，即不显示边框，没有最小宽度的限制 + clear: false, // 是否去掉边框和背景 + ghost: false, // 是否幽灵显示, 即正常状态无背景 + loading: false, // 是否处于加载中 + textAlign: "center", + whiteSpace: "nowrap", + textWidth: null, + textHeight: null, + hgap: props.clear ? 0 : 10, + vgap: 0, + tgap: 0, + bgap: 0, + lgap: 0, + rgap: 0, + iconGap: 8, + iconPosition: "left" + }); + }, - render: function () { - var o = this.options, self = this; + render: function () { + var o = this.options; - // 由于button默认情况下有个边框，所以要主动算行高 - var lineHeight, textHeight = o.textHeight; - if (BI.isNumber(o.height)) { - if (o.clear || o.block) { - lineHeight = o.height; + // 由于button默认情况下有个边框，所以要主动算行高 + var lineHeight, textHeight = o.textHeight; + if (BI.isNumber(o.height)) { + if (!isVertical(o.iconPosition)) { + if (o.clear || o.block) { + lineHeight = o.height; + } else { + lineHeight = o.height - 2; + } + } else { + lineHeight = textHeight; + } + } + if (!textHeight) { + if (o.whiteSpace === "nowrap") { + textHeight = lineHeight; + } + } + if (BI.isKey(o.iconCls)) { + this.icon = BI.createWidget({ + type: "bi.icon_label", + cls: o.iconCls, + width: this._const.iconWidth, + height: lineHeight, + lineHeight: lineHeight + }); + this.text = BI.createWidget({ + type: "bi.label", + text: o.text, + textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null, + textHeight: textHeight, + height: lineHeight, + value: o.value + }); + var layoutType = "bi.horizontal"; + var gapContainer = { + lgap: o.iconPosition === "left" && o.text ? o.iconGap : 0, + rgap: o.iconPosition === "right" ? o.iconGap : 0, + tgap: o.iconPosition === "top" ? o.iconGap : 0, + bgap: o.iconPosition === "bottom" ? o.iconGap : 0 + }; + var items = [this.icon, BI.extend({el: this.text}, gapContainer)]; + if (isVertical(o.iconPosition)) { + layoutType = "bi.vertical"; + } + if (o.iconPosition === "right" || o.iconPosition === "bottom") { + items = [BI.extend({el: this.text}, gapContainer), this.icon]; + } + BI.createWidget({ + type: "bi.center_adapt", + element: this, + hgap: o.hgap, + vgap: o.vgap, + items: [{ + type: layoutType, + horizontalAlign: "center", + verticalAlign: "middle", + items: items + }] + }); } else { - lineHeight = o.height - 2; + this.text = BI.createWidget({ + type: "bi.label", + height: o.height, + textAlign: o.textAlign, + whiteSpace: o.whiteSpace, + textWidth: o.textWidth, + textHeight: textHeight, + hgap: o.hgap, + vgap: o.vgap, + tgap: o.tgap, + bgap: o.bgap, + lgap: o.lgap, + rgap: o.rgap, + element: this, + text: o.text, + value: o.value + }); } - } - if (!textHeight) { - if (o.whiteSpace === "nowrap") { - textHeight = lineHeight; + if (o.block === true) { + this.element.addClass("block"); } - } - if (BI.isKey(o.iconCls)) { - this.icon = BI.createWidget({ - type: "bi.icon_label", - cls: o.iconCls, - width: this._const.iconWidth, - height: lineHeight, - lineHeight: lineHeight, - iconWidth: o.iconWidth, - iconHeight: o.iconHeight - }); - this.text = BI.createWidget({ - type: "bi.label", - text: o.text, - textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null, - textHeight: textHeight, - height: lineHeight, - value: o.value - }); - BI.createWidget({ - type: "bi.center_adapt", - element: this, - hgap: o.hgap, - vgap: o.vgap, - items: [{ - type: "bi.horizontal", - columnSize: ["", "fill"], - items: [this.icon, this.text] - }] - }); - } else { - this.text = BI.createWidget({ - type: "bi.label", - height: o.height, - textAlign: o.textAlign, - whiteSpace: o.whiteSpace, - textWidth: o.textWidth, - textHeight: textHeight, - hgap: o.hgap, - vgap: o.vgap, - tgap: o.tgap, - bgap: o.bgap, - lgap: o.lgap, - rgap: o.rgap, - element: this, - text: o.text, - value: o.value - }); - } - if (o.block === true) { - this.element.addClass("block"); - } - if (o.clear === true) { - this.element.addClass("clear"); - } - if (o.ghost === true) { - this.element.addClass("ghost"); - } - if (o.minWidth > 0) { - this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit}); - } - }, + if (o.clear === true) { + this.element.addClass("clear"); + } + if (o.ghost === true) { + this.element.addClass("ghost"); + } + if (o.loading === true) { + this.element.addClass("loading"); + } + if (o.minWidth > 0) { + this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit}); + } + }, - doClick: function () { - BI.Button.superclass.doClick.apply(this, arguments); - if (this.isValid()) { - this.fireEvent(BI.Button.EVENT_CHANGE, this); - } - }, + doClick: function () { + BI.Button.superclass.doClick.apply(this, arguments); + if (this.isValid()) { + this.fireEvent(BI.Button.EVENT_CHANGE, this); + } + }, - _setEnable: function (enable) { - BI.Button.superclass._setEnable.apply(this, arguments); - if (enable === true) { - this.element.attr("tabIndex", 1); - } else if (enable === false) { - this.element.removeAttr("tabIndex"); - } - }, + _setEnable: function (enable) { + BI.Button.superclass._setEnable.apply(this, arguments); + if (enable === true) { + this.element.attr("tabIndex", 1); + } else if (enable === false) { + this.element.removeAttr("tabIndex"); + } + }, - setText: function (text) { - BI.Button.superclass.setText.apply(this, arguments); - this.text.setText(text); - }, + setLoading: function (loading) { + if(loading) { + this.element.addClass("loading"); + } else { + this.element.removeClass("loading"); + } + }, - setValue: function (text) { - BI.Button.superclass.setValue.apply(this, arguments); - if (!this.isReadOnly()) { - this.text.setValue(text); - } - }, + setText: function (text) { + BI.Button.superclass.setText.apply(this, arguments); + this.text.setText(text); + }, - doRedMark: function () { - this.text.doRedMark.apply(this.text, arguments); - }, + setValue: function (text) { + BI.Button.superclass.setValue.apply(this, arguments); + if (!this.isReadOnly()) { + this.text.setValue(text); + } + }, - unRedMark: function () { - this.text.unRedMark.apply(this.text, arguments); - }, + doRedMark: function () { + this.text.doRedMark.apply(this.text, arguments); + }, - doHighLight: function () { - this.text.doHighLight.apply(this.text, arguments); - }, + unRedMark: function () { + this.text.unRedMark.apply(this.text, arguments); + }, - unHighLight: function () { - this.text.unHighLight.apply(this.text, arguments); - } -}); -BI.shortcut("bi.button", BI.Button); -BI.Button.EVENT_CHANGE = "EVENT_CHANGE"; + doHighLight: function () { + this.text.doHighLight.apply(this.text, arguments); + }, + + unHighLight: function () { + this.text.unHighLight.apply(this.text, arguments); + } + }); + BI.shortcut("bi.button", BI.Button); + BI.Button.EVENT_CHANGE = "EVENT_CHANGE"; +}()); diff --git a/src/base/single/editor/editor.multifile.js b/src/base/single/editor/editor.multifile.js index 1175d01c7..7aec220f0 100644 --- a/src/base/single/editor/editor.multifile.js +++ b/src/base/single/editor/editor.multifile.js @@ -31,7 +31,8 @@ BI.MultifileEditor = BI.inherit(BI.Widget, { accept: o.accept, maxSize: o.maxSize, maxLength: o.maxLength, - title: o.title + title: o.title, + errorText: o.errorText, }); this.file.on(BI.File.EVENT_CHANGE, function () { self.fireEvent(BI.MultifileEditor.EVENT_CHANGE, arguments); diff --git a/src/base/single/input/file.js b/src/base/single/input/file.js index 802e8472f..b86963f41 100644 --- a/src/base/single/input/file.js +++ b/src/base/single/input/file.js @@ -445,8 +445,9 @@ url: "", multiple: true, accept: "", // .png,.pdf,image/jpg,image/* 等 - maxSize: -1, // 1024 * 1024 - maxLength: -1 // 无限制, 与multiple配合使用 + maxSize: -1, // 1024 * 1024 单位b + maxLength: -1, // 无限制, 与multiple配合使用 + errorText: BI.emptyFn, }); }, @@ -472,12 +473,10 @@ // handlers _wrap.onloadstart = function (rpe, xhr) { - // BI.Msg.toast("loadstart"); self.fireEvent(BI.File.EVENT_UPLOADSTART, arguments); }; _wrap.onprogress = function (rpe, xhr) { - // BI.Msg.toast("onprogress"); // percent for each bar // fileSize is -1 only if browser does not support file info access @@ -561,21 +560,26 @@ var validateFileType = fileTypeValidate(value, wrap.fileType); if (!validateFileType) { // 文件类型不支持 - BI.Msg.toast(BI.i18nText("BI-Upload_File_Type_Error"), { level: "error" }); + BI.Msg.toast(o.errorText({ + errorType: 0, + file: item + }) || BI.i18nText("BI-Upload_File_Type_Error", wrap.fileType), { level: "error" }); self.fireEvent(BI.File.EVENT_ERROR, { errorType: 0, file: item }); } else if (wrap.maxSize !== -1 && size && wrap.maxSize < size) { // 文件大小不支持 - BI.Msg.toast(BI.i18nText("BI-Upload_File_Size_Error"), { level: "error" }); + BI.Msg.toast(o.errorText({ + errorType: 1, + file: item + }) || BI.i18nText("BI-Upload_File_Size_Error", Math.ceil(wrap.maxSize / 1024 / 1024)), { level: "error" }); self.fireEvent(BI.File.EVENT_ERROR, { errorType: 1, file: item }); } else { wrap.files.unshift(item); - // BI.Msg.toast(value); } } } diff --git a/src/base/single/tip/tip.toast.js b/src/base/single/tip/tip.toast.js index ffbf2b336..3d26f6bc0 100644 --- a/src/base/single/tip/tip.toast.js +++ b/src/base/single/tip/tip.toast.js @@ -20,7 +20,8 @@ BI.Toast = BI.inherit(BI.Tip, { text: "", level: "success", // success或warning autoClose: true, - closable: null + closable: null, + vgap: 7, }); }, @@ -56,6 +57,9 @@ BI.Toast = BI.inherit(BI.Tip, { case "warning": cls = "toast-warning-font"; break; + case "loading": + cls = "toast-loading-font anim-rotate"; + break; case "normal": default: cls = "toast-message-font"; @@ -99,7 +103,7 @@ BI.Toast = BI.inherit(BI.Tip, { horizontalAlign: BI.HorizontalAlign.Stretch, element: this, items: items, - vgap: 12, + vgap: o.vgap, columnSize: columnSize }); }, diff --git a/src/case/combo/bubblecombo/popup.bubble.js b/src/case/combo/bubblecombo/popup.bubble.js index c65905821..7bc1f500c 100644 --- a/src/case/combo/bubblecombo/popup.bubble.js +++ b/src/case/combo/bubblecombo/popup.bubble.js @@ -48,8 +48,8 @@ BI.BubblePopupBarView = BI.inherit(BI.BubblePopupView, { if (BI.isWidget(buttonOpt)) { items.push({ el: buttonOpt, - lgap: i === 0 ? 20 : 15, - rgap: i === o.buttons.length - 1 ? 20 : 0 + lgap: i === 0 ? 15 : 10, + rgap: i === o.buttons.length - 1 ? 15 : 0 }); } else { items.push({ @@ -60,14 +60,14 @@ BI.BubblePopupBarView = BI.inherit(BI.BubblePopupView, { self.fireEvent(BI.BubblePopupBarView.EVENT_CLICK_TOOLBAR_BUTTON, v); } }, buttonOpt), - lgap: i === 0 ? 20 : 15, - rgap: i === o.buttons.length - 1 ? 20 : 0 + lgap: i === 0 ? 15 : 10, + rgap: i === o.buttons.length - 1 ? 15 : 0 }); } }); return BI.createWidget({ type: "bi.right_vertical_adapt", - height: 54, + height: 44, items: items }); }, @@ -90,7 +90,7 @@ BI.BubblePopupBarView = BI.inherit(BI.BubblePopupView, { }] }); - button.element.css("min-height", o.minHeight - 54); + button.element.css("min-height", o.minHeight - 44); return button; } diff --git a/src/less/base/single/tip/tip.toast.less b/src/less/base/single/tip/tip.toast.less index 875dfa586..4e33930ac 100644 --- a/src/less/base/single/tip/tip.toast.less +++ b/src/less/base/single/tip/tip.toast.less @@ -1,22 +1,27 @@ @import "../../../index.less"; -.bi-toast{ +.bi-toast { color: @color-bi-color-toast-text; line-height: @font-size-16; .border-radius(2px); - &.toast-success{ + + &.toast-success { background: @color-bi-background-toast-success; } - &.toast-warning{ + + &.toast-warning { background: @color-bi-background-toast-warning; } - &.toast-error{ + + &.toast-error { background: @color-bi-background-toast-error; } - &.toast-normal, &.toast-common{ + + &.toast-normal, &.toast-common, &.toast-loading { background: @color-bi-background-toast-normal; } - & .toast-icon{ + + & .toast-icon { font-size: @font-size-16; } } diff --git a/src/less/lib/font.less b/src/less/lib/font.less index d4760ec0e..ce865e30e 100644 --- a/src/less/lib/font.less +++ b/src/less/lib/font.less @@ -51,6 +51,7 @@ @font-tip-success: "e1db"; @font-tip-warning: "e1d7"; @font-tip-message: "e1d9"; +@font-tip-loading: "e7cd"; @font-key: "e1d0"; diff --git a/src/less/resource/font.less b/src/less/resource/font.less index a6551f864..be6730eca 100644 --- a/src/less/resource/font.less +++ b/src/less/resource/font.less @@ -86,6 +86,7 @@ .font(toast-success-font, @font-tip-success, @color-bi-color-toast-success); .font(toast-warning-font, @font-tip-warning, @color-bi-color-toast-warning); .font(toast-message-font, @font-tip-message, @color-bi-color-toast-normal); +.font(toast-loading-font, @font-tip-loading, @color-bi-color-toast-normal); //数值区间 .font(less-font, @font-less); diff --git a/typescript/base/foundation/message.ts b/typescript/base/foundation/message.ts index 63790d1cb..b30aad417 100644 --- a/typescript/base/foundation/message.ts +++ b/typescript/base/foundation/message.ts @@ -1,6 +1,13 @@ +type toastOptions = { + level: "success" | "warning" | "error" | "normal" | "loading" + autoClose?: boolean + callback?: Function + closable?: boolean +} + export type _msg = { - alert: (title: string, message?: string | {[key: string]: any}, callback?: (result?: boolean)=>void) => void - confirm: (title: string, message?: string | {[key: string]: any}, callback?: (result: boolean)=>void) => void - prompt: (title: string, message?: string, value?: any, callback?: (result: string) => void, minWidth?: number) => void - toast: (message: string, options?: object | string, context?: HTMLElement) => void + alert: (title: string, message?: string | { [key: string]: any }, callback?: (result?: boolean) => void) => void + confirm: (title: string, message?: string | { [key: string]: any }, callback?: (result: boolean) => void) => void + prompt: (title: string, message?: string, value?: any, callback?: (result: string) => void, minWidth?: number) => void + toast: (message: string | Obj, options?: toastOptions | string, context?: HTMLElement) => void }