Skip to content

fix(tree): [tree] remove __content-box dom, compact with AUI code #2247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 14, 2024
Merged

fix(tree): [tree] remove __content-box dom, compact with AUI code #2247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion examples/sites/demos/apis/tree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,11 +497,24 @@ export default {
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '通过 <code> highlightQuery </code> 属性，是否在匹配的节点中，高亮搜索文字。<br>',
'zh-CN': '通过 <code> highlightQuery </code> 属性，是否在匹配的节点中，高亮搜索文字。',
'en-US': 'Indicates whether to highlight the search text in the matched node.'
},
mode: ['pc'],
pcDemo: 'filter-view'
},
{
name: 'show-checked-mark',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN':
'通过设置 <code> showCheckedMark </code> 属性为true,且非多选模式时，可以在选中行的最右边显示 <code> √ </code> 号。',
'en-US':
'By setting the <code> showCheckedMark </code> property to true, you can display the <code> √ </code> number on the far right when a line is selected.'
},
mode: ['pc'],
pcDemo: ''
}
],
events: [
Expand Down
2 changes: 1 addition & 1 deletion packages/theme-saas/src/tree-menu/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@
}
}

.@{tree-node-prefix-cls}__content-box {
.@{tree-node-prefix-cls}__label {
@apply flex-1;
}

Expand Down
5 changes: 0 additions & 5 deletions packages/theme-saas/src/tree/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,11 +250,6 @@
& label.@{css-prefix}checkbox {
@apply ml-2;
}
.@{tree-node-prefix-cls}__content-box {
@apply overflow-hidden;
@apply text-ellipsis;
@apply whitespace-nowrap;
}

.@{tree-node-prefix-cls}__content-left {
@apply flex;
Expand Down
4 changes: 2 additions & 2 deletions packages/theme/src/link-menu/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@

.tiny-dialog-box__wrapper {
.tiny-dialog-box__header {
padding: 32px 32px 16px;
padding: 32px 32px 16px;
}
.tiny-dialog-box__body {
.tiny-link-menu__filert {
Expand Down Expand Up @@ -146,7 +146,7 @@
}

&.@{link-menu-prefix-cls}__overflow {
.tiny-tree-node__content-box {
.tiny-tree-node__label {
width: 100%;

.tree-node {
Expand Down
3 changes: 2 additions & 1 deletion packages/theme/src/toggle-menu/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,8 @@
height: 32px;
}

:not(.show-checkbox) > .@{tree-node-prefix-cls}__content .@{tree-node-prefix-cls}__content-box,.@{tree-node-prefix-cls}__content-right {
:not(.show-checkbox) > .@{tree-node-prefix-cls}__content .@{tree-node-prefix-cls}__label,
.@{tree-node-prefix-cls}__content-right {
Comment on lines +134 to +135
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Issue Found: Remaining __content-box usage detected.

An occurrence of __content-box remains in examples/sites/src/views/layout/layout.vue, indicating that the removal may be incomplete. Please address this to ensure consistent styling and complete removal across the codebase.

🔗 Analysis chain

LGTM! Verify visual consistency and check for side effects.

The changes align with the PR objective of removing the __content-box DOM element. The new selector targets more specific elements (__label and __content-right), which should lead to more precise styling.

Please verify the following:

  1. Ensure that the hover effects still work as expected for all tree node elements.
  2. Check if this change affects any other components or styles that might have depended on the old selector.
  3. Consider adding before/after screenshots to the PR description to demonstrate that the visual appearance remains consistent.

To help with verification, you can run the following command to check for any other occurrences of __content-box in the codebase:

This will help ensure that the removal is complete and consistent across the project.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for any remaining occurrences of __content-box
rg --type less --type vue --type js '__content-box'

Length of output: 79

Script:

#!/bin/bash
# Search for any remaining occurrences of __content-box in .less, .vue, and .js files
rg '__content-box' --glob '*.less' --glob '*.vue' --glob '*.js'

Length of output: 139

&:hover {
background-color: var(--ti-toggle-menu-toggle-bg-hover-color);
font-weight: var(--ti-toggle-menu-toggle-font-weight);
Expand Down
9 changes: 1 addition & 8 deletions packages/theme/src/tree-menu/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@
.@{tree-node-prefix-cls}__content:hover {
background-color: var(--ti-tree-menu-node-hover-bg-color);

.@{tree-node-prefix-cls}__content-box {
.@{tree-node-prefix-cls}__label {
background-color: transparent;
}
}
Expand Down Expand Up @@ -284,13 +284,6 @@
align-items: center;
}

.@{tree-node-prefix-cls}__label {
// 兼容ie10-ie11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
display: flex;
}
}

.tree-node-name {
white-space: normal;
line-height: normal;
Expand Down
20 changes: 4 additions & 16 deletions packages/theme/src/tree/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@
}

.@{tree-node-prefix-cls}.is-current:not(.show-checkbox) > .@{tree-node-prefix-cls}__content {
.@{tree-node-prefix-cls}__content-box,
.@{tree-node-prefix-cls}__label,
.@{tree-node-prefix-cls}__content-right {
background-color: var(--ti-tree-node-highlight-bg-color);
}
Expand Down Expand Up @@ -295,7 +295,6 @@
& > .@{tree-node-prefix-cls}__content-left {
color: var(--ti-tree-selected-text-color);
font-weight: var(--ti-tree-selected-font-weight);
background: transparent;
}
}

Expand Down Expand Up @@ -338,13 +337,9 @@
color: var(--ti-tree-node-checked-icon-color);
}

.@{tree-node-prefix-cls}__content-box,
.@{tree-node-prefix-cls}__content-left,
.@{tree-node-prefix-cls}__content-right {
background-color: var(--ti-tree-node-hover-inner-bg-color);
}

.@{tree-node-prefix-cls}__content-left {
background-color: var(--ti-tree-node-hover-outter-bg-color);
background-color: var(--ti-tree-node-content-hover-bg-color);
}

.@{tree-node-prefix-cls}__content-right {
Expand All @@ -357,14 +352,7 @@
margin: 0 calc(var(--ti-tree-node-label-margin-left) / 2);
}

.@{tree-node-prefix-cls}__content-box {
flex: 1;
height: 100%;
display: flex;
align-items: center;
padding-left: calc(var(--ti-tree-node-label-margin-left) / 2);
padding-right: var(--ti-tree-node-content-padding-right);

.@{tree-node-prefix-cls}__label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
Expand Down
4 changes: 0 additions & 4 deletions packages/theme/src/tree/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,6 @@
--ti-tree-node-content-current-bg-color: var(--ti-common-color-light, #ffffff);
// 节点悬浮背景色
--ti-tree-node-content-hover-bg-color: var(--ti-common-color-hover-background, #f5f5f5);
// 节点悬浮外层背景色(hide)
--ti-tree-node-hover-outter-bg-color: var(--ti-common-color-hover-background, #f5f5f5);
// 节点悬浮内层背景色(hide)
--ti-tree-node-hover-inner-bg-color: var(--ti-tree-node-content-hover-bg-color);
// 节点字号
--ti-tree-node-label-font-size: var(--ti-common-font-size-1, 14px);
// 节点内容左边距
Expand Down
6 changes: 4 additions & 2 deletions packages/vue/src/tree/src/tree-node.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
@drop.stop="handleDrop"
ref="node"
>
<!-- 当前节点的行： 缩进块+left(箭头图标+单多选钮+loading+prefix+label+suffix)+right(finish图标+operation+编辑按钮) -->
<div
:class="{
'tiny-tree-node__content': true,
Expand Down Expand Up @@ -128,9 +129,9 @@
@click.stop="($event) => $event.stopPropagation()"
/>
</template>
<div v-else class="tiny-tree-node__content-box">
<template v-else>
<node-content :node="node" :render-content="renderContent"></node-content>
</div>
</template>
<slot name="suffix" :node="node"></slot>
</div>
<div :class="['tiny-tree-node__content-right', { 'is-disabled': node.disabled }]">
Expand Down Expand Up @@ -164,6 +165,7 @@
</div>
</div>

<!-- 子级树节点 -->
<template v-if="node.childNodes.length">
<collapse-transition>
<div
Expand Down
Loading