Browse Source

Pull request #3214: KERNEL-13521 refactor: segment使用grid布局,使其默认使用最长项宽度等分

Merge in VISUAL/fineui from ~ZHENFEI.LI/fineui:master to master

* commit 'b5bdace1fbbd6ee371dac0708a62e5240d21368c':
  KERNEL-13521 refactor: segment调整&行列布局的类名方法抽到layout上
  KERNEL-13521 refactor: segment使用grid布局,使其默认使用最长项宽度等分
es6
Zhenfei.Li-李振飞 2 years ago
parent
commit
d6c3ff58c0
  1. 24
      demo/js/case/demo.segment.js
  2. 21
      src/case/segment/segment.js
  3. 21
      src/core/wrapper/layout.js
  4. 44
      src/core/wrapper/layout/layout.division.js
  5. 31
      src/core/wrapper/layout/layout.grid.js
  6. 62
      src/core/wrapper/layout/layout.table.js
  7. 39
      src/core/wrapper/layout/layout.window.js
  8. 8
      src/less/base/segment/segment.less

24
demo/js/case/demo.segment.js

@ -1,28 +1,28 @@
Demo.Func = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-func"
baseCls: "demo-func",
},
render: function () {
BI.createWidget({
type: "bi.vertical",
type: "bi.horizontal",
element: this,
vgap: 20,
hgap: 30,
items: [{
type: "bi.segment",
items: [{
text: "1",
value: 1
text: "较长的选项1",
value: 1,
}, {
text: "2",
value: 2
text: "选项2",
value: 2,
}, {
text: "3",
value: 3
}]
}]
text: "选项3",
value: 3,
}],
}],
});
}
},
});
BI.shortcut("demo.segment", Demo.Func);
BI.shortcut("demo.segment", Demo.Func);

21
src/case/segment/segment.js

@ -10,7 +10,7 @@ BI.Segment = BI.inherit(BI.Widget, {
return BI.extend(BI.Segment.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-segment",
items: [],
height: 24
height: 24,
});
},
_init: function () {
@ -20,16 +20,15 @@ BI.Segment = BI.inherit(BI.Widget, {
element: this,
type: "bi.button_group",
value: o.value,
items: BI.createItems(o.items, {
items: [BI.createItems(o.items, {
type: "bi.segment_button",
height: BI.toPix(o.height, 2),
whiteSpace: o.whiteSpace
}),
layout: [
{
type: "bi.center"
}
]
whiteSpace: o.whiteSpace,
})],
layouts: [{
type: "bi.table",
columnSize: BI.makeArrayByArray(o.items, "fill"),
}],
});
this.buttonGroup.on(BI.Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
@ -58,7 +57,7 @@ BI.Segment = BI.inherit(BI.Widget, {
getValue: function () {
return this.buttonGroup.getValue();
}
},
});
BI.Segment.EVENT_CHANGE = "EVENT_CHANGE";
BI.shortcut("bi.segment", BI.Segment);
BI.shortcut("bi.segment", BI.Segment);

21
src/core/wrapper/layout.js

@ -16,7 +16,7 @@ BI.Layout = BI.inherit(BI.Widget, {
scrolly: false, // true, false
items: [],
innerHgap: 0,
innerVgap: 0
innerVgap: 0,
};
},
@ -727,6 +727,25 @@ BI.Layout = BI.inherit(BI.Widget, {
});
},
getRowColumnCls: function (rowIndex, colIndex, lastRowIndex, lastColIndex) {
var cls = "";
if (rowIndex === 0) {
cls += " first-row";
} else if (rowIndex === lastRowIndex) {
cls += " last-row";
}
if (colIndex === 0) {
cls += " first-col";
} else if (colIndex === lastColIndex) {
cls += " last-col";
}
BI.isOdd(rowIndex + 1) ? (cls += " odd-row") : (cls += " even-row");
BI.isOdd(colIndex + 1) ? (cls += " odd-col") : (cls += " even-col");
cls += " center-element";
return cls;
},
removeWidget: function (nameOrWidget) {
var removeIndex, self = this;
if (BI.isWidget(nameOrWidget)) {

44
src/core/wrapper/layout/layout.division.js

@ -28,44 +28,31 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
},
stroke: function (items) {
var o = this.options;
var o = this.options, self = this;
var rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0);
var map = BI.makeArray(rows), widths = {}, heights = {};
function firstElement (item, row, col) {
if (row === 0) {
item.addClass("first-row");
}
if (col === 0) {
item.addClass("first-col");
}
item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row");
item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col");
item.addClass("center-element");
function firstElement (item, cls) {
item.addClass(cls);
return item;
}
function firstObject (item, row, col) {
var cls = "";
if (row === 0) {
cls += " first-row";
}
if (col === 0) {
cls += " first-col";
}
BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
item.cls = (item.cls || "") + cls + " center-element";
function firstObject (item, cls) {
item.cls = (item.cls || "") + cls;
return item;
}
function first (item, row, col) {
function first (item, cls) {
if (item instanceof BI.Widget) {
firstElement(item.element, row, col);
firstElement(item.element, cls);
} else if (item.el instanceof BI.Widget) {
firstElement(item.el.element, row, col);
firstElement(item.el.element, cls);
} else if (item.el) {
firstObject(item.el, row, col);
firstObject(item.el, cls);
} else {
firstObject(item, row, col);
firstObject(item, cls);
}
}
@ -79,6 +66,7 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
heights[j] = (heights[j] || 0) + item.height;
map[i][j] = el;
});
return;
}
widths[item.row] = (widths[item.row] || 0) + item.width;
@ -106,7 +94,7 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
if (j == o.columns - 1) {
w.element.css({right: "0%"});
}
first(w, i, j);
first(w, self.getRowColumnCls(i, j, rows - 1, columns - 1));
totalW += map[i][j].width;
}
}

31
src/core/wrapper/layout/layout.grid.js

@ -36,29 +36,16 @@ BI.GridLayout = BI.inherit(BI.Layout, {
els[i] = [];
}
function firstElement (item, row, col) {
if (row === 0) {
item.addClass("first-row");
}
if (col === 0) {
item.addClass("first-col");
}
item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row");
item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col");
item.addClass("center-element");
function firstElement (item, cls) {
item.addClass(cls);
return item;
}
function firstObject (item, row, col) {
var cls = "";
if (row === 0) {
cls += " first-row";
}
if (col === 0) {
cls += " first-col";
}
BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
item.cls = (item.cls || "") + cls + " center-element";
function firstObject (item, cls) {
item.cls = (item.cls || "") + cls;
return item;
}
function first (item, row, col) {
@ -89,7 +76,7 @@ BI.GridLayout = BI.inherit(BI.Layout, {
type: "bi.layout"
});
}
first(els[i][j], i, j);
first(els[i][j], self.getRowColumnCls(i, j, rows - 1, columns - 1));
els[i][j].element.css({
position: "absolute",
top: height * i + "%",

62
src/core/wrapper/layout/layout.table.js

@ -16,7 +16,7 @@ BI.TableLayout = BI.inherit(BI.Layout, {
// rowSize: 30, // or [30,30,30]
hgap: 0,
vgap: 0,
items: []
items: [],
});
},
render: function () {
@ -45,57 +45,43 @@ BI.TableLayout = BI.inherit(BI.Layout, {
return self._optimiseGap(size);
}).join(" ") : BI.range(o.items.length).fill(this._optimiseGap(o.rowSize)).join(" "),
"grid-row-gap": this._optimiseGap(o.vgap),
"grid-column-gap": this._optimiseGap(o.hgap)
"grid-column-gap": this._optimiseGap(o.hgap),
});
}
return {
type: "bi.default",
ref: function (_ref) {
self.layout = _ref;
},
items: this._formatItems(items)
items: this._formatItems(items),
};
},
_formatItems: function (items) {
var o = this.options;
var o = this.options, self = this;
function firstElement (item, cls) {
item.addClass(cls);
function firstElement (item, row, col) {
if (row === 0) {
item.addClass("first-row");
}
if (col === 0) {
item.addClass("first-col");
}
item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row");
item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col");
item.addClass("center-element");
return item;
}
function firstObject (item, row, col) {
var cls = "";
if (row === 0) {
cls += " first-row";
}
if (col === 0) {
cls += " first-col";
}
BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
item.cls = (item.cls || "") + cls + " center-element";
function firstObject (item, cls) {
item.cls = (item.cls || "") + cls;
return item;
}
function first (item, row, col) {
function first (item, cls) {
if (item instanceof BI.Widget) {
return firstElement(item.element, row, col);
return firstElement(item.element, cls);
} else if (item.el instanceof BI.Widget) {
return firstElement(item.el.element, row, col);
return firstElement(item.el.element, cls);
} else if (item.el) {
return firstObject(item.el, row, col);
return firstObject(item.el, cls);
} else {
return firstObject(item, row, col);
return firstObject(item, cls);
}
}
@ -105,18 +91,20 @@ BI.TableLayout = BI.inherit(BI.Layout, {
columnSize: ["fill"],
horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign,
items: [BI.formatEL(item)]
items: [BI.formatEL(item)],
};
}
return BI.reduce(items, function (row, result, i) {
return result.concat(BI.map(row, function (j, item) {
return BI.reduce(items, function (rowItems, result, rowIndex) {
return result.concat(BI.map(rowItems, function (colIndex, item) {
var cls = self.getRowColumnCls(rowIndex, colIndex, items.length - 1, rowItems.length - 1);
if (BI.isEmpty(item)) {
return first(wrapLayout({
type: "bi.layout"
}), i, j);
type: "bi.layout",
}), cls);
}
return first(wrapLayout(item), i, j);
return first(wrapLayout(item), cls);
}));
}, []);
},
@ -127,6 +115,6 @@ BI.TableLayout = BI.inherit(BI.Layout, {
populate: function (items) {
this.layout.populate(this._formatItems(items));
}
},
});
BI.shortcut("bi.table", BI.TableLayout);

39
src/core/wrapper/layout/layout.window.js

@ -35,7 +35,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
},
stroke: function (items) {
var o = this.options;
var o = this.options, self = this;
if (BI.isNumber(o.rowSize)) {
o.rowSize = BI.makeArray(o.items.length, 1 / o.items.length);
}
@ -43,29 +43,16 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
o.columnSize = BI.makeArray(o.items[0].length, 1 / o.items[0].length);
}
function firstElement (item, row, col) {
if (row === 0) {
item.addClass("first-row");
}
if (col === 0) {
item.addClass("first-col");
}
item.addClass(BI.isOdd(row + 1) ? "odd-row" : "even-row");
item.addClass(BI.isOdd(col + 1) ? "odd-col" : "even-col");
item.addClass("center-element");
function firstElement (item, cls) {
item.addClass(cls);
return item;
}
function firstObject (item, row, col) {
var cls = "";
if (row === 0) {
cls += " first-row";
}
if (col === 0) {
cls += " first-col";
}
BI.isOdd(row + 1) ? (cls += " odd-row") : (cls += " even-row");
BI.isOdd(col + 1) ? (cls += " odd-col") : (cls += " even-col");
item.cls = (item.cls || "") + cls + " center-element";
function firstObject (item, cls) {
item.cls = (item.cls || "") + cls;
return item;
}
function first (item, row, col) {
@ -109,7 +96,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
h = this._optimiseGap(o.rowSize[i]);
}
wi.element.css({top: t, height: h});
first(wi, i, j);
first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
}
if (!BI.isNumber(o.rowSize[i])) {
break;
@ -127,7 +114,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
h = this._optimiseGap(o.rowSize[i]);
}
wi.element.css({bottom: b, height: h});
first(wi, i, j);
first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
}
if (!BI.isNumber(o.rowSize[i])) {
break;
@ -145,7 +132,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
w = this._optimiseGap(o.columnSize[j]);
}
wi.element.css({left: l, width: w});
first(wi, i, j);
first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
}
if (!BI.isNumber(o.columnSize[j])) {
break;
@ -163,7 +150,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
w = this._optimiseGap(o.columnSize[j]);
}
wi.element.css({right: r, width: w});
first(wi, i, j);
first(wi, self.getRowColumnCls(i, j, o.rows - 1, o.columns - 1));
}
if (!BI.isNumber(o.columnSize[j])) {
break;

8
src/less/base/segment/segment.less

@ -7,14 +7,14 @@
border-top: 1px solid @color-bi-split-segment;
border-bottom: 1px solid @color-bi-split-segment;
}
& > .first-element{
& > .first-col{
border-left: 1px solid @color-bi-split-segment;
.border-corner-radius(2px,0px,0px,2px)
}
& > .last-element{
& > .last-col{
.border-corner-radius(0px,2px,2px,0px)
}
&.disabled > .center-element, &.disabled > .first-element{
&.disabled > .center-element, &.disabled > .first-col{
border-color: @color-bi-split-disabled-segment;
}
}
@ -34,7 +34,7 @@
border-top: 1px solid @color-bi-split-segment-theme-dark;
border-bottom: 1px solid @color-bi-split-segment-theme-dark;
}
& > .first-element{
& > .first-col{
border-left: 1px solid @color-bi-split-segment-theme-dark;
}
}

Loading…
Cancel
Save