added sidebar view
mellbacon committed
Apr 26, 2023 at 16:10 UTC
a271e3be014608c6a11d9329eb5a0227d1c51d2f
6 files changed
+109
-3
package.json
+2
-1
@@ -13,7 +13,8 @@
13
},
14
"dependencies": {
15
"@tauri-apps/api": "^1.2.0",
16
- "sass": "^1.62.0"
16
+ "sass": "^1.62.0",
17
+ "svelte-splitpanes": "^0.7.13"
18
},
19
"devDependencies": {
20
"@sveltejs/vite-plugin-svelte": "^2.0.4",
src/App.svelte
+7
-2
@@ -1,12 +1,17 @@
1
<script lang="ts">
2
import Header from "./lib/Header.svelte";
3
- import Sidebar from "./lib/Sidebar.svelte";
4
-
3
+ import Sidebar, { showsidebarview, tool} from "./lib/Sidebar.svelte";
4
+ import { Pane, Splitpanes } from 'svelte-splitpanes';
5
+ import SidebarView from "./lib/SidebarView.svelte";
6
</script>
7
8
<Header />
9
<div id="main">
10
<Sidebar />
11
+ <Splitpanes theme="editor-panes">
12
+ <Pane size={25} minSize={10} maxSize={60}></Pane>
13
+ <Pane></Pane>
14
+ </Splitpanes>
15
</div>
16
<style>
17
#main {
src/global.css
+45
@@ -69,3 +69,48 @@ button {
69
border: none;
70
color: white;
71
}
72
+
73
+.editor-panes .splitpanes__pane {
74
+ background-color: transparent;
75
+ transition: none !important;
76
+}
77
+.editor-panes .splitpanes__splitter {
78
+ position: relative;
79
+}
80
+.editor-panes .splitpanes__splitter.splitpanes__splitter__active {
81
+ z-index: 5;
82
+}
83
+.editor-panes .splitpanes__splitter::before {
84
+ content: '';
85
+ position: absolute;
86
+ left: 0;
87
+ top: 0;
88
+ transition: opacity 0.2s;
89
+ background-color: #2d6fd2;
90
+ opacity: 0;
91
+ z-index: 2;
92
+}
93
+.editor-panes .splitpanes__splitter:hover::before {
94
+ opacity: 1;
95
+}
96
+.editor-panes.splitpanes--vertical > .splitpanes__splitter::before {
97
+ left: -1.5px;
98
+ right: -1.5px;
99
+ height: 100%;
100
+ cursor: ew-resize;
101
+}
102
+.editor-panes.splitpanes--horizontal > .splitpanes__splitter::before {
103
+ top: -1.5px;
104
+ bottom: -1.5px;
105
+ width: 100%;
106
+ cursor: ns-resize;
107
+}
108
+.editor-panes.splitpanes--dragging .splitpanes__splitter::before {
109
+ opacity: 1;
110
+}
111
+.editor-panes.splitpanes--vertical.splitpanes--dragging {
112
+ cursor: ew-resize;
113
+}
114
+.editor-panes.splitpanes--horizontal.splitpanes--dragging {
115
+ cursor: ns-resize;
116
+}
\ No newline at end of file
src/lib/SidebarView.svelte
new
+32
@@ -0,0 +1,32 @@
1
+<script lang="ts">
2
+ export let content = null;
3
+</script>
4
+<div id="sidebarview">
5
+ {#if content}
6
+ <div id="tool-view">
7
+ <!---
8
+ <svelte:component this={content}></svelte:component>
9
+ -->
10
+ {content}
11
+ </div>
12
+ {/if}
13
+</div>
14
+
15
+<style lang="scss">
16
+ #sidebarview {
17
+ height: 100%;
18
+ display: flex;
19
+ flex-direction: column;
20
+ align-items: center;
21
+ }
22
+ #tool-view {
23
+ width: 100%;
24
+ overflow-y: auto;
25
+ &::-webkit-scrollbar {
26
+ width: 12px;
27
+ }
28
+ &::-webkit-scrollbar-thumb {
29
+ background-color: #4c4c4c38;
30
+ }
31
+ }
32
+</style>
\ No newline at end of file
src/theme.scss
+4
@@ -61,4 +61,8 @@ html {
61
&:hover {
62
background-color: $tab-hover-color;
63
}
64
+}
65
+
66
+.editor-panes .splitpanes__splitter {
67
+ background-color: $border-color;
68
}
\ No newline at end of file
yarn.lock
+19
@@ -366,6 +366,18 @@ esbuild@^0.17.5:
366
"@esbuild/win32-ia32" "0.17.17"
367
"@esbuild/win32-x64" "0.17.17"
368
369
+esm-env-robust@^0.0.3:
370
+ version "0.0.3"
371
+ resolved "https://registry.yarnpkg.com/esm-env-robust/-/esm-env-robust-0.0.3.tgz#ef95644dde2f2bd750dec4366a43950b3dc3ed50"
372
+ integrity sha512-90Gnuw2DALOqlL1581VxP3GHPUNHX9U+fQ+8FNcTTFClhY5gEggAAnJ3q1b2Oq23knRsjv8YpNeMRPaMLUymOA==
373
+ dependencies:
374
+ esm-env "^1.0.0"
375
+
376
+esm-env@^1.0.0:
377
+ version "1.0.0"
378
+ resolved "https://registry.yarnpkg.com/esm-env/-/esm-env-1.0.0.tgz#b124b40b180711690a4cb9b00d16573391950413"
379
+ integrity sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==
380
+
381
fast-glob@^3.2.7:
382
version "3.2.12"
383
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
@@ -753,6 +765,13 @@ svelte-preprocess@^5.0.3:
765
sorcery "^0.11.0"
766
strip-indent "^3.0.0"
767
768
+svelte-splitpanes@^0.7.13:
769
+ version "0.7.13"
770
+ resolved "https://registry.yarnpkg.com/svelte-splitpanes/-/svelte-splitpanes-0.7.13.tgz#e8514aeb31e291d9dee382557a41b945c22b8b53"
771
+ integrity sha512-LiAf4OEZqRJanoax9mextXtQ0JzrdCqX2tOgVO+yJu2XNyGz5j5fGbw8+5AXgOasPi/m1nv8n2Lt+XYFRfvIGg==
772
+ dependencies:
773
+ esm-env-robust "^0.0.3"
774
+
775
svelte@^3.58.0:
776
version "3.58.0"
777
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.58.0.tgz#d3e6f103efd6129e51c7d709225ad3b4c052b64e"