fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
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
1a5f462a4d b5bdace1fb
commit
d6c3ff58c0
8 changed files with 109 additions and 141 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. 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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save