diff --git a/dev/vscode-tree/basic-example.html b/dev/vscode-tree/basic-example.html new file mode 100644 index 000000000..b153e8515 --- /dev/null +++ b/dev/vscode-tree/basic-example.html @@ -0,0 +1,78 @@ + + + + + + VSCode Elements + + + + + + + +

Basic example

+
+ + + Home + + About + Overview + Administration + + Facts + History + Current Statistics + Awards + + + Campus Tours + For Prospective Students + For Alumni + For Visitors + + + + Admissions + Apply + + Tuition + Undergraduate + Graduate + Professional Schools + + Sign Up + Visit + Photo Tour + Connect + + + Academics + Colleges & Schools + Programs of Study + Honors Programs + Online Courses + Course Explorer + Register for Classes + Academic Calendar + Transcripts + + + +
+ + diff --git a/dev/vscode-tree/guides-has-arrows.html b/dev/vscode-tree/guides-has-arrows.html index 8109365f2..7008541c8 100644 --- a/dev/vscode-tree/guides-has-arrows.html +++ b/dev/vscode-tree/guides-has-arrows.html @@ -29,7 +29,12 @@

Basic example

- + + + + + + VSCode Elements + + + + + + + +

Hide arrows

+
+ + + Home + + About + Overview + Administration + + Facts + History + Current Statistics + Awards + + + Campus Tours + For Prospective Students + For Alumni + For Visitors + + + + Admissions + Apply + + Tuition + Undergraduate + Graduate + Professional Schools + + Sign Up + Visit + Photo Tour + Connect + + + Academics + Colleges & Schools + Programs of Study + Honors Programs + Online Courses + Course Explorer + Register for Classes + Academic Calendar + Transcripts + + + +
+ + diff --git a/dev/vscode-tree/hide-guides-and-arrows.html b/dev/vscode-tree/hide-guides-and-arrows.html new file mode 100644 index 000000000..2ed49b8c9 --- /dev/null +++ b/dev/vscode-tree/hide-guides-and-arrows.html @@ -0,0 +1,78 @@ + + + + + + VSCode Elements + + + + + + + +

Hide guides and arrows

+
+ + + Home + + About + Overview + Administration + + Facts + History + Current Statistics + Awards + + + Campus Tours + For Prospective Students + For Alumni + For Visitors + + + + Admissions + Apply + + Tuition + Undergraduate + Graduate + Professional Schools + + Sign Up + Visit + Photo Tour + Connect + + + Academics + Colleges & Schools + Programs of Study + Honors Programs + Online Courses + Course Explorer + Register for Classes + Academic Calendar + Transcripts + + + +
+ + diff --git a/dev/vscode-tree/hide-guides.html b/dev/vscode-tree/hide-guides.html new file mode 100644 index 000000000..e6a812470 --- /dev/null +++ b/dev/vscode-tree/hide-guides.html @@ -0,0 +1,78 @@ + + + + + + VSCode Elements + + + + + + + +

Hide guides

+
+ + + Home + + About + Overview + Administration + + Facts + History + Current Statistics + Awards + + + Campus Tours + For Prospective Students + For Alumni + For Visitors + + + + Admissions + Apply + + Tuition + Undergraduate + Graduate + Professional Schools + + Sign Up + Visit + Photo Tour + Connect + + + Academics + Colleges & Schools + Programs of Study + Honors Programs + Online Courses + Course Explorer + Register for Classes + Academic Calendar + Transcripts + + + +
+ + diff --git a/dev/vscode-tree/stress-test.html b/dev/vscode-tree/stress-test.html new file mode 100644 index 000000000..3590f11ef --- /dev/null +++ b/dev/vscode-tree/stress-test.html @@ -0,0 +1,8404 @@ + + + + + + VSCode Elements + + + + + + + +

With icons

+
+ + + + + + + + + api + + + + components + + + + hooks + + + data.json + + + + auth.ts + + + + + + components + + + + admin + + + data.json + + + + + shared + + + index.ts + + + + style.css + + + + app.tsx + + + + data.json + + + + main.tsx + + + + data.json + + + + + + + models + + + + hooks + + + index.ts + + + + routes.ts + + + + app.tsx + + + + + + utils + + + index.ts + + + + config.ts + + + + + + components + + + index.ts + + + + app.tsx + + + + index.ts + + + + routes.ts + + + + auth.ts + + + + routes.ts + + + + + index.ts + + + + + + + config.ts + + + + + pages + + + app.tsx + + + + routes.ts + + + + index.ts + + + + + + assets + + + + assets + + + auth.ts + + + + + utils + + + + models + + + style.css + + + + app.tsx + + + + + + api + + + routes.ts + + + + routes.ts + + + + + + hooks + + + routes.ts + + + + app.tsx + + + + auth.ts + + + + data.json + + + + routes.ts + + + + + + pages + + + main.tsx + + + + main.tsx + + + + index.ts + + + + auth.ts + + + + config.ts + + + + + style.css + + + + + app.tsx + + + + + services + + + + assets + + + index.ts + + + + data.json + + + + routes.ts + + + + routes.ts + + + + index.ts + + + + index.ts + + + + + data.json + + + + data.json + + + + + + data.json + + + + + services + + + + assets + + + routes.ts + + + + + shared + + + style.css + + + + main.tsx + + + + auth.ts + + + + + + + models + + + + pages + + + style.css + + + + app.tsx + + + + style.css + + + + data.json + + + + data.json + + + + routes.ts + + + + + auth.ts + + + + style.css + + + + + shared + + + index.ts + + + + data.json + + + + main.tsx + + + + + + + services + + + data.json + + + + routes.ts + + + + + components + + + main.tsx + + + + index.ts + + + + routes.ts + + + + config.ts + + + + style.css + + + + style.css + + + + + + + pages + + + index.ts + + + + + components + + + index.ts + + + + routes.ts + + + + app.tsx + + + + + + pages + + + style.css + + + + app.tsx + + + + style.css + + + + style.css + + + + index.ts + + + + + + admin + + + main.tsx + + + + auth.ts + + + + config.ts + + + + main.tsx + + + + auth.ts + + + + routes.ts + + + + + + + admin + + + main.tsx + + + + + admin + + + index.ts + + + + config.ts + + + + config.ts + + + + style.css + + + + app.tsx + + + + index.ts + + + + + + pages + + + auth.ts + + + + auth.ts + + + + style.css + + + + app.tsx + + + + routes.ts + + + + data.json + + + + + + models + + + auth.ts + + + + config.ts + + + + + + pages + + + style.css + + + + style.css + + + + routes.ts + + + + style.css + + + + + style.css + + + + + + hooks + + + + assets + + + config.ts + + + + config.ts + + + + auth.ts + + + + app.tsx + + + + routes.ts + + + + + + assets + + + data.json + + + + data.json + + + + index.ts + + + + app.tsx + + + + + + + + + + admin + + + app.tsx + + + + + pages + + + + pages + + + routes.ts + + + + config.ts + + + + + components + + + + models + + + routes.ts + + + + main.tsx + + + + + + utils + + + auth.ts + + + + style.css + + + + + + admin + + + config.ts + + + + config.ts + + + + style.css + + + + main.tsx + + + + app.tsx + + + + style.css + + + + + app.tsx + + + + routes.ts + + + + style.css + + + + + + models + + + + utils + + + index.ts + + + + auth.ts + + + + + + assets + + + auth.ts + + + + app.tsx + + + + main.tsx + + + + index.ts + + + + auth.ts + + + + data.json + + + + + + models + + + main.tsx + + + + main.tsx + + + + routes.ts + + + + style.css + + + + main.tsx + + + + data.json + + + + + + assets + + + routes.ts + + + + style.css + + + + main.tsx + + + + auth.ts + + + + style.css + + + + + + auth.ts + + + + + + services + + + + api + + + + pages + + + style.css + + + + index.ts + + + + config.ts + + + + index.ts + + + + + + pages + + + main.tsx + + + + auth.ts + + + + main.tsx + + + + data.json + + + + data.json + + + + + + components + + + config.ts + + + + style.css + + + + app.tsx + + + + + + services + + + app.tsx + + + + index.ts + + + + app.tsx + + + + style.css + + + + style.css + + + + + + main.tsx + + + + + pages + + + + hooks + + + main.tsx + + + + index.ts + + + + auth.ts + + + + auth.ts + + + + + style.css + + + + + utils + + + index.ts + + + + index.ts + + + + app.tsx + + + + data.json + + + + data.json + + + + + + + style.css + + + + + + admin + + + + components + + + + models + + + config.ts + + + + + utils + + + config.ts + + + + routes.ts + + + + + + utils + + + routes.ts + + + + app.tsx + + + + auth.ts + + + + data.json + + + + style.css + + + + config.ts + + + + + index.ts + + + + + + api + + + routes.ts + + + + + admin + + + config.ts + + + + app.tsx + + + + + + assets + + + data.json + + + + auth.ts + + + + + + admin + + + app.tsx + + + + index.ts + + + + data.json + + + + config.ts + + + + auth.ts + + + + index.ts + + + + + + shared + + + data.json + + + + main.tsx + + + + index.ts + + + + data.json + + + + index.ts + + + + auth.ts + + + + + + api + + + app.tsx + + + + data.json + + + + index.ts + + + + index.ts + + + + data.json + + + + + + + components + + + auth.ts + + + + + utils + + + index.ts + + + + routes.ts + + + + app.tsx + + + + + + hooks + + + index.ts + + + + app.tsx + + + + config.ts + + + + auth.ts + + + + + + components + + + data.json + + + + routes.ts + + + + + + models + + + config.ts + + + + app.tsx + + + + + + api + + + auth.ts + + + + routes.ts + + + + + + + models + + + config.ts + + + + + models + + + routes.ts + + + + data.json + + + + auth.ts + + + + + auth.ts + + + + auth.ts + + + + + api + + + main.tsx + + + + main.tsx + + + + index.ts + + + + main.tsx + + + + app.tsx + + + + style.css + + + + + + auth.ts + + + + + + utils + + + + api + + + + services + + + routes.ts + + + + config.ts + + + + data.json + + + + + + hooks + + + config.ts + + + + main.tsx + + + + index.ts + + + + config.ts + + + + + + index.ts + + + + data.json + + + + data.json + + + + app.tsx + + + + + + api + + + + api + + + + components + + + index.ts + + + + routes.ts + + + + style.css + + + + auth.ts + + + + style.css + + + + routes.ts + + + + + main.tsx + + + + index.ts + + + + + + assets + + + + services + + + routes.ts + + + + app.tsx + + + + style.css + + + + data.json + + + + data.json + + + + + + hooks + + + app.tsx + + + + main.tsx + + + + app.tsx + + + + index.ts + + + + app.tsx + + + + app.tsx + + + + + config.ts + + + + + + assets + + + + assets + + + auth.ts + + + + style.css + + + + + + pages + + + config.ts + + + + routes.ts + + + + routes.ts + + + + + + utils + + + routes.ts + + + + data.json + + + + main.tsx + + + + config.ts + + + + app.tsx + + + + config.ts + + + + + + assets + + + index.ts + + + + app.tsx + + + + app.tsx + + + + auth.ts + + + + index.ts + + + + routes.ts + + + + + routes.ts + + + + + app.tsx + + + + + + admin + + + style.css + + + + config.ts + + + + + api + + + + shared + + + data.json + + + + style.css + + + + style.css + + + + routes.ts + + + + style.css + + + + + + services + + + index.ts + + + + data.json + + + + config.ts + + + + index.ts + + + + app.tsx + + + + app.tsx + + + + + + pages + + + config.ts + + + + app.tsx + + + + style.css + + + + data.json + + + + auth.ts + + + + + app.tsx + + + + + admin + + + auth.ts + + + + config.ts + + + + auth.ts + + + + config.ts + + + + style.css + + + + + + models + + + config.ts + + + + routes.ts + + + + data.json + + + + style.css + + + + config.ts + + + + + + app.tsx + + + + + api + + + config.ts + + + + + shared + + + style.css + + + + auth.ts + + + + + config.ts + + + + + api + + + data.json + + + + auth.ts + + + + app.tsx + + + + style.css + + + + + + assets + + + config.ts + + + + app.tsx + + + + auth.ts + + + + style.css + + + + + + + + services + + + routes.ts + + + + + components + + + + hooks + + + main.tsx + + + + app.tsx + + + + data.json + + + + + + shared + + + index.ts + + + + style.css + + + + + + shared + + + index.ts + + + + style.css + + + + routes.ts + + + + + index.ts + + + + + + + + shared + + + + shared + + + + utils + + + + hooks + + + config.ts + + + + app.tsx + + + + auth.ts + + + + config.ts + + + + app.tsx + + + + + + hooks + + + data.json + + + + main.tsx + + + + main.tsx + + + + auth.ts + + + + main.tsx + + + + + + routes.ts + + + + + api + + + + shared + + + auth.ts + + + + data.json + + + + app.tsx + + + + + + shared + + + config.ts + + + + routes.ts + + + + routes.ts + + + + + routes.ts + + + + + assets + + + app.tsx + + + + index.ts + + + + + auth.ts + + + + + index.ts + + + + + hooks + + + + admin + + + auth.ts + + + + index.ts + + + + routes.ts + + + + style.css + + + + main.tsx + + + + + auth.ts + + + + index.ts + + + + + utils + + + config.ts + + + + config.ts + + + + + + services + + + data.json + + + + index.ts + + + + + main.tsx + + + + + main.tsx + + + + + + assets + + + app.tsx + + + + + hooks + + + + utils + + + app.tsx + + + + config.ts + + + + main.tsx + + + + routes.ts + + + + main.tsx + + + + + auth.ts + + + + main.tsx + + + + + pages + + + index.ts + + + + auth.ts + + + + app.tsx + + + + + auth.ts + + + + + hooks + + + style.css + + + + config.ts + + + + + + + assets + + + + api + + + routes.ts + + + + app.tsx + + + + data.json + + + + main.tsx + + + + config.ts + + + + + + utils + + + app.tsx + + + + main.tsx + + + + data.json + + + + index.ts + + + + main.tsx + + + + + + hooks + + + app.tsx + + + + app.tsx + + + + + + + components + + + index.ts + + + + + assets + + + auth.ts + + + + auth.ts + + + + + index.ts + + + + + utils + + + index.ts + + + + data.json + + + + auth.ts + + + + index.ts + + + + + + + + hooks + + + data.json + + + + main.tsx + + + + app.tsx + + + + + utils + + + + services + + + index.ts + + + + auth.ts + + + + + + shared + + + config.ts + + + + index.ts + + + + routes.ts + + + + routes.ts + + + + + style.css + + + + + components + + + main.tsx + + + + style.css + + + + config.ts + + + + main.tsx + + + + + app.tsx + + + + + + pages + + + + utils + + + routes.ts + + + + style.css + + + + auth.ts + + + + config.ts + + + + + + assets + + + style.css + + + + app.tsx + + + + auth.ts + + + + main.tsx + + + + app.tsx + + + + config.ts + + + + + + components + + + app.tsx + + + + style.css + + + + style.css + + + + app.tsx + + + + routes.ts + + + + data.json + + + + + + + hooks + + + + services + + + style.css + + + + style.css + + + + + + hooks + + + index.ts + + + + config.ts + + + + index.ts + + + + data.json + + + + data.json + + + + routes.ts + + + + + + utils + + + app.tsx + + + + auth.ts + + + + auth.ts + + + + config.ts + + + + config.ts + + + + + + + style.css + + + + + data.json + + + + index.ts + + + + + + admin + + + main.tsx + + + + style.css + + + + style.css + + + + + auth.ts + + + + + components + + + + pages + + + data.json + + + + style.css + + + + + services + + + + admin + + + + models + + + index.ts + + + + style.css + + + + + + assets + + + index.ts + + + + auth.ts + + + + app.tsx + + + + + + app.tsx + + + + + services + + + + assets + + + data.json + + + + style.css + + + + config.ts + + + + routes.ts + + + + style.css + + + + + + assets + + + routes.ts + + + + app.tsx + + + + + + + api + + + auth.ts + + + + + admin + + + style.css + + + + config.ts + + + + app.tsx + + + + app.tsx + + + + routes.ts + + + + + + shared + + + app.tsx + + + + routes.ts + + + + routes.ts + + + + auth.ts + + + + app.tsx + + + + + + shared + + + app.tsx + + + + config.ts + + + + data.json + + + + auth.ts + + + + + + api + + + app.tsx + + + + data.json + + + + config.ts + + + + + + app.tsx + + + + + + admin + + + + components + + + + assets + + + main.tsx + + + + data.json + + + + app.tsx + + + + config.ts + + + + + app.tsx + + + + + + api + + + data.json + + + + auth.ts + + + + + shared + + + app.tsx + + + + index.ts + + + + routes.ts + + + + style.css + + + + app.tsx + + + + + + shared + + + routes.ts + + + + routes.ts + + + + + + + models + + + + components + + + app.tsx + + + + routes.ts + + + + auth.ts + + + + style.css + + + + + style.css + + + + auth.ts + + + + app.tsx + + + + + components + + + index.ts + + + + app.tsx + + + + data.json + + + + + + config.ts + + + + + + services + + + + models + + + app.tsx + + + + + shared + + + config.ts + + + + style.css + + + + routes.ts + + + + main.tsx + + + + main.tsx + + + + + main.tsx + + + + + shared + + + style.css + + + + main.tsx + + + + style.css + + + + app.tsx + + + + + + models + + + index.ts + + + + main.tsx + + + + config.ts + + + + auth.ts + + + + + style.css + + + + + + utils + + + + hooks + + + main.tsx + + + + main.tsx + + + + routes.ts + + + + + + services + + + style.css + + + + style.css + + + + main.tsx + + + + app.tsx + + + + + style.css + + + + + + hooks + + + + hooks + + + style.css + + + + auth.ts + + + + + + admin + + + app.tsx + + + + app.tsx + + + + style.css + + + + + + shared + + + routes.ts + + + + app.tsx + + + + app.tsx + + + + data.json + + + + auth.ts + + + + config.ts + + + + + + admin + + + auth.ts + + + + routes.ts + + + + main.tsx + + + + auth.ts + + + + + config.ts + + + + app.tsx + + + + + config.ts + + + + + api + + + index.ts + + + + + models + + + index.ts + + + + app.tsx + + + + + + api + + + auth.ts + + + + app.tsx + + + + style.css + + + + config.ts + + + + app.tsx + + + + app.tsx + + + + + config.ts + + + + config.ts + + + + data.json + + + + + + + models + + + + services + + + config.ts + + + + main.tsx + + + + + utils + + + main.tsx + + + + main.tsx + + + + data.json + + + + index.ts + + + + index.ts + + + + app.tsx + + + + + + components + + + index.ts + + + + style.css + + + + + + pages + + + config.ts + + + + auth.ts + + + + auth.ts + + + + app.tsx + + + + + + + utils + + + style.css + + + + + models + + + routes.ts + + + + main.tsx + + + + + main.tsx + + + + app.tsx + + + + + services + + + index.ts + + + + auth.ts + + + + index.ts + + + + data.json + + + + index.ts + + + + config.ts + + + + + + + components + + + main.tsx + + + + + utils + + + style.css + + + + app.tsx + + + + style.css + + + + style.css + + + + style.css + + + + data.json + + + + + + app.tsx + + + + + + + models + + + style.css + + + + + hooks + + + + assets + + + + hooks + + + auth.ts + + + + auth.ts + + + + style.css + + + + data.json + + + + auth.ts + + + + auth.ts + + + + + + services + + + app.tsx + + + + index.ts + + + + app.tsx + + + + data.json + + + + + + utils + + + auth.ts + + + + index.ts + + + + main.tsx + + + + app.tsx + + + + app.tsx + + + + + + shared + + + main.tsx + + + + auth.ts + + + + config.ts + + + + auth.ts + + + + + + index.ts + + + + + components + + + routes.ts + + + + data.json + + + + + models + + + index.ts + + + + app.tsx + + + + index.ts + + + + main.tsx + + + + index.ts + + + + + auth.ts + + + + + + + assets + + + + components + + + data.json + + + + + services + + + auth.ts + + + + style.css + + + + routes.ts + + + + main.tsx + + + + + routes.ts + + + + style.css + + + + + shared + + + routes.ts + + + + style.css + + + + data.json + + + + main.tsx + + + + + style.css + + + + + + shared + + + + services + + + config.ts + + + + routes.ts + + + + main.tsx + + + + data.json + + + + routes.ts + + + + + index.ts + + + + index.ts + + + + config.ts + + + + + + pages + + + + admin + + + auth.ts + + + + routes.ts + + + + style.css + + + + data.json + + + + index.ts + + + + + + utils + + + routes.ts + + + + routes.ts + + + + + + shared + + + index.ts + + + + index.ts + + + + + + shared + + + style.css + + + + main.tsx + + + + app.tsx + + + + config.ts + + + + + + pages + + + data.json + + + + routes.ts + + + + index.ts + + + + app.tsx + + + + + + + config.ts + + + + + pages + + + + shared + + + main.tsx + + + + data.json + + + + + utils + + + auth.ts + + + + auth.ts + + + + auth.ts + + + + index.ts + + + + config.ts + + + + + + style.css + + + + + models + + + + hooks + + + app.tsx + + + + routes.ts + + + + app.tsx + + + + + + services + + + routes.ts + + + + app.tsx + + + + app.tsx + + + + index.ts + + + + main.tsx + + + + + + pages + + + routes.ts + + + + routes.ts + + + + app.tsx + + + + + + components + + + main.tsx + + + + config.ts + + + + style.css + + + + + + api + + + routes.ts + + + + app.tsx + + + + style.css + + + + + auth.ts + + + + + + services + + + + utils + + + style.css + + + + style.css + + + + app.tsx + + + + app.tsx + + + + index.ts + + + + + auth.ts + + + + + + shared + + + + assets + + + main.tsx + + + + data.json + + + + data.json + + + + auth.ts + + + + + + services + + + config.ts + + + + main.tsx + + + + routes.ts + + + + + config.ts + + + + + utils + + + index.ts + + + + style.css + + + + app.tsx + + + + + + + utils + + + + api + + + index.ts + + + + data.json + + + + + + hooks + + + main.tsx + + + + config.ts + + + + + + components + + + auth.ts + + + + style.css + + + + style.css + + + + + + hooks + + + config.ts + + + + app.tsx + + + + config.ts + + + + + + pages + + + routes.ts + + + + style.css + + + + main.tsx + + + + app.tsx + + + + data.json + + + + + + + + app.tsx + + + + index.ts + + + + + utils + + + main.tsx + + + + auth.ts + + + + + hooks + + + data.json + + + + data.json + + + + + assets + + + + hooks + + + index.ts + + + + auth.ts + + + + data.json + + + + auth.ts + + + + auth.ts + + + + index.ts + + + + + + admin + + + main.tsx + + + + app.tsx + + + + index.ts + + + + auth.ts + + + + app.tsx + + + + + + pages + + + data.json + + + + routes.ts + + + + routes.ts + + + + data.json + + + + index.ts + + + + auth.ts + + + + + + assets + + + style.css + + + + auth.ts + + + + routes.ts + + + + routes.ts + + + + + + admin + + + app.tsx + + + + auth.ts + + + + routes.ts + + + + app.tsx + + + + config.ts + + + + routes.ts + + + + + + pages + + + index.ts + + + + main.tsx + + + + config.ts + + + + routes.ts + + + + routes.ts + + + + + + + api + + + routes.ts + + + + + hooks + + + auth.ts + + + + data.json + + + + routes.ts + + + + style.css + + + + app.tsx + + + + + + shared + + + data.json + + + + app.tsx + + + + auth.ts + + + + + + admin + + + routes.ts + + + + auth.ts + + + + index.ts + + + + + + + pages + + + + hooks + + + auth.ts + + + + config.ts + + + + data.json + + + + auth.ts + + + + index.ts + + + + routes.ts + + + + + + hooks + + + index.ts + + + + data.json + + + + data.json + + + + + + api + + + routes.ts + + + + routes.ts + + + + + + shared + + + main.tsx + + + + data.json + + + + app.tsx + + + + index.ts + + + + index.ts + + + + style.css + + + + + + + + assets + + + + admin + + + + assets + + + data.json + + + + data.json + + + + app.tsx + + + + data.json + + + + main.tsx + + + + index.ts + + + + + + hooks + + + auth.ts + + + + routes.ts + + + + + + models + + + auth.ts + + + + main.tsx + + + + data.json + + + + + auth.ts + + + + + + admin + + + + hooks + + + index.ts + + + + index.ts + + + + + config.ts + + + + + models + + + index.ts + + + + style.css + + + + app.tsx + + + + style.css + + + + style.css + + + + + data.json + + + + + hooks + + + index.ts + + + + auth.ts + + + + auth.ts + + + + + + shared + + + app.tsx + + + + main.tsx + + + + style.css + + + + + + + utils + + + + shared + + + main.tsx + + + + main.tsx + + + + routes.ts + + + + + + pages + + + index.ts + + + + main.tsx + + + + auth.ts + + + + + main.tsx + + + + + pages + + + config.ts + + + + auth.ts + + + + + + + style.css + + + + + + + + +
+ + diff --git a/dev/vscode-tree/with-icons.html b/dev/vscode-tree/with-icons.html new file mode 100644 index 000000000..194f600f8 --- /dev/null +++ b/dev/vscode-tree/with-icons.html @@ -0,0 +1,5583 @@ + + + + + + VSCode Elements + + + + + + + +

With icons

+
+ + + + + + api + + + + components + + + + hooks + + + data.json + + + + auth.ts + + + + + + components + + + + admin + + + data.json + + + + + shared + + + index.ts + + + + style.css + + + + app.tsx + + + + data.json + + + + main.tsx + + + + data.json + + + + + + + models + + + + hooks + + + index.ts + + + + routes.ts + + + + app.tsx + + + + + + utils + + + index.ts + + + + config.ts + + + + + + components + + + index.ts + + + + app.tsx + + + + index.ts + + + + routes.ts + + + + auth.ts + + + + routes.ts + + + + + index.ts + + + + + + + config.ts + + + + + pages + + + app.tsx + + + + routes.ts + + + + index.ts + + + + + + assets + + + + assets + + + auth.ts + + + + + utils + + + + models + + + style.css + + + + app.tsx + + + + + + api + + + routes.ts + + + + routes.ts + + + + + + hooks + + + routes.ts + + + + app.tsx + + + + auth.ts + + + + data.json + + + + routes.ts + + + + + + pages + + + main.tsx + + + + main.tsx + + + + index.ts + + + + auth.ts + + + + config.ts + + + + + style.css + + + + + app.tsx + + + + + services + + + + assets + + + index.ts + + + + data.json + + + + routes.ts + + + + routes.ts + + + + index.ts + + + + index.ts + + + + + data.json + + + + data.json + + + + + + data.json + + + + + services + + + + assets + + + routes.ts + + + + + shared + + + style.css + + + + main.tsx + + + + auth.ts + + + + + + + models + + + + pages + + + style.css + + + + app.tsx + + + + style.css + + + + data.json + + + + data.json + + + + routes.ts + + + + + auth.ts + + + + style.css + + + + + shared + + + index.ts + + + + data.json + + + + main.tsx + + + + + + + services + + + data.json + + + + routes.ts + + + + + components + + + main.tsx + + + + index.ts + + + + routes.ts + + + + config.ts + + + + style.css + + + + style.css + + + + + + + pages + + + index.ts + + + + + components + + + index.ts + + + + routes.ts + + + + app.tsx + + + + + + pages + + + style.css + + + + app.tsx + + + + style.css + + + + style.css + + + + index.ts + + + + + + admin + + + main.tsx + + + + auth.ts + + + + config.ts + + + + main.tsx + + + + auth.ts + + + + routes.ts + + + + + + + admin + + + main.tsx + + + + + admin + + + index.ts + + + + config.ts + + + + config.ts + + + + style.css + + + + app.tsx + + + + index.ts + + + + + + pages + + + auth.ts + + + + auth.ts + + + + style.css + + + + app.tsx + + + + routes.ts + + + + data.json + + + + + + models + + + auth.ts + + + + config.ts + + + + + + pages + + + style.css + + + + style.css + + + + routes.ts + + + + style.css + + + + + style.css + + + + + + hooks + + + + assets + + + config.ts + + + + config.ts + + + + auth.ts + + + + app.tsx + + + + routes.ts + + + + + + assets + + + data.json + + + + data.json + + + + index.ts + + + + app.tsx + + + + + + + + + + admin + + + app.tsx + + + + + pages + + + + pages + + + routes.ts + + + + config.ts + + + + + components + + + + models + + + routes.ts + + + + main.tsx + + + + + + utils + + + auth.ts + + + + style.css + + + + + + admin + + + config.ts + + + + config.ts + + + + style.css + + + + main.tsx + + + + app.tsx + + + + style.css + + + + + app.tsx + + + + routes.ts + + + + style.css + + + + + + models + + + + utils + + + index.ts + + + + auth.ts + + + + + + assets + + + auth.ts + + + + app.tsx + + + + main.tsx + + + + index.ts + + + + auth.ts + + + + data.json + + + + + + models + + + main.tsx + + + + main.tsx + + + + routes.ts + + + + style.css + + + + main.tsx + + + + data.json + + + + + + assets + + + routes.ts + + + + style.css + + + + main.tsx + + + + auth.ts + + + + style.css + + + + + + auth.ts + + + + + + services + + + + api + + + + pages + + + style.css + + + + index.ts + + + + config.ts + + + + index.ts + + + + + + pages + + + main.tsx + + + + auth.ts + + + + main.tsx + + + + data.json + + + + data.json + + + + + + components + + + config.ts + + + + style.css + + + + app.tsx + + + + + + services + + + app.tsx + + + + index.ts + + + + app.tsx + + + + style.css + + + + style.css + + + + + + main.tsx + + + + + pages + + + + hooks + + + main.tsx + + + + index.ts + + + + auth.ts + + + + auth.ts + + + + + style.css + + + + + utils + + + index.ts + + + + index.ts + + + + app.tsx + + + + data.json + + + + data.json + + + + + + + style.css + + + + + + admin + + + + components + + + + models + + + config.ts + + + + + utils + + + config.ts + + + + routes.ts + + + + + + utils + + + routes.ts + + + + app.tsx + + + + auth.ts + + + + data.json + + + + style.css + + + + config.ts + + + + + index.ts + + + + + + api + + + routes.ts + + + + + admin + + + config.ts + + + + app.tsx + + + + + + assets + + + data.json + + + + auth.ts + + + + + + admin + + + app.tsx + + + + index.ts + + + + data.json + + + + config.ts + + + + auth.ts + + + + index.ts + + + + + + shared + + + data.json + + + + main.tsx + + + + index.ts + + + + data.json + + + + index.ts + + + + auth.ts + + + + + + api + + + app.tsx + + + + data.json + + + + index.ts + + + + index.ts + + + + data.json + + + + + + + components + + + auth.ts + + + + + utils + + + index.ts + + + + routes.ts + + + + app.tsx + + + + + + hooks + + + index.ts + + + + app.tsx + + + + config.ts + + + + auth.ts + + + + + + components + + + data.json + + + + routes.ts + + + + + + models + + + config.ts + + + + app.tsx + + + + + + api + + + auth.ts + + + + routes.ts + + + + + + + models + + + config.ts + + + + + models + + + routes.ts + + + + data.json + + + + auth.ts + + + + + auth.ts + + + + auth.ts + + + + + api + + + main.tsx + + + + main.tsx + + + + index.ts + + + + main.tsx + + + + app.tsx + + + + style.css + + + + + + auth.ts + + + + + + utils + + + + api + + + + services + + + routes.ts + + + + config.ts + + + + data.json + + + + + + hooks + + + config.ts + + + + main.tsx + + + + index.ts + + + + config.ts + + + + + + index.ts + + + + data.json + + + + data.json + + + + app.tsx + + + + + + api + + + + api + + + + components + + + index.ts + + + + routes.ts + + + + style.css + + + + auth.ts + + + + style.css + + + + routes.ts + + + + + main.tsx + + + + index.ts + + + + + + assets + + + + services + + + routes.ts + + + + app.tsx + + + + style.css + + + + data.json + + + + data.json + + + + + + hooks + + + app.tsx + + + + main.tsx + + + + app.tsx + + + + index.ts + + + + app.tsx + + + + app.tsx + + + + + config.ts + + + + + + assets + + + + assets + + + auth.ts + + + + style.css + + + + + + pages + + + config.ts + + + + routes.ts + + + + routes.ts + + + + + + utils + + + routes.ts + + + + data.json + + + + main.tsx + + + + config.ts + + + + app.tsx + + + + config.ts + + + + + + assets + + + index.ts + + + + app.tsx + + + + app.tsx + + + + auth.ts + + + + index.ts + + + + routes.ts + + + + + routes.ts + + + + + app.tsx + + + + + + admin + + + style.css + + + + config.ts + + + + + api + + + + shared + + + data.json + + + + style.css + + + + style.css + + + + routes.ts + + + + style.css + + + + + + services + + + index.ts + + + + data.json + + + + config.ts + + + + index.ts + + + + app.tsx + + + + app.tsx + + + + + + pages + + + config.ts + + + + app.tsx + + + + style.css + + + + data.json + + + + auth.ts + + + + + app.tsx + + + + + admin + + + auth.ts + + + + config.ts + + + + auth.ts + + + + config.ts + + + + style.css + + + + + + models + + + config.ts + + + + routes.ts + + + + data.json + + + + style.css + + + + config.ts + + + + + + app.tsx + + + + + api + + + config.ts + + + + + shared + + + style.css + + + + auth.ts + + + + + config.ts + + + + + api + + + data.json + + + + auth.ts + + + + app.tsx + + + + style.css + + + + + + assets + + + config.ts + + + + app.tsx + + + + auth.ts + + + + style.css + + + + + + + + services + + + routes.ts + + + + + components + + + + hooks + + + main.tsx + + + + app.tsx + + + + data.json + + + + + + shared + + + index.ts + + + + style.css + + + + + + shared + + + index.ts + + + + style.css + + + + routes.ts + + + + + index.ts + + + + + + + + shared + + + + shared + + + + utils + + + + hooks + + + config.ts + + + + app.tsx + + + + auth.ts + + + + config.ts + + + + app.tsx + + + + + + hooks + + + data.json + + + + main.tsx + + + + main.tsx + + + + auth.ts + + + + main.tsx + + + + + + routes.ts + + + + + api + + + + shared + + + auth.ts + + + + data.json + + + + app.tsx + + + + + + shared + + + config.ts + + + + routes.ts + + + + routes.ts + + + + + routes.ts + + + + + assets + + + app.tsx + + + + index.ts + + + + + auth.ts + + + + + index.ts + + + + + hooks + + + + admin + + + auth.ts + + + + index.ts + + + + routes.ts + + + + style.css + + + + main.tsx + + + + + auth.ts + + + + index.ts + + + + + utils + + + config.ts + + + + config.ts + + + + + + services + + + data.json + + + + index.ts + + + + + main.tsx + + + + + main.tsx + + + + + + assets + + + app.tsx + + + + + hooks + + + + utils + + + app.tsx + + + + config.ts + + + + main.tsx + + + + routes.ts + + + + main.tsx + + + + + auth.ts + + + + main.tsx + + + + + pages + + + index.ts + + + + auth.ts + + + + app.tsx + + + + + auth.ts + + + + + hooks + + + style.css + + + + config.ts + + + + + + + assets + + + + api + + + routes.ts + + + + app.tsx + + + + data.json + + + + main.tsx + + + + config.ts + + + + + + utils + + + app.tsx + + + + main.tsx + + + + data.json + + + + index.ts + + + + main.tsx + + + + + + hooks + + + app.tsx + + + + app.tsx + + + + + + + components + + + index.ts + + + + + assets + + + auth.ts + + + + auth.ts + + + + + index.ts + + + + + utils + + + index.ts + + + + data.json + + + + auth.ts + + + + index.ts + + + + + + + + hooks + + + data.json + + + + main.tsx + + + + app.tsx + + + + + utils + + + + services + + + index.ts + + + + auth.ts + + + + + + shared + + + config.ts + + + + index.ts + + + + routes.ts + + + + routes.ts + + + + + style.css + + + + + components + + + main.tsx + + + + style.css + + + + config.ts + + + + main.tsx + + + + + app.tsx + + + + + + pages + + + + utils + + + routes.ts + + + + style.css + + + + auth.ts + + + + config.ts + + + + + + assets + + + style.css + + + + app.tsx + + + + auth.ts + + + + main.tsx + + + + app.tsx + + + + config.ts + + + + + + components + + + app.tsx + + + + style.css + + + + style.css + + + + app.tsx + + + + routes.ts + + + + data.json + + + + + + + hooks + + + + services + + + style.css + + + + style.css + + + + + + hooks + + + index.ts + + + + config.ts + + + + index.ts + + + + data.json + + + + data.json + + + + routes.ts + + + + + + utils + + + app.tsx + + + + auth.ts + + + + auth.ts + + + + config.ts + + + + config.ts + + + + + + + style.css + + + + + data.json + + + + index.ts + + + + + + admin + + + main.tsx + + + + style.css + + + + style.css + + + + + auth.ts + + + + + components + + + + pages + + + data.json + + + + style.css + + + + + services + + + + admin + + + + models + + + index.ts + + + + style.css + + + + + + assets + + + index.ts + + + + auth.ts + + + + app.tsx + + + + + + app.tsx + + + + + services + + + + assets + + + data.json + + + + style.css + + + + config.ts + + + + routes.ts + + + + style.css + + + + + + assets + + + routes.ts + + + + app.tsx + + + + + + + api + + + auth.ts + + + + + admin + + + style.css + + + + config.ts + + + + app.tsx + + + + app.tsx + + + + routes.ts + + + + + + shared + + + app.tsx + + + + routes.ts + + + + routes.ts + + + + auth.ts + + + + app.tsx + + + + + + shared + + + app.tsx + + + + config.ts + + + + data.json + + + + auth.ts + + + + + + api + + + app.tsx + + + + data.json + + + + config.ts + + + + + + app.tsx + + + + + + admin + + + + components + + + + assets + + + main.tsx + + + + data.json + + + + app.tsx + + + + config.ts + + + + + app.tsx + + + + + + api + + + data.json + + + + auth.ts + + + + + shared + + + app.tsx + + + + index.ts + + + + routes.ts + + + + style.css + + + + app.tsx + + + + + + shared + + + routes.ts + + + + routes.ts + + + + + + + models + + + + components + + + app.tsx + + + + routes.ts + + + + auth.ts + + + + style.css + + + + + style.css + + + + auth.ts + + + + app.tsx + + + + + components + + + index.ts + + + + app.tsx + + + + data.json + + + + + + config.ts + + + + + + services + + + + models + + + app.tsx + + + + + shared + + + config.ts + + + + style.css + + + + routes.ts + + + + main.tsx + + + + main.tsx + + + + + main.tsx + + + + + shared + + + style.css + + + + main.tsx + + + + style.css + + + + app.tsx + + + + + + models + + + index.ts + + + + main.tsx + + + + config.ts + + + + auth.ts + + + + + style.css + + + + + + utils + + + + hooks + + + main.tsx + + + + main.tsx + + + + routes.ts + + + + + + services + + + style.css + + + + style.css + + + + main.tsx + + + + app.tsx + + + + + style.css + + + + + + hooks + + + + hooks + + + style.css + + + + auth.ts + + + + + + admin + + + app.tsx + + + + app.tsx + + + + style.css + + + + + + shared + + + routes.ts + + + + app.tsx + + + + app.tsx + + + + data.json + + + + auth.ts + + + + config.ts + + + + + + admin + + + auth.ts + + + + routes.ts + + + + main.tsx + + + + auth.ts + + + + + config.ts + + + + app.tsx + + + + + config.ts + + + + + api + + + index.ts + + + + + models + + + index.ts + + + + app.tsx + + + + + + api + + + auth.ts + + + + app.tsx + + + + style.css + + + + config.ts + + + + app.tsx + + + + app.tsx + + + + + config.ts + + + + config.ts + + + + data.json + + + + + + + models + + + + services + + + config.ts + + + + main.tsx + + + + + utils + + + main.tsx + + + + main.tsx + + + + data.json + + + + index.ts + + + + index.ts + + + + app.tsx + + + + + + components + + + index.ts + + + + style.css + + + + + + pages + + + config.ts + + + + auth.ts + + + + auth.ts + + + + app.tsx + + + + + + + utils + + + style.css + + + + + models + + + routes.ts + + + + main.tsx + + + + + main.tsx + + + + app.tsx + + + + + services + + + index.ts + + + + auth.ts + + + + index.ts + + + + data.json + + + + index.ts + + + + config.ts + + + + + + + components + + + main.tsx + + + + + utils + + + style.css + + + + app.tsx + + + + style.css + + + + style.css + + + + style.css + + + + data.json + + + + + + app.tsx + + + + + + + models + + + style.css + + + + + hooks + + + + assets + + + + hooks + + + auth.ts + + + + auth.ts + + + + style.css + + + + data.json + + + + auth.ts + + + + auth.ts + + + + + + services + + + app.tsx + + + + index.ts + + + + app.tsx + + + + data.json + + + + + + utils + + + auth.ts + + + + index.ts + + + + main.tsx + + + + app.tsx + + + + app.tsx + + + + + + shared + + + main.tsx + + + + auth.ts + + + + config.ts + + + + auth.ts + + + + + + index.ts + + + + + components + + + routes.ts + + + + data.json + + + + + models + + + index.ts + + + + app.tsx + + + + index.ts + + + + main.tsx + + + + index.ts + + + + + auth.ts + + + + + + + assets + + + + components + + + data.json + + + + + services + + + auth.ts + + + + style.css + + + + routes.ts + + + + main.tsx + + + + + routes.ts + + + + style.css + + + + + shared + + + routes.ts + + + + style.css + + + + data.json + + + + main.tsx + + + + + style.css + + + + + + shared + + + + services + + + config.ts + + + + routes.ts + + + + main.tsx + + + + data.json + + + + routes.ts + + + + + index.ts + + + + index.ts + + + + config.ts + + + + + + pages + + + + admin + + + auth.ts + + + + routes.ts + + + + style.css + + + + data.json + + + + index.ts + + + + + + utils + + + routes.ts + + + + routes.ts + + + + + + shared + + + index.ts + + + + index.ts + + + + + + shared + + + style.css + + + + main.tsx + + + + app.tsx + + + + config.ts + + + + + + pages + + + data.json + + + + routes.ts + + + + index.ts + + + + app.tsx + + + + + + + config.ts + + + + + pages + + + + shared + + + main.tsx + + + + data.json + + + + + utils + + + auth.ts + + + + auth.ts + + + + auth.ts + + + + index.ts + + + + config.ts + + + + + + style.css + + + + + models + + + + hooks + + + app.tsx + + + + routes.ts + + + + app.tsx + + + + + + services + + + routes.ts + + + + app.tsx + + + + app.tsx + + + + index.ts + + + + main.tsx + + + + + + pages + + + routes.ts + + + + routes.ts + + + + app.tsx + + + + + + components + + + main.tsx + + + + config.ts + + + + style.css + + + + + + api + + + routes.ts + + + + app.tsx + + + + style.css + + + + + auth.ts + + + + + + services + + + + utils + + + style.css + + + + style.css + + + + app.tsx + + + + app.tsx + + + + index.ts + + + + + auth.ts + + + + + + shared + + + + assets + + + main.tsx + + + + data.json + + + + data.json + + + + auth.ts + + + + + + services + + + config.ts + + + + main.tsx + + + + routes.ts + + + + + config.ts + + + + + utils + + + index.ts + + + + style.css + + + + app.tsx + + + + + + + utils + + + + api + + + index.ts + + + + data.json + + + + + + hooks + + + main.tsx + + + + config.ts + + + + + + components + + + auth.ts + + + + style.css + + + + style.css + + + + + + hooks + + + config.ts + + + + app.tsx + + + + config.ts + + + + + + pages + + + routes.ts + + + + style.css + + + + main.tsx + + + + app.tsx + + + + data.json + + + + + + + + app.tsx + + + + index.ts + + + + + utils + + + main.tsx + + + + auth.ts + + + + + hooks + + + data.json + + + + data.json + + + + + assets + + + + hooks + + + index.ts + + + + auth.ts + + + + data.json + + + + auth.ts + + + + auth.ts + + + + index.ts + + + + + + admin + + + main.tsx + + + + app.tsx + + + + index.ts + + + + auth.ts + + + + app.tsx + + + + + + pages + + + data.json + + + + routes.ts + + + + routes.ts + + + + data.json + + + + index.ts + + + + auth.ts + + + + + + assets + + + style.css + + + + auth.ts + + + + routes.ts + + + + routes.ts + + + + + + admin + + + app.tsx + + + + auth.ts + + + + routes.ts + + + + app.tsx + + + + config.ts + + + + routes.ts + + + + + + pages + + + index.ts + + + + main.tsx + + + + config.ts + + + + routes.ts + + + + routes.ts + + + + + + + api + + + routes.ts + + + + + hooks + + + auth.ts + + + + data.json + + + + routes.ts + + + + style.css + + + + app.tsx + + + + + + shared + + + data.json + + + + app.tsx + + + + auth.ts + + + + + + admin + + + routes.ts + + + + auth.ts + + + + index.ts + + + + + + + pages + + + + hooks + + + auth.ts + + + + config.ts + + + + data.json + + + + auth.ts + + + + index.ts + + + + routes.ts + + + + + + hooks + + + index.ts + + + + data.json + + + + data.json + + + + + + api + + + routes.ts + + + + routes.ts + + + + + + shared + + + main.tsx + + + + data.json + + + + app.tsx + + + + index.ts + + + + index.ts + + + + style.css + + + + + + + + assets + + + + admin + + + + assets + + + data.json + + + + data.json + + + + app.tsx + + + + data.json + + + + main.tsx + + + + index.ts + + + + + + hooks + + + auth.ts + + + + routes.ts + + + + + + models + + + auth.ts + + + + main.tsx + + + + data.json + + + + + auth.ts + + + + + + admin + + + + hooks + + + index.ts + + + + index.ts + + + + + config.ts + + + + + models + + + index.ts + + + + style.css + + + + app.tsx + + + + style.css + + + + style.css + + + + + data.json + + + + + hooks + + + index.ts + + + + auth.ts + + + + auth.ts + + + + + + shared + + + app.tsx + + + + main.tsx + + + + style.css + + + + + + + utils + + + + shared + + + main.tsx + + + + main.tsx + + + + routes.ts + + + + + + pages + + + index.ts + + + + main.tsx + + + + auth.ts + + + + + main.tsx + + + + + pages + + + config.ts + + + + auth.ts + + + + + + + style.css + + + + + +
+ + diff --git a/src/vscode-tree-item/vscode-tree-item.styles.ts b/src/vscode-tree-item/vscode-tree-item.styles.ts index 121331f40..e6330a67b 100644 --- a/src/vscode-tree-item/vscode-tree-item.styles.ts +++ b/src/vscode-tree-item/vscode-tree-item.styles.ts @@ -18,11 +18,11 @@ const styles: CSSResultGroup = [ user-select: none; } - .wrapper { + .root { display: block; } - .content { + .wrapper { align-items: flex-start; display: flex; font-family: var(--vscode-font-family); @@ -32,25 +32,25 @@ const styles: CSSResultGroup = [ padding-right: 12px; } - .content:hover { + .wrapper:hover { background-color: var(--vscode-list-hoverBackground); color: var(--vscode-list-hoverForeground); } - :host([selected]) .content { - color: var(--vscode-list-activeSelectionForeground); - background-color: var(--vscode-list-activeSelectionBackground); + :host([selected]) .wrapper { + color: var(--internal-selectionForeground); + background-color: var(--internal-selectionBackground); } :host([selected]) ::slotted(vscode-icon) { - color: var(--vscode-list-activeSelectionForeground); + color: var(--internal-selectionForeground); } :host(:focus) { outline: none; } - :host(:focus) .content.active { + :host(:focus) .wrapper.active { outline-color: var( --vscode-list-focusAndSelectionOutline, var(--vscode-list-focusOutline) @@ -79,13 +79,20 @@ const styles: CSSResultGroup = [ } :host([selected]) .arrow-container svg { - fill: var(--vscode-list-activeSelectionForeground); + fill: var(--internal-selectionIconForeground); } .icon-container { align-items: center; display: flex; height: 22px; + } + + .icon-container slot { + display: block; + } + + .icon-container.has-icon { margin-right: 6px; } @@ -93,10 +100,10 @@ const styles: CSSResultGroup = [ position: relative; } - .children.guides:before { + .children.guide:before { background-color: var(--vscode-tree-inactiveIndentGuidesStroke); content: ''; - display: block; + display: none; height: 100%; left: var(--indentation-guide-left); pointer-events: none; @@ -105,54 +112,22 @@ const styles: CSSResultGroup = [ z-index: 1; } - .children.guides.highlighted-guides:before { + .children.guide.default-guide:before { + display: var(--internal-defaultIndentGuideDisplay); + } + + .children.guide.highlighted-guide:before { + display: var(--internal-highlightedIndentGuideDisplay); background-color: var(--vscode-tree-indentGuidesStroke); } - .text-content { + .content { line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - .description { - font-size: 0.9em; - margin-left: 0.5em; - opacity: 0.95; - } - - .additional-content { - display: flex; - margin-left: auto; - } - - .decorations { - align-items: center; - display: flex; - height: 22px; - } - - .actions { - align-items: center; - display: none; - height: 22px; - } - - .content:hover .actions { - display: flex; - } - - .actions ::slotted(vscode-icon), - .actions ::slotted(vscode-badge) { - margin-left: 4px; - } - - .decorations ::slotted(vscode-icon), - .decorations ::slotted(vscode-badge) { - margin-left: 4px; - } - :host([branch]) ::slotted(vscode-tree-item) { display: none; } diff --git a/src/vscode-tree-item/vscode-tree-item.ts b/src/vscode-tree-item/vscode-tree-item.ts index c9390f973..5dae5b773 100644 --- a/src/vscode-tree-item/vscode-tree-item.ts +++ b/src/vscode-tree-item/vscode-tree-item.ts @@ -4,6 +4,7 @@ import { customElement, property, queryAssignedElements, + state, } from 'lit/decorators.js'; import {classMap} from 'lit/directives/class-map.js'; import {VscElement} from '../includes/VscElement'; @@ -16,7 +17,7 @@ import { } from '../vscode-tree/tree-context'; import {initPathTrackerProps} from '../vscode-tree/helpers.js'; import styles from './vscode-tree-item.styles.js'; -import {EXPAND_MODE} from '../vscode-tree/vscode-tree.js'; +import {ExpandMode, IndentGuides} from '../vscode-tree/vscode-tree.js'; const BASE_INDENT = 3; const ARROW_CONTAINER_WIDTH = 30; @@ -98,6 +99,15 @@ export class VscodeTreeItem extends VscElement { private _path: number[] = []; + @state() + private _hasBranchIcon = false; + + @state() + private _hasBranchOpenedIcon = false; + + @state() + private _hasLeafIcon = false; + @consume({context: treeContext, subscribe: true}) private _treeContextState: TreeContext = { isShiftPressed: false, @@ -325,7 +335,7 @@ export class VscodeTreeItem extends VscElement { this._selectItem(isCtrlDown); this._treeContextState.emitSelectEvent?.(); - if (this._configContext.expandMode === EXPAND_MODE.SINGLE_CLICK) { + if (this._configContext.expandMode === ExpandMode.singleClick) { if (this.branch && !(this._configContext.multiSelect && isCtrlDown)) { this.open = !this.open; } @@ -344,45 +354,74 @@ export class VscodeTreeItem extends VscElement { } private _handleDoubleClick(ev: MouseEvent) { - if (this._configContext.expandMode === EXPAND_MODE.DOUBLE_CLICK) { + if (this._configContext.expandMode === ExpandMode.doubleClick) { if (this.branch && !(this._configContext.multiSelect && ev.ctrlKey)) { this.open = !this.open; } } } + private _handleIconSlotChange(ev: Event) { + const slot = ev.target as HTMLSlotElement; + const hasContent = slot.assignedElements().length > 0; + + switch (slot.name) { + case 'icon-branch': + this._hasBranchIcon = hasContent; + break; + case 'icon-branch-opened': + this._hasBranchOpenedIcon = hasContent; + break; + case 'icon-leaf': + this._hasLeafIcon = hasContent; + break; + default: + } + } + //#endregion override render(): TemplateResult { - const {arrows, indent, indentGuides} = this._configContext; + const {hideArrows, indent, indentGuides} = this._configContext; const {hasBranchItem} = this._treeContextState; let indentation = BASE_INDENT + this.level * indent; - const guideOffset = arrows ? 13 : 3; + const guideOffset = !hideArrows ? 13 : 3; const indentGuideX = BASE_INDENT + this.level * indent + guideOffset; - if (!this.branch && arrows && hasBranchItem) { + if (!this.branch && !hideArrows && hasBranchItem) { indentation += ARROW_CONTAINER_WIDTH; } - const contentClasses = { - content: true, + const hasVisibleIcon = + (this._hasBranchIcon && this.branch) || + (this._hasBranchOpenedIcon && this.branch && this.open) || + (this._hasLeafIcon && !this.branch); + + const wrapperClasses = { + wrapper: true, active: this.active, }; const childrenClasses = { children: true, - guides: this.branch && indentGuides, - 'highlighted-guides': this.highlightedGuides, + guide: indentGuides !== IndentGuides.none, + 'default-guide': indentGuides !== IndentGuides.none, + 'highlighted-guide': this.highlightedGuides, + }; + + const iconContainerClasses = { + 'icon-container': true, + 'has-icon': hasVisibleIcon, }; - return html`
+ return html`
- ${this.branch && arrows + ${this.branch && !hideArrows ? html`
` : nothing} -
- +
${this.branch && !this.open - ? html`` + ? html`` : nothing} ${this.branch && this.open - ? html`` + ? html`` + : nothing} + ${!this.branch + ? html`` : nothing} - ${!this.branch ? html`` : nothing} -
-
- -
-
-
- -
-
+
+
('vscode-list'); export interface ConfigContext { - readonly arrows: boolean; + readonly hideArrows: boolean; readonly expandMode: ExpandMode; readonly indent: number; - readonly indentGuides: boolean; + readonly indentGuides: IndentGuideDisplay; readonly multiSelect: boolean; } diff --git a/src/vscode-tree/vscode-tree.styles.ts b/src/vscode-tree/vscode-tree.styles.ts index 82d1d35b5..c56d28bad 100644 --- a/src/vscode-tree/vscode-tree.styles.ts +++ b/src/vscode-tree/vscode-tree.styles.ts @@ -5,13 +5,49 @@ const styles: CSSResultGroup = [ defaultStyles, css` :host { - --vsc-tree-item-arrow-display: none; + --vsc-tree-item-arrow-display: flex; + --internal-selectionBackground: var( + --vscode-list-inactiveSelectionBackground + ); + --internal-selectionForeground: var(--vscode-foreground); + --internal-selectionIconForeground: var(--vscode-icon-foreground); + --internal-defaultIndentGuideDisplay: none; + --internal-highlightedIndentGuideDisplay: block; display: block; } - :host([arrows]) { - --vsc-tree-item-arrow-display: flex; + :host(:hover) { + --internal-defaultIndentGuideDisplay: block; + --internal-highlightedIndentGuideDisplay: block; + } + + :host(:focus-within) { + --internal-selectionBackground: var( + --vscode-list-activeSelectionBackground + ); + --internal-selectionForeground: var( + --vscode-list-activeSelectionForeground + ); + --internal-selectionIconForeground: var( + --vscode-list-activeSelectionIconForeground + ); + } + + :host([hide-arrows]) { + --vsc-tree-item-arrow-display: none; + } + + :host([indent-guides='none']), + :host([indent-guides='none']:hover) { + --internal-defaultIndentGuideDisplay: none; + --internal-highlightedIndentGuideDisplay: none; + } + + :host([indent-guides='always']), + :host([indent-guides='always']:hover) { + --internal-defaultIndentGuideDisplay: block; + --internal-highlightedIndentGuideDisplay: block; } `, ]; diff --git a/src/vscode-tree/vscode-tree.ts b/src/vscode-tree/vscode-tree.ts index c9e38f6a7..0140d33a0 100644 --- a/src/vscode-tree/vscode-tree.ts +++ b/src/vscode-tree/vscode-tree.ts @@ -23,12 +23,21 @@ import { export type VscTreeSelectEvent = CustomEvent<{selectedItems: VscodeTreeItem[]}>; -export const EXPAND_MODE = { - SINGLE_CLICK: 'singleClick', - DOUBLE_CLICK: 'doubleClick', +export const ExpandMode = { + singleClick: 'singleClick', + doubleClick: 'doubleClick', } as const; -export type ExpandMode = (typeof EXPAND_MODE)[keyof typeof EXPAND_MODE]; +export type ExpandMode = (typeof ExpandMode)[keyof typeof ExpandMode]; + +export const IndentGuides = { + none: 'none', + onHover: 'onHover', + always: 'always', +} as const; + +export type IndentGuideDisplay = + (typeof IndentGuides)[keyof typeof IndentGuides]; type ListenedKey = | 'ArrowDown' @@ -50,32 +59,62 @@ const listenedKeys: ListenedKey[] = [ 'Escape', 'Shift', ]; -const DEFAULT_ARROWS = false; +const DEFAULT_HIDE_ARROWS = false; const DEFAULT_INDENT = 8; -const DEFAULT_INDENT_GUIDES = false; const DEFAULT_MULTI_SELECT = false; -const DEFAULT_EXPAND_MODE = EXPAND_MODE.SINGLE_CLICK; - +const DEFAULT_EXPAND_MODE = ExpandMode.singleClick; +const DEFAULT_INDENT_GUIDE_DISPLAY = IndentGuides.onHover; + +/** + * @tag vscode-tree + * + * @prop {'singleClick' | 'doubleClick'} expandMode + */ @customElement('vscode-tree') export class VscodeTree extends VscElement { static override styles = styles; //#region properties - @property({type: Boolean, reflect: true}) - arrows = DEFAULT_ARROWS; + /** + * Although arrows are always visible in the Tree component by default in VSCode, some icon sets + * (e.g., Material Icon Theme) allow disabling them in the file explorer view. This flag makes it + * possible to mimic that behavior. + */ + @property({type: Boolean, reflect: true, attribute: 'hide-arrows'}) + hideArrows = false; + /** + * Controls how tree folders are expanded when clicked. This property is designed to use + * the `workbench.tree.expandMode` setting. + */ @property({type: String, attribute: 'expand-mode'}) - expandMode: ExpandMode = DEFAULT_EXPAND_MODE; + expandMode: ExpandMode = 'singleClick'; + /** + * Controls the indentation in pixels. This property is designed to use the + * `workbench.tree.indent` setting. + */ @property({type: Number, reflect: true}) - indent = DEFAULT_INDENT; + indent = 8; - @property({type: Boolean, attribute: 'indent-guides', reflect: true}) - indentGuides = DEFAULT_INDENT_GUIDES; + /** + * Controls whether the tree should render indent guides. This property is + * designed to use the `workbench.tree.renderIndentGuides` setting. + */ + @property({ + type: String, + attribute: 'indent-guides', + useDefault: true, + reflect: true, + }) + indentGuides: IndentGuideDisplay = 'onHover'; + /** + * Allows selecting multiple items. + */ @property({type: Boolean, reflect: true, attribute: 'multi-select'}) - multiSelect = DEFAULT_MULTI_SELECT; + multiSelect = false; //#endregion @@ -103,10 +142,10 @@ export class VscodeTree extends VscElement { @provide({context: configContext}) private _configContext: ConfigContext = { - arrows: DEFAULT_ARROWS, + hideArrows: DEFAULT_HIDE_ARROWS, expandMode: DEFAULT_EXPAND_MODE, indent: DEFAULT_INDENT, - indentGuides: DEFAULT_INDENT_GUIDES, + indentGuides: DEFAULT_INDENT_GUIDE_DISPLAY, multiSelect: DEFAULT_MULTI_SELECT, }; @@ -140,6 +179,9 @@ export class VscodeTree extends VscElement { //#region public methods + /** + * Expands all folders. + */ expandAll() { const children = this.querySelectorAll('vscode-tree-item'); @@ -150,6 +192,9 @@ export class VscodeTree extends VscElement { }); } + /** + * Collapses all folders. + */ collapseAll() { const children = this.querySelectorAll('vscode-tree-item'); @@ -222,10 +267,10 @@ export class VscodeTree extends VscElement { } private _updateConfigContext(changedProperties: PropertyValues) { - const {arrows, expandMode, indent, indentGuides, multiSelect} = this; + const {hideArrows, expandMode, indent, indentGuides, multiSelect} = this; - if (changedProperties.has('arrows')) { - this._configContext = {...this._configContext, arrows}; + if (changedProperties.has('hideArrows')) { + this._configContext = {...this._configContext, hideArrows}; } if (changedProperties.has('expandMode')) {