enhancement #10 issue
Suraj Bhandarkar committed
Oct 2, 2022 at 16:31 UTC
6484671e493fc7b983ef5dd40d7aeec491585929
4 files changed
+53
-8
src/components/FileTree/Tree.svelte
+49
-1
@@ -5,9 +5,9 @@
5
import { updateTree } from "../FileTree/TreeData";
6
import { onMount } from "svelte";
7
import { filetree, workspacename } from "./TreeStore";
8
+ import { data, workspace } from "../FileTree/TreeData";
9
let treeview = null;
10
let tree = $filetree;
10
-
11
onMount(() => {
12
tree = $filetree;
13
filetree.subscribe(t => tree = t);
@@ -24,8 +24,24 @@
24
<WatsonHealthRotate_360 />
25
</div>
26
</div>
27
+
28
+{#if tree.length==0}
29
+<div class="container">
30
+ <div class="text-form">
31
+ You have not yet opened a folder.
32
+ </div>
33
+ <div class="toolbar-button-mx" on:click ={async() => {
34
+ let treedata = await data();
35
+ if (treedata === undefined) return;
36
+ filetree.set(treedata);
37
+ workspacename.set(workspace());}}>Open Folder</div>
38
+</div>
39
+{/if}
40
+
41
+
42
<TreeView bind:this={treeview} size="compact" hideLabel children={tree}></TreeView>
43
44
+
45
<style>
46
#explorer-toolbar {
47
height: 1rem;
@@ -45,4 +61,36 @@
61
.toolbar-button:hover {
62
background-color: #333;
63
}
64
+
65
+ .toolbar-button-mx
66
+ {
67
+ background-color: white;
68
+ color: #333;
69
+ font-family: inherit;
70
+ text-align: center;
71
+ padding: 5px 25px;
72
+ margin-top: 10px;
73
+ margin-bottom: 5px;
74
+ display: inline-block;
75
+ }
76
+
77
+ .toolbar-button-mx:hover
78
+ {
79
+ background-color: rgb(227, 228, 228);
80
+ }
81
+
82
+ .text-form{
83
+ margin-top: 10px;
84
+ margin-bottom: 5px;
85
+ }
86
+ .container
87
+ {
88
+ display:flex;
89
+ flex-direction:column;
90
+ align-items: center;
91
+ justify-content:center;
92
+ min-height:10vh;
93
+ margin-top: 10px;
94
+ margin-bottom: 5px;
95
+ }
96
</style>
\ No newline at end of file
src/components/FileTree/TreeStore.ts
+1
-5
@@ -1,11 +1,7 @@
1
import { writable } from 'svelte/store';
2
3
let testtree = [
4
- {id: 0, name:"Empty", path:"testpath/"},
5
- {id: 1, name:"Dir1", children: [
6
- {id: 2, name:"File1", path: "/file1.path"},
7
- {id: 3, name:"File2.txt", path:"testpath/file2.txt"},
8
- ], path: "testpath/Dir1/"},
4
+
5
];
6
export let filetree = writable(testtree);
7
export let workspacename = writable("Untitled Workspace");
\ No newline at end of file
src/components/FileTree/TreeViewNodeList.svelte
+2
-1
@@ -25,6 +25,7 @@
25
import CaretDown from "carbon-icons-svelte/lib/CaretDown.svelte";
26
import TreeViewNode, { computeTreeLeafDepth } from "./TreeViewNode.svelte";
27
import ParentNodeMenu from "./ParentNodeMenu.svelte";
28
+
29
30
let ref = null;
31
let refLabel = null;
@@ -129,7 +130,7 @@
130
'bx--tree-parent-node__toggle-icon--expanded'}"
131
/>
132
</span>
132
- <span class:bx--tree-node__label__details={true}>
133
+ <span class:bx--tree-node__label__details={false}>
134
<svelte:component this={icon} class="bx--tree-node__icon" />
135
{name}
136
</span>
src/components/Sidebar/SidebarView.svelte
+1
-1
@@ -57,7 +57,7 @@
57
<style>
58
#sidebarview {
59
height: 100%;
60
- width: 10rem;
60
+ width: 15rem;
61
border-right: 1px solid #333;
62
display: flex;
63
flex-direction: column;