fix: btree width ellipse

advjs · Dec 25, 2023 · 66d3a76 · 66d3a76
1 parent f2fdb77
commit 66d3a76
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/packages/blender-ui/client/components/BPanel/BPanel.story.vue b/packages/blender-ui/client/components/BPanel/BPanel.story.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import BProperty from '../BProperty/BProperty.vue'
+import BNumberField from '../BNumberField/BNumberField.vue'
+import BSelectMenu from '../BSelectMenu/BSelectMenu.vue'
 import BPanel from './BPanel.vue'
 
 const expanded = ref(true)

diff --git a/packages/blender-ui/client/components/BPanel/BPanel.vue b/packages/blender-ui/client/components/BPanel/BPanel.vue
@@ -114,8 +114,8 @@ function afterLeave(el: Element) {
     &:before {
       content: "";
       position: absolute;
-      top: 3px;
-      left: 3px;
+      top: 4px;
+      left: 4px;
       width: 16px;
       height: 16px;
       background: var(--b-icon-chevron-right) center center no-repeat;

diff --git a/packages/blender-ui/client/components/BTree/BTree.story.vue b/packages/blender-ui/client/components/BTree/BTree.story.vue
@@ -53,6 +53,10 @@ const treeData = ref<Trees>([
             name: 'Level three 3-1-1',
             selectable: true,
           },
+          {
+            name: 'Level three 3-1-2 Long Name Long Name Long Name Long Name Long Name Long Name',
+            selectable: true,
+          },
         ],
       },
       {

diff --git a/packages/blender-ui/client/components/BTree/BTreeNode.vue b/packages/blender-ui/client/components/BTree/BTreeNode.vue
@@ -188,9 +188,15 @@ function onNodeActivated(node: TreeNode) {
   .title {
     flex: 1;
     overflow: hidden;
+    white-space: nowrap;
     text-overflow: ellipsis;
     user-select: none;
     position: default;
+
+    width: 200px;
+
+    font-size: small;
+
     .muted & {
       opacity: 0.5;
     }