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. 81
      dist/base.js
  5. 50
      dist/bundle.css
  6. 93
      dist/bundle.js
  7. 12
      dist/core.js
  8. 62
      dist/demo.js
  9. 50
      dist/fineui.css
  10. 93
      dist/fineui.js
  11. 14
      src/base/foundation/message.js
  12. 6
      src/base/single/tip/tip.bubble.js
  13. 61
      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);
},
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"
});
}
}

32
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
});
}
}
}

50
dist/base.css vendored

@ -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;

81
dist/base.js vendored

@ -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,17 +20425,57 @@ BI.Toast = BI.inherit(BI.Tip, {
};
this.element.bind({click: fn, mousedown: fn, mouseup: fn, mouseover: fn, mouseenter: fn, mouseleave: fn, mousemove: fn});
this.text = BI.createWidget({
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",
element: this,
whiteSpace: "normal",
text: o.text,
height: 30,
hgap: this._const.hgap
});
textAlign: "left"
},
rgap: o.autoClose ? this._const.hgap : 0
}];
setWidth: function (width) {
this.element.width(width);
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.horizontal_adapt",
element: this,
items: items,
vgap: 5,
columnSize: columnSize
});
},
setText: function (text) {

50
dist/bundle.css vendored

@ -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;

93
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({
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,17 +46477,57 @@ BI.Toast = BI.inherit(BI.Tip, {
};
this.element.bind({click: fn, mousedown: fn, mouseup: fn, mouseover: fn, mouseenter: fn, mouseleave: fn, mousemove: fn});
this.text = BI.createWidget({
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",
element: this,
whiteSpace: "normal",
text: o.text,
height: 30,
hgap: this._const.hgap
});
textAlign: "left"
},
rgap: o.autoClose ? this._const.hgap : 0
}];
setWidth: function (width) {
this.element.width(width);
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.horizontal_adapt",
element: this,
items: items,
vgap: 5,
columnSize: columnSize
});
},
setText: function (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({
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",

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);
},
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
});
}
}
}

50
dist/fineui.css vendored

@ -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;

93
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({
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,17 +48241,57 @@ BI.Toast = BI.inherit(BI.Tip, {
};
this.element.bind({click: fn, mousedown: fn, mouseup: fn, mouseover: fn, mouseenter: fn, mouseleave: fn, mousemove: fn});
this.text = BI.createWidget({
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",
element: this,
whiteSpace: "normal",
text: o.text,
height: 30,
hgap: this._const.hgap
});
textAlign: "left"
},
rgap: o.autoClose ? this._const.hgap : 0
}];
setWidth: function (width) {
this.element.width(width);
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.horizontal_adapt",
element: this,
items: items,
vgap: 5,
columnSize: columnSize
});
},
setText: function (text) {

14
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();
});

6
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
}));

61
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,17 +32,57 @@ BI.Toast = BI.inherit(BI.Tip, {
};
this.element.bind({click: fn, mousedown: fn, mouseup: fn, mouseover: fn, mouseenter: fn, mouseleave: fn, mousemove: fn});
this.text = BI.createWidget({
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",
element: this,
whiteSpace: "normal",
text: o.text,
height: 30,
hgap: this._const.hgap
});
textAlign: "left"
},
rgap: o.autoClose ? this._const.hgap : 0
}];
var columnSize = [36, ""];
setWidth: function (width) {
this.element.width(width);
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.horizontal_adapt",
element: this,
items: items,
vgap: 5,
columnSize: columnSize
});
},
setText: function (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({
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",

32
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 {

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

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

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

2
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;
//背景提亮色(浅)

1
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;

Loading…
Cancel
Save