From b36f3aeabd1631204a4876c60304796075593515 Mon Sep 17 00:00:00 2001 From: iapyang Date: Mon, 24 Aug 2020 17:24:19 +0800 Subject: [PATCH 1/4] =?UTF-8?q?KERNEL-5172=20fix:=20popover=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/core/popup/demo.popover.js | 27 +++++- src/base/layer/layer.popover.js | 109 ++++++++++++------------- src/less/base/layer/layer.popover.less | 5 ++ 3 files changed, 85 insertions(+), 56 deletions(-) create mode 100644 src/less/base/layer/layer.popover.less diff --git a/demo/js/core/popup/demo.popover.js b/demo/js/core/popup/demo.popover.js index bb696ea78..2c02e30db 100644 --- a/demo/js/core/popup/demo.popover.js +++ b/demo/js/core/popup/demo.popover.js @@ -8,6 +8,7 @@ Demo.Func = BI.inherit(BI.Widget, { render: function () { var id = BI.UUID(); var body; + return { type: "bi.vertical", vgap: 10, @@ -165,7 +166,31 @@ Demo.Func = BI.inherit(BI.Widget, { } }).open(id); } - }] + }, { + type: "bi.text_button", + height: 30, + text: "弹出一个高度动态的popover层, 此弹出层指定size为small, 但是高度随内容自适应，自适应支持的最大高度为600px", + handler: function() { + var id = "弹出层id1" + BI.Popovers.create(id, { + // String或者是json都行 + header: "弹出层标题", + logic: { + dynamic: true + }, + size: "small", + body: { + type: "bi.vertical", + items: BI.map(BI.range(0, 50), function(idx, v) { + return { + type: "bi.label", + text: "弹出层内容", + }; + }), + }, + }).open(id); + }, + }], }; } }); diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js index f90f8193b..88267698b 100644 --- a/src/base/layer/layer.popover.js +++ b/src/base/layer/layer.popover.js @@ -8,39 +8,35 @@ BI.Popover = BI.inherit(BI.Widget, { SIZE: { SMALL: "small", NORMAL: "normal", - BIG: "big" + BIG: "big", }, }, - _defaultConfig: function () { - return BI.extend(BI.Popover.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-popover bi-card bi-border-radius", - // width: 600, - // height: 500, - size: "normal", // small, normal, big - logic: { - dynamic: false - }, - header: null, - headerHeight: 40, - body: null, - footer: null, - footerHeight: 44, - closable: true // BI-40839 是否显示右上角的关闭按钮 - }); + props: { + baseCls: "bi-popover bi-card bi-border-radius", + size: "normal", // small, normal, big + logic: { + dynamic: false, + }, + header: null, + body: null, + footer: null, + closable: true, // BI-40839 是否显示右上角的关闭按钮 + headerHeight: 40, }, + render: function () { - var self = this, o = this.options; + var self = this; var o = this.options; this.startX = 0; this.startY = 0; this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) { - var size = self._calculateSize(); - var W = BI.Widget._renderEngine.createElement("body").width(), H = BI.Widget._renderEngine.createElement("body").height(); + var W = BI.Widget._renderEngine.createElement("body").width(); + var H = BI.Widget._renderEngine.createElement("body").height(); self.startX += deltaX; self.startY += deltaY; self.element.css({ left: BI.clamp(self.startX, 0, W - self.element.width()) + "px", - top: BI.clamp(self.startY, 0, H - self.element.height()) + "px" + top: BI.clamp(self.startY, 0, H - self.element.height()) + "px", }); // BI-12134 没有什么特别好的方法 BI.Resizers._resize(); @@ -57,21 +53,21 @@ BI.Popover = BI.inherit(BI.Widget, { items: [{ type: "bi.absolute", items: [{ - el: BI.isPlainObject(o.header) ? BI.createWidget(o.header, { - extraCls: "bi-font-bold" + el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, { + extraCls: "bi-font-bold", }) : { type: "bi.label", cls: "bi-font-bold", height: o.headerHeight, text: o.header, title: o.header, - textAlign: "left" + textAlign: "left", }, left: 20, top: 0, right: 0, - bottom: 0 - }] + bottom: 0, + }], }, { el: o.closable ? { type: "bi.icon_button", @@ -79,15 +75,15 @@ BI.Popover = BI.inherit(BI.Widget, { height: o.headerHeight, handler: function () { self.close(); - } + }, } : { - type: "bi.layout" + type: "bi.layout", }, - width: 56 + width: 56, }], - height: o.headerHeight + height: o.headerHeight, }, - height: o.headerHeight + height: o.headerHeight, }, { el: o.logic.dynamic ? { type: "bi.vertical", @@ -99,33 +95,35 @@ BI.Popover = BI.inherit(BI.Widget, { hgap: 20, tgap: 10, items: [{ - el: BI.createWidget(o.body) - }] + el: BI.extend({}, o.body, { + extraCls: "dynamic-height-limit-layout", + }), + }], } : { type: "bi.absolute", items: [{ - el: BI.createWidget(o.body), + el: o.body, left: 20, top: 10, right: 20, - bottom: 0 - }] - } + bottom: 0, + }], + }, }]; if (o.footer) { items.push({ el: { type: "bi.absolute", items: [{ - el: BI.createWidget(o.footer), + el: o.footer, left: 20, top: 0, right: 20, - bottom: 0 + bottom: 0, }], - height: o.footerHeight + height: o.footerHeight, }, - height: o.footerHeight + height: o.footerHeight, }); } @@ -134,18 +132,19 @@ BI.Popover = BI.inherit(BI.Widget, { return BI.extend({ type: o.logic.dynamic ? "bi.vertical" : "bi.vtape", items: items, - width: size.width + width: size.width, }, o.logic.dynamic ? { type: "bi.vertical", - scrolly: false + extraCls: "dynamic-layout", + scrolly: false, } : { type: "bi.vtape", - height: size.height + height: size.height, }); }, mounted: function () { - var self = this, o = this.options; + var self = this; var o = this.options; this.dragger.element.mousedown(function (e) { var pos = self.element.offset(); self.startX = pos.left; @@ -178,9 +177,10 @@ BI.Popover = BI.inherit(BI.Widget, { size.height = 500; } } + return { width: o.width || size.width, - height: o.height || size.height + height: o.height || size.height, }; }, @@ -199,11 +199,10 @@ BI.Popover = BI.inherit(BI.Widget, { }, setZindex: function (zindex) { - this.element.css({"z-index": zindex}); + this.element.css({ "z-index": zindex }); }, - destroyed: function () { - } + destroyed: function () {}, }); BI.shortcut("bi.popover", BI.Popover); @@ -211,12 +210,12 @@ BI.shortcut("bi.popover", BI.Popover); BI.BarPopover = BI.inherit(BI.Popover, { _defaultConfig: function () { return BI.extend(BI.BarPopover.superclass._defaultConfig.apply(this, arguments), { - btns: [BI.i18nText("BI-Basic_Sure"), BI.i18nText("BI-Basic_Cancel")] + btns: [BI.i18nText("BI-Basic_Sure"), BI.i18nText("BI-Basic_Cancel")], }); }, beforeCreate: function () { - var self = this, o = this.options; + var self = this; var o = this.options; o.footer || (o.footer = { type: "bi.right_vertical_adapt", lgap: 10, @@ -228,7 +227,7 @@ BI.BarPopover = BI.inherit(BI.Popover, { handler: function (v) { self.fireEvent(BI.Popover.EVENT_CANCEL, v); self.close(v); - } + }, }, { type: "bi.button", text: this.options.btns[0], @@ -237,10 +236,10 @@ BI.BarPopover = BI.inherit(BI.Popover, { handler: function (v) { self.fireEvent(BI.Popover.EVENT_CONFIRM, v); self.close(v); - } - }] + }, + }], }); - } + }, }); BI.shortcut("bi.bar_popover", BI.BarPopover); diff --git a/src/less/base/layer/layer.popover.less b/src/less/base/layer/layer.popover.less new file mode 100644 index 000000000..e392a1074 --- /dev/null +++ b/src/less/base/layer/layer.popover.less @@ -0,0 +1,5 @@ +.bi-popover { + .dynamic-height-limit-layout { + max-height: 100%; + } +} From f86a439915784c54114364a6589f3cb1df0977f7 Mon Sep 17 00:00:00 2001 From: iapyang Date: Mon, 24 Aug 2020 17:29:45 +0800 Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/layer/layer.popover.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js index 88267698b..784062447 100644 --- a/src/base/layer/layer.popover.js +++ b/src/base/layer/layer.popover.js @@ -16,13 +16,14 @@ BI.Popover = BI.inherit(BI.Widget, { baseCls: "bi-popover bi-card bi-border-radius", size: "normal", // small, normal, big logic: { - dynamic: false, + dynamic: false }, header: null, + headerHeight: 40, body: null, footer: null, + footerHeight: 44, closable: true, // BI-40839 是否显示右上角的关闭按钮 - headerHeight: 40, }, render: function () { From ee1992c46e98b1c18f604ad9cf50179624f410df Mon Sep 17 00:00:00 2001 From: iapyang Date: Mon, 24 Aug 2020 17:34:03 +0800 Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E4=B8=8B?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/core/popup/demo.popover.js | 5 +++-- src/base/layer/layer.popover.js | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/demo/js/core/popup/demo.popover.js b/demo/js/core/popup/demo.popover.js index 2c02e30db..82a5e4a9d 100644 --- a/demo/js/core/popup/demo.popover.js +++ b/demo/js/core/popup/demo.popover.js @@ -169,14 +169,15 @@ Demo.Func = BI.inherit(BI.Widget, { }, { type: "bi.text_button", height: 30, - text: "弹出一个高度动态的popover层, 此弹出层指定size为small, 但是高度随内容自适应，自适应支持的最大高度为600px", + text: "弹出一个高度动态的popover层, 此弹出层指定size为small, 但是高度随内容自适应，自适应支持的最大高度为默认为600px", handler: function() { var id = "弹出层id1" BI.Popovers.create(id, { // String或者是json都行 header: "弹出层标题", logic: { - dynamic: true + dynamic: true, + maxHeight: 700, }, size: "small", body: { diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js index 784062447..6269d1daa 100644 --- a/src/base/layer/layer.popover.js +++ b/src/base/layer/layer.popover.js @@ -16,7 +16,8 @@ BI.Popover = BI.inherit(BI.Widget, { baseCls: "bi-popover bi-card bi-border-radius", size: "normal", // small, normal, big logic: { - dynamic: false + dynamic: false, + maxHeight: 600, }, header: null, headerHeight: 40, @@ -155,7 +156,7 @@ BI.Popover = BI.inherit(BI.Widget, { if (o.logic.dynamic) { var size = this._calculateSize(); var height = this.element.height(); - var compareHeight = BI.clamp(height, size.height, 600) - (o.footer ? o.footerHeight + o.headerHeight : o.headerHeight); + var compareHeight = BI.clamp(height, size.height, o.logic.maxHeight || 600) - (o.footer ? o.footerHeight + o.headerHeight : o.headerHeight); this.body.element.height(compareHeight); } }, From 237a003e4f180272b46d85719c213e623c97eb27 Mon Sep 17 00:00:00 2001 From: iapyang Date: Tue, 25 Aug 2020 14:49:27 +0800 Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=E6=94=B9=E4=B8=BAcss=E6=8E=A7?= =?UTF-8?q?=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/base/layer/layer.popover.js | 16 ++++++---------- src/less/base/layer/layer.popover.less | 17 +++++++++++++++-- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js index 6269d1daa..d20167539 100644 --- a/src/base/layer/layer.popover.js +++ b/src/base/layer/layer.popover.js @@ -31,6 +31,7 @@ BI.Popover = BI.inherit(BI.Widget, { var self = this; var o = this.options; this.startX = 0; this.startY = 0; + var size = this._calculateSize(); this.tracker = new BI.MouseMoveTracker(function (deltaX, deltaY) { var W = BI.Widget._renderEngine.createElement("body").width(); var H = BI.Widget._renderEngine.createElement("body").height(); @@ -98,7 +99,7 @@ BI.Popover = BI.inherit(BI.Widget, { tgap: 10, items: [{ el: BI.extend({}, o.body, { - extraCls: "dynamic-height-limit-layout", + extraCls: "dynamic-height-limit-layout-" + size.type, }), }], } : { @@ -129,15 +130,12 @@ BI.Popover = BI.inherit(BI.Widget, { }); } - var size = this._calculateSize(); - return BI.extend({ type: o.logic.dynamic ? "bi.vertical" : "bi.vtape", items: items, width: size.width, }, o.logic.dynamic ? { type: "bi.vertical", - extraCls: "dynamic-layout", scrolly: false, } : { type: "bi.vtape", @@ -153,12 +151,6 @@ BI.Popover = BI.inherit(BI.Widget, { self.startY = pos.top; self.tracker.captureMouseMoves(e); }); - if (o.logic.dynamic) { - var size = this._calculateSize(); - var height = this.element.height(); - var compareHeight = BI.clamp(height, size.height, o.logic.maxHeight || 600) - (o.footer ? o.footerHeight + o.headerHeight : o.headerHeight); - this.body.element.height(compareHeight); - } }, _calculateSize: function () { @@ -169,20 +161,24 @@ BI.Popover = BI.inherit(BI.Widget, { case this._constant.SIZE.SMALL: size.width = 450; size.height = 200; + size.type = "small"; break; case this._constant.SIZE.BIG: size.width = 900; size.height = 500; + size.type = "big"; break; default: size.width = 550; size.height = 500; + size.type = "default"; } } return { width: o.width || size.width, height: o.height || size.height, + type: size.type || "default", }; }, diff --git a/src/less/base/layer/layer.popover.less b/src/less/base/layer/layer.popover.less index e392a1074..90a1c4ff5 100644 --- a/src/less/base/layer/layer.popover.less +++ b/src/less/base/layer/layer.popover.less @@ -1,5 +1,18 @@ +@maxHeight: 600px; + .bi-popover { - .dynamic-height-limit-layout { - max-height: 100%; + .dynamic-height-limit-layout-small { + min-height: 200px; + max-height: @maxHeight; + } + + .dynamic-height-limit-layout-big { + min-height: 500px; + max-height: @maxHeight; + } + + .dynamic-height-limit-layout-small { + min-height: 500px; + max-height: @maxHeight; } }