artin/sourcegraph
1
0
Fork 0
mirror of https://github.com/sourcegraph/sourcegraph.git synced 2026-02-06 12:51:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Svelte: fix file tree guide lines (#64425)

Browse Source 
I think I broke this when doing some refactoring to make the file tree
usable in the ref panel. Currently, the guide lines only go one level of
depth.
This commit is contained in:
Camden Cheek 2024-08-13 10:33:34 -06:00 committed by GitHub
parent 27d0615a3d
commit 3522dcf4af
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/web-sveltekit/src/lib/TreeNode.svelte
View File

@ -130,10 +130,9 @@
<style lang="scss">
$shiftWidth: 1.25rem;
$gap: 0.25rem;
$indentSize: calc(var(--tree-node-nested-level) * #{$shiftWidth});
li[role='treeitem'] {
--indent-size: calc(var(--tree-node-nested-level) * #{$shiftWidth});
--scope-size: calc(var(--icon-inline-size) + #{$gap} - 1px);
&.disable-scope {
--scope-size: 0px;
@ -174,26 +173,29 @@
.indented {
display: inherit;
gap: inherit;
margin-left: var(--indent-size);
margin-left: $indentSize;
width: 100%;
}
}
.loading {
// Indent with two rem since loading represents next nested level
margin-left: calc(var(--scope-size) + var(--indent-size) + 2 * #{$gap});
margin-left: calc(var(--scope-size) + #{$indentSize} + 2 * #{$gap});
margin-top: 0.25rem;
}
ul {
position: relative;
isolation: isolate;
// The visual guide line for expanded subtrees
&::before {
position: absolute;
content: '';
border-left: 1px solid var(--secondary);
height: 100%;
transform: translateX(calc(#{$gap} + var(--scope-size) + var(--icon-inline-size) / 2 - 1px));
transform: translateX(
calc(#{$gap} + var(--scope-size) + #{$indentSize} + var(--icon-inline-size) / 2 - 1px)
);
z-index: 1;
}
}