Browse Source

优化布局

es6
guy 3 years ago
parent
commit
54e34e711b
  1. 25
      src/core/platform/web/config.js
  2. 7
      src/core/wrapper/layout/adapt/adapt.table.js
  3. 65
      src/core/wrapper/layout/fill/float.fill.horizontal.js
  4. 7
      src/core/wrapper/layout/layout.td.js
  5. 10
      src/less/core/wrapper/fill.horizontal.less

25
src/core/platform/web/config.js

@ -29,7 +29,26 @@ BI.prepares.push(function () {
}); });
BI.Plugin.configWidget("bi.inline", function (ob) { BI.Plugin.configWidget("bi.inline", function (ob) {
// 当列宽既需要自动列宽又需要自适应列宽时,inline布局也处理不了了,降级table处理吧 // 当列宽既需要自动列宽又需要自适应列宽时,inline布局也处理不了了,降级table处理吧
var hasAutoAndFillColumnSize;
if (ob.columnSize && ob.columnSize.indexOf("") >= 0 && ob.columnSize.indexOf("fill") >= 0) { if (ob.columnSize && ob.columnSize.indexOf("") >= 0 && ob.columnSize.indexOf("fill") >= 0) {
hasAutoAndFillColumnSize = true;
} else {
var hasAuto = false, hasFill = false;
BI.each(ob.items, function (i, item) {
if (item.width === "fill") {
hasFill = true;
} else if (BI.isNull(item.width) || item.width === "") {
hasAuto = true;
}
});
hasAutoAndFillColumnSize = hasAuto && hasFill;
}
if (hasAutoAndFillColumnSize) {
// 宽度是不是受限
if ((ob.scrollable !== true && ob.scrollx !== true) || ob.horizontalAlign === BI.HorizontalAlign.Stretch) {
return BI.extend({}, ob, {type: "bi.horizontal_float_fill"});
}
return BI.extend({ return BI.extend({
horizontalAlign: BI.HorizontalAlign.Stretch horizontalAlign: BI.HorizontalAlign.Stretch
}, ob, {type: "bi.table_adapt"}); }, ob, {type: "bi.table_adapt"});
@ -98,6 +117,12 @@ BI.prepares.push(function () {
scrollx: false scrollx: false
}, ob, {type: "bi.flex_horizontal"}); }, ob, {type: "bi.flex_horizontal"});
} }
if ((ob.horizontalAlign && ob.horizontalAlign !== BI.HorizontalAlign.Stretch) || (ob.scrollable === true || ob.scrollx === true)) {
// 宽度不受限,要用table布局
return BI.extend({
horizontalAlign: BI.HorizontalAlign.Stretch
}, ob, {type: "bi.table_adapt"});
}
return BI.extend({}, ob, {type: "bi.horizontal_float_fill"}); return BI.extend({}, ob, {type: "bi.horizontal_float_fill"});
}); });
BI.Plugin.configWidget("bi.vertical_fill", function (ob) { BI.Plugin.configWidget("bi.vertical_fill", function (ob) {

7
src/core/wrapper/layout/adapt/adapt.table.js

@ -4,9 +4,9 @@
* @extends BI.Layout * @extends BI.Layout
*/ */
BI.TableAdaptLayout = BI.inherit(BI.Layout, { BI.TableAdaptLayout = BI.inherit(BI.Layout, {
props: function () { props: function (props) {
return BI.extend(BI.TableAdaptLayout.superclass.props.apply(this, arguments), { return BI.extend(BI.TableAdaptLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-t-a", baseCls: "bi-t-a" + (props.verticalAlign === BI.VerticalAlign.Stretch ? " bi-h-fill" : ""),
columnSize: [], columnSize: [],
verticalAlign: BI.VerticalAlign.Top, verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Left, horizontalAlign: BI.HorizontalAlign.Left,
@ -46,6 +46,9 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
if (!this.hasWidget(this._getChildName(i))) { if (!this.hasWidget(this._getChildName(i))) {
var w = BI._lazyCreateWidget(item); var w = BI._lazyCreateWidget(item);
w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"}); w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
if (o.verticalAlign === BI.VerticalAlign.Stretch) {
w.element.addClass("h-fill-item");
}
td = BI._lazyCreateWidget({ td = BI._lazyCreateWidget({
type: "bi.default", type: "bi.default",
width: width, width: width,

65
src/core/wrapper/layout/fill/float.fill.horizontal.js

@ -1,8 +1,9 @@
BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, { BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
props: function () { props: function () {
return BI.extend(BI.FloatHorizontalFillLayout.superclass.props.apply(this, arguments), { return BI.extend(BI.FloatHorizontalFillLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-h-float-fill", baseCls: "bi-h-float-fill bi-h-fill",
verticalAlign: BI.VerticalAlign.Top, horizontalAlign: BI.HorizontalAlign.Stretch,
verticalAlign: BI.VerticalAlign.Stretch,
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
lgap: 0, lgap: 0,
@ -30,6 +31,54 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
var self = this, o = this.options; var self = this, o = this.options;
items = BI.compact(items); items = BI.compact(items);
var rank = 0; var rank = 0;
function createWidget (i, item, desc) {
if (o.verticalAlign !== BI.VerticalAlign.Stretch) {
var w = BI._lazyCreateWidget({
type: "bi.vertical_adapt",
horizontalAlign: BI.HorizontalAlign.Stretch,
verticalAlign: o.verticalAlign,
items: [item]
});
} else {
var w = BI._lazyCreateWidget(item);
}
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({
"margin-top": (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
});
}
if (desc) {
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({
"margin-right": ((i === o.items.length - 1 ? o.hgap : 0) + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
});
}
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({
"margin-left": (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
});
}
} else {
if (o.hgap + o.lgap + (item.lgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({
"margin-left": ((i === 0 ? o.hgap : 0) + o.lgap + (item.lgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
});
}
if (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0) !== 0) {
w.element.css({
"margin-right": (o.hgap + o.rgap + (item.rgap || 0) + (item.hgap || 0)) / BI.pixRatio + BI.pixUnit
});
}
}
if (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0) !== 0) {
w.element.css({
"margin-bottom": (o.vgap + o.bgap + (item.bgap || 0) + (item.vgap || 0)) / BI.pixRatio + BI.pixUnit
});
}
return w;
}
BI.any(items, function (i, item) { BI.any(items, function (i, item) {
if (BI.isEmptyObject(item)) { if (BI.isEmptyObject(item)) {
return true; return true;
@ -38,9 +87,9 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
if (columnSize === "fill") { if (columnSize === "fill") {
return true; return true;
} }
var w = BI._lazyCreateWidget(item); var w = createWidget(i, item);
self.addWidget(self._getChildName(rank++), w); self.addWidget(self._getChildName(rank++), w);
w.element.addClass("h-float-fill-item"); w.element.addClass("h-fill-item");
w.element.css({ w.element.css({
float: "left", float: "left",
position: "relative" position: "relative"
@ -54,9 +103,9 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
if (columnSize === "fill") { if (columnSize === "fill") {
return true; return true;
} }
var w = BI._lazyCreateWidget(item); var w = createWidget(i, item, true);
self.addWidget(self._getChildName(rank++), w); self.addWidget(self._getChildName(rank++), w);
w.element.addClass("h-float-fill-item"); w.element.addClass("h-fill-item");
w.element.css({ w.element.css({
float: "right", float: "right",
position: "relative" position: "relative"
@ -65,9 +114,9 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
BI.each(items, function (i, item) { BI.each(items, function (i, item) {
var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width; var columnSize = o.columnSize.length > 0 ? o.columnSize[i] : item.width;
if (columnSize === "fill") { if (columnSize === "fill") {
var w = BI._lazyCreateWidget(item); var w = createWidget(i, item);
self.addWidget(self._getChildName(rank++), w); self.addWidget(self._getChildName(rank++), w);
w.element.addClass("h-float-fill-item").css({ w.element.addClass("h-fill-item").css({
position: "relative" position: "relative"
}); });
} }

7
src/core/wrapper/layout/layout.td.js

@ -4,9 +4,9 @@
* @extends BI.Layout * @extends BI.Layout
*/ */
BI.TdLayout = BI.inherit(BI.Layout, { BI.TdLayout = BI.inherit(BI.Layout, {
props: function () { props: function (props) {
return BI.extend(BI.TdLayout.superclass.props.apply(this, arguments), { return BI.extend(BI.TdLayout.superclass.props.apply(this, arguments), {
baseCls: "bi-td", baseCls: "bi-td" + (props.verticalAlign === BI.VerticalAlign.Stretch ? " bi-h-fill" : ""),
columnSize: [], columnSize: [],
rowSize: [], rowSize: [],
verticalAlign: BI.VerticalAlign.Middle, verticalAlign: BI.VerticalAlign.Middle,
@ -89,6 +89,9 @@ BI.TdLayout = BI.inherit(BI.Layout, {
for (var i = 0; i < arr.length; i++) { for (var i = 0; i < arr.length; i++) {
var w = BI._lazyCreateWidget(arr[i]); var w = BI._lazyCreateWidget(arr[i]);
if (o.verticalAlign === BI.VerticalAlign.Stretch) {
w.element.addClass("h-fill-item");
}
w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"}); w.element.css({position: "relative", top: "0", left: "0", margin: "0px auto"});
var item = arr[i]; var item = arr[i];
if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) { if (o.vgap + o.tgap + (item.tgap || 0) + (item.vgap || 0) !== 0) {

10
src/less/core/wrapper/fill.horizontal.less

@ -1,5 +1,5 @@
.bi-h-float-fill { .bi-h-fill {
.h-float-fill-item { .h-fill-item {
height: 100%; height: 100%;
} }
} }

Loading…
Cancel
Save