Browse Source

KERNEL-10683 fix: 树的样式调整,支持等比缩放..

es6
zsmj 2 years ago
parent
commit
0ed644fa2b
  1. 6
      src/case/button/node/siwtcher.tree.node.js
  2. 6
      src/case/button/treeitem/treeitem.js
  3. 67
      src/less/case/tree/tree.item.less
  4. 4
      webpack/attachments.js

6
src/case/button/node/siwtcher.tree.node.js

@ -29,13 +29,13 @@ BI.TreeNodeSwitcher = BI.inherit(BI.NodeButton, {
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type1", "tree-expand-icon-type1"]; return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type1", "tree-expand-icon-type1"];
} else if (options.layer === 0 && options.isFirstNode) { } else if (options.layer === 0 && options.isFirstNode) {
// 第一层,并且是第一个节点 // 第一层,并且是第一个节点
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type2", "tree-solid-expand-icon-type2"] : ["tree-collapse-icon-type2", "tree-expand-icon-type2"]; return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type2", "tree-expand-icon-type2"];
} else if (options.isLastNode) { } else if (options.isLastNode) {
// 最后一个节点 // 最后一个节点
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type4", "tree-solid-expand-icon-type4"] : ["tree-collapse-icon-type4", "tree-expand-icon-type4"]; return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type3", "tree-expand-icon-type3"];
} else { } else {
// 其他情况 // 其他情况
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type3", "tree-solid-expand-icon-type3"] : ["tree-collapse-icon-type3", "tree-expand-icon-type3"]; return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? ["tree-solid-collapse-icon-type1", "tree-solid-expand-icon-type1"] : ["tree-collapse-icon-type4", "tree-expand-icon-type4"];
} }
}, },

6
src/case/button/treeitem/treeitem.js

@ -57,11 +57,11 @@ BI.BasicTreeItem = BI.inherit(BI.NodeButton, {
if (options.layer === 0 && options.isFirstNode && options.isLastNode) { if (options.layer === 0 && options.isFirstNode && options.isLastNode) {
return ""; return "";
} else if (options.layer === 0 && options.isFirstNode) { } else if (options.layer === 0 && options.isFirstNode) {
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "first-solid-line-conn-background" : "first-line-conn-background"; return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-first-solid-line-conn-background" : "first-line-conn-background";
} else if (options.isLastNode) { } else if (options.isLastNode) {
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "last-solid-line-conn-background" : "last-line-conn-background"; return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-last-solid-line-conn-background" : "last-line-conn-background";
} else { } else {
return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "mid-solid-line-conn-background" : "mid-line-conn-background"; return BI.STYLE_CONSTANTS.LINK_LINE_TYPE === "solid" ? "tree-mid-solid-line-conn-background" : "mid-line-conn-background";
} }
}, },

67
src/less/case/tree/tree.item.less

@ -0,0 +1,67 @@
@import "../../index.less";
.tree-first-solid-line-conn-background, .tree-mid-solid-line-conn-background {
&:before {
position: absolute;
top: 0;
left: -1px;
width: 50%;
height: 100%;
border-right: 1px solid @border-color-dark-gray-line;
content: '';
}
&:after {
position: absolute;
top: 0;
right: 0;
height: 50%;
width: 50%;
border-bottom: 1px solid @border-color-dark-gray-line;
content: '';
}
}
.tree-last-solid-line-conn-background {
&:before {
position: absolute;
top: 0;
left: -1px;
width: 50%;
height: 50%;
border-right: 1px solid @border-color-dark-gray-line;
content: '';
}
&:after {
position: absolute;
top: 0;
right: 1px;
height: 50%;
width: 50%;
border-bottom: 1px solid @border-color-dark-gray-line;
content: '';
}
}
.bi-theme-dark {
.tree-first-solid-line-conn-background, .tree-mid-solid-line-conn-background {
&:before {
border-right: 1px solid @border-color-dark-gray-line-theme-dark;
}
&:after {
border-bottom: 1px solid @border-color-dark-gray-line-theme-dark;
}
}
.tree-last-solid-line-conn-background {
&:before {
border-right: 1px solid @border-color-dark-gray-line-theme-dark;
}
&:after {
border-bottom: 1px solid @border-color-dark-gray-line-theme-dark;
}
}
}

4
webpack/attachments.js

@ -31,6 +31,7 @@ const basicAttachmentMap = {
// 实现好的一些基础实例 // 实现好的一些基础实例
case: sync([ case: sync([
"src/case/**/*.js", "src/case/**/*.js",
"src/less/case/**/*.less",
]), ]),
widget: sync([ widget: sync([
"src/less/widget/**/*.less", "src/less/widget/**/*.less",
@ -90,6 +91,7 @@ const basicAttachmentMap = {
"src/less/core/**/*.less", "src/less/core/**/*.less",
"src/less/theme/**/*.less", "src/less/theme/**/*.less",
"src/less/base/**/*.less", "src/less/base/**/*.less",
"src/less/case/**/*.less",
"src/less/widget/**/*.less", "src/less/widget/**/*.less",
"src/less/component/**/*.less", "src/less/component/**/*.less",
]), ]),
@ -139,6 +141,7 @@ const bundleWithoutNormalize = [].concat(
basicAttachmentMap.core_without_normalize, basicAttachmentMap.core_without_normalize,
sync([ sync([
"src/less/base/**/*.less", "src/less/base/**/*.less",
"src/less/case/**/*.less",
"src/less/widget/**/*.less", "src/less/widget/**/*.less",
"src/less/component/**/*.less", "src/less/component/**/*.less",
"public/less/**/*.less", "public/less/**/*.less",
@ -152,6 +155,7 @@ const fineuiWithoutNormalize = [].concat(
basicAttachmentMap.core_without_normalize, basicAttachmentMap.core_without_normalize,
sync([ sync([
"src/less/base/**/*.less", "src/less/base/**/*.less",
"src/less/case/**/*.less",
"src/less/widget/**/*.less", "src/less/widget/**/*.less",
"src/less/component/**/*.less", "src/less/component/**/*.less",
'ui/less/app.less', 'ui/less/app.less',

Loading…
Cancel
Save