fanruan
/
fineui
4
1
Fork 2
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

KERNEL-5172 fix: popover相关修改

es6
iapyang 4 years ago
parent
c31cda75dc
commit
b36f3aeabd
3 changed files with 85 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      demo/js/core/popup/demo.popover.js
  2. 109
      src/base/layer/layer.popover.js
  3. 5
      src/less/base/layer/layer.popover.less

27
demo/js/core/popup/demo.popover.js
Unescape View File

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

109
src/base/layer/layer.popover.js
Unescape View File

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

5
src/less/base/layer/layer.popover.less
Unescape View File

@ -0,0 +1,5 @@
.bi-popover {
.dynamic-height-limit-layout {
max-height: 100%;
}
}
Write Preview
Loading…
Cancel
Save