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

KERNEL-13521 refactor: segment调整&行列布局的类名方法抽到layout上

es6
Zhenfei.Li 2 years ago
parent
0ac1e8483c
commit
b5bdace1fb
8 changed files with 101 additions and 132 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. 14
      demo/js/case/demo.segment.js
  2. 10
      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

14
demo/js/case/demo.segment.js
Unescape View File

@ -1,6 +1,6 @@
Demo.Func = BI.inherit(BI.Widget, { Demo.Func = BI.inherit(BI.Widget, {
props: { props: {
baseCls: "demo-func" baseCls: "demo-func",
}, },
render: function () { render: function () {
@ -13,16 +13,16 @@ Demo.Func = BI.inherit(BI.Widget, {
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);

10
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,12 +20,12 @@ 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,
}), })],
layouts: o.layouts || [{ layouts: [{
type: "bi.table", type: "bi.table",
columnSize: BI.makeArrayByArray(o.items, "fill"), columnSize: BI.makeArrayByArray(o.items, "fill"),
}], }],
@ -57,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-row{ & > .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