Skip to content

Commit 89e8325

Browse files
benderabendera
committed
Add TreeITem rich content example
1 parent 0685bde commit 89e8325

5 files changed

Lines changed: 602 additions & 370 deletions

File tree

‎src/components/examples/tree/ActionsExample.astro‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎src/components/examples/tree/DecorationsExample.astro‎

Lines changed: 0 additions & 63 deletions
This file was deleted.

‎src/components/examples/tree/Imports.astro‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
<script>
2-
import "@vscode-elements/elements/dist/vscode-icon/index.js";
3-
import "@vscode-elements/elements/dist/vscode-tree/index.js";
4-
import "@vscode-elements/elements/dist/vscode-tree-item/index.js";
5-
</script>
6-
7-
<link rel="stylesheet" href="/codicon.css" id="vscode-codicon-stylesheet" />
1+
<script>
2+
import "@vscode-elements/elements/dist/vscode-icon/index.js";
3+
import "@vscode-elements/elements/dist/vscode-badge/index.js";
4+
import "@vscode-elements/elements/dist/vscode-toolbar-button/index.js";
5+
import "@vscode-elements/elements/dist/vscode-tree/index.js";
6+
import "@vscode-elements/elements/dist/vscode-tree-item/index.js";
7+
</script>
8+
9+
<link rel="stylesheet" href="/codicon.css" id="vscode-codicon-stylesheet" />

‎src/components/examples/tree/RichContentExample.astro‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
<vscode-tree>
2+
<vscode-tree-item open>
3+
<div class="file">
4+
<vscode-icon name="file"></vscode-icon>
5+
<div class="filename">tsconfig.json</div>
6+
<vscode-badge variant="counter">2</vscode-badge>
7+
</div>
8+
<vscode-tree-item>
9+
<div class="message">
10+
<div class="actions">
11+
<vscode-icon name="error"></vscode-icon>
12+
</div>
13+
<div class="message-details">
14+
<div class="message-line">
15+
<span class="message-raw"
16+
>Cannot find type definition file for 'mocha'.</span
17+
>
18+
<div class="message-error-code">ts</div>
19+
<div class="message-location">[Ln 1, Col 1]</div>
20+
<div class="action-bar">
21+
<vscode-toolbar-button
22+
icon="chevron-down"
23+
class="toggle-button open"></vscode-toolbar-button>
24+
</div>
25+
</div>
26+
<div class="toggleable open">
27+
<div class="message-line">
28+
<span class="message-raw"
29+
>&nbsp;&nbsp;The file is in the program because:</span
30+
>
31+
</div>
32+
<div class="message-line">
33+
<span class="message-raw"
34+
>&nbsp;&nbsp;&nbsp;&nbsp;Entry point of type library 'mocha'
35+
specified in compilerOptions</span
36+
>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
</vscode-tree-item>
42+
<vscode-tree-item>
43+
<div class="message">
44+
<div class="actions">
45+
<vscode-icon name="error"></vscode-icon>
46+
</div>
47+
<div class="message-details">
48+
<div class="message-line">
49+
<span class="message-raw"
50+
>Cannot find type definition file for 'user-agent-data-types'.</span
51+
>
52+
<div class="message-error-code">ts</div>
53+
<div class="message-location">[Ln 1, Col 1]</div>
54+
<div class="action-bar">
55+
<vscode-toolbar-button
56+
icon="chevron-down"
57+
class="toggle-button open"></vscode-toolbar-button>
58+
</div>
59+
</div>
60+
<div class="toggleable open">
61+
<div class="message-line">
62+
<span class="message-raw"
63+
>&nbsp;&nbsp;The file is in the program because:</span
64+
>
65+
</div>
66+
<div class="message-line">
67+
<span class="message-raw"
68+
>&nbsp;&nbsp;&nbsp;&nbsp;Entry point of type library
69+
'user-agent-data-types' specified in compilerOptions</span
70+
>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
</vscode-tree-item>
76+
</vscode-tree-item>
77+
</vscode-tree>
78+
79+
<script>
80+
//@ts-nocheck
81+
const toggleButtons = document.querySelectorAll(".toggle-button");
82+
83+
toggleButtons.forEach((bt) => {
84+
bt.addEventListener("click", () => {
85+
const message = bt.closest(".message");
86+
const toggleableSection = message.querySelector(".toggleable");
87+
88+
bt.classList.toggle("open");
89+
toggleableSection.classList.toggle("open");
90+
});
91+
});
92+
</script>
93+
94+
<style>
95+
.file {
96+
align-items: center;
97+
display: flex;
98+
}
99+
100+
.file vscode-icon {
101+
margin-right: 6px;
102+
}
103+
104+
.filename {
105+
display: block;
106+
}
107+
108+
vscode-badge[variant="counter"] {
109+
display: block;
110+
margin-left: 10px;
111+
}
112+
113+
.message {
114+
display: flex;
115+
}
116+
117+
.actions {
118+
align-items: center;
119+
display: flex;
120+
height: 22px;
121+
margin: 0 6px;
122+
}
123+
124+
.actions vscode-icon {
125+
color: var(--vscode-problemsErrorIcon-foreground);
126+
}
127+
128+
.message-details {
129+
overflow: hidden;
130+
}
131+
132+
.toggleable {
133+
display: none;
134+
}
135+
136+
.toggleable.open {
137+
display: block;
138+
}
139+
140+
.message-line {
141+
display: flex;
142+
white-space: nowrap;
143+
}
144+
145+
.message-raw {
146+
display: block;
147+
overflow: hidden;
148+
text-overflow: ellipsis;
149+
white-space: nowrap;
150+
}
151+
152+
.message-error-code {
153+
margin-left: 6px;
154+
opacity: 0.7;
155+
}
156+
157+
.message-location {
158+
margin-left: 6px;
159+
opacity: 0.7;
160+
}
161+
162+
.action-bar {
163+
margin-left: 6px;
164+
}
165+
166+
.action-bar vscode-toolbar-button {
167+
display: block;
168+
}
169+
170+
.action-bar vscode-toolbar-button.open {
171+
transform: rotate(180deg);
172+
}
173+
</style>

0 commit comments

Comments
 (0)