caoww
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects 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
Unified 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, { Demo.Func = BI.inherit(BI.Widget, {
props: { props: {
baseCls: "demo-func" baseCls: "demo-func",
}, },
render: function () { render: function () {
BI.createWidget({ BI.createWidget({
type: "bi.vertical", type: "bi.horizontal",
element: this, element: this,
vgap: 20, vgap: 20,
hgap: 30, hgap: 30,
items: [{ items: [{
type: "bi.segment", type: "bi.segment",
items: [{ items: [{
text: "1", text: "较长的选项1",
value: 1 value: 1,
}, { }, {
text: "2", text: "选项2",
value: 2 value: 2,
}, { }, {
text: "3", text: "选项3",
value: 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), { return BI.extend(BI.Segment.superclass._defaultConfig.apply(this, arguments), {
baseCls: "bi-segment", baseCls: "bi-segment",
items: [], items: [],
height: 24 height: 24,
}); });
}, },
_init: function () { _init: function () {
@ -20,16 +20,15 @@ BI.Segment = BI.inherit(BI.Widget, {
element: this, element: this,
type: "bi.button_group", type: "bi.button_group",
value: o.value, value: o.value,
items: BI.createItems(o.items, { items: [BI.createItems(o.items, {
type: "bi.segment_button", type: "bi.segment_button",
height: BI.toPix(o.height, 2), height: BI.toPix(o.height, 2),
whiteSpace: o.whiteSpace whiteSpace: o.whiteSpace,
}), })],
layout: [ layouts: [{
{ type: "bi.table",
type: "bi.center" columnSize: BI.makeArrayByArray(o.items, "fill"),
} }],
]
}); });
this.buttonGroup.on(BI.Controller.EVENT_CHANGE, function () { this.buttonGroup.on(BI.Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
@ -58,7 +57,7 @@ BI.Segment = BI.inherit(BI.Widget, {
getValue: function () { getValue: function () {
return this.buttonGroup.getValue(); return this.buttonGroup.getValue();
} },
}); });
BI.Segment.EVENT_CHANGE = "EVENT_CHANGE"; 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 scrolly: false, // true, false
items: [], items: [],
innerHgap: 0, 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) { removeWidget: function (nameOrWidget) {
var removeIndex, self = this; var removeIndex, self = this;
if (BI.isWidget(nameOrWidget)) { 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) { 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 rows = o.rows || o.items.length, columns = o.columns || ((o.items[0] && o.items[0].length) | 0);
var map = BI.makeArray(rows), widths = {}, heights = {}; var map = BI.makeArray(rows), widths = {}, heights = {};
function firstElement (item, row, col) { function firstElement (item, cls) {
if (row === 0) { item.addClass(cls);
item.addClass("first-row");
} return item;
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 firstObject (item, row, col) { function firstObject (item, cls) {
var cls = ""; item.cls = (item.cls || "") + cls;
if (row === 0) {
cls += " first-row"; return item;
}
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 first (item, row, col) { function first (item, cls) {
if (item instanceof BI.Widget) { if (item instanceof BI.Widget) {
firstElement(item.element, row, col); firstElement(item.element, cls);
} else if (item.el instanceof BI.Widget) { } else if (item.el instanceof BI.Widget) {
firstElement(item.el.element, row, col); firstElement(item.el.element, cls);
} else if (item.el) { } else if (item.el) {
firstObject(item.el, row, col); firstObject(item.el, cls);
} else { } 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; heights[j] = (heights[j] || 0) + item.height;
map[i][j] = el; map[i][j] = el;
}); });
return; return;
} }
widths[item.row] = (widths[item.row] || 0) + item.width; widths[item.row] = (widths[item.row] || 0) + item.width;
@ -106,7 +94,7 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
if (j == o.columns - 1) { if (j == o.columns - 1) {
w.element.css({right: "0%"}); w.element.css({right: "0%"});
} }
first(w, i, j); first(w, self.getRowColumnCls(i, j, rows - 1, columns - 1));
totalW += map[i][j].width; 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] = []; els[i] = [];
} }
function firstElement (item, row, col) { function firstElement (item, cls) {
if (row === 0) { item.addClass(cls);
item.addClass("first-row");
} return item;
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 firstObject (item, row, col) { function firstObject (item, cls) {
var cls = ""; item.cls = (item.cls || "") + cls;
if (row === 0) {
cls += " first-row"; return item;
}
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 first (item, row, col) { function first (item, row, col) {
@ -89,7 +76,7 @@ BI.GridLayout = BI.inherit(BI.Layout, {
type: "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({ els[i][j].element.css({
position: "absolute", position: "absolute",
top: height * i + "%", 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] // rowSize: 30, // or [30,30,30]
hgap: 0, hgap: 0,
vgap: 0, vgap: 0,
items: [] items: [],
}); });
}, },
render: function () { render: function () {
@ -45,57 +45,43 @@ BI.TableLayout = BI.inherit(BI.Layout, {
return self._optimiseGap(size); return self._optimiseGap(size);
}).join(" ") : BI.range(o.items.length).fill(this._optimiseGap(o.rowSize)).join(" "), }).join(" ") : BI.range(o.items.length).fill(this._optimiseGap(o.rowSize)).join(" "),
"grid-row-gap": this._optimiseGap(o.vgap), "grid-row-gap": this._optimiseGap(o.vgap),
"grid-column-gap": this._optimiseGap(o.hgap) "grid-column-gap": this._optimiseGap(o.hgap),
}); });
} }
return { return {
type: "bi.default", type: "bi.default",
ref: function (_ref) { ref: function (_ref) {
self.layout = _ref; self.layout = _ref;
}, },
items: this._formatItems(items) items: this._formatItems(items),
}; };
}, },
_formatItems: function (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; return item;
} }
function firstObject (item, row, col) { function firstObject (item, cls) {
var cls = ""; item.cls = (item.cls || "") + 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";
return item; return item;
} }
function first (item, row, col) { function first (item, cls) {
if (item instanceof BI.Widget) { if (item instanceof BI.Widget) {
return firstElement(item.element, row, col); return firstElement(item.element, cls);
} else if (item.el instanceof BI.Widget) { } else if (item.el instanceof BI.Widget) {
return firstElement(item.el.element, row, col); return firstElement(item.el.element, cls);
} else if (item.el) { } else if (item.el) {
return firstObject(item.el, row, col); return firstObject(item.el, cls);
} else { } else {
return firstObject(item, row, col); return firstObject(item, cls);
} }
} }
@ -105,18 +91,20 @@ BI.TableLayout = BI.inherit(BI.Layout, {
columnSize: ["fill"], columnSize: ["fill"],
horizontalAlign: o.horizontalAlign, horizontalAlign: o.horizontalAlign,
verticalAlign: o.verticalAlign, verticalAlign: o.verticalAlign,
items: [BI.formatEL(item)] items: [BI.formatEL(item)],
}; };
} }
return BI.reduce(items, function (row, result, i) { return BI.reduce(items, function (rowItems, result, rowIndex) {
return result.concat(BI.map(row, function (j, item) { 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)) { if (BI.isEmpty(item)) {
return first(wrapLayout({ return first(wrapLayout({
type: "bi.layout" type: "bi.layout",
}), i, j); }), 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) { populate: function (items) {
this.layout.populate(this._formatItems(items)); this.layout.populate(this._formatItems(items));
} },
}); });
BI.shortcut("bi.table", BI.TableLayout); 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) { stroke: function (items) {
var o = this.options; var o = this.options, self = this;
if (BI.isNumber(o.rowSize)) { if (BI.isNumber(o.rowSize)) {
o.rowSize = BI.makeArray(o.items.length, 1 / o.items.length); 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); o.columnSize = BI.makeArray(o.items[0].length, 1 / o.items[0].length);
} }
function firstElement (item, row, col) { function firstElement (item, cls) {
if (row === 0) { item.addClass(cls);
item.addClass("first-row");
} return item;
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 firstObject (item, row, col) { function firstObject (item, cls) {
var cls = ""; item.cls = (item.cls || "") + cls;
if (row === 0) {
cls += " first-row"; return item;
}
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 first (item, row, col) { function first (item, row, col) {
@ -109,7 +96,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
h = this._optimiseGap(o.rowSize[i]); h = this._optimiseGap(o.rowSize[i]);
} }
wi.element.css({top: t, height: h}); 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])) { if (!BI.isNumber(o.rowSize[i])) {
break; break;
@ -127,7 +114,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
h = this._optimiseGap(o.rowSize[i]); h = this._optimiseGap(o.rowSize[i]);
} }
wi.element.css({bottom: b, height: h}); 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])) { if (!BI.isNumber(o.rowSize[i])) {
break; break;
@ -145,7 +132,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
w = this._optimiseGap(o.columnSize[j]); w = this._optimiseGap(o.columnSize[j]);
} }
wi.element.css({left: l, width: w}); 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])) { if (!BI.isNumber(o.columnSize[j])) {
break; break;
@ -163,7 +150,7 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
w = this._optimiseGap(o.columnSize[j]); w = this._optimiseGap(o.columnSize[j]);
} }
wi.element.css({right: r, width: w}); 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])) { if (!BI.isNumber(o.columnSize[j])) {
break; break;

8
src/less/base/segment/segment.less
Unescape View File

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

Write Preview
Loading…
Cancel
Save