added sidebar view content
mellbacon committed
Apr 26, 2023 at 16:27 UTC
df194e99160e9c8d8090de5f5d7d55d0d1fe01ac
4 files changed
+48
-5
src/App.svelte
+5
-1
@@ -9,7 +9,11 @@
9
<div id="main">
10
<Sidebar />
11
<Splitpanes theme="editor-panes">
12
- <Pane size={25} minSize={10} maxSize={60}></Pane>
12
+ {#if $showsidebarview}
13
+ <Pane size={25} minSize={10} maxSize={60}>
14
+ <SidebarView content={$tool.content}></SidebarView>
15
+ </Pane>
16
+ {/if}
17
<Pane></Pane>
18
</Splitpanes>
19
</div>
src/lib/FileTree.svelte
new
+41
@@ -0,0 +1,41 @@
1
+<script lang="ts">
2
+ export let tree = [];
3
+</script>
4
+
5
+{#if tree.length === 0}
6
+<div class="container">
7
+ <span>No folder/workspace open</span>
8
+ <button class="toolbar-button">Open Folder</button>
9
+</div>
10
+{/if}
11
+
12
+<style lang="scss">
13
+ .toolbar-button {
14
+ background-color: #222222;
15
+ color: #fff;
16
+ font-family: inherit;
17
+ text-align: center;
18
+ padding: 7px 30px;
19
+ margin-top: 10px;
20
+ margin-bottom: 5px;
21
+ display: inline-block;
22
+ cursor: pointer;
23
+ }
24
+ .toolbar-button:hover {
25
+ background-color: rgb(50 50 50);
26
+ }
27
+ .container {
28
+ display:flex;
29
+ flex-direction:column;
30
+ align-items: center;
31
+ justify-content:center;
32
+ min-height: 70vh;
33
+ margin-top: 10px;
34
+ margin-bottom: 5px;
35
+ &>span {
36
+ margin-top: 10px;
37
+ margin-bottom: 5px;
38
+ text-align: center;
39
+ }
40
+ }
41
+</style>
\ No newline at end of file
src/lib/Sidebar.svelte
+2
-1
@@ -1,9 +1,10 @@
1
<script lang="ts">
2
import Folder from "carbon-icons-svelte/lib/Folder.svelte";
3
import SidebarTab from "./SidebarTab.svelte";
4
+ import FileTree from "./FileTree.svelte";
5
6
export let tabs = [
6
- {id: 0, tabname: "Explorer", icon: Folder, content: "Git"}
7
+ {id: 0, tabname: "Explorer", icon: Folder, content: FileTree}
8
];
9
</script>
10
src/lib/SidebarView.svelte
-3
@@ -4,10 +4,7 @@
4
<div id="sidebarview">
5
{#if content}
6
<div id="tool-view">
7
- <!---
7
<svelte:component this={content}></svelte:component>
9
- -->
10
- {content}
8
</div>
9
{/if}
10
</div>