Browse Source

Merge pull request #246 in FUI/fineui from ~WINDY/fui:master to master

* commit 'd16da7f859bfedb57eb5dedec24359d12467a654':
  update
  tooltip,bubble, toast 新样式和手动关闭的toast
es6
guy 7 years ago
parent
commit
62c580ed89
  1. 30
      demo/js/base/tip/demo.bubble.js
  2. 32
      demo/js/base/tip/demo.toast.js
  3. 86
      dist/base.css
  4. 81
      dist/base.js
  5. 86
      dist/bundle.css
  6. 93
      dist/bundle.js
  7. 12
      dist/core.js
  8. 62
      dist/demo.js
  9. 86
      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. 14
      src/css/base/single/tip/tip.bubble.css
  16. 43
      src/css/base/single/tip/tip.css
  17. 18
      src/css/base/single/tip/tip.toast.css
  18. 11
      src/css/base/single/tip/tip.tooltip.css
  19. 18
      src/less/base/single/tip/tip.bubble.less
  20. 18
      src/less/base/single/tip/tip.toast.less
  21. 6
      src/less/base/single/tip/tip.tooltip.less
  22. 4
      src/less/lib/colors.less
  23. 3
      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
});
}
}
}

86
dist/base.css vendored

@ -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;
}
@ -1183,9 +1197,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 +1221,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 {
@ -1212,30 +1250,39 @@ 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;
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;
@ -1243,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;

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

86
dist/bundle.css vendored

@ -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;
}
@ -3230,9 +3244,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 +3268,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 {
@ -3259,30 +3297,39 @@ 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;
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;
@ -3290,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;

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

86
dist/fineui.css vendored

@ -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;
}
@ -3230,9 +3244,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 +3268,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 {
@ -3259,30 +3297,39 @@ 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;
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;
@ -3290,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;

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",

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

43
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 {
@ -34,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;
}

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

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

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

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

4
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;
//背景提亮色(浅)
@ -84,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;

3
src/less/lib/constant.less

@ -43,11 +43,12 @@
@background-color-negative: #ff4949;
@background-color-light-negative: #ffecec;
@background-color-light-warning: #feeed7;
@background-color-warning: #faaa39;
@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;

Loading…
Cancel
Save