Svelte: clean up file tree#63009
Conversation
| } | ||
|
|
||
| a { | ||
| flex: 1; |
There was a problem hiding this comment.
This shouldn't need to know it's in a flex box, so moved that to the TreeNode container
| text-overflow: ellipsis; | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| padding: 0.2rem 0.25rem 0.2rem 0; |
There was a problem hiding this comment.
This has weird padding because it adds padding to half of the label. Instead, we just add the padding on the label container so we don't need to keep it consistent across components.
| bind:this={treeRoot} | ||
| on:keydown={handleKeydown} | ||
| on:click={handleClick} | ||
| data-tree-view-flat-list={isFlatList} |
There was a problem hiding this comment.
data-tree-view-flat-list is no longer used because we no longer indent files more than directories
| --tree-node-left-padding: 1.25rem; | ||
| $shiftWidth: 1.25rem; |
There was a problem hiding this comment.
$shiftWidth is a constant, so using an SCSS variable rather than a CSS variable.
There was a problem hiding this comment.
Also, with the guide lines, I think we could experiment with a more condensed display (by shrinking $shiftWidth) because the relationships are more obvious. (cc @taiyab if you're interested in experimentation)
| .scope-container { | ||
| position: absolute; | ||
| left: 0.2rem; | ||
| height: min-content; | ||
| display: flex; | ||
| } |
There was a problem hiding this comment.
Instead of making the scope button absolutely positioned and keeping track of the amount of space we need to reserve, we can just put it inline in the DOM and mark it visibility: hidden when it doesn't apply or isn't hover-activated.
| <Button variant="icon" on:click={handleScopeChange} data-scope-button> | ||
| <Icon svgPath={mdiImageFilterCenterFocusStrong} inline /> | ||
| </Button> |
There was a problem hiding this comment.
Removed the wrapping div, allowing the button to sit directly in the DOM. Added data-scope-button so it's still able to be referred to in the CSS.
cee631a to
7c244d4
Compare
7c244d4 to
b9647a9
Compare
| // but for some reason it's not recognized when using `svelte-check` and an error | ||
| // is thrown instead. | ||
| 'data-testid'?: string | ||
| 'data-scope-button'?: boolean |
There was a problem hiding this comment.
I'm hopeful this will be fixed with native typescript support in Svelte 5
After the changes to the file tree layout in #62981, we can clean up the styles and DOM a bit. These changes are partially in prep for experimenting with alternative "current path" representations. Comments inline.
Test plan
Manual testing. There should be no change in behavior, just DOM/style simplification.