fix: drag treenode style

pull/5202/head
tangjinzhou 2022-01-23 15:31:28 +08:00
parent d442db08eb
commit 6d4248d046
1 changed files with 62 additions and 14 deletions

View File

@ -1,7 +1,6 @@
@import '../../style/mixins/index'; @import '../../style/mixins/index';
@tree-prefix-cls: ~'@{ant-prefix}-tree'; @tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree'; @select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
@tree-motion: ~'@{ant-prefix}-motion-collapse'; @tree-motion: ~'@{ant-prefix}-motion-collapse';
@tree-node-padding: (@padding-xs / 2); @tree-node-padding: (@padding-xs / 2);
@ -13,6 +12,7 @@
display: inline-block; display: inline-block;
font-size: 10px; font-size: 10px;
vertical-align: baseline; vertical-align: baseline;
svg { svg {
transition: transform 0.3s; transition: transform 0.3s;
} }
@ -28,6 +28,7 @@
background-color: @primary-color; background-color: @primary-color;
border-radius: 1px; border-radius: 1px;
pointer-events: none; pointer-events: none;
&::after { &::after {
position: absolute; position: absolute;
top: -3px; top: -3px;
@ -66,6 +67,26 @@
.@{custom-tree-prefix-cls}-node-content-wrapper { .@{custom-tree-prefix-cls}-node-content-wrapper {
flex: auto; flex: auto;
} }
// >>> Drag
.@{custom-tree-node-prefix-cls}.dragging {
position: relative;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: @tree-node-padding;
left: 0;
border: 1px solid @primary-color;
opacity: 0;
animation: ant-tree-node-fx-do-not-use 0.3s;
animation-play-state: running;
animation-fill-mode: forwards;
content: '';
pointer-events: none;
}
}
} }
} }
@ -110,6 +131,19 @@
} }
} }
// >>> Drag Handler
&-draggable-icon {
width: @tree-title-height;
line-height: @tree-title-height;
text-align: center;
opacity: 0.2;
transition: opacity @animation-duration-slow;
.@{custom-tree-node-prefix-cls}:hover & {
opacity: 0.45;
}
}
// >>> Switcher // >>> Switcher
&-switcher { &-switcher {
.antTreeSwitcherIcon(); .antTreeSwitcherIcon();
@ -145,19 +179,21 @@
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: 100%; height: 100%;
// https://github.com/ant-design/ant-design/issues/31884
&::before { &::before {
position: absolute; position: absolute;
top: 0; top: 0;
right: 12px;
bottom: -@tree-node-padding; bottom: -@tree-node-padding;
margin-left: -1px; margin-left: -1px;
border-left: 1px solid @normal-color; border-right: 1px solid @normal-color;
content: ' '; content: ' ';
} }
&::after { &::after {
position: absolute; position: absolute;
width: @tree-title-height - 14px; width: @tree-title-height - 14px;
height: @tree-title-height - 10px; height: @tree-title-height - 10px;
margin-left: -1px;
border-bottom: 1px solid @normal-color; border-bottom: 1px solid @normal-color;
content: ' '; content: ' ';
} }
@ -200,6 +236,7 @@
line-height: @tree-title-height; line-height: @tree-title-height;
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
&:empty { &:empty {
display: none; display: none;
} }
@ -212,7 +249,7 @@
} }
// ==================== Draggable ===================== // ==================== Draggable =====================
&-node-content-wrapper[draggable='true'] { &-node-content-wrapper {
line-height: @tree-title-height; line-height: @tree-title-height;
user-select: none; user-select: none;
@ -255,14 +292,14 @@
background: @component-background; background: @component-background;
&-line-icon { &-line-icon {
vertical-align: -0.225em; // https://github.com/ant-design/ant-design/issues/32813
} vertical-align: -0.15em;
} }
} }
} }
.@{tree-node-prefix-cls}-leaf-last { .@{custom-tree-node-prefix-cls}-leaf-last {
.@{tree-prefix-cls}-switcher { .@{custom-tree-prefix-cls}-switcher {
&-leaf-line { &-leaf-line {
&::before { &::before {
top: auto !important; top: auto !important;
@ -272,3 +309,14 @@
} }
} }
} }
}
@keyframes ant-tree-node-fx-do-not-use {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}