diff --git a/demo/js/base/tip/demo.bubble.js b/demo/js/base/tip/demo.bubble.js index 907856804..bc83d8d8a 100644 --- a/demo/js/base/tip/demo.bubble.js +++ b/demo/js/base/tip/demo.bubble.js @@ -11,10 +11,12 @@ Demo.Bubble = BI.inherit(BI.Widget, { btns.push(_ref); }, type: "bi.button", - text: "bubble测试", + text: "bubble测试(消息)", height: 30, handler: function () { - BI.Bubbles.show("singleBubble1", "bubble测试", this); + BI.Bubbles.show("singleBubble1", "bubble测试", this, { + level: "common" + }); } } }, { @@ -23,11 +25,12 @@ Demo.Bubble = BI.inherit(BI.Widget, { btns.push(_ref); }, type: "bi.button", - text: "bubble测试(居中显示)", + text: "bubble测试(成功)", height: 30, handler: function () { BI.Bubbles.show("singleBubble2", "bubble测试", this, { - offsetStyle: "center" + offsetStyle: "center", + level: "success" }); } } @@ -37,11 +40,26 @@ Demo.Bubble = BI.inherit(BI.Widget, { btns.push(_ref); }, type: "bi.button", - text: "bubble测试(右边显示)", + text: "bubble测试(错误)", height: 30, handler: function () { BI.Bubbles.show("singleBubble3", "bubble测试", this, { - offsetStyle: "right" + offsetStyle: "right", + level: "error" + }); + } + } + }, { + el: { + ref: function (_ref) { + btns.push(_ref); + }, + type: "bi.button", + text: "bubble测试(警告)", + height: 30, + handler: function () { + BI.Bubbles.show("singleBubble4", "bubble测试", this, { + level: "warning" }); } } diff --git a/demo/js/base/tip/demo.toast.js b/demo/js/base/tip/demo.toast.js index 568696e41..d5cda36fc 100644 --- a/demo/js/base/tip/demo.toast.js +++ b/demo/js/base/tip/demo.toast.js @@ -7,7 +7,7 @@ Demo.Toast = BI.inherit(BI.Widget, { { el: { type: "bi.button", - text: "简单Toast测试", + text: "简单Toast测试(success)", height: 30, handler: function () { BI.Msg.toast("这是一条简单的数据"); @@ -16,29 +16,45 @@ Demo.Toast = BI.inherit(BI.Widget, { }, { el: { type: "bi.button", - text: "很长的Toast测试", + text: "很长的Toast测试(normal)", height: 30, handler: function () { - BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据"); + BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据", { + level: "normal" + }); } } }, { el: { type: "bi.button", - text: "非常长的Toast测试", + text: "非常长的Toast测试(warning)", height: 30, handler: function () { - BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据"); + BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据", { + level: "warning" + }); } } }, { el: { type: "bi.button", - text: "错误提示Toast测试", - level: "warning", + text: "错误提示Toast测试(error)", height: 30, handler: function () { - BI.Msg.toast("错误提示Toast测试", "warning"); + BI.Msg.toast("错误提示Toast测试", { + level: "error" + }); + } + } + }, { + el: { + type: "bi.button", + text: "错误提示Toast测试(error), 此toast不会自动消失", + height: 30, + handler: function () { + BI.Msg.toast("错误提示Toast测试", { + autoClose: false + }); } } } diff --git a/dist/base.css b/dist/base.css index 7e8570f81..209d58580 100644 --- a/dist/base.css +++ b/dist/base.css @@ -1183,9 +1183,23 @@ body .bi-button.button-ignore.disabled.clear:active, -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; +} +.bi-bubble .bubble-error { background: #ffecec; color: #ff4949; } +.bi-bubble .bubble-common { + background: #eaf2fd; + color: #3685f2; +} +.bi-bubble .bubble-success { + background: #e1f4e7; + color: #5cb75d; +} +.bi-bubble .bubble-warning { + background: #feeed7; + color: #faaa39; +} .bi-tip { position: fixed !important; @@ -1193,17 +1207,27 @@ body .bi-button.button-ignore.disabled.clear:active, .bi-toast { font-size: 14px; + color: #ffffff; + max-width: 400px; + min-width: 150px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .bi-toast.toast-success { - background: #e1f4e7; - color: #5cb75d; + background: #58cc7d; } .bi-toast.toast-warning { - background: #ffecec; - color: #ff4949; + background: #faaa39; +} +.bi-toast.toast-error { + background: #ff4949; +} +.bi-toast.toast-normal { + background: #3f8ce8; +} +.bi-toast .toast-icon { + font-size: 16px; } .bi-tooltip { @@ -1225,17 +1249,27 @@ body .bi-button.button-ignore.disabled.clear:active, } .bi-toast { font-size: 14px; + color: #ffffff; + max-width: 400px; + min-width: 150px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .bi-toast.toast-success { - background: #e1f4e7; - color: #5cb75d; + background: #58cc7d; } .bi-toast.toast-warning { - background: #ffecec; - color: #ff4949; + background: #faaa39; +} +.bi-toast.toast-error { + background: #ff4949; +} +.bi-toast.toast-normal { + background: #3f8ce8; +} +.bi-toast .toast-icon { + font-size: 16px; } .bi-tooltip { max-width: 250px; diff --git a/dist/base.js b/dist/base.js index dcf7260ad..e9c9e9e55 100644 --- a/dist/base.js +++ b/dist/base.js @@ -14698,11 +14698,15 @@ $.extend(BI, { prompt: function (title, message, value, callback, min_width) { // BI.Msg.prompt(title, message, value, callback, min_width); }, - toast: function (message, level, context) { + toast: function (message, options, context) { + options = options || {}; context = context || $("body"); + var level = options.level || "normal"; + var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose; var toast = BI.createWidget({ type: "bi.toast", level: level, + autoClose: autoClose, text: message }); BI.createWidget({ @@ -14711,16 +14715,12 @@ $.extend(BI, { items: [{ el: toast, left: "50%", - top: 0 + top: 10 }] }); - if (toast.element.outerWidth() > context.outerWidth()) { - toast.setWidth(context.width()); - } toast.element.css({"margin-left": -1 * toast.element.outerWidth() / 2}); - toast.invisible(); toast.element.slideDown(500, function () { - BI.delay(function () { + autoClose && BI.delay(function () { toast.element.slideUp(500, function () { toast.destroy(); }); @@ -20296,6 +20296,7 @@ BI.Bubble = BI.inherit(BI.Tip, { extraCls: "bi-bubble", direction: "top", text: "", + level: "error", height: 35 }); }, @@ -20315,10 +20316,11 @@ BI.Bubble = BI.inherit(BI.Tip, { }, _createBubbleText: function () { + var o = this.options; return (this.text = BI.createWidget({ type: "bi.label", - cls: "bubble-text", - text: this.options.text, + cls: "bubble-text" + (" bubble-" + o.level), + text: o.text, hgap: 10, height: 30 })); @@ -20399,20 +20401,19 @@ BI.shortcut("bi.bubble", BI.Bubble);/** BI.Toast = BI.inherit(BI.Tip, { _const: { minWidth: 200, - hgap: 20 + hgap: 10 }, _defaultConfig: function () { return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), { extraCls: "bi-toast", text: "", - level: "success", // success或warning - height: 30 + level: "success" // success或warning }); }, _init: function () { BI.Toast.superclass._init.apply(this, arguments); - var o = this.options; + var self = this, o = this.options; this.element.css({ minWidth: this._const.minWidth + "px" }); @@ -20424,19 +20425,59 @@ BI.Toast = BI.inherit(BI.Tip, { }; this.element.bind({click: fn, mousedown: fn, mouseup: fn, mouseover: fn, mouseenter: fn, mouseleave: fn, mousemove: fn}); + var cls = "close-font"; + switch(o.level) { + case "success": + break; + case "error": + break; + case "warning": + break; + case "normal": + default: + break; + } + + var items = [{ + type: "bi.center_adapt", + cls: cls + " toast-icon", + items: [{ + type: "bi.icon" + }], + width: 36 + }, { + el: { + type: "bi.label", + whiteSpace: "normal", + text: o.text, + textAlign: "left" + }, + rgap: o.autoClose ? this._const.hgap : 0 + }]; + + var columnSize = [36, ""]; + + if(o.autoClose === false) { + items.push({ + type: "bi.icon_button", + cls: "close-font toast-icon", + handler: function () { + self.destroy(); + }, + width: 36 + }); + columnSize.push(36); + } + this.text = BI.createWidget({ - type: "bi.label", + type: "bi.horizontal_adapt", element: this, - text: o.text, - height: 30, - hgap: this._const.hgap + items: items, + vgap: 5, + columnSize: columnSize }); }, - setWidth: function (width) { - this.element.width(width); - }, - setText: function (text) { this.text.setText(text); } diff --git a/dist/bundle.css b/dist/bundle.css index 4d489ef53..d00cb6137 100644 --- a/dist/bundle.css +++ b/dist/bundle.css @@ -3230,9 +3230,23 @@ body .bi-button.button-ignore.disabled.clear:active, -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; +} +.bi-bubble .bubble-error { background: #ffecec; color: #ff4949; } +.bi-bubble .bubble-common { + background: #eaf2fd; + color: #3685f2; +} +.bi-bubble .bubble-success { + background: #e1f4e7; + color: #5cb75d; +} +.bi-bubble .bubble-warning { + background: #feeed7; + color: #faaa39; +} .bi-tip { position: fixed !important; @@ -3240,17 +3254,27 @@ body .bi-button.button-ignore.disabled.clear:active, .bi-toast { font-size: 14px; + color: #ffffff; + max-width: 400px; + min-width: 150px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .bi-toast.toast-success { - background: #e1f4e7; - color: #5cb75d; + background: #58cc7d; } .bi-toast.toast-warning { - background: #ffecec; - color: #ff4949; + background: #faaa39; +} +.bi-toast.toast-error { + background: #ff4949; +} +.bi-toast.toast-normal { + background: #3f8ce8; +} +.bi-toast .toast-icon { + font-size: 16px; } .bi-tooltip { @@ -3272,17 +3296,27 @@ body .bi-button.button-ignore.disabled.clear:active, } .bi-toast { font-size: 14px; + color: #ffffff; + max-width: 400px; + min-width: 150px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .bi-toast.toast-success { - background: #e1f4e7; - color: #5cb75d; + background: #58cc7d; } .bi-toast.toast-warning { - background: #ffecec; - color: #ff4949; + background: #faaa39; +} +.bi-toast.toast-error { + background: #ff4949; +} +.bi-toast.toast-normal { + background: #3f8ce8; +} +.bi-toast .toast-icon { + font-size: 16px; } .bi-tooltip { max-width: 250px; diff --git a/dist/bundle.js b/dist/bundle.js index b28f350fd..386d28ed7 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -18243,10 +18243,11 @@ BI.BubblesController = BI.inherit(BI.Controller, { }); }, - _createBubble: function (direct, text, height) { + _createBubble: function (direct, text, level, height) { return BI.createWidget({ type: "bi.bubble", text: text, + level: level, height: height || 35, direction: direct }); @@ -18325,11 +18326,12 @@ BI.BubblesController = BI.inherit(BI.Controller, { opt || (opt = {}); var container = opt.container || context; var offsetStyle = opt.offsetStyle || {}; + var level = opt.level || "error"; if (!this.storeBubbles[name]) { this.storeBubbles[name] = {}; } if (!this.storeBubbles[name]["top"]) { - this.storeBubbles[name]["top"] = this._createBubble("top", text); + this.storeBubbles[name]["top"] = this._createBubble("top", text, level); } BI.createWidget({ type: "bi.absolute", @@ -18344,7 +18346,7 @@ BI.BubblesController = BI.inherit(BI.Controller, { this.get(name).invisible(); if (!$.isTopSpaceEnough(context, this.get(name))) { if (!this.storeBubbles[name]["left"]) { - this.storeBubbles[name]["left"] = this._createBubble("left", text, 30); + this.storeBubbles[name]["left"] = this._createBubble("left", text, level, 30); } BI.createWidget({ type: "bi.absolute", @@ -18359,7 +18361,7 @@ BI.BubblesController = BI.inherit(BI.Controller, { this.get(name).invisible(); if (!$.isLeftSpaceEnough(context, this.get(name))) { if (!this.storeBubbles[name]["right"]) { - this.storeBubbles[name]["right"] = this._createBubble("right", text, 30); + this.storeBubbles[name]["right"] = this._createBubble("right", text, level, 30); } BI.createWidget({ type: "bi.absolute", @@ -18374,7 +18376,7 @@ BI.BubblesController = BI.inherit(BI.Controller, { this.get(name).invisible(); if (!$.isRightSpaceEnough(context, this.get(name))) { if (!this.storeBubbles[name]["bottom"]) { - this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text); + this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text, level); } BI.createWidget({ type: "bi.absolute", @@ -40748,11 +40750,15 @@ $.extend(BI, { prompt: function (title, message, value, callback, min_width) { // BI.Msg.prompt(title, message, value, callback, min_width); }, - toast: function (message, level, context) { + toast: function (message, options, context) { + options = options || {}; context = context || $("body"); + var level = options.level || "normal"; + var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose; var toast = BI.createWidget({ type: "bi.toast", level: level, + autoClose: autoClose, text: message }); BI.createWidget({ @@ -40761,16 +40767,12 @@ $.extend(BI, { items: [{ el: toast, left: "50%", - top: 0 + top: 10 }] }); - if (toast.element.outerWidth() > context.outerWidth()) { - toast.setWidth(context.width()); - } toast.element.css({"margin-left": -1 * toast.element.outerWidth() / 2}); - toast.invisible(); toast.element.slideDown(500, function () { - BI.delay(function () { + autoClose && BI.delay(function () { toast.element.slideUp(500, function () { toast.destroy(); }); @@ -46346,6 +46348,7 @@ BI.Bubble = BI.inherit(BI.Tip, { extraCls: "bi-bubble", direction: "top", text: "", + level: "error", height: 35 }); }, @@ -46365,10 +46368,11 @@ BI.Bubble = BI.inherit(BI.Tip, { }, _createBubbleText: function () { + var o = this.options; return (this.text = BI.createWidget({ type: "bi.label", - cls: "bubble-text", - text: this.options.text, + cls: "bubble-text" + (" bubble-" + o.level), + text: o.text, hgap: 10, height: 30 })); @@ -46449,20 +46453,19 @@ BI.shortcut("bi.bubble", BI.Bubble);/** BI.Toast = BI.inherit(BI.Tip, { _const: { minWidth: 200, - hgap: 20 + hgap: 10 }, _defaultConfig: function () { return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), { extraCls: "bi-toast", text: "", - level: "success", // success或warning - height: 30 + level: "success" // success或warning }); }, _init: function () { BI.Toast.superclass._init.apply(this, arguments); - var o = this.options; + var self = this, o = this.options; this.element.css({ minWidth: this._const.minWidth + "px" }); @@ -46474,19 +46477,59 @@ BI.Toast = BI.inherit(BI.Tip, { }; this.element.bind({click: fn, mousedown: fn, mouseup: fn, mouseover: fn, mouseenter: fn, mouseleave: fn, mousemove: fn}); + var cls = "close-font"; + switch(o.level) { + case "success": + break; + case "error": + break; + case "warning": + break; + case "normal": + default: + break; + } + + var items = [{ + type: "bi.center_adapt", + cls: cls + " toast-icon", + items: [{ + type: "bi.icon" + }], + width: 36 + }, { + el: { + type: "bi.label", + whiteSpace: "normal", + text: o.text, + textAlign: "left" + }, + rgap: o.autoClose ? this._const.hgap : 0 + }]; + + var columnSize = [36, ""]; + + if(o.autoClose === false) { + items.push({ + type: "bi.icon_button", + cls: "close-font toast-icon", + handler: function () { + self.destroy(); + }, + width: 36 + }); + columnSize.push(36); + } + this.text = BI.createWidget({ - type: "bi.label", + type: "bi.horizontal_adapt", element: this, - text: o.text, - height: 30, - hgap: this._const.hgap + items: items, + vgap: 5, + columnSize: columnSize }); }, - setWidth: function (width) { - this.element.width(width); - }, - setText: function (text) { this.text.setText(text); } diff --git a/dist/core.js b/dist/core.js index 284ad1ec7..fec5d3509 100644 --- a/dist/core.js +++ b/dist/core.js @@ -18243,10 +18243,11 @@ BI.BubblesController = BI.inherit(BI.Controller, { }); }, - _createBubble: function (direct, text, height) { + _createBubble: function (direct, text, level, height) { return BI.createWidget({ type: "bi.bubble", text: text, + level: level, height: height || 35, direction: direct }); @@ -18325,11 +18326,12 @@ BI.BubblesController = BI.inherit(BI.Controller, { opt || (opt = {}); var container = opt.container || context; var offsetStyle = opt.offsetStyle || {}; + var level = opt.level || "error"; if (!this.storeBubbles[name]) { this.storeBubbles[name] = {}; } if (!this.storeBubbles[name]["top"]) { - this.storeBubbles[name]["top"] = this._createBubble("top", text); + this.storeBubbles[name]["top"] = this._createBubble("top", text, level); } BI.createWidget({ type: "bi.absolute", @@ -18344,7 +18346,7 @@ BI.BubblesController = BI.inherit(BI.Controller, { this.get(name).invisible(); if (!$.isTopSpaceEnough(context, this.get(name))) { if (!this.storeBubbles[name]["left"]) { - this.storeBubbles[name]["left"] = this._createBubble("left", text, 30); + this.storeBubbles[name]["left"] = this._createBubble("left", text, level, 30); } BI.createWidget({ type: "bi.absolute", @@ -18359,7 +18361,7 @@ BI.BubblesController = BI.inherit(BI.Controller, { this.get(name).invisible(); if (!$.isLeftSpaceEnough(context, this.get(name))) { if (!this.storeBubbles[name]["right"]) { - this.storeBubbles[name]["right"] = this._createBubble("right", text, 30); + this.storeBubbles[name]["right"] = this._createBubble("right", text, level, 30); } BI.createWidget({ type: "bi.absolute", @@ -18374,7 +18376,7 @@ BI.BubblesController = BI.inherit(BI.Controller, { this.get(name).invisible(); if (!$.isRightSpaceEnough(context, this.get(name))) { if (!this.storeBubbles[name]["bottom"]) { - this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text); + this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text, level); } BI.createWidget({ type: "bi.absolute", diff --git a/dist/demo.js b/dist/demo.js index 08de5421f..eef685956 100644 --- a/dist/demo.js +++ b/dist/demo.js @@ -1460,10 +1460,12 @@ BI.shortcut("demo.table_view", Demo.Func);Demo.Bubble = BI.inherit(BI.Widget, { btns.push(_ref); }, type: "bi.button", - text: "bubble测试", + text: "bubble测试(消息)", height: 30, handler: function () { - BI.Bubbles.show("singleBubble1", "bubble测试", this); + BI.Bubbles.show("singleBubble1", "bubble测试", this, { + level: "common" + }); } } }, { @@ -1472,11 +1474,12 @@ BI.shortcut("demo.table_view", Demo.Func);Demo.Bubble = BI.inherit(BI.Widget, { btns.push(_ref); }, type: "bi.button", - text: "bubble测试(居中显示)", + text: "bubble测试(成功)", height: 30, handler: function () { BI.Bubbles.show("singleBubble2", "bubble测试", this, { - offsetStyle: "center" + offsetStyle: "center", + level: "success" }); } } @@ -1486,11 +1489,26 @@ BI.shortcut("demo.table_view", Demo.Func);Demo.Bubble = BI.inherit(BI.Widget, { btns.push(_ref); }, type: "bi.button", - text: "bubble测试(右边显示)", + text: "bubble测试(错误)", height: 30, handler: function () { BI.Bubbles.show("singleBubble3", "bubble测试", this, { - offsetStyle: "right" + offsetStyle: "right", + level: "error" + }); + } + } + }, { + el: { + ref: function (_ref) { + btns.push(_ref); + }, + type: "bi.button", + text: "bubble测试(警告)", + height: 30, + handler: function () { + BI.Bubbles.show("singleBubble4", "bubble测试", this, { + level: "warning" }); } } @@ -1551,7 +1569,7 @@ BI.shortcut("demo.title", Demo.Title);Demo.Toast = BI.inherit(BI.Widget, { { el: { type: "bi.button", - text: "简单Toast测试", + text: "简单Toast测试(success)", height: 30, handler: function () { BI.Msg.toast("这是一条简单的数据"); @@ -1560,29 +1578,45 @@ BI.shortcut("demo.title", Demo.Title);Demo.Toast = BI.inherit(BI.Widget, { }, { el: { type: "bi.button", - text: "很长的Toast测试", + text: "很长的Toast测试(normal)", height: 30, handler: function () { - BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据"); + BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据", { + level: "normal" + }); } } }, { el: { type: "bi.button", - text: "非常长的Toast测试", + text: "非常长的Toast测试(warning)", height: 30, handler: function () { - BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据"); + BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据", { + level: "warning" + }); } } }, { el: { type: "bi.button", - text: "错误提示Toast测试", - level: "warning", + text: "错误提示Toast测试(error)", height: 30, handler: function () { - BI.Msg.toast("错误提示Toast测试", "warning"); + BI.Msg.toast("错误提示Toast测试", { + level: "error" + }); + } + } + }, { + el: { + type: "bi.button", + text: "错误提示Toast测试(error), 此toast不会自动消失", + height: 30, + handler: function () { + BI.Msg.toast("错误提示Toast测试", { + autoClose: false + }); } } } diff --git a/dist/fineui.css b/dist/fineui.css index 2c88bb36b..0f6ea4762 100644 --- a/dist/fineui.css +++ b/dist/fineui.css @@ -3230,9 +3230,23 @@ body .bi-button.button-ignore.disabled.clear:active, -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; +} +.bi-bubble .bubble-error { background: #ffecec; color: #ff4949; } +.bi-bubble .bubble-common { + background: #eaf2fd; + color: #3685f2; +} +.bi-bubble .bubble-success { + background: #e1f4e7; + color: #5cb75d; +} +.bi-bubble .bubble-warning { + background: #feeed7; + color: #faaa39; +} .bi-tip { position: fixed !important; @@ -3240,17 +3254,27 @@ body .bi-button.button-ignore.disabled.clear:active, .bi-toast { font-size: 14px; + color: #ffffff; + max-width: 400px; + min-width: 150px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .bi-toast.toast-success { - background: #e1f4e7; - color: #5cb75d; + background: #58cc7d; } .bi-toast.toast-warning { - background: #ffecec; - color: #ff4949; + background: #faaa39; +} +.bi-toast.toast-error { + background: #ff4949; +} +.bi-toast.toast-normal { + background: #3f8ce8; +} +.bi-toast .toast-icon { + font-size: 16px; } .bi-tooltip { @@ -3272,17 +3296,27 @@ body .bi-button.button-ignore.disabled.clear:active, } .bi-toast { font-size: 14px; + color: #ffffff; + max-width: 400px; + min-width: 150px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .bi-toast.toast-success { - background: #e1f4e7; - color: #5cb75d; + background: #58cc7d; } .bi-toast.toast-warning { - background: #ffecec; - color: #ff4949; + background: #faaa39; +} +.bi-toast.toast-error { + background: #ff4949; +} +.bi-toast.toast-normal { + background: #3f8ce8; +} +.bi-toast .toast-icon { + font-size: 16px; } .bi-tooltip { max-width: 250px; diff --git a/dist/fineui.js b/dist/fineui.js index 76772281b..aab58a582 100644 --- a/dist/fineui.js +++ b/dist/fineui.js @@ -18444,10 +18444,11 @@ BI.BubblesController = BI.inherit(BI.Controller, { }); }, - _createBubble: function (direct, text, height) { + _createBubble: function (direct, text, level, height) { return BI.createWidget({ type: "bi.bubble", text: text, + level: level, height: height || 35, direction: direct }); @@ -18526,11 +18527,12 @@ BI.BubblesController = BI.inherit(BI.Controller, { opt || (opt = {}); var container = opt.container || context; var offsetStyle = opt.offsetStyle || {}; + var level = opt.level || "error"; if (!this.storeBubbles[name]) { this.storeBubbles[name] = {}; } if (!this.storeBubbles[name]["top"]) { - this.storeBubbles[name]["top"] = this._createBubble("top", text); + this.storeBubbles[name]["top"] = this._createBubble("top", text, level); } BI.createWidget({ type: "bi.absolute", @@ -18545,7 +18547,7 @@ BI.BubblesController = BI.inherit(BI.Controller, { this.get(name).invisible(); if (!$.isTopSpaceEnough(context, this.get(name))) { if (!this.storeBubbles[name]["left"]) { - this.storeBubbles[name]["left"] = this._createBubble("left", text, 30); + this.storeBubbles[name]["left"] = this._createBubble("left", text, level, 30); } BI.createWidget({ type: "bi.absolute", @@ -18560,7 +18562,7 @@ BI.BubblesController = BI.inherit(BI.Controller, { this.get(name).invisible(); if (!$.isLeftSpaceEnough(context, this.get(name))) { if (!this.storeBubbles[name]["right"]) { - this.storeBubbles[name]["right"] = this._createBubble("right", text, 30); + this.storeBubbles[name]["right"] = this._createBubble("right", text, level, 30); } BI.createWidget({ type: "bi.absolute", @@ -18575,7 +18577,7 @@ BI.BubblesController = BI.inherit(BI.Controller, { this.get(name).invisible(); if (!$.isRightSpaceEnough(context, this.get(name))) { if (!this.storeBubbles[name]["bottom"]) { - this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text); + this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text, level); } BI.createWidget({ type: "bi.absolute", @@ -42512,11 +42514,15 @@ $.extend(BI, { prompt: function (title, message, value, callback, min_width) { // BI.Msg.prompt(title, message, value, callback, min_width); }, - toast: function (message, level, context) { + toast: function (message, options, context) { + options = options || {}; context = context || $("body"); + var level = options.level || "normal"; + var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose; var toast = BI.createWidget({ type: "bi.toast", level: level, + autoClose: autoClose, text: message }); BI.createWidget({ @@ -42525,16 +42531,12 @@ $.extend(BI, { items: [{ el: toast, left: "50%", - top: 0 + top: 10 }] }); - if (toast.element.outerWidth() > context.outerWidth()) { - toast.setWidth(context.width()); - } toast.element.css({"margin-left": -1 * toast.element.outerWidth() / 2}); - toast.invisible(); toast.element.slideDown(500, function () { - BI.delay(function () { + autoClose && BI.delay(function () { toast.element.slideUp(500, function () { toast.destroy(); }); @@ -48110,6 +48112,7 @@ BI.Bubble = BI.inherit(BI.Tip, { extraCls: "bi-bubble", direction: "top", text: "", + level: "error", height: 35 }); }, @@ -48129,10 +48132,11 @@ BI.Bubble = BI.inherit(BI.Tip, { }, _createBubbleText: function () { + var o = this.options; return (this.text = BI.createWidget({ type: "bi.label", - cls: "bubble-text", - text: this.options.text, + cls: "bubble-text" + (" bubble-" + o.level), + text: o.text, hgap: 10, height: 30 })); @@ -48213,20 +48217,19 @@ BI.shortcut("bi.bubble", BI.Bubble);/** BI.Toast = BI.inherit(BI.Tip, { _const: { minWidth: 200, - hgap: 20 + hgap: 10 }, _defaultConfig: function () { return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), { extraCls: "bi-toast", text: "", - level: "success", // success或warning - height: 30 + level: "success" // success或warning }); }, _init: function () { BI.Toast.superclass._init.apply(this, arguments); - var o = this.options; + var self = this, o = this.options; this.element.css({ minWidth: this._const.minWidth + "px" }); @@ -48238,19 +48241,59 @@ BI.Toast = BI.inherit(BI.Tip, { }; this.element.bind({click: fn, mousedown: fn, mouseup: fn, mouseover: fn, mouseenter: fn, mouseleave: fn, mousemove: fn}); + var cls = "close-font"; + switch(o.level) { + case "success": + break; + case "error": + break; + case "warning": + break; + case "normal": + default: + break; + } + + var items = [{ + type: "bi.center_adapt", + cls: cls + " toast-icon", + items: [{ + type: "bi.icon" + }], + width: 36 + }, { + el: { + type: "bi.label", + whiteSpace: "normal", + text: o.text, + textAlign: "left" + }, + rgap: o.autoClose ? this._const.hgap : 0 + }]; + + var columnSize = [36, ""]; + + if(o.autoClose === false) { + items.push({ + type: "bi.icon_button", + cls: "close-font toast-icon", + handler: function () { + self.destroy(); + }, + width: 36 + }); + columnSize.push(36); + } + this.text = BI.createWidget({ - type: "bi.label", + type: "bi.horizontal_adapt", element: this, - text: o.text, - height: 30, - hgap: this._const.hgap + items: items, + vgap: 5, + columnSize: columnSize }); }, - setWidth: function (width) { - this.element.width(width); - }, - setText: function (text) { this.text.setText(text); } diff --git a/src/base/foundation/message.js b/src/base/foundation/message.js index e4a406034..1aba868fb 100644 --- a/src/base/foundation/message.js +++ b/src/base/foundation/message.js @@ -18,11 +18,15 @@ $.extend(BI, { prompt: function (title, message, value, callback, min_width) { // BI.Msg.prompt(title, message, value, callback, min_width); }, - toast: function (message, level, context) { + toast: function (message, options, context) { + options = options || {}; context = context || $("body"); + var level = options.level || "normal"; + var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose; var toast = BI.createWidget({ type: "bi.toast", level: level, + autoClose: autoClose, text: message }); BI.createWidget({ @@ -31,16 +35,12 @@ $.extend(BI, { items: [{ el: toast, left: "50%", - top: 0 + top: 10 }] }); - if (toast.element.outerWidth() > context.outerWidth()) { - toast.setWidth(context.width()); - } toast.element.css({"margin-left": -1 * toast.element.outerWidth() / 2}); - toast.invisible(); toast.element.slideDown(500, function () { - BI.delay(function () { + autoClose && BI.delay(function () { toast.element.slideUp(500, function () { toast.destroy(); }); diff --git a/src/base/single/tip/tip.bubble.js b/src/base/single/tip/tip.bubble.js index ded1eaf6f..95b48b776 100644 --- a/src/base/single/tip/tip.bubble.js +++ b/src/base/single/tip/tip.bubble.js @@ -11,6 +11,7 @@ BI.Bubble = BI.inherit(BI.Tip, { extraCls: "bi-bubble", direction: "top", text: "", + level: "error", height: 35 }); }, @@ -30,10 +31,11 @@ BI.Bubble = BI.inherit(BI.Tip, { }, _createBubbleText: function () { + var o = this.options; return (this.text = BI.createWidget({ type: "bi.label", - cls: "bubble-text", - text: this.options.text, + cls: "bubble-text" + (" bubble-" + o.level), + text: o.text, hgap: 10, height: 30 })); diff --git a/src/base/single/tip/tip.toast.js b/src/base/single/tip/tip.toast.js index f5f944cee..15e96ff13 100644 --- a/src/base/single/tip/tip.toast.js +++ b/src/base/single/tip/tip.toast.js @@ -8,20 +8,19 @@ BI.Toast = BI.inherit(BI.Tip, { _const: { minWidth: 200, - hgap: 20 + hgap: 10 }, _defaultConfig: function () { return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), { extraCls: "bi-toast", text: "", - level: "success", // success或warning - height: 30 + level: "success" // success或warning }); }, _init: function () { BI.Toast.superclass._init.apply(this, arguments); - var o = this.options; + var self = this, o = this.options; this.element.css({ minWidth: this._const.minWidth + "px" }); @@ -33,19 +32,59 @@ BI.Toast = BI.inherit(BI.Tip, { }; this.element.bind({click: fn, mousedown: fn, mouseup: fn, mouseover: fn, mouseenter: fn, mouseleave: fn, mousemove: fn}); + var cls = "close-font"; + switch(o.level) { + case "success": + break; + case "error": + break; + case "warning": + break; + case "normal": + default: + break; + } + + var items = [{ + type: "bi.center_adapt", + cls: cls + " toast-icon", + items: [{ + type: "bi.icon" + }], + width: 36 + }, { + el: { + type: "bi.label", + whiteSpace: "normal", + text: o.text, + textAlign: "left" + }, + rgap: o.autoClose ? this._const.hgap : 0 + }]; + + var columnSize = [36, ""]; + + if(o.autoClose === false) { + items.push({ + type: "bi.icon_button", + cls: "close-font toast-icon", + handler: function () { + self.destroy(); + }, + width: 36 + }); + columnSize.push(36); + } + this.text = BI.createWidget({ - type: "bi.label", + type: "bi.horizontal_adapt", element: this, - text: o.text, - height: 30, - hgap: this._const.hgap + items: items, + vgap: 5, + columnSize: columnSize }); }, - setWidth: function (width) { - this.element.width(width); - }, - setText: function (text) { this.text.setText(text); } diff --git a/src/core/controller/controller.bubbles.js b/src/core/controller/controller.bubbles.js index ce7fbb29e..d3cd2f028 100644 --- a/src/core/controller/controller.bubbles.js +++ b/src/core/controller/controller.bubbles.js @@ -28,10 +28,11 @@ BI.BubblesController = BI.inherit(BI.Controller, { }); }, - _createBubble: function (direct, text, height) { + _createBubble: function (direct, text, level, height) { return BI.createWidget({ type: "bi.bubble", text: text, + level: level, height: height || 35, direction: direct }); @@ -110,11 +111,12 @@ BI.BubblesController = BI.inherit(BI.Controller, { opt || (opt = {}); var container = opt.container || context; var offsetStyle = opt.offsetStyle || {}; + var level = opt.level || "error"; if (!this.storeBubbles[name]) { this.storeBubbles[name] = {}; } if (!this.storeBubbles[name]["top"]) { - this.storeBubbles[name]["top"] = this._createBubble("top", text); + this.storeBubbles[name]["top"] = this._createBubble("top", text, level); } BI.createWidget({ type: "bi.absolute", @@ -129,7 +131,7 @@ BI.BubblesController = BI.inherit(BI.Controller, { this.get(name).invisible(); if (!$.isTopSpaceEnough(context, this.get(name))) { if (!this.storeBubbles[name]["left"]) { - this.storeBubbles[name]["left"] = this._createBubble("left", text, 30); + this.storeBubbles[name]["left"] = this._createBubble("left", text, level, 30); } BI.createWidget({ type: "bi.absolute", @@ -144,7 +146,7 @@ BI.BubblesController = BI.inherit(BI.Controller, { this.get(name).invisible(); if (!$.isLeftSpaceEnough(context, this.get(name))) { if (!this.storeBubbles[name]["right"]) { - this.storeBubbles[name]["right"] = this._createBubble("right", text, 30); + this.storeBubbles[name]["right"] = this._createBubble("right", text, level, 30); } BI.createWidget({ type: "bi.absolute", @@ -159,7 +161,7 @@ BI.BubblesController = BI.inherit(BI.Controller, { this.get(name).invisible(); if (!$.isRightSpaceEnough(context, this.get(name))) { if (!this.storeBubbles[name]["bottom"]) { - this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text); + this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text, level); } BI.createWidget({ type: "bi.absolute", diff --git a/src/css/base/single/tip/tip.css b/src/css/base/single/tip/tip.css index b8f94bf09..7486207b9 100644 --- a/src/css/base/single/tip/tip.css +++ b/src/css/base/single/tip/tip.css @@ -5,9 +5,23 @@ -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; +} +.bi-bubble .bubble-error { background: #ffecec; color: #ff4949; } +.bi-bubble .bubble-common { + background: #eaf2fd; + color: #3685f2; +} +.bi-bubble .bubble-success { + background: #e1f4e7; + color: #5cb75d; +} +.bi-bubble .bubble-warning { + background: #feeed7; + color: #faaa39; +} .bi-tip { position: fixed !important; @@ -15,17 +29,27 @@ .bi-toast { font-size: 14px; + color: #ffffff; + max-width: 400px; + min-width: 150px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .bi-toast.toast-success { - background: #e1f4e7; - color: #5cb75d; + background: #58cc7d; } .bi-toast.toast-warning { - background: #ffecec; - color: #ff4949; + background: #faaa39; +} +.bi-toast.toast-error { + background: #ff4949; +} +.bi-toast.toast-normal { + background: #3f8ce8; +} +.bi-toast .toast-icon { + font-size: 16px; } .bi-tooltip { diff --git a/src/css/base/single/tip/tip.toast.css b/src/css/base/single/tip/tip.toast.css index 714d7e7dd..ee5f64349 100644 --- a/src/css/base/single/tip/tip.toast.css +++ b/src/css/base/single/tip/tip.toast.css @@ -1,14 +1,24 @@ .bi-toast { font-size: 14px; + color: #ffffff; + max-width: 400px; + min-width: 150px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .bi-toast.toast-success { - background: #e1f4e7; - color: #5cb75d; + background: #58cc7d; } .bi-toast.toast-warning { - background: #ffecec; - color: #ff4949; + background: #faaa39; +} +.bi-toast.toast-error { + background: #ff4949; +} +.bi-toast.toast-normal { + background: #3f8ce8; +} +.bi-toast .toast-icon { + font-size: 16px; } diff --git a/src/less/base/single/tip/tip.bubble.less b/src/less/base/single/tip/tip.bubble.less index fe5b1f4bd..e9b2754eb 100644 --- a/src/less/base/single/tip/tip.bubble.less +++ b/src/less/base/single/tip/tip.bubble.less @@ -4,7 +4,25 @@ font-size: @font-size-14; & .bubble-text{ .border-radius(2px); + } + + & .bubble-error{ background: @color-bi-background-light-failure; color: @color-bi-text-failure; } + + & .bubble-common{ + background: @color-bi-background-light-highlight; + color: @color-bi-text-highlight; + } + + & .bubble-success{ + background: @color-bi-background-light-success; + color: @color-bi-text-success; + } + + & .bubble-warning{ + background: @color-bi-background-light-warning; + color: @color-bi-text-redmark; + } } \ No newline at end of file diff --git a/src/less/base/single/tip/tip.toast.less b/src/less/base/single/tip/tip.toast.less index 49a503431..0285b4d52 100644 --- a/src/less/base/single/tip/tip.toast.less +++ b/src/less/base/single/tip/tip.toast.less @@ -2,13 +2,23 @@ .bi-toast{ font-size: @font-size-14; + color: @color-bi-text; + max-width: 400px; + min-width: 150px; .border-radius(2px); &.toast-success{ - background: @color-bi-background-light-success; - color: @color-bi-text-success; + background: @color-bi-background-success; } &.toast-warning{ - background: @color-bi-background-light-failure; - color: @color-bi-text-failure; + background: @color-bi-background-warning; + } + &.toast-error{ + background: @color-bi-background-failure; + } + &.toast-normal{ + background: @color-bi-background-highlight; + } + & .toast-icon{ + font-size: 16px; } } \ No newline at end of file diff --git a/src/less/lib/colors.less b/src/less/lib/colors.less index 070424d30..0c2878b49 100644 --- a/src/less/lib/colors.less +++ b/src/less/lib/colors.less @@ -54,6 +54,8 @@ @color-bi-background-light-failure: @background-color-light-negative; //警示背景色 @color-bi-background-warning: @background-color-warning; +//警示背景色(浅) +@color-bi-background-light-warning: @background-color-light-warning; //背景提亮色 @color-bi-background-highlight: @background-color-highlight; //背景提亮色(浅) diff --git a/src/less/lib/constant.less b/src/less/lib/constant.less index 924e94ae9..9d99830d5 100644 --- a/src/less/lib/constant.less +++ b/src/less/lib/constant.less @@ -43,6 +43,7 @@ @background-color-negative: #ff4949; @background-color-light-negative: #ffecec; +@background-color-light-warning: #feeed7; @background-color-warning: #faaa39; @background-color-dark-success: #58cc7d;