From 957d22d5fdc8a9a7dd80697b91328a71637ab0b9 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Fri, 9 Feb 2018 14:13:31 +0800 Subject: [PATCH] =?UTF-8?q?bubblecombo=E5=8E=BB=E8=93=9D=E7=BA=BF=E7=94=BB?= =?UTF-8?q?=E4=B8=89=E8=A7=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/case/combo/demo.bubble_combo.js | 61 +++++- dist/base.css | 226 +++++++++++++++++---- dist/bundle.css | 226 +++++++++++++++++---- dist/bundle.js | 10 +- dist/case.js | 10 +- dist/demo.js | 61 +++++- dist/fineui.css | 226 +++++++++++++++++---- dist/fineui.js | 10 +- src/case/combo/bubblecombo/combo.bubble.js | 10 +- src/css/base/combo/combo.bubble.css | 113 +++++++++-- src/css/base/combo/combo.css | 113 +++++++++-- src/less/base/combo/combo.bubble.less | 13 +- src/less/visual.less | 72 ++++++- 13 files changed, 951 insertions(+), 200 deletions(-) diff --git a/demo/js/case/combo/demo.bubble_combo.js b/demo/js/case/combo/demo.bubble_combo.js index c314e0724..3eb3c7e6c 100644 --- a/demo/js/case/combo/demo.bubble_combo.js +++ b/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 }] }); } diff --git a/dist/base.css b/dist/base.css index 574471aab..7e4dca748 100644 --- a/dist/base.css +++ b/dist/base.css @@ -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 { diff --git a/dist/bundle.css b/dist/bundle.css index e23adadff..a89403918 100644 --- a/dist/bundle.css +++ b/dist/bundle.css @@ -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 { diff --git a/dist/bundle.js b/dist/bundle.js index 1487e1070..60777edef 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -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 () { diff --git a/dist/case.js b/dist/case.js index 0a374c37c..fb45aacc0 100644 --- a/dist/case.js +++ b/dist/case.js @@ -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 () { diff --git a/dist/demo.js b/dist/demo.js index 240e7dd97..9ff8f2246 100644 --- a/dist/demo.js +++ b/dist/demo.js @@ -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 }] }); } diff --git a/dist/fineui.css b/dist/fineui.css index 0db9e54fb..7384a260c 100644 --- a/dist/fineui.css +++ b/dist/fineui.css @@ -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 { diff --git a/dist/fineui.js b/dist/fineui.js index a31f5cf72..cb68136c7 100644 --- a/dist/fineui.js +++ b/dist/fineui.js @@ -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 () { diff --git a/src/case/combo/bubblecombo/combo.bubble.js b/src/case/combo/bubblecombo/combo.bubble.js index 553cb63ec..c6368d5ad 100644 --- a/src/case/combo/bubblecombo/combo.bubble.js +++ b/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 () { diff --git a/src/css/base/combo/combo.bubble.css b/src/css/base/combo/combo.bubble.css index 563755f01..ca19f8170 100644 --- a/src/css/base/combo/combo.bubble.css +++ b/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: ""; } diff --git a/src/css/base/combo/combo.css b/src/css/base/combo/combo.css index 20b5289b8..0494bed90 100644 --- a/src/css/base/combo/combo.css +++ b/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 { diff --git a/src/less/base/combo/combo.bubble.less b/src/less/base/combo/combo.bubble.less index 0077c0af3..62fd26bb1 100644 --- a/src/less/base/combo/combo.bubble.less +++ b/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); } } \ No newline at end of file diff --git a/src/less/visual.less b/src/less/visual.less index a5fbd7e87..e93022841 100644 --- a/src/less/visual.less +++ b/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: ""; + } } \ No newline at end of file