Browse Source

KERNEL-9882 树线型和节点高度处理

es6
windy 3 years ago
parent
commit
ac0152a4e5
  1. 4
      src/case/button/node/node.first.plus.js
  2. 4
      src/case/button/node/node.last.plus.js
  3. 6
      src/case/button/node/node.mid.plus.js
  4. 4
      src/case/button/node/node.plus.js
  5. 30
      src/case/button/treeitem/item.first.treeleaf.js
  6. 30
      src/case/button/treeitem/item.last.treeleaf.js
  7. 30
      src/case/button/treeitem/item.mid.treeleaf.js
  8. 4
      src/case/button/treeitem/item.root.treeleaf.js
  9. 15
      src/case/checkbox/check.first.treenode.js
  10. 15
      src/case/checkbox/check.last.treenode.js
  11. 15
      src/case/checkbox/check.mid.treenode.js
  12. 15
      src/case/checkbox/check.treenode.js
  13. 4
      src/case/combo/bubblecombo/popup.bubble.js
  14. 2
      src/case/tree/tree.level.js
  15. 11
      src/case/tree/treeexpander/tree.expander.popup.js
  16. 2
      src/case/ztree/0.treeview.js
  17. 3
      src/core/system.js
  18. 5
      src/less/base/tree/tree.expander.less
  19. 34
      src/less/base/tree/ztree.less
  20. 13
      src/less/lib/constant.less
  21. 30
      src/less/lib/icon.less
  22. 154
      src/less/resource/background.less
  23. 22
      src/less/resource/icon.less
  24. 3
      src/widget/multilayerselecttree/multilayerselecttree.leveltree.js
  25. 4
      src/widget/multilayerselecttree/node/node.first.plus.js
  26. 4
      src/widget/multilayerselecttree/node/node.last.plus.js
  27. 4
      src/widget/multilayerselecttree/node/node.mid.plus.js
  28. 4
      src/widget/multilayerselecttree/node/node.plus.js
  29. 3
      src/widget/multilayersingletree/multilayersingletree.leveltree.js
  30. 4
      src/widget/multilayersingletree/node/node.first.plus.js
  31. 4
      src/widget/multilayersingletree/node/node.last.plus.js
  32. 2
      src/widget/multilayersingletree/node/node.mid.plus.js
  33. 4
      src/widget/multilayersingletree/treeitem/item.first.treeleaf.js
  34. 4
      src/widget/multilayersingletree/treeitem/item.last.treeleaf.js
  35. 4
      src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js
  36. 1
      src/widget/selecttree/selecttree.popup.js
  37. 2
      src/widget/singleselect/search/singleselect.search.loader.js
  38. 2
      src/widget/singleselect/singleselect.loader.js

4
src/case/button/node/node.first.plus.js

@ -23,7 +23,9 @@ BI.FirstPlusGroupNode = BI.inherit(BI.NodeButton, {
var self = this, o = this.options;
this.checkbox = BI.createWidget({
type: "bi.first_tree_node_checkbox",
stopPropagation: true
stopPropagation: true,
iconHeight: o.height,
iconWidth: o.height
});
this.text = BI.createWidget({
type: "bi.label",

4
src/case/button/node/node.last.plus.js

@ -23,7 +23,9 @@ BI.LastPlusGroupNode = BI.inherit(BI.NodeButton, {
var self = this, o = this.options;
this.checkbox = BI.createWidget({
type: "bi.last_tree_node_checkbox",
stopPropagation: true
stopPropagation: true,
iconHeight: o.height,
iconWidth: o.height
});
this.text = BI.createWidget({
type: "bi.label",

6
src/case/button/node/node.mid.plus.js

@ -23,7 +23,9 @@ BI.MidPlusGroupNode = BI.inherit(BI.NodeButton, {
var self = this, o = this.options;
this.checkbox = BI.createWidget({
type: "bi.mid_tree_node_checkbox",
stopPropagation: true
stopPropagation: true,
iconHeight: o.height,
iconWidth: o.height
});
this.text = BI.createWidget({
type: "bi.label",
@ -48,7 +50,7 @@ BI.MidPlusGroupNode = BI.inherit(BI.NodeButton, {
});
var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, {
width: 24,
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2,
el: this.checkbox
}, this.text);
BI.createWidget(BI.extend({

4
src/case/button/node/node.plus.js

@ -22,7 +22,9 @@ BI.PlusGroupNode = BI.inherit(BI.NodeButton, {
BI.PlusGroupNode.superclass._init.apply(this, arguments);
var self = this, o = this.options;
this.checkbox = BI.createWidget({
type: "bi.tree_node_checkbox"
type: "bi.tree_node_checkbox",
iconHeight: o.height,
iconWidth: o.height
});
this.text = BI.createWidget({
type: "bi.label",

30
src/case/button/treeitem/item.first.treeleaf.js

@ -28,19 +28,19 @@ BI.FirstTreeLeafItem = BI.inherit(BI.BasicButton, {
});
var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, ((o.layer === 0) ? "" : {
width: 12,
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2,
el: {
type: "bi.layout",
cls: (o.pNode && o.pNode.isLastNode) ? "" : "base-line-conn-background",
width: 12,
cls: (o.pNode && o.pNode.isLastNode) ? "" : this._getBaseLineCls(),
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2,
height: o.height
}
}), {
width: 24,
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
el: {
type: "bi.layout",
cls: "first-line-conn-background",
width: 24,
cls: this._getFirstLineCls(),
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
height: o.height
}
}, {
@ -53,6 +53,24 @@ BI.FirstTreeLeafItem = BI.inherit(BI.BasicButton, {
}))));
},
_getBaseLineCls: function () {
switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
case "solid":
return "base-solid-line-conn-background";
default:
return "base-line-conn-background";
}
},
_getFirstLineCls: function () {
switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
case "solid":
return "first-solid-line-conn-background";
default:
return "first-line-conn-background";
}
},
doRedMark: function () {
this.text.doRedMark.apply(this.text, arguments);
},

30
src/case/button/treeitem/item.last.treeleaf.js

@ -28,19 +28,19 @@ BI.LastTreeLeafItem = BI.inherit(BI.BasicButton, {
});
var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, ((o.layer === 0) ? "" : {
width: 12,
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2,
el: {
type: "bi.layout",
cls: (o.pNode && o.pNode.isLastNode) ? "" : "base-line-conn-background",
width: 12,
cls: (o.pNode && o.pNode.isLastNode) ? "" : this._getBaseLineCls(),
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2,
height: o.height
}
}), {
width: 24,
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
el: {
type: "bi.layout",
cls: "last-line-conn-background",
width: 24,
cls: this._getLastLineCls(),
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
height: o.height
}
}, {
@ -53,6 +53,24 @@ BI.LastTreeLeafItem = BI.inherit(BI.BasicButton, {
}))));
},
_getBaseLineCls: function () {
switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
case "solid":
return "base-solid-line-conn-background";
default:
return "base-line-conn-background";
}
},
_getLastLineCls: function () {
switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
case "solid":
return "last-solid-line-conn-background";
default:
return "last-line-conn-background";
}
},
doRedMark: function () {
this.text.doRedMark.apply(this.text, arguments);
},

30
src/case/button/treeitem/item.mid.treeleaf.js

@ -28,19 +28,19 @@ BI.MidTreeLeafItem = BI.inherit(BI.BasicButton, {
});
var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, ((o.layer === 0) ? "" : {
width: 12,
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2,
el: {
type: "bi.layout",
cls: (o.pNode && o.pNode.isLastNode) ? "" : "base-line-conn-background",
width: 12,
cls: (o.pNode && o.pNode.isLastNode) ? "" : this._getBaseLineCls(),
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2,
height: o.height
}
}), {
width: 24,
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
el: {
type: "bi.layout",
cls: "mid-line-conn-background",
width: 24,
cls: this._getMidLineCls(),
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
height: o.height
}
}, {
@ -53,6 +53,24 @@ BI.MidTreeLeafItem = BI.inherit(BI.BasicButton, {
}))));
},
_getBaseLineCls: function () {
switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
case "solid":
return "base-solid-line-conn-background";
default:
return "base-line-conn-background";
}
},
_getMidLineCls: function () {
switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
case "solid":
return "mid-solid-line-conn-background";
default:
return "mid-line-conn-background";
}
},
doRedMark: function () {
this.text.doRedMark.apply(this.text, arguments);
},

4
src/case/button/treeitem/item.root.treeleaf.js

@ -31,10 +31,10 @@ BI.RootTreeLeafItem = BI.inherit(BI.BasicButton, {
var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, {
width: 24,
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
el: {
type: "bi.layout",
width: 24,
width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
height: o.height
}
}, {

15
src/case/checkbox/check.first.treenode.js

@ -6,18 +6,27 @@
BI.FirstTreeNodeCheckbox = BI.inherit(BI.IconButton, {
_defaultConfig: function () {
return BI.extend( BI.FirstTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), {
extraCls: "tree-collapse-icon-type2",
extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type2" : "tree-collapse-icon-type2",
iconWidth: 24,
iconHeight: 24
});
},
getLineCls: function () {
switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
case "solid":
return "tree-solid-expand-icon-type2";
default:
return "tree-expand-icon-type2";
}
},
setSelected: function (v) {
BI.FirstTreeNodeCheckbox.superclass.setSelected.apply(this, arguments);
if(v === true) {
this.element.addClass("tree-expand-icon-type2");
this.element.addClass(this.getLineCls());
} else {
this.element.removeClass("tree-expand-icon-type2");
this.element.removeClass(this.getLineCls());
}
}
});

15
src/case/checkbox/check.last.treenode.js

@ -6,18 +6,27 @@
BI.LastTreeNodeCheckbox = BI.inherit(BI.IconButton, {
_defaultConfig: function () {
return BI.extend(BI.LastTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), {
extraCls: "tree-collapse-icon-type4",
extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type4" : "tree-collapse-icon-type4",
iconWidth: 24,
iconHeight: 24
});
},
getLineCls: function () {
switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
case "solid":
return "tree-solid-expand-icon-type4";
default:
return "tree-expand-icon-type4";
}
},
setSelected: function (v) {
BI.LastTreeNodeCheckbox.superclass.setSelected.apply(this, arguments);
if (v === true) {
this.element.addClass("tree-expand-icon-type4");
this.element.addClass(this.getLineCls());
} else {
this.element.removeClass("tree-expand-icon-type4");
this.element.removeClass(this.getLineCls());
}
}
});

15
src/case/checkbox/check.mid.treenode.js

@ -6,18 +6,27 @@
BI.MidTreeNodeCheckbox = BI.inherit(BI.IconButton, {
_defaultConfig: function () {
return BI.extend( BI.MidTreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), {
extraCls: "tree-collapse-icon-type3",
extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type3" : "tree-collapse-icon-type3",
iconWidth: 24,
iconHeight: 24
});
},
getLineCls: function () {
switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
case "solid":
return "tree-solid-expand-icon-type3";
default:
return "tree-expand-icon-type3";
}
},
setSelected: function (v) {
BI.MidTreeNodeCheckbox.superclass.setSelected.apply(this, arguments);
if(v === true) {
this.element.addClass("tree-expand-icon-type3");
this.element.addClass(this.getLineCls());
} else {
this.element.removeClass("tree-expand-icon-type3");
this.element.removeClass(this.getLineCls());
}
}
});

15
src/case/checkbox/check.treenode.js

@ -6,18 +6,27 @@
BI.TreeNodeCheckbox = BI.inherit(BI.IconButton, {
_defaultConfig: function () {
return BI.extend( BI.TreeNodeCheckbox.superclass._defaultConfig.apply(this, arguments), {
extraCls: "tree-collapse-icon-type1",
extraCls: BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-solid-collapse-icon-type1" : "tree-collapse-icon-type1",
iconWidth: 24,
iconHeight: 24
});
},
getLineCls: function () {
switch (BI.STYLE_CONSTANTS.LINK_LINE_TYPE) {
case "solid":
return "tree-solid-collapse-icon-type1";
default:
return "tree-collapse-icon-type1";
}
},
setSelected: function (v) {
BI.TreeNodeCheckbox.superclass.setSelected.apply(this, arguments);
if(v) {
this.element.addClass("tree-expand-icon-type1");
this.element.addClass(this.getLineCls());
} else {
this.element.removeClass("tree-expand-icon-type1");
this.element.removeClass(this.getLineCls());
}
}
});

4
src/case/combo/bubblecombo/popup.bubble.js

@ -60,7 +60,7 @@ BI.BubblePopupBarView = BI.inherit(BI.BubblePopupView, {
});
return BI.createWidget({
type: "bi.center",
height: 44,
height: 48,
rgap: 15,
items: [{
type: "bi.right_vertical_adapt",
@ -84,7 +84,7 @@ BI.BubblePopupBarView = BI.inherit(BI.BubblePopupView, {
}]
});
button.element.css("min-height", o.minHeight - 44);
button.element.css("min-height", o.minHeight - 48);
return button;
}

2
src/case/tree/tree.level.js

@ -26,7 +26,7 @@ BI.LevelTree = BI.inherit(BI.Widget, {
_formatItems: function (nodes, layer, pNode) {
var self = this;
BI.each(nodes, function (i, node) {
var extend = { layer: layer };
var extend = { layer: layer, height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT };
if (!BI.isKey(node.id)) {
node.id = BI.UUID();
}

11
src/case/tree/treeexpander/tree.expander.popup.js

@ -1,16 +1,19 @@
!(function () {
var Widget = BI.inherit(BI.Widget, {
props: {
props: function () {
return {
baseCls: "bi-tree-expander-popup",
layer: 0, // 第几层级
el: {},
isLastNode: false,
};
},
render: function () {
var self = this;
var o = this.options;
var offset = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2;
this.popupView = BI.createWidget(BI.extend(o.el, {
value: o.value
@ -19,12 +22,12 @@
this.popupView.on(BI.Controller.EVENT_CHANGE, function () {
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
});
this.popupView.element.css("margin-left", -12 * o.layer);
this.element.css("margin-left", 12 * o.layer);
this.popupView.element.css("margin-left", -offset * o.layer);
this.element.css("margin-left", offset * o.layer);
return {
type: "bi.vertical",
cls: !o.isLastNode ? "line" : "",
cls: !o.isLastNode ? (BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "line solid" : "line") : "",
scrolly: null,
items: [
this.popupView,

2
src/case/ztree/0.treeview.js

@ -51,7 +51,7 @@ BI.TreeView = BI.inherit(BI.Pane, {
}
this.tree = BI.createWidget({
type: "bi.layout",
element: "<ul id='" + this.id + "' class='ztree'></ul>"
element: "<ul id='" + this.id + "' class='ztree" + (BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? " solid'" : "'") + "></ul>"
});
BI.createWidget({
type: "bi.default",

3
src/core/system.js

@ -73,4 +73,7 @@
BI.prepares.push(function () {
BI.SIZE_CONSANTS = BI.Providers.getProvider("bi.provider.system").getSize();
// 不再增加线型的配置了,之后不维护前置版本直接删掉,都用实线连接线
BI.STYLE_CONSTANTS = {};
BI.STYLE_CONSTANTS.LINK_LINE_TYPE = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT === 24 ? "dashed" : "solid";
});

5
src/less/base/tree/tree.expander.less

@ -7,3 +7,8 @@
left: 11px;
}
.bi-tree-expander-popup.line.solid:before {
border-left: 1px solid @color-bi-border-tree-expander-popup-line;
left: 15px;
}

34
src/less/base/tree/ztree.less

@ -25,6 +25,11 @@
padding: 0 0 0 18px
}
.ztree.solid li ul {
margin: 0;
padding: 0 0 0 24px
}
// 此处不用2倍图,改用css画虚线
// z-tree的line是一整块子节点区域,所以不能使用background-size: contain
// 使用1倍图太模糊,这边就使用css自己画了,calc属性支持IE9, IE8反正会走hack, 不影响
@ -40,19 +45,33 @@
}
}
.ztree.solid li ul.line {
&:before {
border-left: 1px solid @border-color-dark-gray-line;
height: 100%;
left: 15px;
margin-top: 0;
}
}
.bi-theme-dark {
.ztree li ul.line {
&:before {
border-left: 1px dashed @border-color-dark-gray-line;
}
}
.ztree.solid li ul.line {
&:before {
border-left: 1px solid @border-color-dark-gray-line;
}
}
}
.ztree li a {
padding: 1px 3px 0 0;
margin: 0;
cursor: pointer;
height: 24px;
height: 23px;
background-color: transparent;
text-decoration: none;
vertical-align: top;
@ -66,6 +85,10 @@
}
}
.ztree.solid li a {
height: 31px;
}
.ztree li a.curSelectedNode {
}
@ -113,6 +136,10 @@
}
}
.ztree.solid li span {
line-height: 32px;
}
.ztree li span.button {
line-height: 0;
margin: 0;
@ -229,6 +256,11 @@
height: 24px
}
.ztree.solid li span.button.switch {
width: 32px;
height: 32px
}
.ztree li span.button.switch.noline_open {
width: 0;
}

13
src/less/lib/constant.less

@ -22,16 +22,7 @@
// 色板
// 品牌
@color-brand-blue-100: #2C60DB;
@color-brand-blue-90: fade(@color-brand-blue-100, 90);
@color-brand-blue-80: fade(@color-brand-blue-100, 80);
@color-brand-blue-60: fade(@color-brand-blue-100, 60);
@color-brand-blue-50: fade(@color-brand-blue-100, 50);
@color-brand-blue-40: fade(@color-brand-blue-100, 40);
@color-brand-blue-30: fade(@color-brand-blue-100, 30);
@color-brand-blue-20: fade(@color-brand-blue-100, 20);
@color-brand-blue-10: fade(@color-brand-blue-100, 10);
@color-brand-blue-5: fade(@color-brand-blue-100, 5);
@color-primary: #3685f2;
//green
@color-bi-green-100: #13cd66;
@ -58,7 +49,7 @@
@color-bi-sea-green-5: fade(@color-bi-sea-green-100, 5);
//blue
@color-bi-blue-100: #3685f2;
@color-bi-blue-100: @color-primary;
@color-bi-blue-90: fade(@color-bi-blue-100, 90);
@color-bi-blue-80: fade(@color-bi-blue-100, 80);
@color-bi-blue-60: fade(@color-bi-blue-100, 60);

30
src/less/lib/icon.less

@ -41,6 +41,36 @@
@icon-tree-vertical-line-3-theme-dark: "icon/dark/tree_vertical_line_3.png";
@icon-tree-vertical-line-4-theme-dark: "icon/dark/tree_vertical_line_4.png";
@icon-tree-solid-expand-type1: "icon/tree_solid_expand_1.png";
@icon-tree-solid-expand-type2: "icon/tree_solid_expand_2.png";
@icon-tree-solid-expand-type3: "icon/tree_solid_expand_3.png";
@icon-tree-solid-expand-type4: "icon/tree_solid_expand_4.png";
@icon-tree-solid-collapse-type1: "icon/tree_solid_collapse_1.png";
@icon-tree-solid-collapse-type2: "icon/tree_solid_collapse_2.png";
@icon-tree-solid-collapse-type3: "icon/tree_solid_collapse_3.png";
@icon-tree-solid-collapse-type4: "icon/tree_solid_collapse_4.png";
@icon-tree-solid-vertical-line-1: "icon/tree_solid_vertical_line_1.png";
@icon-tree-solid-vertical-line-2: "icon/tree_solid_vertical_line_2.png";
@icon-tree-solid-vertical-line-3: "icon/tree_solid_vertical_line_3.png";
@icon-tree-solid-vertical-line-4: "icon/tree_solid_vertical_line_4.png";
@icon-tree-solid-expand-type1-theme-dark: "icon/dark/tree_solid_expand_1.png";
@icon-tree-solid-expand-type2-theme-dark: "icon/dark/tree_solid_expand_2.png";
@icon-tree-solid-expand-type3-theme-dark: "icon/dark/tree_solid_expand_3.png";
@icon-tree-solid-expand-type4-theme-dark: "icon/dark/tree_solid_expand_4.png";
@icon-tree-solid-collapse-type1-theme-dark: "icon/dark/tree_solid_collapse_1.png";
@icon-tree-solid-collapse-type2-theme-dark: "icon/dark/tree_solid_collapse_2.png";
@icon-tree-solid-collapse-type3-theme-dark: "icon/dark/tree_solid_collapse_3.png";
@icon-tree-solid-collapse-type4-theme-dark: "icon/dark/tree_solid_collapse_4.png";
@icon-tree-solid-vertical-line-1-theme-dark: "icon/dark/tree_solid_vertical_line_1.png";
@icon-tree-solid-vertical-line-2-theme-dark: "icon/dark/tree_solid_vertical_line_2.png";
@icon-tree-solid-vertical-line-3-theme-dark: "icon/dark/tree_solid_vertical_line_3.png";
@icon-tree-solid-vertical-line-4-theme-dark: "icon/dark/tree_solid_vertical_line_4.png";
@icon-loading: "icon/loading.gif";
@icon-wave-loading: "icon/wave_loading.gif";

154
src/less/resource/background.less

@ -14,27 +14,19 @@
& .ztree li span.button.switch.bottom_open {
.image2xPath(@icon-tree-vertical-line-4);
}
& .ztree.hack li span.button.switch.center_open {
.imagePath(@icon-tree-vertical-line-3);
}
& .ztree.hack li span.button.switch.roots_open {
.imagePath(@icon-tree-vertical-line-2);
}
& .ztree.hack li span.button.switch.bottom_open {
.imagePath(@icon-tree-vertical-line-4);
}
.bi-display-tree {
& .ztree.solid li span.button.switch.center_open {
.image2xPath(@icon-tree-solid-vertical-line-3);
}
.ztree.hack li ul.line {
.imagePath(@icon-tree-vertical-line-1, 0, 1px, repeat-y);
& .ztree.solid li span.button.switch.roots_open {
.image2xPath(@icon-tree-solid-vertical-line-2);
}
.bi-theme-dark {
.ztree.hack li ul.line {
.imagePath(@icon-tree-vertical-line-1-theme-dark, 0, 1px, repeat-y);
& .ztree.solid li span.button.switch.bottom_open {
.image2xPath(@icon-tree-solid-vertical-line-4);
}
}
@ -42,16 +34,16 @@
.image2xPath(@icon-tree-expand-type1);
}
.ztree.hack li span.button.root_open {
.imagePath(@icon-tree-expand-type1);
.ztree.solid li span.button.root_open {
.image2xPath(@icon-tree-solid-expand-type1);
}
.bi-theme-dark {
.ztree li span.button.root_open {
.image2xPath(@icon-tree-expand-type1-theme-dark);
}
.ztree.hack li span.button.root_open {
.imagePath(@icon-tree-expand-type1-theme-dark);
.ztree.solid li span.button.root_open {
.image2xPath(@icon-tree-solid-expand-type1-theme-dark);
}
}
@ -59,16 +51,16 @@
.image2xPath(@icon-tree-collapse-type1);
}
.ztree.hack li span.button.root_close {
.imagePath(@icon-tree-collapse-type1);
.ztree.solid li span.button.root_close {
.image2xPath(@icon-tree-solid-collapse-type1);
}
.bi-theme-dark {
.ztree li span.button.root_close {
.image2xPath(@icon-tree-collapse-type1-theme-dark);
}
.ztree.hack li span.button.root_close {
.imagePath(@icon-tree-collapse-type1-theme-dark);
.ztree.solid li span.button.root_close {
.image2xPath(@icon-tree-solid-collapse-type1-theme-dark);
}
}
@ -76,16 +68,16 @@
.image2xPath(@icon-tree-expand-type2);
}
.ztree.hack li span.button.roots_open {
.imagePath(@icon-tree-expand-type2);
.ztree.solid li span.button.roots_open {
.image2xPath(@icon-tree-solid-expand-type2);
}
.bi-theme-dark {
.ztree li span.button.roots_open {
.image2xPath(@icon-tree-expand-type2-theme-dark);
}
.ztree.hack li span.button.roots_open {
.imagePath(@icon-tree-expand-type2-theme-dark);
.ztree.solid li span.button.roots_open {
.image2xPath(@icon-tree-solid-expand-type2-theme-dark);
}
}
@ -93,16 +85,16 @@
.image2xPath(@icon-tree-collapse-type2);
}
.ztree.hack li span.button.roots_close {
.imagePath(@icon-tree-collapse-type2);
.ztree.solid li span.button.roots_close {
.image2xPath(@icon-tree-solid-collapse-type2);
}
.bi-theme-dark {
.ztree li span.button.roots_close {
.image2xPath(@icon-tree-collapse-type2-theme-dark);
}
.ztree.hack li span.button.roots_close {
.imagePath(@icon-tree-collapse-type2-theme-dark);
.ztree.solid li span.button.roots_close {
.image2xPath(@icon-tree-solid-collapse-type2-theme-dark);
}
}
@ -110,16 +102,16 @@
.image2xPath(@icon-tree-expand-type3);
}
.ztree.hack li span.button.center_open {
.imagePath(@icon-tree-expand-type3);
.ztree.solid li span.button.center_open {
.image2xPath(@icon-tree-solid-expand-type3);
}
.bi-theme-dark {
.ztree li span.button.center_open {
.image2xPath(@icon-tree-expand-type3-theme-dark);
}
.ztree.hack li span.button.center_open {
.imagePath(@icon-tree-expand-type3-theme-dark);
.ztree.solid li span.button.center_open {
.image2xPath(@icon-tree-solid-expand-type3-theme-dark);
}
}
@ -127,16 +119,16 @@
.image2xPath(@icon-tree-collapse-type3);
}
.ztree.hack li span.button.center_close {
.imagePath(@icon-tree-collapse-type3);
.ztree.solid li span.button.center_close {
.image2xPath(@icon-tree-solid-collapse-type3);
}
.bi-theme-dark {
.ztree li span.button.center_close {
.image2xPath(@icon-tree-collapse-type3-theme-dark);
}
.ztree.hack li span.button.center_close {
.imagePath(@icon-tree-collapse-type3-theme-dark);
.ztree.solid li span.button.center_close {
.image2xPath(@icon-tree-solid-collapse-type3-theme-dark);
}
}
@ -144,16 +136,16 @@
.image2xPath(@icon-tree-expand-type4);
}
.ztree.hack li span.button.bottom_open {
.imagePath(@icon-tree-expand-type4);
.ztree.solid li span.button.bottom_open {
.image2xPath(@icon-tree-solid-expand-type4);
}
.bi-theme-dark {
.ztree li span.button.bottom_open {
.image2xPath(@icon-tree-expand-type4-theme-dark);
}
.ztree.hack li span.button.bottom_open {
.imagePath(@icon-tree-expand-type4-theme-dark);
.ztree.solid li span.button.bottom_open {
.image2xPath(@icon-tree-solid-expand-type4-theme-dark);
}
}
@ -161,16 +153,16 @@
.image2xPath(@icon-tree-collapse-type4);
}
.ztree.hack li span.button.bottom_close {
.imagePath(@icon-tree-collapse-type4);
.ztree.solid li span.button.bottom_close {
.image2xPath(@icon-tree-solid-collapse-type4);
}
.bi-theme-dark {
.ztree li span.button.bottom_close {
.image2xPath(@icon-tree-collapse-type4-theme-dark);
}
.ztree.hack li span.button.bottom_close {
.imagePath(@icon-tree-collapse-type4-theme-dark);
.ztree.solid li span.button.bottom_close {
.image2xPath(@icon-tree-solid-collapse-type4-theme-dark);
}
}
@ -178,16 +170,16 @@
.image2xPath(@icon-tree-vertical-line-2);
}
.ztree.hack li span.button.roots_docu {
.imagePath(@icon-tree-vertical-line-2);
.ztree.solid li span.button.roots_docu {
.image2xPath(@icon-tree-solid-vertical-line-2);
}
.bi-theme-dark {
.ztree li span.button.roots_docu {
.image2xPath(@icon-tree-vertical-line-2-theme-dark);
}
.ztree.hack li span.button.roots_docu {
.imagePath(@icon-tree-vertical-line-2-theme-dark);
.ztree.solid li span.button.roots_docu {
.image2xPath(@icon-tree-solid-vertical-line-2-theme-dark);
}
}
@ -195,16 +187,16 @@
.image2xPath(@icon-tree-vertical-line-3);
}
.ztree.hack li span.button.center_docu {
.imagePath(@icon-tree-vertical-line-3);
.ztree.solid li span.button.center_docu {
.image2xPath(@icon-tree-solid-vertical-line-3);
}
.bi-theme-dark {
.ztree li span.button.center_docu {
.image2xPath(@icon-tree-vertical-line-3-theme-dark);
}
.ztree.hack li span.button.center_docu {
.imagePath(@icon-tree-vertical-line-3-theme-dark);
.ztree.solid li span.button.center_docu {
.image2xPath(@icon-tree-solid-vertical-line-3-theme-dark);
}
}
@ -212,16 +204,16 @@
.image2xPath(@icon-tree-vertical-line-4);
}
.ztree.hack li span.button.bottom_docu {
.imagePath(@icon-tree-vertical-line-4);
.ztree.solid li span.button.bottom_docu {
.image2xPath(@icon-tree-solid-vertical-line-4);
}
.bi-theme-dark {
.ztree li span.button.bottom_docu {
.image2xPath(@icon-tree-vertical-line-4-theme-dark);
}
.ztree.hack li span.button.bottom_docu {
.imagePath(@icon-tree-vertical-line-4-theme-dark);
.ztree.solid li span.button.bottom_docu {
.image2xPath(@icon-tree-solid-vertical-line-4-theme-dark);
}
}
@ -229,50 +221,86 @@
.image2xPath(@icon-loading);
}
.ztree.hack li span.button.ico_loading {
.imagePath(@icon-loading);
}
.base-line-conn-background {
.imagePath(@icon-tree-vertical-line-1, 0, 0, repeat-y);
}
.base-solid-line-conn-background {
.image2xPath(@icon-tree-solid-vertical-line-1, 0, 0, repeat-y);
}
.bi-theme-dark {
.base-line-conn-background {
.imagePath(@icon-tree-vertical-line-1-theme-dark, 0, 0, repeat-y);
}
}
.bi-theme-dark {
.base-solid-line-conn-background {
.image2xPath(@icon-tree-solid-vertical-line-1-theme-dark, 0, 0, repeat-y);
}
}
.first-line-conn-background {
.imagePath(@icon-tree-vertical-line-2);
}
.first-solid-line-conn-background {
.image2xPath(@icon-tree-solid-vertical-line-2);
}
.bi-theme-dark {
.first-line-conn-background {
.imagePath(@icon-tree-vertical-line-2-theme-dark);
}
}
.bi-theme-dark {
.first-solid-line-conn-background {
.image2xPath(@icon-tree-solid-vertical-line-2-theme-dark);
}
}
.mid-line-conn-background {
.imagePath(@icon-tree-vertical-line-3);
}
.mid-solid-line-conn-background {
.image2xPath(@icon-tree-solid-vertical-line-3);
}
.bi-theme-dark {
.mid-line-conn-background {
.imagePath(@icon-tree-vertical-line-3-theme-dark);
}
}
.bi-theme-dark {
.mid-solid-line-conn-background {
.image2xPath(@icon-tree-solid-vertical-line-3-theme-dark);
}
}
.last-line-conn-background {
.imagePath(@icon-tree-vertical-line-4);
}
.last-solid-line-conn-background {
.image2xPath(@icon-tree-solid-vertical-line-4);
}
.bi-theme-dark {
.last-line-conn-background {
.imagePath(@icon-tree-vertical-line-4-theme-dark);
}
}
.bi-theme-dark {
.last-solid-line-conn-background {
.image2xPath(@icon-tree-solid-vertical-line-4-theme-dark);
}
}
.loading-background {
.image2xPath(@icon-loading);
}

22
src/less/resource/icon.less

@ -13,6 +13,17 @@
.icon(tree-vertical-line-type2, @icon-tree-vertical-line-2);
.icon(tree-vertical-line-type3, @icon-tree-vertical-line-3);
.icon(tree-vertical-line-type4, @icon-tree-vertical-line-4);
.icon(tree-solid-collapse-icon-type1, @icon-tree-solid-collapse-type1);
.icon(tree-solid-collapse-icon-type2, @icon-tree-solid-collapse-type2);
.icon(tree-solid-collapse-icon-type3, @icon-tree-solid-collapse-type3);
.icon(tree-solid-collapse-icon-type4, @icon-tree-solid-collapse-type4);
.icon(tree-solid-expand-icon-type1, @icon-tree-solid-expand-type1);
.icon(tree-solid-expand-icon-type2, @icon-tree-solid-expand-type2);
.icon(tree-solid-expand-icon-type3, @icon-tree-solid-expand-type3);
.icon(tree-solid-expand-icon-type4, @icon-tree-solid-expand-type4);
.icon(tree-solid-vertical-line-type2, @icon-tree-solid-vertical-line-2);
.icon(tree-solid-vertical-line-type3, @icon-tree-solid-vertical-line-3);
.icon(tree-solid-vertical-line-type4, @icon-tree-solid-vertical-line-4);
//CheckBox
.icon_custom(check-box-icon, @icon-checkbox-normal, @icon-checkbox-normal, @icon-checkbox-normal, @icon-checkbox-active, @icon-checkbox-disable, @icon-checkbox-active-disable);
@ -43,6 +54,17 @@
.icon(tree-vertical-line-type2, @icon-tree-vertical-line-2-theme-dark);
.icon(tree-vertical-line-type3, @icon-tree-vertical-line-3-theme-dark);
.icon(tree-vertical-line-type4, @icon-tree-vertical-line-4-theme-dark);
.icon(tree-solid-collapse-icon-type1, @icon-tree-solid-collapse-type1-theme-dark);
.icon(tree-solid-collapse-icon-type2, @icon-tree-solid-collapse-type2-theme-dark);
.icon(tree-solid-collapse-icon-type3, @icon-tree-solid-collapse-type3-theme-dark);
.icon(tree-solid-collapse-icon-type4, @icon-tree-solid-collapse-type4-theme-dark);
.icon(tree-solid-expand-icon-type1, @icon-tree-solid-expand-type1-theme-dark);
.icon(tree-solid-expand-icon-type2, @icon-tree-solid-expand-type2-theme-dark);
.icon(tree-solid-expand-icon-type3, @icon-tree-solid-expand-type3-theme-dark);
.icon(tree-solid-expand-icon-type4, @icon-tree-solid-expand-type4-theme-dark);
.icon(tree-solid-vertical-line-type2, @icon-tree-solid-vertical-line-2-theme-dark);
.icon(tree-solid-vertical-line-type3, @icon-tree-solid-vertical-line-3-theme-dark);
.icon(tree-solid-vertical-line-type4, @icon-tree-solid-vertical-line-4-theme-dark);
.icon_select(trans-color-icon, @icon-trans-normal-dark, @icon-trans-select-dark, @icon-trans-disable-dark);
.icon(auto-square-color-icon, @icon-auto-square-normal-dark);

3
src/widget/multilayerselecttree/multilayerselecttree.leveltree.js

@ -34,7 +34,8 @@ BI.MultiLayerSelectLevelTree = BI.inherit(BI.Pane, {
BI.each(nodes, function (i, node) {
var extend = {
isFirstNode: i === 0,
isLastNode: i === nodes.length - 1
isLastNode: i === nodes.length - 1,
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT
};
node.layer = layer;
if (!BI.isKey(node.id)) {

4
src/widget/multilayerselecttree/node/node.first.plus.js

@ -54,12 +54,12 @@ BI.MultiLayerSelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, {
// });
items.push({
el: this.node,
lgap: o.layer * 12
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
});
BI.createWidget({
type: "bi.horizontal_adapt",
element: this,
columnSize: BI.makeArray(o.layer, 12),
columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items: items
});
},

4
src/widget/multilayerselecttree/node/node.last.plus.js

@ -47,12 +47,12 @@ BI.MultiLayerSelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, {
items.push({
el: this.node,
lgap: o.layer * 12
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
});
BI.createWidget({
type: "bi.horizontal_adapt",
element: this,
columnSize: BI.makeArray(o.layer, 12),
columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items: items
});
},

4
src/widget/multilayerselecttree/node/node.mid.plus.js

@ -47,12 +47,12 @@ BI.MultiLayerSelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, {
items.push({
el: this.node,
lgap: o.layer * 12
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
});
BI.createWidget({
type: "bi.horizontal_adapt",
element: this,
columnSize: BI.makeArray(o.layer, 12),
columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items: items
});
},

4
src/widget/multilayerselecttree/node/node.plus.js

@ -47,12 +47,12 @@ BI.MultiLayerSelectTreePlusGroupNode = BI.inherit(BI.NodeButton, {
items.push({
el: this.node,
lgap: o.layer * 12
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
});
BI.createWidget({
type: "bi.horizontal_adapt",
element: this,
columnSize: BI.makeArray(o.layer, 12),
columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items: items
});
},

3
src/widget/multilayersingletree/multilayersingletree.leveltree.js

@ -34,7 +34,8 @@ BI.MultiLayerSingleLevelTree = BI.inherit(BI.Pane, {
BI.each(nodes, function (i, node) {
var extend = {
isFirstNode: i === 0,
isLastNode: i === nodes.length - 1
isLastNode: i === nodes.length - 1,
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT
};
node.layer = layer;
if (!BI.isKey(node.id)) {

4
src/widget/multilayersingletree/node/node.first.plus.js

@ -26,12 +26,12 @@ BI.MultiLayerSingleTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, {
items.push({
el: this.node,
lgap: o.layer * 12
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
});
BI.createWidget({
type: "bi.horizontal_adapt",
element: this,
columnSize: BI.makeArray(o.layer, 12),
columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items: items
});
},

4
src/widget/multilayersingletree/node/node.last.plus.js

@ -26,12 +26,12 @@ BI.MultiLayerSingleTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, {
items.push({
el: this.node,
lgap: o.layer * 12
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
});
BI.createWidget({
type: "bi.horizontal_adapt",
element: this,
columnSize: BI.makeArray(o.layer, 12),
columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items: items
});
},

2
src/widget/multilayersingletree/node/node.mid.plus.js

@ -26,7 +26,7 @@ BI.MultiLayerSingleTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, {
items.push({
el: this.node,
lgap: o.layer * 12
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
});
BI.createWidget({
type: "bi.horizontal_adapt",

4
src/widget/multilayersingletree/treeitem/item.first.treeleaf.js

@ -46,12 +46,12 @@ BI.MultiLayerSingleTreeFirstTreeLeafItem = BI.inherit(BI.BasicButton, {
items.push({
el: this.item,
lgap: o.layer * 12
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
});
BI.createWidget({
type: "bi.horizontal_adapt",
element: this,
columnSize: BI.makeArray(o.layer, 12),
columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items: items
});
},

4
src/widget/multilayersingletree/treeitem/item.last.treeleaf.js

@ -46,12 +46,12 @@ BI.MultiLayerSingleTreeLastTreeLeafItem = BI.inherit(BI.BasicButton, {
items.push({
el: this.item,
lgap: o.layer * 12
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
});
BI.createWidget({
type: "bi.horizontal_adapt",
element: this,
columnSize: BI.makeArray(o.layer, 12),
columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items: items
});
},

4
src/widget/multilayersingletree/treeitem/item.mid.treeleaf.js

@ -46,12 +46,12 @@ BI.MultiLayerSingleTreeMidTreeLeafItem = BI.inherit(BI.BasicButton, {
items.push({
el: this.item,
lgap: o.layer * 12
lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2
});
BI.createWidget({
type: "bi.horizontal_adapt",
element: this,
columnSize: BI.makeArray(o.layer, 12),
columnSize: BI.makeArray(o.layer, BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2),
items: items
});
},

1
src/widget/selecttree/selecttree.popup.js

@ -20,6 +20,7 @@ BI.SelectTreePopup = BI.inherit(BI.Pane, {
var extend = {layer: layer};
node.id = node.id || BI.UUID();
extend.pNode = pNode;
extend.height = BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT;
if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) {
extend.type = "bi.select_tree_mid_plus_group_node";
if (i === nodes.length - 1) {

2
src/widget/singleselect/search/singleselect.search.loader.js

@ -95,7 +95,7 @@ BI.SingleSelectSearchLoader = BI.inherit(BI.Widget, {
type: o.allowNoSelect ? "bi.single_select_item" : "bi.single_select_radio_item",
logic: o.logic,
cls: "bi-list-item-active",
height: 24,
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
selected: false,
iconWrapperWidth: 26,
hgap: o.allowNoSelect ? 10 : 0,

2
src/widget/singleselect/singleselect.loader.js

@ -114,7 +114,7 @@ BI.SingleSelectLoader = BI.inherit(BI.Widget, {
type: o.allowNoSelect ? "bi.single_select_item" : "bi.single_select_radio_item",
logic: o.logic,
cls: "bi-list-item-active",
height: 24,
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
selected: false,
iconWrapperWidth: 26,
hgap: o.allowNoSelect ? 10 : 0,

Loading…
Cancel
Save