added statusbar
mellbacon committed
Apr 26, 2023 at 17:01 UTC
0abc1b6f80841b433c7909e281c22989905b5b93
5 files changed
+40
-7
src/App.svelte
+2
@@ -3,6 +3,7 @@
3
import Sidebar, { showsidebarview, tool} from "./lib/Sidebar.svelte";
4
import { Pane, Splitpanes } from 'svelte-splitpanes';
5
import SidebarView from "./lib/SidebarView.svelte";
6
+ import Statusbar from "./lib/Statusbar.svelte";
7
</script>
8
9
<Header />
@@ -17,6 +18,7 @@
18
<Pane></Pane>
19
</Splitpanes>
20
</div>
21
+<Statusbar />
22
<style>
23
#main {
24
display: flex;
src/lib/FileTree.svelte
+4
-4
@@ -3,10 +3,10 @@
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>
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">
src/lib/Header.svelte
+2
-2
@@ -61,8 +61,8 @@
61
{/each}
62
</div>
63
<div class="divider"></div>
64
- <div id="workspace">
65
- Nucleus
64
+ <div id="workspace" title="path/to/deez/nuts/or/something/filename.txt">
65
+ filename.txt
66
</div>
67
<div id="handle" data-tauri-drag-region></div>
68
<div class="tools">
src/lib/Statusbar.svelte
new
+27
@@ -0,0 +1,27 @@
1
+<div id="statusbar">
2
+ <div id="title">
3
+ <span>Nucleus</span>
4
+ </div>
5
+</div>
6
+
7
+<style lang="scss">
8
+ #statusbar {
9
+ z-index: 8000;
10
+ width: -webkit-fill-available;
11
+ display: flex;
12
+ align-items: center;
13
+ border-top: 1px solid #393939;
14
+ font-size: 0.9rem;
15
+ }
16
+ #title {
17
+ color: #8c8c8c;
18
+ display: flex;
19
+ justify-content: flex-start;
20
+ align-items: center;
21
+ border-right: 1px solid #393939;
22
+ span {
23
+ height: 100%;
24
+ padding: 0 10px;
25
+ }
26
+ }
27
+</style>
\ No newline at end of file
src/theme.scss
+5
-1
@@ -14,6 +14,7 @@ $tab-hover-color: #363636;
14
$tabBorder-active-color: red;
15
16
$header-height: 2rem;
17
+$statusbar-height: 1.5rem;
18
$footer-height: 1.6rem;
19
$tab-container-height: 2rem;
20
@@ -25,6 +26,9 @@ html {
26
#handle, #header {
27
height: $header-height;
28
}
29
+#statusbar {
30
+ height: $statusbar-height;
31
+}
32
#header {
33
background-color: $header-background-color;
34
border-bottom: 1px solid $border-color;
@@ -47,7 +51,7 @@ html {
51
}
52
53
#main {
50
- height: calc(100vh - $header-height - 0.063rem);
54
+ height: calc(100vh - $header-height - $statusbar-height - 0.063rem * 2);
55
}
56
57
#sidebar {