Browse Source

bubblecombo去蓝线画三角

es6
windy 7 years ago
parent
commit
957d22d5fd
  1. 61
      demo/js/case/combo/demo.bubble_combo.js
  2. 226
      dist/base.css
  3. 226
      dist/bundle.css
  4. 10
      dist/bundle.js
  5. 10
      dist/case.js
  6. 61
      dist/demo.js
  7. 226
      dist/fineui.css
  8. 10
      dist/fineui.js
  9. 10
      src/case/combo/bubblecombo/combo.bubble.js
  10. 113
      src/css/base/combo/combo.bubble.css
  11. 113
      src/css/base/combo/combo.css
  12. 13
      src/less/base/combo/combo.bubble.less
  13. 72
      src/less/visual.less

61
demo/js/case/combo/demo.bubble_combo.js

@ -49,17 +49,70 @@ Demo.Func = BI.inherit(BI.Widget, {
}
}]
});
var combo3 = BI.createWidget({
type: "bi.bubble_combo",
el: {
type: "bi.button",
text: "测试",
height: 25
},
popup: {
type: "bi.text_bubble_bar_popup_view",
text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
ref: function () {
self.popup = this;
}
},
listeners: [{
eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW,
action: function () {
self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字");
}
}]
});
var combo4 = BI.createWidget({
type: "bi.bubble_combo",
el: {
type: "bi.button",
text: "测试",
height: 25
},
popup: {
type: "bi.text_bubble_bar_popup_view",
text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
ref: function () {
self.popup = this;
}
},
listeners: [{
eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW,
action: function () {
self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字");
}
}]
});
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: combo1,
left: 100,
top: 100
left: 10,
top: 10
}, {
el: combo2,
left: 100,
bottom: 100
left: 10,
bottom: 10
}, {
el: combo3,
right: 10,
bottom: 10
}, {
el: combo4,
right: 10,
top: 10
}]
});
}

226
dist/base.css vendored

@ -73,73 +73,219 @@
}
.bi-bubble-combo .button-combo-triangle-wrapper {
position: fixed !important;
z-index: 10000000;
}
.bi-bubble-combo .bubble-combo-triangle-left {
z-index: 1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 6px solid #3f8ce8;
border-bottom: 6px solid transparent;
position: absolute;
width: 16px;
height: 10px;
border-bottom: 1px solid #f5f5f5;
}
.bi-bubble-combo .bubble-combo-triangle-left:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-left:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-right {
z-index: 1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 6px solid #3f8ce8;
border-bottom: 6px solid transparent;
position: absolute;
width: 16px;
height: 6px;
border-bottom: 1px solid #f5f5f5;
}
.bi-bubble-combo .bubble-combo-triangle-right:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-right:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-top {
z-index: 1;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #3f8ce8;
position: absolute;
width: 16px;
height: 10px;
border-top: 1px solid #ffffff;
}
.bi-bubble-combo .bubble-combo-triangle-top:after {
position: absolute;
right: 1px;
top: 0px;
border-top: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-top:before {
position: absolute;
border-top: 7px solid #cccccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-bottom {
z-index: 1;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #3f8ce8;
position: absolute;
width: 16px;
height: 5px;
border-bottom: 1px solid #ffffff;
}
.bi-bubble-combo .bubble-combo-triangle-bottom:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 7px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-bottom:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .button-combo-triangle-wrapper {
position: fixed !important;
z-index: 10000000;
}
.bi-bubble-combo .bubble-combo-triangle-left {
z-index: 1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 6px solid #3f8ce8;
border-bottom: 6px solid transparent;
position: absolute;
width: 16px;
height: 10px;
border-bottom: 1px solid #f5f5f5;
}
.bi-bubble-combo .bubble-combo-triangle-left:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-left:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-right {
z-index: 1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 6px solid #3f8ce8;
border-bottom: 6px solid transparent;
position: absolute;
width: 16px;
height: 6px;
border-bottom: 1px solid #f5f5f5;
}
.bi-bubble-combo .bubble-combo-triangle-right:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-right:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-top {
z-index: 1;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #3f8ce8;
position: absolute;
width: 16px;
height: 10px;
border-top: 1px solid #ffffff;
}
.bi-bubble-combo .bubble-combo-triangle-top:after {
position: absolute;
right: 1px;
top: 0px;
border-top: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-top:before {
position: absolute;
border-top: 7px solid #cccccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-bottom {
z-index: 1;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #3f8ce8;
position: absolute;
width: 16px;
height: 5px;
border-bottom: 1px solid #ffffff;
}
.bi-bubble-combo .bubble-combo-triangle-bottom:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 7px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-bottom:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-combo.bi-combo-popup {

226
dist/bundle.css vendored

@ -2120,73 +2120,219 @@ textarea {
}
.bi-bubble-combo .button-combo-triangle-wrapper {
position: fixed !important;
z-index: 10000000;
}
.bi-bubble-combo .bubble-combo-triangle-left {
z-index: 1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 6px solid #3f8ce8;
border-bottom: 6px solid transparent;
position: absolute;
width: 16px;
height: 10px;
border-bottom: 1px solid #f5f5f5;
}
.bi-bubble-combo .bubble-combo-triangle-left:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-left:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-right {
z-index: 1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 6px solid #3f8ce8;
border-bottom: 6px solid transparent;
position: absolute;
width: 16px;
height: 6px;
border-bottom: 1px solid #f5f5f5;
}
.bi-bubble-combo .bubble-combo-triangle-right:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-right:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-top {
z-index: 1;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #3f8ce8;
position: absolute;
width: 16px;
height: 10px;
border-top: 1px solid #ffffff;
}
.bi-bubble-combo .bubble-combo-triangle-top:after {
position: absolute;
right: 1px;
top: 0px;
border-top: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-top:before {
position: absolute;
border-top: 7px solid #cccccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-bottom {
z-index: 1;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #3f8ce8;
position: absolute;
width: 16px;
height: 5px;
border-bottom: 1px solid #ffffff;
}
.bi-bubble-combo .bubble-combo-triangle-bottom:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 7px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-bottom:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .button-combo-triangle-wrapper {
position: fixed !important;
z-index: 10000000;
}
.bi-bubble-combo .bubble-combo-triangle-left {
z-index: 1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 6px solid #3f8ce8;
border-bottom: 6px solid transparent;
position: absolute;
width: 16px;
height: 10px;
border-bottom: 1px solid #f5f5f5;
}
.bi-bubble-combo .bubble-combo-triangle-left:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-left:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-right {
z-index: 1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 6px solid #3f8ce8;
border-bottom: 6px solid transparent;
position: absolute;
width: 16px;
height: 6px;
border-bottom: 1px solid #f5f5f5;
}
.bi-bubble-combo .bubble-combo-triangle-right:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-right:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-top {
z-index: 1;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #3f8ce8;
position: absolute;
width: 16px;
height: 10px;
border-top: 1px solid #ffffff;
}
.bi-bubble-combo .bubble-combo-triangle-top:after {
position: absolute;
right: 1px;
top: 0px;
border-top: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-top:before {
position: absolute;
border-top: 7px solid #cccccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-bottom {
z-index: 1;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #3f8ce8;
position: absolute;
width: 16px;
height: 5px;
border-bottom: 1px solid #ffffff;
}
.bi-bubble-combo .bubble-combo-triangle-bottom:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 7px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-bottom:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-combo.bi-combo-popup {

10
dist/bundle.js vendored

@ -67187,22 +67187,22 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
case "left,top":
case "left,bottom":
this._createLeftTriangle();
this.combo.getView().showLine("right");
//this.combo.getView().showLine("right");
break;
case "right,top":
case "right,bottom":
this._createRightTriangle();
this.combo.getView().showLine("left");
//this.combo.getView().showLine("left");
break;
case "top,left":
case "top,right":
this._createTopTriangle();
this.combo.getView().showLine("bottom");
//this.combo.getView().showLine("bottom");
break;
case "bottom,left":
case "bottom,right":
this._createBottomTriangle();
this.combo.getView().showLine("top");
//this.combo.getView().showLine("top");
break;
}
},
@ -67210,7 +67210,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
_hideTriangle: function () {
this.triangle && this.triangle.destroy();
this.triangle = null;
this.combo.getView() && this.combo.getView().hideLine();
//this.combo.getView() && this.combo.getView().hideLine();
},
hideView: function () {

10
dist/case.js vendored

@ -4908,22 +4908,22 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
case "left,top":
case "left,bottom":
this._createLeftTriangle();
this.combo.getView().showLine("right");
//this.combo.getView().showLine("right");
break;
case "right,top":
case "right,bottom":
this._createRightTriangle();
this.combo.getView().showLine("left");
//this.combo.getView().showLine("left");
break;
case "top,left":
case "top,right":
this._createTopTriangle();
this.combo.getView().showLine("bottom");
//this.combo.getView().showLine("bottom");
break;
case "bottom,left":
case "bottom,right":
this._createBottomTriangle();
this.combo.getView().showLine("top");
//this.combo.getView().showLine("top");
break;
}
},
@ -4931,7 +4931,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
_hideTriangle: function () {
this.triangle && this.triangle.destroy();
this.triangle = null;
this.combo.getView() && this.combo.getView().hideLine();
//this.combo.getView() && this.combo.getView().hideLine();
},
hideView: function () {

61
dist/demo.js vendored

@ -1823,17 +1823,70 @@ BI.shortcut("demo.tree_view", Demo.Func);Demo.Func = BI.inherit(BI.Widget, {
}
}]
});
var combo3 = BI.createWidget({
type: "bi.bubble_combo",
el: {
type: "bi.button",
text: "测试",
height: 25
},
popup: {
type: "bi.text_bubble_bar_popup_view",
text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
ref: function () {
self.popup = this;
}
},
listeners: [{
eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW,
action: function () {
self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字");
}
}]
});
var combo4 = BI.createWidget({
type: "bi.bubble_combo",
el: {
type: "bi.button",
text: "测试",
height: 25
},
popup: {
type: "bi.text_bubble_bar_popup_view",
text: "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字",
ref: function () {
self.popup = this;
}
},
listeners: [{
eventName: BI.BubbleCombo.EVENT_BEFORE_POPUPVIEW,
action: function () {
self.popup.populate((count++) % 2 === 1 ? "我的文字变少了" : "我有很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字很多文字");
}
}]
});
BI.createWidget({
type: "bi.absolute",
element: this,
items: [{
el: combo1,
left: 100,
top: 100
left: 10,
top: 10
}, {
el: combo2,
left: 100,
bottom: 100
left: 10,
bottom: 10
}, {
el: combo3,
right: 10,
bottom: 10
}, {
el: combo4,
right: 10,
top: 10
}]
});
}

226
dist/fineui.css vendored

@ -2120,73 +2120,219 @@ textarea {
}
.bi-bubble-combo .button-combo-triangle-wrapper {
position: fixed !important;
z-index: 10000000;
}
.bi-bubble-combo .bubble-combo-triangle-left {
z-index: 1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 6px solid #3f8ce8;
border-bottom: 6px solid transparent;
position: absolute;
width: 16px;
height: 10px;
border-bottom: 1px solid #f5f5f5;
}
.bi-bubble-combo .bubble-combo-triangle-left:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-left:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-right {
z-index: 1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 6px solid #3f8ce8;
border-bottom: 6px solid transparent;
position: absolute;
width: 16px;
height: 6px;
border-bottom: 1px solid #f5f5f5;
}
.bi-bubble-combo .bubble-combo-triangle-right:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-right:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-top {
z-index: 1;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #3f8ce8;
position: absolute;
width: 16px;
height: 10px;
border-top: 1px solid #ffffff;
}
.bi-bubble-combo .bubble-combo-triangle-top:after {
position: absolute;
right: 1px;
top: 0px;
border-top: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-top:before {
position: absolute;
border-top: 7px solid #cccccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-bottom {
z-index: 1;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #3f8ce8;
position: absolute;
width: 16px;
height: 5px;
border-bottom: 1px solid #ffffff;
}
.bi-bubble-combo .bubble-combo-triangle-bottom:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 7px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-bottom:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .button-combo-triangle-wrapper {
position: fixed !important;
z-index: 10000000;
}
.bi-bubble-combo .bubble-combo-triangle-left {
z-index: 1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 6px solid #3f8ce8;
border-bottom: 6px solid transparent;
position: absolute;
width: 16px;
height: 10px;
border-bottom: 1px solid #f5f5f5;
}
.bi-bubble-combo .bubble-combo-triangle-left:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-left:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-right {
z-index: 1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 6px solid #3f8ce8;
border-bottom: 6px solid transparent;
position: absolute;
width: 16px;
height: 6px;
border-bottom: 1px solid #f5f5f5;
}
.bi-bubble-combo .bubble-combo-triangle-right:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-right:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-top {
z-index: 1;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #3f8ce8;
position: absolute;
width: 16px;
height: 10px;
border-top: 1px solid #ffffff;
}
.bi-bubble-combo .bubble-combo-triangle-top:after {
position: absolute;
right: 1px;
top: 0px;
border-top: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-top:before {
position: absolute;
border-top: 7px solid #cccccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-bottom {
z-index: 1;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #3f8ce8;
position: absolute;
width: 16px;
height: 5px;
border-bottom: 1px solid #ffffff;
}
.bi-bubble-combo .bubble-combo-triangle-bottom:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 7px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-bottom:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-combo.bi-combo-popup {

10
dist/fineui.js vendored

@ -68951,22 +68951,22 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
case "left,top":
case "left,bottom":
this._createLeftTriangle();
this.combo.getView().showLine("right");
//this.combo.getView().showLine("right");
break;
case "right,top":
case "right,bottom":
this._createRightTriangle();
this.combo.getView().showLine("left");
//this.combo.getView().showLine("left");
break;
case "top,left":
case "top,right":
this._createTopTriangle();
this.combo.getView().showLine("bottom");
//this.combo.getView().showLine("bottom");
break;
case "bottom,left":
case "bottom,right":
this._createBottomTriangle();
this.combo.getView().showLine("top");
//this.combo.getView().showLine("top");
break;
}
},
@ -68974,7 +68974,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
_hideTriangle: function () {
this.triangle && this.triangle.destroy();
this.triangle = null;
this.combo.getView() && this.combo.getView().hideLine();
//this.combo.getView() && this.combo.getView().hideLine();
},
hideView: function () {

10
src/case/combo/bubblecombo/combo.bubble.js

@ -168,22 +168,22 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
case "left,top":
case "left,bottom":
this._createLeftTriangle();
this.combo.getView().showLine("right");
//this.combo.getView().showLine("right");
break;
case "right,top":
case "right,bottom":
this._createRightTriangle();
this.combo.getView().showLine("left");
//this.combo.getView().showLine("left");
break;
case "top,left":
case "top,right":
this._createTopTriangle();
this.combo.getView().showLine("bottom");
//this.combo.getView().showLine("bottom");
break;
case "bottom,left":
case "bottom,right":
this._createBottomTriangle();
this.combo.getView().showLine("top");
//this.combo.getView().showLine("top");
break;
}
},
@ -191,7 +191,7 @@ BI.BubbleCombo = BI.inherit(BI.Widget, {
_hideTriangle: function () {
this.triangle && this.triangle.destroy();
this.triangle = null;
this.combo.getView() && this.combo.getView().hideLine();
//this.combo.getView() && this.combo.getView().hideLine();
},
hideView: function () {

113
src/css/base/combo/combo.bubble.css

@ -1,35 +1,108 @@
.bi-bubble-combo .button-combo-triangle-wrapper {
position: fixed !important;
z-index: 10000000;
}
.bi-bubble-combo .bubble-combo-triangle-left {
z-index: 1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 6px solid #3f8ce8;
border-bottom: 6px solid transparent;
position: absolute;
width: 16px;
height: 10px;
border-bottom: 1px solid #f5f5f5;
}
.bi-bubble-combo .bubble-combo-triangle-left:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-left:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-right {
z-index: 1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 6px solid #3f8ce8;
border-bottom: 6px solid transparent;
position: absolute;
width: 16px;
height: 6px;
border-bottom: 1px solid #f5f5f5;
}
.bi-bubble-combo .bubble-combo-triangle-right:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-right:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-top {
z-index: 1;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #3f8ce8;
position: absolute;
width: 16px;
height: 10px;
border-top: 1px solid #ffffff;
}
.bi-bubble-combo .bubble-combo-triangle-top:after {
position: absolute;
right: 1px;
top: 0px;
border-top: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-top:before {
position: absolute;
border-top: 7px solid #cccccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-bottom {
z-index: 1;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #3f8ce8;
position: absolute;
width: 16px;
height: 5px;
border-bottom: 1px solid #ffffff;
}
.bi-bubble-combo .bubble-combo-triangle-bottom:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 7px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-bottom:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}

113
src/css/base/combo/combo.css

@ -1,37 +1,110 @@
.bi-bubble-combo .button-combo-triangle-wrapper {
position: fixed !important;
z-index: 10000000;
}
.bi-bubble-combo .bubble-combo-triangle-left {
z-index: 1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 6px solid #3f8ce8;
border-bottom: 6px solid transparent;
position: absolute;
width: 16px;
height: 10px;
border-bottom: 1px solid #f5f5f5;
}
.bi-bubble-combo .bubble-combo-triangle-left:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-left:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-right {
z-index: 1;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 6px solid #3f8ce8;
border-bottom: 6px solid transparent;
position: absolute;
width: 16px;
height: 6px;
border-bottom: 1px solid #f5f5f5;
}
.bi-bubble-combo .bubble-combo-triangle-right:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-right:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-top {
z-index: 1;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #3f8ce8;
position: absolute;
width: 16px;
height: 10px;
border-top: 1px solid #ffffff;
}
.bi-bubble-combo .bubble-combo-triangle-top:after {
position: absolute;
right: 1px;
top: 0px;
border-top: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-top:before {
position: absolute;
border-top: 7px solid #cccccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-bottom {
z-index: 1;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #3f8ce8;
position: absolute;
width: 16px;
height: 5px;
border-bottom: 1px solid #ffffff;
}
.bi-bubble-combo .bubble-combo-triangle-bottom:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 7px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
.bi-bubble-combo .bubble-combo-triangle-bottom:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
.bi-combo.bi-combo-popup {

13
src/less/base/combo/combo.bubble.less

@ -3,21 +3,26 @@
.bi-bubble-combo {
& .button-combo-triangle-wrapper {
position: fixed !important;
.z-index-layer(@zIndex-popup);
}
& .bubble-combo-triangle-left {
z-index: 1;
.solid-triangle-right(@color-bi-background-highlight);
.triangle-right();
//.solid-triangle-right(@color-bi-background-highlight);
}
& .bubble-combo-triangle-right {
z-index: 1;
.solid-triangle-left(@color-bi-background-highlight);
.triangle-left();
//.solid-triangle-left(@color-bi-background-highlight);
}
& .bubble-combo-triangle-top {
z-index: 1;
.solid-triangle-down(@color-bi-background-highlight);
.triangle-bottom();
//.solid-triangle-down(@color-bi-background-highlight);
}
& .bubble-combo-triangle-bottom {
z-index: 1;
.solid-triangle-up(@color-bi-background-highlight);
.triangle-top();
//.solid-triangle-up(@color-bi-background-highlight);
}
}

72
src/less/visual.less

@ -176,15 +176,15 @@
.triangle-top() {
position: absolute;
width: 16px;
height: 10px;
border-bottom: 1px solid #f5f5f5;
height: 5px;
border-bottom: 1px solid #ffffff;
&:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-bottom: 7px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
@ -194,7 +194,7 @@
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #f5f5f5;
border-bottom: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
@ -205,23 +205,79 @@
position: absolute;
width: 16px;
height: 10px;
border-top: 1px solid #f5f5f5;
border-top: 1px solid #ffffff;
&:after {
position: absolute;
right: 1px;
top: -1px;
border-top: 9px solid #f5f5f5;
top: 0px;
border-top: 6px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
&:before {
position: absolute;
border-top: 10px solid #cccccc;
border-top: 7px solid #cccccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
}
.triangle-left() {
position: absolute;
width: 16px;
height: 6px;
border-bottom: 1px solid #f5f5f5;
&:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
&:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
}
.triangle-right() {
position: absolute;
width: 16px;
height: 10px;
border-bottom: 1px solid #f5f5f5;
&:before {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
border-bottom: 10px solid #ccc;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
content: "";
}
&:after {
position: absolute;
right: 1px;
top: 1px;
bottom: 0px;
border-bottom: 9px solid #ffffff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
}
}
Loading…
Cancel
Save