From fcf78650293f35dded4e8dfbce9e7def451e2879 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Tue, 30 Jan 2018 19:17:40 +0800 Subject: [PATCH 1/2] =?UTF-8?q?tooltip=EF=BC=8Cbubble,=20toast=20=E6=96=B0?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E6=89=8B=E5=8A=A8=E5=85=B3=E9=97=AD?= =?UTF-8?q?=E7=9A=84toast?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/base/tip/demo.bubble.js | 30 +++++-- demo/js/base/tip/demo.toast.js | 32 ++++++-- dist/base.css | 50 ++++++++++-- dist/base.js | 83 +++++++++++++++----- dist/bundle.css | 50 ++++++++++-- dist/bundle.js | 95 ++++++++++++++++------- dist/core.js | 12 +-- dist/demo.js | 62 +++++++++++---- dist/fineui.css | 50 ++++++++++-- dist/fineui.js | 95 ++++++++++++++++------- src/base/foundation/message.js | 14 ++-- src/base/single/tip/tip.bubble.js | 6 +- src/base/single/tip/tip.toast.js | 63 ++++++++++++--- src/core/controller/controller.bubbles.js | 12 +-- src/css/base/single/tip/tip.css | 32 +++++++- src/css/base/single/tip/tip.toast.css | 18 ++++- src/less/base/single/tip/tip.bubble.less | 18 +++++ src/less/base/single/tip/tip.toast.less | 18 ++++- src/less/lib/colors.less | 2 + src/less/lib/constant.less | 1 + 20 files changed, 575 insertions(+), 168 deletions(-) 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; From d16da7f859bfedb57eb5dedec24359d12467a654 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Tue, 30 Jan 2018 19:48:24 +0800 Subject: [PATCH 2/2] update --- dist/base.css | 36 +++++++++++++++-------- dist/bundle.css | 36 +++++++++++++++-------- dist/fineui.css | 36 +++++++++++++++-------- src/css/base/single/tip/tip.bubble.css | 14 +++++++++ src/css/base/single/tip/tip.css | 11 ++++--- src/css/base/single/tip/tip.tooltip.css | 11 ++++--- src/less/base/single/tip/tip.tooltip.less | 6 ++-- src/less/lib/colors.less | 2 +- src/less/lib/constant.less | 2 +- 9 files changed, 101 insertions(+), 53 deletions(-) diff --git a/dist/base.css b/dist/base.css index 209d58580..5edaea46a 100644 --- a/dist/base.css +++ b/dist/base.css @@ -1173,9 +1173,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-bubble { font-size: 14px; } @@ -1236,16 +1250,15 @@ body .bi-button.button-ignore.disabled.clear:active, -moz-border-radius: 2px; border-radius: 2px; font-size: 12px; + color: #ffffff; } .bi-tooltip.tooltip-success { - background: #fff5c1; - border: 1px solid #fff5c1; - color: #1a1a1a; + background: #647185; + border: 1px solid #647185; } .bi-tooltip.tooltip-warning { - background: #ffecec; - color: #ff4949; - border: 1px solid #f4cbcb; + background: #ff4949; + border: 1px solid #e85050; } .bi-toast { font-size: 14px; @@ -1277,16 +1290,15 @@ body .bi-button.button-ignore.disabled.clear:active, -moz-border-radius: 2px; border-radius: 2px; font-size: 12px; + color: #ffffff; } .bi-tooltip.tooltip-success { - background: #fff5c1; - border: 1px solid #fff5c1; - color: #1a1a1a; + background: #647185; + border: 1px solid #647185; } .bi-tooltip.tooltip-warning { - background: #ffecec; - color: #ff4949; - border: 1px solid #f4cbcb; + background: #ff4949; + border: 1px solid #e85050; } .bi-sql-editor .cm-s-default span[class*="#"] { color: #3685f2; diff --git a/dist/bundle.css b/dist/bundle.css index d00cb6137..c2c425220 100644 --- a/dist/bundle.css +++ b/dist/bundle.css @@ -3220,9 +3220,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-bubble { font-size: 14px; } @@ -3283,16 +3297,15 @@ body .bi-button.button-ignore.disabled.clear:active, -moz-border-radius: 2px; border-radius: 2px; font-size: 12px; + color: #ffffff; } .bi-tooltip.tooltip-success { - background: #fff5c1; - border: 1px solid #fff5c1; - color: #1a1a1a; + background: #647185; + border: 1px solid #647185; } .bi-tooltip.tooltip-warning { - background: #ffecec; - color: #ff4949; - border: 1px solid #f4cbcb; + background: #ff4949; + border: 1px solid #e85050; } .bi-toast { font-size: 14px; @@ -3324,16 +3337,15 @@ body .bi-button.button-ignore.disabled.clear:active, -moz-border-radius: 2px; border-radius: 2px; font-size: 12px; + color: #ffffff; } .bi-tooltip.tooltip-success { - background: #fff5c1; - border: 1px solid #fff5c1; - color: #1a1a1a; + background: #647185; + border: 1px solid #647185; } .bi-tooltip.tooltip-warning { - background: #ffecec; - color: #ff4949; - border: 1px solid #f4cbcb; + background: #ff4949; + border: 1px solid #e85050; } .bi-sql-editor .cm-s-default span[class*="#"] { color: #3685f2; diff --git a/dist/fineui.css b/dist/fineui.css index 0f6ea4762..4fc1d05a3 100644 --- a/dist/fineui.css +++ b/dist/fineui.css @@ -3220,9 +3220,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-bubble { font-size: 14px; } @@ -3283,16 +3297,15 @@ body .bi-button.button-ignore.disabled.clear:active, -moz-border-radius: 2px; border-radius: 2px; font-size: 12px; + color: #ffffff; } .bi-tooltip.tooltip-success { - background: #fff5c1; - border: 1px solid #fff5c1; - color: #1a1a1a; + background: #647185; + border: 1px solid #647185; } .bi-tooltip.tooltip-warning { - background: #ffecec; - color: #ff4949; - border: 1px solid #f4cbcb; + background: #ff4949; + border: 1px solid #e85050; } .bi-toast { font-size: 14px; @@ -3324,16 +3337,15 @@ body .bi-button.button-ignore.disabled.clear:active, -moz-border-radius: 2px; border-radius: 2px; font-size: 12px; + color: #ffffff; } .bi-tooltip.tooltip-success { - background: #fff5c1; - border: 1px solid #fff5c1; - color: #1a1a1a; + background: #647185; + border: 1px solid #647185; } .bi-tooltip.tooltip-warning { - background: #ffecec; - color: #ff4949; - border: 1px solid #f4cbcb; + background: #ff4949; + border: 1px solid #e85050; } .bi-sql-editor .cm-s-default span[class*="#"] { color: #3685f2; diff --git a/src/css/base/single/tip/tip.bubble.css b/src/css/base/single/tip/tip.bubble.css index 0d18fb6dc..59ac45de3 100644 --- a/src/css/base/single/tip/tip.bubble.css +++ b/src/css/base/single/tip/tip.bubble.css @@ -5,6 +5,20 @@ -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; +} diff --git a/src/css/base/single/tip/tip.css b/src/css/base/single/tip/tip.css index 7486207b9..e5ddf3362 100644 --- a/src/css/base/single/tip/tip.css +++ b/src/css/base/single/tip/tip.css @@ -58,14 +58,13 @@ -moz-border-radius: 2px; border-radius: 2px; font-size: 12px; + color: #ffffff; } .bi-tooltip.tooltip-success { - background: #fff5c1; - border: 1px solid #fff5c1; - color: #1a1a1a; + background: #647185; + border: 1px solid #647185; } .bi-tooltip.tooltip-warning { - background: #ffecec; - color: #ff4949; - border: 1px solid #f4cbcb; + background: #ff4949; + border: 1px solid #e85050; } diff --git a/src/css/base/single/tip/tip.tooltip.css b/src/css/base/single/tip/tip.tooltip.css index 3f5eaedb3..04386aa15 100644 --- a/src/css/base/single/tip/tip.tooltip.css +++ b/src/css/base/single/tip/tip.tooltip.css @@ -4,14 +4,13 @@ -moz-border-radius: 2px; border-radius: 2px; font-size: 12px; + color: #ffffff; } .bi-tooltip.tooltip-success { - background: #fff5c1; - border: 1px solid #fff5c1; - color: #1a1a1a; + background: #647185; + border: 1px solid #647185; } .bi-tooltip.tooltip-warning { - background: #ffecec; - color: #ff4949; - border: 1px solid #f4cbcb; + background: #ff4949; + border: 1px solid #e85050; } diff --git a/src/less/base/single/tip/tip.tooltip.less b/src/less/base/single/tip/tip.tooltip.less index 35c6e8634..3c9f1d07a 100644 --- a/src/less/base/single/tip/tip.tooltip.less +++ b/src/less/base/single/tip/tip.tooltip.less @@ -4,14 +4,14 @@ max-width: 250px; .border-radius(2px); font-size: 12px; + color: @color-bi-text; &.tooltip-success{ background: @color-bi-tooltip-success-background; border: 1px solid @color-bi-tooltip-success-background; - color: @color-bi-text-black; + } &.tooltip-warning{ - background: @color-bi-background-light-failure; - color: @color-bi-text-failure; + background: @color-bi-background-failure; border: 1px solid @color-bi-tooltip-failure-border; } } \ No newline at end of file diff --git a/src/less/lib/colors.less b/src/less/lib/colors.less index 0c2878b49..919da3690 100644 --- a/src/less/lib/colors.less +++ b/src/less/lib/colors.less @@ -86,7 +86,7 @@ //成功边框 @color-bi-tooltip-success-border: @border-color-normal-success; //失败边框 -@color-bi-tooltip-failure-border: @border-color-light-negative; +@color-bi-tooltip-failure-border: @border-color-negative; //mask颜色 @color-bi-button-mask: @color-bi-background-black; diff --git a/src/less/lib/constant.less b/src/less/lib/constant.less index 9d99830d5..cbee89bba 100644 --- a/src/less/lib/constant.less +++ b/src/less/lib/constant.less @@ -48,7 +48,7 @@ @background-color-dark-success: #58cc7d; @background-color-light-success: #e1f4e7; -@background-color-normal-success: #fff5c1; +@background-color-normal-success: #647185; //border color @border-color-default: #ffffff;