fix(comp:tree): lines are not aligned (#1393)

IDuxFE · Jan 9, 2023 · 0dd030d · 0dd030d
1 parent 430ab13
commit 0dd030d
Show file tree

Hide file tree

Showing 9 changed files with 153 additions and 131 deletions.
diff --git a/packages/components/tree-select/docs/Theme.zh.md b/packages/components/tree-select/docs/Theme.zh.md
@@ -15,5 +15,5 @@
 | `@tree-select-option-container-border-radius` | `@border-radius-sm` | - | - |
 | `@tree-select-option-container-box-shadow` | `@shadow-bottom-md` | - | - |
 | `@tree-select-option-container-search-wrapper-padding` | `@select-overlay-search-wrapper-padding` | - | - |
-| `@tree-select-option-container-tree-node-padding` | `0 0 0 @spacing-xs` | - | - |
+| `@tree-select-option-container-tree-node-padding` | `0 0 0 @spacing-xs` | `0 0 0 @spacing-sm` | - |
 | `@tree-select-border-radius` | - | `@border-radius-sm` | - |
diff --git a/packages/components/tree-select/style/themes/seer.variable.less b/packages/components/tree-select/style/themes/seer.variable.less
@@ -2,5 +2,6 @@
 
 @tree-select-border-radius: @border-radius-sm;
 
-@tree-select-option-container-padding: 4px 0;
 @tree-select-option-font-size: @font-size-sm;
+@tree-select-option-container-padding: 4px 0;
+@tree-select-option-container-tree-node-padding: 0 0 0 @spacing-sm;
diff --git a/packages/components/tree/demo/ShowLine.vue b/packages/components/tree/demo/ShowLine.vue
@@ -1,5 +1,6 @@
 <template>
   <IxSpace>
+    <IxCheckbox v-model:checked="showLine">Show Line</IxCheckbox>
     <IxCheckbox v-model:checked="customExpandIcon">Custom expandIcon</IxCheckbox>
     <IxCheckbox v-model:checked="customLeafLineIcon">Custom leafLineIcon</IxCheckbox>
     <IxCheckbox v-model:checked="checkable">Checkable</IxCheckbox>
@@ -11,8 +12,11 @@
     :checkable="checkable"
     :dataSource="treeData"
     :leafLineIcon="customLeafLineIcon ? 'file' : undefined"
-    showLine
+    :showLine="showLine"
   >
+    <template #prefix="{ node }">
+      <IxIcon :name="getNodeLabelIcon(node)" />
+    </template>
     <template #expandIcon="{ expanded }">
       <IxIcon v-if="customExpandIcon" :name="expanded ? 'folder-open' : 'folder'"></IxIcon>
       <IxIcon v-else name="right" :rotate="expanded ? 90 : 0"></IxIcon>
@@ -29,6 +33,7 @@ const customExpandIcon = ref(false)
 const customLeafLineIcon = ref(false)
 const checkable = ref(false)
 const expandedKeys = ref(['0', '0-0', '0-1'])
+const showLine = ref(true)
 
 const treeData = ref<TreeNode[]>([
   {
@@ -81,4 +86,12 @@ const treeData = ref<TreeNode[]>([
     ],
   },
 ])
+
+const getNodeLabelIcon = (node: TreeNode) => {
+  if (node.isLeaf || !node.children || node.children.length <= 0) {
+    return 'desktop'
+  }
+
+  return expandedKeys.value.includes(node.key as string) ? 'folder-open' : 'folder'
+}
 </script>
diff --git a/packages/components/tree/docs/Theme.zh.md b/packages/components/tree/docs/Theme.zh.md
@@ -13,9 +13,11 @@
 | `@tree-node-selected-background-color` | `@color-graphite-l40` | `@color-white` | - |
 | `@tree-node-line-size` | `1px` | - | - |
 | `@tree-node-line-color` | `@color-graphite` | - | - |
-| `@tree-node-padding-vertical` | `(@spacing-sm / 2)` | `0` | - |
+| `@tree-node-padding-vertical` | `(@spacing-sm / 2)` | `0px` | - |
 | `@tree-node-content-height` | `@height-sm` | `@height-md` | - |
+| `@tree-node-content-padding` | `0 @spacing-sm 0 @spacing-xs` | - | - |
 | `@tree-node-content-label-padding` | `0 @spacing-xs` | - | - |
 | `@tree-node-content-label-highlight-color` | `@color-primary` | - | - |
-| `@tree-node-checkbox-margin` | `0 @spacing-xs 0 (@tree-node-content-height / 2 - @tree-icon-font-size / 2)` | - | - |
+| `@tree-node-checkbox-margin` | `0 @spacing-xs 0 (@tree-node-icon-width / 2 - @tree-icon-font-size / 2)` | - | - |
+| `@tree-node-icon-width` | `@height-sm` | - | - |
 | `@tree-expand-icon-color` | `@color-graphite` | - | - |
diff --git a/packages/components/tree/style/index.less b/packages/components/tree/style/index.less
@@ -58,11 +58,8 @@
     }
   }
 
-  &-show-line {
+  &.@{tree-prefix}&-show-line {
     .@{tree-node-prefix} {
-      &-content-prefix {
-        padding-left: 8px;
-      }
 
       &-last {
         .@{tree-node-prefix}-leaf-line {
@@ -88,7 +85,9 @@
         &::after {
           position: absolute;
           top: calc(50% - @tree-node-line-size / 2);
-          width: (@tree-node-content-height / 4);
+          right: -2px;
+          width: (@tree-node-icon-width / 4);
+          z-index: 1;
           .horizontal-line();
 
           content: ' ';
@@ -122,163 +121,169 @@
         &::before {
           position: absolute;
           top: -@tree-node-padding-vertical;
-          right: (@tree-node-content-height / 2);
-          bottom: -@tree-node-padding-vertical;
+          right: (@tree-node-icon-width / 2);
+          bottom: -@tree-node-padding-vertical + 1;
           .vertical-line();
 
           content: '';
         }
       }
     }
   }
-}
 
-.@{tree-node-prefix} {
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: @tree-node-padding-vertical 0;
-  white-space: nowrap;
+  .@{tree-node-prefix} {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: @tree-node-padding-vertical 0;
+    white-space: nowrap;
 
-  .@{icon-prefix} {
-    font-size: @tree-icon-font-size;
-  }
+    .@{icon-prefix} {
+      font-size: @tree-icon-font-size;
+    }
 
-  &-indent {
-    &-noop-unit,
-    &-unit {
-      display: inline-block;
-      width: @tree-node-content-height;
+    &-indent {
+      &-noop-unit,
+      &-unit {
+        display: inline-block;
+        width: @tree-node-icon-width;
+      }
     }
-  }
 
-  &-draggable-icon {
-    cursor: pointer;
-    opacity: 0.4;
-    text-align: center;
-    transition: opacity @transition-duration-base @ease-in-out;
-    width: @tree-node-content-height;
+    &-draggable-icon {
+      cursor: pointer;
+      opacity: 0.4;
+      transition: opacity @transition-duration-base @ease-in-out;
+      width: @tree-node-icon-width;
+      height: @tree-node-content-height;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-    &-noop {
-      width: @tree-node-content-height;
+      &-noop {
+        width: @tree-node-icon-width;
+      }
     }
-  }
 
-  &-expand {
-    width: @tree-node-content-height;
-    line-height: @tree-node-content-height;
-    text-align: center;
-    cursor: pointer;
+    &-expand {
+      width: @tree-node-icon-width;
+      height: @tree-node-content-height;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
 
-    &-noop {
-      cursor: default;
+      &-noop {
+        cursor: default;
+      }
     }
-  }
 
-  &-checkbox {
-    margin: @tree-node-checkbox-margin;
-  }
+    &-checkbox {
+      margin: @tree-node-checkbox-margin;
+    }
 
-  &-leaf {
-    width: @tree-node-content-height;
-    align-self: stretch;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: default;
+    &-leaf {
+      width: @tree-node-icon-width;
+      align-self: stretch;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: default;
 
-    &-line {
-      position: relative;
-      z-index: 1;
-      display: block;
-      height: 100%;
-      width: 100%;
+      &-line {
+        position: relative;
+        z-index: 1;
+        display: block;
+        height: 100%;
+        width: 100%;
 
-      &::before {
-        position: absolute;
-        top: -@tree-node-padding-vertical;
-        right: (@tree-node-content-height / 2);
-        bottom: -@tree-node-padding-vertical;
-        .vertical-line();
+        &::before {
+          position: absolute;
+          top: -@tree-node-padding-vertical;
+          right: (@tree-node-icon-width / 2);
+          bottom: -@tree-node-padding-vertical + 1;
+          .vertical-line();
 
-        content: ' ';
-      }
+          content: ' ';
+        }
 
-      &::after {
-        position: absolute;
-        top: 50%;
-        bottom: 0;
-        left: 55%;
-        right: 0;
-        .horizontal-line();
+        &::after {
+          position: absolute;
+          top: 50%;
+          bottom: 0;
+          left: 55%;
+          right: 0;
+          .horizontal-line();
 
-        content: ' ';
+          content: ' ';
+        }
       }
     }
-  }
 
-  &-content {
-    position: relative;
-    display: inline-flex;
-    cursor: pointer;
-    min-height: @tree-node-content-height;
-    line-height: @tree-node-content-height;
-    transition: background-color @transition-duration-base;
+    &-content {
+      position: relative;
+      display: inline-flex;
+      cursor: pointer;
+      min-height: @tree-node-content-height;
+      line-height: @tree-node-content-height;
+      transition: background-color @transition-duration-base;
+      padding: @tree-node-content-padding;
 
-    &:hover {
-      background-color: @tree-node-hover-background-color;
-    }
+      &:hover {
+        background-color: @tree-node-hover-background-color;
+      }
 
-    &-prefix,
-    &-suffix {
-      display: flex;
-      justify-items: center;
-      align-items: center;
-    }
+      &-prefix,
+      &-suffix {
+        display: flex;
+        justify-items: center;
+        align-items: center;
+      }
 
-    &-label {
-      display: inline-block;
-      flex-grow: 1;
-      padding: @tree-node-content-label-padding;
+      &-label {
+        display: inline-block;
+        flex-grow: 1;
+        padding: @tree-node-content-label-padding;
 
-      &-highlight {
-        color: @tree-node-content-label-highlight-color;
+        &-highlight {
+          color: @tree-node-content-label-highlight-color;
+        }
       }
     }
-  }
 
-  &-active:not(&-disabled) &-content {
-    background-color: @tree-node-hover-background-color;
-  }
-
-  &-selected:not(&-disabled) &-content {
-    background-color: @tree-node-selected-background-color;
-    color: @tree-node-selected-color;
-    &:hover {
+    &-active:not(&-disabled) &-content {
       background-color: @tree-node-hover-background-color;
     }
-  }
 
-  &-disabled &-content {
-    color: @tree-node-disabled-color;
-    cursor: not-allowed;
+    &-selected:not(&-disabled) &-content {
+      background-color: @tree-node-selected-background-color;
+      color: @tree-node-selected-color;
+      &:hover {
+        background-color: @tree-node-hover-background-color;
+      }
+    }
+
+    &-disabled &-content {
+      color: @tree-node-disabled-color;
+      cursor: not-allowed;
 
-    &:hover {
-      background: transparent;
+      &:hover {
+        background: transparent;
+      }
     }
-  }
 
-  &-drop-parent,
-  &-drop-inside {
-    box-shadow: 0 0 0 @tree-box-shadow-size @tree-box-shadow-color;
-  }
+    &-drop-parent,
+    &-drop-inside {
+      box-shadow: 0 0 0 @tree-box-shadow-size @tree-box-shadow-color;
+    }
 
-  &-drop-before &-content {
-    box-shadow: 0 -@tree-box-shadow-size 0 0 @tree-box-shadow-color;
-  }
+    &-drop-before &-content {
+      box-shadow: 0 -@tree-box-shadow-size 0 0 @tree-box-shadow-color;
+    }
 
-  &-drop-after &-content {
-    box-shadow: 0 @tree-box-shadow-size 0 0 @tree-box-shadow-color;
+    &-drop-after &-content {
+      box-shadow: 0 @tree-box-shadow-size 0 0 @tree-box-shadow-color;
+    }
   }
 }
diff --git a/packages/components/tree/style/themes/default.variable.less b/packages/components/tree/style/themes/default.variable.less
@@ -17,9 +17,12 @@
 @tree-node-padding-vertical: (@spacing-sm / 2);
 
 @tree-node-content-height: @height-sm;
+@tree-node-content-padding: 0 @spacing-sm 0 @spacing-xs;
 @tree-node-content-label-padding: 0 @spacing-xs;
 @tree-node-content-label-highlight-color: @color-primary;
 
-@tree-node-checkbox-margin: 0 @spacing-xs 0 (@tree-node-content-height / 2 - @tree-icon-font-size / 2);
+@tree-node-checkbox-margin: 0 @spacing-xs 0 (@tree-node-icon-width / 2 - @tree-icon-font-size / 2);
+
+@tree-node-icon-width: @height-sm;
 
 @tree-expand-icon-color: @color-graphite;
diff --git a/packages/components/tree/style/themes/seer.variable.less b/packages/components/tree/style/themes/seer.variable.less
@@ -9,4 +9,4 @@
 @tree-node-selected-color: @color-primary;
 @tree-node-selected-background-color: @color-white;
 
-@tree-node-padding-vertical: 0;
+@tree-node-padding-vertical: 0px;