Browse Source

tooltip,bubble, toast 新样式和手动关闭的toast

es6
windy 7 years ago
parent
commit
fcf7865029
  1. 30
      demo/js/base/tip/demo.bubble.js
  2. 32
      demo/js/base/tip/demo.toast.js
  3. 50
      dist/base.css
  4. 83
      dist/base.js
  5. 50
      dist/bundle.css
  6. 95
      dist/bundle.js
  7. 12
      dist/core.js
  8. 62
      dist/demo.js
  9. 50
      dist/fineui.css
  10. 95
      dist/fineui.js
  11. 14
      src/base/foundation/message.js
  12. 6
      src/base/single/tip/tip.bubble.js
  13. 63
      src/base/single/tip/tip.toast.js
  14. 12
      src/core/controller/controller.bubbles.js
  15. 32
      src/css/base/single/tip/tip.css
  16. 18
      src/css/base/single/tip/tip.toast.css
  17. 18
      src/less/base/single/tip/tip.bubble.less
  18. 18
      src/less/base/single/tip/tip.toast.less
  19. 2
      src/less/lib/colors.less
  20. 1
      src/less/lib/constant.less

30
demo/js/base/tip/demo.bubble.js

@ -11,10 +11,12 @@ Demo.Bubble = BI.inherit(BI.Widget, {
btns.push(_ref); btns.push(_ref);
}, },
type: "bi.button", type: "bi.button",
text: "bubble测试", text: "bubble测试(消息)",
height: 30, height: 30,
handler: function () { 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); btns.push(_ref);
}, },
type: "bi.button", type: "bi.button",
text: "bubble测试(居中显示)", text: "bubble测试(成功)",
height: 30, height: 30,
handler: function () { handler: function () {
BI.Bubbles.show("singleBubble2", "bubble测试", this, { 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); btns.push(_ref);
}, },
type: "bi.button", type: "bi.button",
text: "bubble测试(右边显示)", text: "bubble测试(错误)",
height: 30, height: 30,
handler: function () { handler: function () {
BI.Bubbles.show("singleBubble3", "bubble测试", this, { 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"
}); });
} }
} }

32
demo/js/base/tip/demo.toast.js

@ -7,7 +7,7 @@ Demo.Toast = BI.inherit(BI.Widget, {
{ {
el: { el: {
type: "bi.button", type: "bi.button",
text: "简单Toast测试", text: "简单Toast测试(success)",
height: 30, height: 30,
handler: function () { handler: function () {
BI.Msg.toast("这是一条简单的数据"); BI.Msg.toast("这是一条简单的数据");
@ -16,29 +16,45 @@ Demo.Toast = BI.inherit(BI.Widget, {
}, { }, {
el: { el: {
type: "bi.button", type: "bi.button",
text: "很长的Toast测试", text: "很长的Toast测试(normal)",
height: 30, height: 30,
handler: function () { handler: function () {
BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据"); BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据", {
level: "normal"
});
} }
} }
}, { }, {
el: { el: {
type: "bi.button", type: "bi.button",
text: "非常长的Toast测试", text: "非常长的Toast测试(warning)",
height: 30, height: 30,
handler: function () { handler: function () {
BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据"); BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据", {
level: "warning"
});
} }
} }
}, { }, {
el: { el: {
type: "bi.button", type: "bi.button",
text: "错误提示Toast测试", text: "错误提示Toast测试(error)",
level: "warning",
height: 30, height: 30,
handler: function () { 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
});
} }
} }
} }

50
dist/base.css vendored

@ -1183,9 +1183,23 @@ body .bi-button.button-ignore.disabled.clear:active,
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
}
.bi-bubble .bubble-error {
background: #ffecec; background: #ffecec;
color: #ff4949; 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 { .bi-tip {
position: fixed !important; position: fixed !important;
@ -1193,17 +1207,27 @@ body .bi-button.button-ignore.disabled.clear:active,
.bi-toast { .bi-toast {
font-size: 14px; font-size: 14px;
color: #ffffff;
max-width: 400px;
min-width: 150px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
} }
.bi-toast.toast-success { .bi-toast.toast-success {
background: #e1f4e7; background: #58cc7d;
color: #5cb75d;
} }
.bi-toast.toast-warning { .bi-toast.toast-warning {
background: #ffecec; background: #faaa39;
color: #ff4949; }
.bi-toast.toast-error {
background: #ff4949;
}
.bi-toast.toast-normal {
background: #3f8ce8;
}
.bi-toast .toast-icon {
font-size: 16px;
} }
.bi-tooltip { .bi-tooltip {
@ -1225,17 +1249,27 @@ body .bi-button.button-ignore.disabled.clear:active,
} }
.bi-toast { .bi-toast {
font-size: 14px; font-size: 14px;
color: #ffffff;
max-width: 400px;
min-width: 150px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
} }
.bi-toast.toast-success { .bi-toast.toast-success {
background: #e1f4e7; background: #58cc7d;
color: #5cb75d;
} }
.bi-toast.toast-warning { .bi-toast.toast-warning {
background: #ffecec; background: #faaa39;
color: #ff4949; }
.bi-toast.toast-error {
background: #ff4949;
}
.bi-toast.toast-normal {
background: #3f8ce8;
}
.bi-toast .toast-icon {
font-size: 16px;
} }
.bi-tooltip { .bi-tooltip {
max-width: 250px; max-width: 250px;

83
dist/base.js vendored

@ -14698,11 +14698,15 @@ $.extend(BI, {
prompt: function (title, message, value, callback, min_width) { prompt: function (title, message, value, callback, min_width) {
// BI.Msg.prompt(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"); context = context || $("body");
var level = options.level || "normal";
var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
var toast = BI.createWidget({ var toast = BI.createWidget({
type: "bi.toast", type: "bi.toast",
level: level, level: level,
autoClose: autoClose,
text: message text: message
}); });
BI.createWidget({ BI.createWidget({
@ -14711,16 +14715,12 @@ $.extend(BI, {
items: [{ items: [{
el: toast, el: toast,
left: "50%", 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.element.css({"margin-left": -1 * toast.element.outerWidth() / 2});
toast.invisible();
toast.element.slideDown(500, function () { toast.element.slideDown(500, function () {
BI.delay(function () { autoClose && BI.delay(function () {
toast.element.slideUp(500, function () { toast.element.slideUp(500, function () {
toast.destroy(); toast.destroy();
}); });
@ -20296,6 +20296,7 @@ BI.Bubble = BI.inherit(BI.Tip, {
extraCls: "bi-bubble", extraCls: "bi-bubble",
direction: "top", direction: "top",
text: "", text: "",
level: "error",
height: 35 height: 35
}); });
}, },
@ -20315,10 +20316,11 @@ BI.Bubble = BI.inherit(BI.Tip, {
}, },
_createBubbleText: function () { _createBubbleText: function () {
var o = this.options;
return (this.text = BI.createWidget({ return (this.text = BI.createWidget({
type: "bi.label", type: "bi.label",
cls: "bubble-text", cls: "bubble-text" + (" bubble-" + o.level),
text: this.options.text, text: o.text,
hgap: 10, hgap: 10,
height: 30 height: 30
})); }));
@ -20399,20 +20401,19 @@ BI.shortcut("bi.bubble", BI.Bubble);/**
BI.Toast = BI.inherit(BI.Tip, { BI.Toast = BI.inherit(BI.Tip, {
_const: { _const: {
minWidth: 200, minWidth: 200,
hgap: 20 hgap: 10
}, },
_defaultConfig: function () { _defaultConfig: function () {
return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), { return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), {
extraCls: "bi-toast", extraCls: "bi-toast",
text: "", text: "",
level: "success", // success或warning level: "success" // success或warning
height: 30
}); });
}, },
_init: function () { _init: function () {
BI.Toast.superclass._init.apply(this, arguments); BI.Toast.superclass._init.apply(this, arguments);
var o = this.options; var self = this, o = this.options;
this.element.css({ this.element.css({
minWidth: this._const.minWidth + "px" 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}); 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({ this.text = BI.createWidget({
type: "bi.label", type: "bi.horizontal_adapt",
element: this, element: this,
text: o.text, items: items,
height: 30, vgap: 5,
hgap: this._const.hgap columnSize: columnSize
}); });
}, },
setWidth: function (width) {
this.element.width(width);
},
setText: function (text) { setText: function (text) {
this.text.setText(text); this.text.setText(text);
} }

50
dist/bundle.css vendored

@ -3230,9 +3230,23 @@ body .bi-button.button-ignore.disabled.clear:active,
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
}
.bi-bubble .bubble-error {
background: #ffecec; background: #ffecec;
color: #ff4949; 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 { .bi-tip {
position: fixed !important; position: fixed !important;
@ -3240,17 +3254,27 @@ body .bi-button.button-ignore.disabled.clear:active,
.bi-toast { .bi-toast {
font-size: 14px; font-size: 14px;
color: #ffffff;
max-width: 400px;
min-width: 150px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
} }
.bi-toast.toast-success { .bi-toast.toast-success {
background: #e1f4e7; background: #58cc7d;
color: #5cb75d;
} }
.bi-toast.toast-warning { .bi-toast.toast-warning {
background: #ffecec; background: #faaa39;
color: #ff4949; }
.bi-toast.toast-error {
background: #ff4949;
}
.bi-toast.toast-normal {
background: #3f8ce8;
}
.bi-toast .toast-icon {
font-size: 16px;
} }
.bi-tooltip { .bi-tooltip {
@ -3272,17 +3296,27 @@ body .bi-button.button-ignore.disabled.clear:active,
} }
.bi-toast { .bi-toast {
font-size: 14px; font-size: 14px;
color: #ffffff;
max-width: 400px;
min-width: 150px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
} }
.bi-toast.toast-success { .bi-toast.toast-success {
background: #e1f4e7; background: #58cc7d;
color: #5cb75d;
} }
.bi-toast.toast-warning { .bi-toast.toast-warning {
background: #ffecec; background: #faaa39;
color: #ff4949; }
.bi-toast.toast-error {
background: #ff4949;
}
.bi-toast.toast-normal {
background: #3f8ce8;
}
.bi-toast .toast-icon {
font-size: 16px;
} }
.bi-tooltip { .bi-tooltip {
max-width: 250px; max-width: 250px;

95
dist/bundle.js vendored

@ -18243,10 +18243,11 @@ BI.BubblesController = BI.inherit(BI.Controller, {
}); });
}, },
_createBubble: function (direct, text, height) { _createBubble: function (direct, text, level, height) {
return BI.createWidget({ return BI.createWidget({
type: "bi.bubble", type: "bi.bubble",
text: text, text: text,
level: level,
height: height || 35, height: height || 35,
direction: direct direction: direct
}); });
@ -18325,11 +18326,12 @@ BI.BubblesController = BI.inherit(BI.Controller, {
opt || (opt = {}); opt || (opt = {});
var container = opt.container || context; var container = opt.container || context;
var offsetStyle = opt.offsetStyle || {}; var offsetStyle = opt.offsetStyle || {};
var level = opt.level || "error";
if (!this.storeBubbles[name]) { if (!this.storeBubbles[name]) {
this.storeBubbles[name] = {}; this.storeBubbles[name] = {};
} }
if (!this.storeBubbles[name]["top"]) { if (!this.storeBubbles[name]["top"]) {
this.storeBubbles[name]["top"] = this._createBubble("top", text); this.storeBubbles[name]["top"] = this._createBubble("top", text, level);
} }
BI.createWidget({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -18344,7 +18346,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
this.get(name).invisible(); this.get(name).invisible();
if (!$.isTopSpaceEnough(context, this.get(name))) { if (!$.isTopSpaceEnough(context, this.get(name))) {
if (!this.storeBubbles[name]["left"]) { 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({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -18359,7 +18361,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
this.get(name).invisible(); this.get(name).invisible();
if (!$.isLeftSpaceEnough(context, this.get(name))) { if (!$.isLeftSpaceEnough(context, this.get(name))) {
if (!this.storeBubbles[name]["right"]) { 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({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -18374,7 +18376,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
this.get(name).invisible(); this.get(name).invisible();
if (!$.isRightSpaceEnough(context, this.get(name))) { if (!$.isRightSpaceEnough(context, this.get(name))) {
if (!this.storeBubbles[name]["bottom"]) { if (!this.storeBubbles[name]["bottom"]) {
this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text); this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text, level);
} }
BI.createWidget({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -40748,11 +40750,15 @@ $.extend(BI, {
prompt: function (title, message, value, callback, min_width) { prompt: function (title, message, value, callback, min_width) {
// BI.Msg.prompt(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"); context = context || $("body");
var level = options.level || "normal";
var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
var toast = BI.createWidget({ var toast = BI.createWidget({
type: "bi.toast", type: "bi.toast",
level: level, level: level,
autoClose: autoClose,
text: message text: message
}); });
BI.createWidget({ BI.createWidget({
@ -40761,16 +40767,12 @@ $.extend(BI, {
items: [{ items: [{
el: toast, el: toast,
left: "50%", 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.element.css({"margin-left": -1 * toast.element.outerWidth() / 2});
toast.invisible();
toast.element.slideDown(500, function () { toast.element.slideDown(500, function () {
BI.delay(function () { autoClose && BI.delay(function () {
toast.element.slideUp(500, function () { toast.element.slideUp(500, function () {
toast.destroy(); toast.destroy();
}); });
@ -46346,6 +46348,7 @@ BI.Bubble = BI.inherit(BI.Tip, {
extraCls: "bi-bubble", extraCls: "bi-bubble",
direction: "top", direction: "top",
text: "", text: "",
level: "error",
height: 35 height: 35
}); });
}, },
@ -46365,10 +46368,11 @@ BI.Bubble = BI.inherit(BI.Tip, {
}, },
_createBubbleText: function () { _createBubbleText: function () {
var o = this.options;
return (this.text = BI.createWidget({ return (this.text = BI.createWidget({
type: "bi.label", type: "bi.label",
cls: "bubble-text", cls: "bubble-text" + (" bubble-" + o.level),
text: this.options.text, text: o.text,
hgap: 10, hgap: 10,
height: 30 height: 30
})); }));
@ -46449,20 +46453,19 @@ BI.shortcut("bi.bubble", BI.Bubble);/**
BI.Toast = BI.inherit(BI.Tip, { BI.Toast = BI.inherit(BI.Tip, {
_const: { _const: {
minWidth: 200, minWidth: 200,
hgap: 20 hgap: 10
}, },
_defaultConfig: function () { _defaultConfig: function () {
return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), { return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), {
extraCls: "bi-toast", extraCls: "bi-toast",
text: "", text: "",
level: "success", // success或warning level: "success" // success或warning
height: 30
}); });
}, },
_init: function () { _init: function () {
BI.Toast.superclass._init.apply(this, arguments); BI.Toast.superclass._init.apply(this, arguments);
var o = this.options; var self = this, o = this.options;
this.element.css({ this.element.css({
minWidth: this._const.minWidth + "px" 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}); 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({ this.text = BI.createWidget({
type: "bi.label", type: "bi.horizontal_adapt",
element: this, element: this,
text: o.text, items: items,
height: 30, vgap: 5,
hgap: this._const.hgap columnSize: columnSize
}); });
}, },
setWidth: function (width) {
this.element.width(width);
},
setText: function (text) { setText: function (text) {
this.text.setText(text); this.text.setText(text);
} }

12
dist/core.js vendored

@ -18243,10 +18243,11 @@ BI.BubblesController = BI.inherit(BI.Controller, {
}); });
}, },
_createBubble: function (direct, text, height) { _createBubble: function (direct, text, level, height) {
return BI.createWidget({ return BI.createWidget({
type: "bi.bubble", type: "bi.bubble",
text: text, text: text,
level: level,
height: height || 35, height: height || 35,
direction: direct direction: direct
}); });
@ -18325,11 +18326,12 @@ BI.BubblesController = BI.inherit(BI.Controller, {
opt || (opt = {}); opt || (opt = {});
var container = opt.container || context; var container = opt.container || context;
var offsetStyle = opt.offsetStyle || {}; var offsetStyle = opt.offsetStyle || {};
var level = opt.level || "error";
if (!this.storeBubbles[name]) { if (!this.storeBubbles[name]) {
this.storeBubbles[name] = {}; this.storeBubbles[name] = {};
} }
if (!this.storeBubbles[name]["top"]) { if (!this.storeBubbles[name]["top"]) {
this.storeBubbles[name]["top"] = this._createBubble("top", text); this.storeBubbles[name]["top"] = this._createBubble("top", text, level);
} }
BI.createWidget({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -18344,7 +18346,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
this.get(name).invisible(); this.get(name).invisible();
if (!$.isTopSpaceEnough(context, this.get(name))) { if (!$.isTopSpaceEnough(context, this.get(name))) {
if (!this.storeBubbles[name]["left"]) { 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({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -18359,7 +18361,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
this.get(name).invisible(); this.get(name).invisible();
if (!$.isLeftSpaceEnough(context, this.get(name))) { if (!$.isLeftSpaceEnough(context, this.get(name))) {
if (!this.storeBubbles[name]["right"]) { 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({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -18374,7 +18376,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
this.get(name).invisible(); this.get(name).invisible();
if (!$.isRightSpaceEnough(context, this.get(name))) { if (!$.isRightSpaceEnough(context, this.get(name))) {
if (!this.storeBubbles[name]["bottom"]) { if (!this.storeBubbles[name]["bottom"]) {
this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text); this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text, level);
} }
BI.createWidget({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",

62
dist/demo.js vendored

@ -1460,10 +1460,12 @@ BI.shortcut("demo.table_view", Demo.Func);Demo.Bubble = BI.inherit(BI.Widget, {
btns.push(_ref); btns.push(_ref);
}, },
type: "bi.button", type: "bi.button",
text: "bubble测试", text: "bubble测试(消息)",
height: 30, height: 30,
handler: function () { 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); btns.push(_ref);
}, },
type: "bi.button", type: "bi.button",
text: "bubble测试(居中显示)", text: "bubble测试(成功)",
height: 30, height: 30,
handler: function () { handler: function () {
BI.Bubbles.show("singleBubble2", "bubble测试", this, { 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); btns.push(_ref);
}, },
type: "bi.button", type: "bi.button",
text: "bubble测试(右边显示)", text: "bubble测试(错误)",
height: 30, height: 30,
handler: function () { handler: function () {
BI.Bubbles.show("singleBubble3", "bubble测试", this, { 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: { el: {
type: "bi.button", type: "bi.button",
text: "简单Toast测试", text: "简单Toast测试(success)",
height: 30, height: 30,
handler: function () { handler: function () {
BI.Msg.toast("这是一条简单的数据"); BI.Msg.toast("这是一条简单的数据");
@ -1560,29 +1578,45 @@ BI.shortcut("demo.title", Demo.Title);Demo.Toast = BI.inherit(BI.Widget, {
}, { }, {
el: { el: {
type: "bi.button", type: "bi.button",
text: "很长的Toast测试", text: "很长的Toast测试(normal)",
height: 30, height: 30,
handler: function () { handler: function () {
BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据"); BI.Msg.toast("这是一条很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的数据", {
level: "normal"
});
} }
} }
}, { }, {
el: { el: {
type: "bi.button", type: "bi.button",
text: "非常长的Toast测试", text: "非常长的Toast测试(warning)",
height: 30, height: 30,
handler: function () { handler: function () {
BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据"); BI.Msg.toast("这是一条非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长非常长的数据", {
level: "warning"
});
} }
} }
}, { }, {
el: { el: {
type: "bi.button", type: "bi.button",
text: "错误提示Toast测试", text: "错误提示Toast测试(error)",
level: "warning",
height: 30, height: 30,
handler: function () { 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
});
} }
} }
} }

50
dist/fineui.css vendored

@ -3230,9 +3230,23 @@ body .bi-button.button-ignore.disabled.clear:active,
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
}
.bi-bubble .bubble-error {
background: #ffecec; background: #ffecec;
color: #ff4949; 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 { .bi-tip {
position: fixed !important; position: fixed !important;
@ -3240,17 +3254,27 @@ body .bi-button.button-ignore.disabled.clear:active,
.bi-toast { .bi-toast {
font-size: 14px; font-size: 14px;
color: #ffffff;
max-width: 400px;
min-width: 150px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
} }
.bi-toast.toast-success { .bi-toast.toast-success {
background: #e1f4e7; background: #58cc7d;
color: #5cb75d;
} }
.bi-toast.toast-warning { .bi-toast.toast-warning {
background: #ffecec; background: #faaa39;
color: #ff4949; }
.bi-toast.toast-error {
background: #ff4949;
}
.bi-toast.toast-normal {
background: #3f8ce8;
}
.bi-toast .toast-icon {
font-size: 16px;
} }
.bi-tooltip { .bi-tooltip {
@ -3272,17 +3296,27 @@ body .bi-button.button-ignore.disabled.clear:active,
} }
.bi-toast { .bi-toast {
font-size: 14px; font-size: 14px;
color: #ffffff;
max-width: 400px;
min-width: 150px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
} }
.bi-toast.toast-success { .bi-toast.toast-success {
background: #e1f4e7; background: #58cc7d;
color: #5cb75d;
} }
.bi-toast.toast-warning { .bi-toast.toast-warning {
background: #ffecec; background: #faaa39;
color: #ff4949; }
.bi-toast.toast-error {
background: #ff4949;
}
.bi-toast.toast-normal {
background: #3f8ce8;
}
.bi-toast .toast-icon {
font-size: 16px;
} }
.bi-tooltip { .bi-tooltip {
max-width: 250px; max-width: 250px;

95
dist/fineui.js vendored

@ -18444,10 +18444,11 @@ BI.BubblesController = BI.inherit(BI.Controller, {
}); });
}, },
_createBubble: function (direct, text, height) { _createBubble: function (direct, text, level, height) {
return BI.createWidget({ return BI.createWidget({
type: "bi.bubble", type: "bi.bubble",
text: text, text: text,
level: level,
height: height || 35, height: height || 35,
direction: direct direction: direct
}); });
@ -18526,11 +18527,12 @@ BI.BubblesController = BI.inherit(BI.Controller, {
opt || (opt = {}); opt || (opt = {});
var container = opt.container || context; var container = opt.container || context;
var offsetStyle = opt.offsetStyle || {}; var offsetStyle = opt.offsetStyle || {};
var level = opt.level || "error";
if (!this.storeBubbles[name]) { if (!this.storeBubbles[name]) {
this.storeBubbles[name] = {}; this.storeBubbles[name] = {};
} }
if (!this.storeBubbles[name]["top"]) { if (!this.storeBubbles[name]["top"]) {
this.storeBubbles[name]["top"] = this._createBubble("top", text); this.storeBubbles[name]["top"] = this._createBubble("top", text, level);
} }
BI.createWidget({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -18545,7 +18547,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
this.get(name).invisible(); this.get(name).invisible();
if (!$.isTopSpaceEnough(context, this.get(name))) { if (!$.isTopSpaceEnough(context, this.get(name))) {
if (!this.storeBubbles[name]["left"]) { 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({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -18560,7 +18562,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
this.get(name).invisible(); this.get(name).invisible();
if (!$.isLeftSpaceEnough(context, this.get(name))) { if (!$.isLeftSpaceEnough(context, this.get(name))) {
if (!this.storeBubbles[name]["right"]) { 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({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -18575,7 +18577,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
this.get(name).invisible(); this.get(name).invisible();
if (!$.isRightSpaceEnough(context, this.get(name))) { if (!$.isRightSpaceEnough(context, this.get(name))) {
if (!this.storeBubbles[name]["bottom"]) { if (!this.storeBubbles[name]["bottom"]) {
this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text); this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text, level);
} }
BI.createWidget({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -42512,11 +42514,15 @@ $.extend(BI, {
prompt: function (title, message, value, callback, min_width) { prompt: function (title, message, value, callback, min_width) {
// BI.Msg.prompt(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"); context = context || $("body");
var level = options.level || "normal";
var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
var toast = BI.createWidget({ var toast = BI.createWidget({
type: "bi.toast", type: "bi.toast",
level: level, level: level,
autoClose: autoClose,
text: message text: message
}); });
BI.createWidget({ BI.createWidget({
@ -42525,16 +42531,12 @@ $.extend(BI, {
items: [{ items: [{
el: toast, el: toast,
left: "50%", 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.element.css({"margin-left": -1 * toast.element.outerWidth() / 2});
toast.invisible();
toast.element.slideDown(500, function () { toast.element.slideDown(500, function () {
BI.delay(function () { autoClose && BI.delay(function () {
toast.element.slideUp(500, function () { toast.element.slideUp(500, function () {
toast.destroy(); toast.destroy();
}); });
@ -48110,6 +48112,7 @@ BI.Bubble = BI.inherit(BI.Tip, {
extraCls: "bi-bubble", extraCls: "bi-bubble",
direction: "top", direction: "top",
text: "", text: "",
level: "error",
height: 35 height: 35
}); });
}, },
@ -48129,10 +48132,11 @@ BI.Bubble = BI.inherit(BI.Tip, {
}, },
_createBubbleText: function () { _createBubbleText: function () {
var o = this.options;
return (this.text = BI.createWidget({ return (this.text = BI.createWidget({
type: "bi.label", type: "bi.label",
cls: "bubble-text", cls: "bubble-text" + (" bubble-" + o.level),
text: this.options.text, text: o.text,
hgap: 10, hgap: 10,
height: 30 height: 30
})); }));
@ -48213,20 +48217,19 @@ BI.shortcut("bi.bubble", BI.Bubble);/**
BI.Toast = BI.inherit(BI.Tip, { BI.Toast = BI.inherit(BI.Tip, {
_const: { _const: {
minWidth: 200, minWidth: 200,
hgap: 20 hgap: 10
}, },
_defaultConfig: function () { _defaultConfig: function () {
return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), { return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), {
extraCls: "bi-toast", extraCls: "bi-toast",
text: "", text: "",
level: "success", // success或warning level: "success" // success或warning
height: 30
}); });
}, },
_init: function () { _init: function () {
BI.Toast.superclass._init.apply(this, arguments); BI.Toast.superclass._init.apply(this, arguments);
var o = this.options; var self = this, o = this.options;
this.element.css({ this.element.css({
minWidth: this._const.minWidth + "px" 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}); 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({ this.text = BI.createWidget({
type: "bi.label", type: "bi.horizontal_adapt",
element: this, element: this,
text: o.text, items: items,
height: 30, vgap: 5,
hgap: this._const.hgap columnSize: columnSize
}); });
}, },
setWidth: function (width) {
this.element.width(width);
},
setText: function (text) { setText: function (text) {
this.text.setText(text); this.text.setText(text);
} }

14
src/base/foundation/message.js

@ -18,11 +18,15 @@ $.extend(BI, {
prompt: function (title, message, value, callback, min_width) { prompt: function (title, message, value, callback, min_width) {
// BI.Msg.prompt(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"); context = context || $("body");
var level = options.level || "normal";
var autoClose = BI.isNull(options.autoClose) ? true : options.autoClose;
var toast = BI.createWidget({ var toast = BI.createWidget({
type: "bi.toast", type: "bi.toast",
level: level, level: level,
autoClose: autoClose,
text: message text: message
}); });
BI.createWidget({ BI.createWidget({
@ -31,16 +35,12 @@ $.extend(BI, {
items: [{ items: [{
el: toast, el: toast,
left: "50%", 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.element.css({"margin-left": -1 * toast.element.outerWidth() / 2});
toast.invisible();
toast.element.slideDown(500, function () { toast.element.slideDown(500, function () {
BI.delay(function () { autoClose && BI.delay(function () {
toast.element.slideUp(500, function () { toast.element.slideUp(500, function () {
toast.destroy(); toast.destroy();
}); });

6
src/base/single/tip/tip.bubble.js

@ -11,6 +11,7 @@ BI.Bubble = BI.inherit(BI.Tip, {
extraCls: "bi-bubble", extraCls: "bi-bubble",
direction: "top", direction: "top",
text: "", text: "",
level: "error",
height: 35 height: 35
}); });
}, },
@ -30,10 +31,11 @@ BI.Bubble = BI.inherit(BI.Tip, {
}, },
_createBubbleText: function () { _createBubbleText: function () {
var o = this.options;
return (this.text = BI.createWidget({ return (this.text = BI.createWidget({
type: "bi.label", type: "bi.label",
cls: "bubble-text", cls: "bubble-text" + (" bubble-" + o.level),
text: this.options.text, text: o.text,
hgap: 10, hgap: 10,
height: 30 height: 30
})); }));

63
src/base/single/tip/tip.toast.js

@ -8,20 +8,19 @@
BI.Toast = BI.inherit(BI.Tip, { BI.Toast = BI.inherit(BI.Tip, {
_const: { _const: {
minWidth: 200, minWidth: 200,
hgap: 20 hgap: 10
}, },
_defaultConfig: function () { _defaultConfig: function () {
return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), { return BI.extend(BI.Toast.superclass._defaultConfig.apply(this, arguments), {
extraCls: "bi-toast", extraCls: "bi-toast",
text: "", text: "",
level: "success", // success或warning level: "success" // success或warning
height: 30
}); });
}, },
_init: function () { _init: function () {
BI.Toast.superclass._init.apply(this, arguments); BI.Toast.superclass._init.apply(this, arguments);
var o = this.options; var self = this, o = this.options;
this.element.css({ this.element.css({
minWidth: this._const.minWidth + "px" 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}); 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({ this.text = BI.createWidget({
type: "bi.label", type: "bi.horizontal_adapt",
element: this, element: this,
text: o.text, items: items,
height: 30, vgap: 5,
hgap: this._const.hgap columnSize: columnSize
}); });
}, },
setWidth: function (width) {
this.element.width(width);
},
setText: function (text) { setText: function (text) {
this.text.setText(text); this.text.setText(text);
} }

12
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({ return BI.createWidget({
type: "bi.bubble", type: "bi.bubble",
text: text, text: text,
level: level,
height: height || 35, height: height || 35,
direction: direct direction: direct
}); });
@ -110,11 +111,12 @@ BI.BubblesController = BI.inherit(BI.Controller, {
opt || (opt = {}); opt || (opt = {});
var container = opt.container || context; var container = opt.container || context;
var offsetStyle = opt.offsetStyle || {}; var offsetStyle = opt.offsetStyle || {};
var level = opt.level || "error";
if (!this.storeBubbles[name]) { if (!this.storeBubbles[name]) {
this.storeBubbles[name] = {}; this.storeBubbles[name] = {};
} }
if (!this.storeBubbles[name]["top"]) { if (!this.storeBubbles[name]["top"]) {
this.storeBubbles[name]["top"] = this._createBubble("top", text); this.storeBubbles[name]["top"] = this._createBubble("top", text, level);
} }
BI.createWidget({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -129,7 +131,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
this.get(name).invisible(); this.get(name).invisible();
if (!$.isTopSpaceEnough(context, this.get(name))) { if (!$.isTopSpaceEnough(context, this.get(name))) {
if (!this.storeBubbles[name]["left"]) { 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({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -144,7 +146,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
this.get(name).invisible(); this.get(name).invisible();
if (!$.isLeftSpaceEnough(context, this.get(name))) { if (!$.isLeftSpaceEnough(context, this.get(name))) {
if (!this.storeBubbles[name]["right"]) { 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({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",
@ -159,7 +161,7 @@ BI.BubblesController = BI.inherit(BI.Controller, {
this.get(name).invisible(); this.get(name).invisible();
if (!$.isRightSpaceEnough(context, this.get(name))) { if (!$.isRightSpaceEnough(context, this.get(name))) {
if (!this.storeBubbles[name]["bottom"]) { if (!this.storeBubbles[name]["bottom"]) {
this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text); this.storeBubbles[name]["bottom"] = this._createBubble("bottom", text, level);
} }
BI.createWidget({ BI.createWidget({
type: "bi.absolute", type: "bi.absolute",

32
src/css/base/single/tip/tip.css

@ -5,9 +5,23 @@
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
}
.bi-bubble .bubble-error {
background: #ffecec; background: #ffecec;
color: #ff4949; 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 { .bi-tip {
position: fixed !important; position: fixed !important;
@ -15,17 +29,27 @@
.bi-toast { .bi-toast {
font-size: 14px; font-size: 14px;
color: #ffffff;
max-width: 400px;
min-width: 150px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
} }
.bi-toast.toast-success { .bi-toast.toast-success {
background: #e1f4e7; background: #58cc7d;
color: #5cb75d;
} }
.bi-toast.toast-warning { .bi-toast.toast-warning {
background: #ffecec; background: #faaa39;
color: #ff4949; }
.bi-toast.toast-error {
background: #ff4949;
}
.bi-toast.toast-normal {
background: #3f8ce8;
}
.bi-toast .toast-icon {
font-size: 16px;
} }
.bi-tooltip { .bi-tooltip {

18
src/css/base/single/tip/tip.toast.css

@ -1,14 +1,24 @@
.bi-toast { .bi-toast {
font-size: 14px; font-size: 14px;
color: #ffffff;
max-width: 400px;
min-width: 150px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
} }
.bi-toast.toast-success { .bi-toast.toast-success {
background: #e1f4e7; background: #58cc7d;
color: #5cb75d;
} }
.bi-toast.toast-warning { .bi-toast.toast-warning {
background: #ffecec; background: #faaa39;
color: #ff4949; }
.bi-toast.toast-error {
background: #ff4949;
}
.bi-toast.toast-normal {
background: #3f8ce8;
}
.bi-toast .toast-icon {
font-size: 16px;
} }

18
src/less/base/single/tip/tip.bubble.less

@ -4,7 +4,25 @@
font-size: @font-size-14; font-size: @font-size-14;
& .bubble-text{ & .bubble-text{
.border-radius(2px); .border-radius(2px);
}
& .bubble-error{
background: @color-bi-background-light-failure; background: @color-bi-background-light-failure;
color: @color-bi-text-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;
}
} }

18
src/less/base/single/tip/tip.toast.less

@ -2,13 +2,23 @@
.bi-toast{ .bi-toast{
font-size: @font-size-14; font-size: @font-size-14;
color: @color-bi-text;
max-width: 400px;
min-width: 150px;
.border-radius(2px); .border-radius(2px);
&.toast-success{ &.toast-success{
background: @color-bi-background-light-success; background: @color-bi-background-success;
color: @color-bi-text-success;
} }
&.toast-warning{ &.toast-warning{
background: @color-bi-background-light-failure; background: @color-bi-background-warning;
color: @color-bi-text-failure; }
&.toast-error{
background: @color-bi-background-failure;
}
&.toast-normal{
background: @color-bi-background-highlight;
}
& .toast-icon{
font-size: 16px;
} }
} }

2
src/less/lib/colors.less

@ -54,6 +54,8 @@
@color-bi-background-light-failure: @background-color-light-negative; @color-bi-background-light-failure: @background-color-light-negative;
//警示背景色 //警示背景色
@color-bi-background-warning: @background-color-warning; @color-bi-background-warning: @background-color-warning;
//警示背景色(浅)
@color-bi-background-light-warning: @background-color-light-warning;
//背景提亮色 //背景提亮色
@color-bi-background-highlight: @background-color-highlight; @color-bi-background-highlight: @background-color-highlight;
//背景提亮色(浅) //背景提亮色(浅)

1
src/less/lib/constant.less

@ -43,6 +43,7 @@
@background-color-negative: #ff4949; @background-color-negative: #ff4949;
@background-color-light-negative: #ffecec; @background-color-light-negative: #ffecec;
@background-color-light-warning: #feeed7;
@background-color-warning: #faaa39; @background-color-warning: #faaa39;
@background-color-dark-success: #58cc7d; @background-color-dark-success: #58cc7d;

Loading…
Cancel
Save