Rewrote code for proper pane resizing
mellobacon committed
Oct 10, 2022 at 03:57 UTC
15dfcc742d63b627205b068adefb14fe9671297b
5 files changed
+118
-122
src/App.svelte
+38
-1
@@ -3,16 +3,53 @@
3
import Sidebar from "./components/Sidebar/Sidebar.svelte";
4
import MainContainer from "./components/Content/MainContainer.svelte";
5
import "carbon-components-svelte/css/g100.css";
6
+ import { Pane, Splitpanes } from 'svelte-splitpanes';
7
+ import SidebarView from "./components/Sidebar/SidebarView.svelte";
8
+ import { showtabview, sidebartab } from "./components/Sidebar/Sidebar";
9
</script>
10
11
<Header />
12
<div id="main">
13
<Sidebar />
11
- <MainContainer />
14
+ <Splitpanes theme="editor-pane">
15
+ {#if $showtabview}
16
+ <Pane size={25} snapSize={5}>
17
+ <SidebarView>
18
+ <div class="sidebarheader">
19
+ <span>{$sidebartab.tabname}</span>
20
+ </div>
21
+ <div class="sidebarcontent">
22
+ <svelte:component this={$sidebartab.content}></svelte:component>
23
+ </div>
24
+ </SidebarView>
25
+ </Pane>
26
+ {/if}
27
+ <Pane>
28
+ <MainContainer />
29
+ </Pane>
30
+ </Splitpanes>
31
</div>
32
<style>
33
#main {
34
display: flex;
35
height: calc(100% - 2rem);
36
}
37
+ .sidebarheader {
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ width: 100%;
42
+ min-height: 2rem;
43
+ border-bottom: 1px solid #333;
44
+ }
45
+ .sidebarcontent {
46
+ width: 100%;
47
+ overflow-y: auto;
48
+ }
49
+ .sidebarcontent::-webkit-scrollbar {
50
+ width: 12px;
51
+ }
52
+ .sidebarcontent::-webkit-scrollbar-thumb {
53
+ background-color: #4c4c4c38;;
54
+ }
55
</style>
\ No newline at end of file
src/components/Sidebar/Sidebar.svelte
+1
-47
@@ -3,29 +3,9 @@
3
import Folder from "carbon-icons-svelte/lib/Folder.svelte";
4
import Share from "carbon-icons-svelte/lib/Share.svelte";
5
import PasteMyst from "../Misc/PasteMyst.svelte";
6
- import SidebarView from "./SidebarView.svelte";
6
import Tree from "../FileTree/Tree.svelte";
7
+ import { toggleActive } from "./Sidebar";
8
9
- let active = false;
10
- let activeid = -1;
11
- let tabname = "";
12
- let content = null;
13
- let show = false;
14
- const toggleActive = (tab) => {
15
- active = !active;
16
- if (activeid === tab.id) {
17
- activeid = -1;
18
- document.getElementById(`sidetab-${tab.id}`).parentElement.classList.remove("bx--tabs__nav-item--selected");
19
- show = false;
20
- }
21
- else {
22
- activeid = tab.id;
23
- document.getElementById(`sidetab-${tab.id}`).parentElement.classList.add("bx--tabs__nav-item--selected");
24
- tabname = tab.tabname;
25
- content = tab.content;
26
- show = true;
27
- }
28
- }
9
const tabs = [
10
{id: 0, tabname: "Files", icon: Folder, content: Tree},
11
//{id: 1, tabname: "Git", icon: Share, content: "Git"}
@@ -50,14 +30,6 @@
30
{/each}
31
</Tabs>
32
</div>
53
-<SidebarView show={show}>
54
- <div class="sidebarheader">
55
- <span>{tabname}</span>
56
- </div>
57
- <div class="sidebarcontent">
58
- <svelte:component this={content}></svelte:component>
59
- </div>
60
-</SidebarView>
33
34
<style>
35
#sidebar {
@@ -69,14 +41,6 @@
41
align-items: flex-start;
42
justify-content: flex-start;
43
}
72
- .sidebarheader {
73
- display: flex;
74
- align-items: center;
75
- justify-content: center;
76
- width: 100%;
77
- min-height: 2rem;
78
- border-bottom: 1px solid #333;
79
- }
44
.sidebardivider {
45
width: 2rem;
46
height: .0625rem;
@@ -88,14 +52,4 @@
52
width: 24px;
53
height: 24px;
54
}
91
- .sidebarcontent {
92
- width: 100%;
93
- overflow-y: auto;
94
- }
95
- .sidebarcontent::-webkit-scrollbar {
96
- width: 12px;
97
- }
98
- .sidebarcontent::-webkit-scrollbar-thumb {
99
- background-color: #4c4c4c38;;
100
- }
55
</style>
src/components/Sidebar/Sidebar.ts
new
+30
@@ -0,0 +1,30 @@
1
+import { writable } from "svelte/store";
2
+
3
+let active = false;
4
+let activeid = -1;
5
+export let showtabview = writable(false);
6
+
7
+class SidebarTab {
8
+ tabname: string;
9
+ content;
10
+ constructor(tabname, content) {
11
+ this.tabname = tabname;
12
+ this.content = content;
13
+ }
14
+}
15
+export let sidebartab = writable(new SidebarTab("", null));
16
+
17
+export const toggleActive = (tab) => {
18
+ active = !active;
19
+ if (activeid === tab.id) {
20
+ activeid = -1;
21
+ document.getElementById(`sidetab-${tab.id}`).parentElement.classList.remove("bx--tabs__nav-item--selected");
22
+ showtabview.set(false);
23
+ }
24
+ else {
25
+ activeid = tab.id;
26
+ document.getElementById(`sidetab-${tab.id}`).parentElement.classList.add("bx--tabs__nav-item--selected");
27
+ sidebartab.set(new SidebarTab(tab.tabname, tab.content));
28
+ showtabview.set(true);
29
+ }
30
+}
\ No newline at end of file
src/components/Sidebar/SidebarView.svelte
+3
-74
@@ -1,86 +1,15 @@
1
<script lang="ts">
2
- export let show = false;
3
- let moving = false;
4
-
2
let sidebar: HTMLElement;
6
-
7
- let initialPos: { x: any; y?: any; };
8
- let initialRect: { width: any; height?: number; right?: number; };
9
-
10
- const onGrabberMouseDown = (event) => {
11
- moving = true;
12
- const rect = sidebar.getBoundingClientRect();
13
- const parent = sidebar.parentElement.getBoundingClientRect();
14
-
15
- initialRect = {
16
- width: rect.width,
17
- height: rect.height,
18
- right: parent.right - rect.right
19
- };
20
-
21
- initialPos = {
22
- x: event.pageX,
23
- y: event.pageY
24
- };
25
- };
26
-
27
- const onGrabberMouseUp = (event) => {
28
- if (!moving) return;
29
-
30
- moving = false;
31
- initialRect = null;
32
- initialPos = null;
33
- let grabber = document.getElementById("grabber");
34
- grabber.classList.remove("showgrabber");
35
- };
36
-
37
- let width: number = 125;
38
- const onGrabberMouseMove = (event) => {
39
- if (!moving) return;
40
-
41
- const delta = event.pageX - initialPos.x;
42
- width = initialRect.width + delta;
43
- sidebar.style.width = `${width}px`;
44
- let grabber = document.getElementById("grabber");
45
- grabber.classList.add("showgrabber");
46
- };
3
</script>
48
-
49
-<svelte:window on:mousemove={onGrabberMouseMove} on:mouseup={onGrabberMouseUp} />
50
-{#if show}
51
- <div id="sidebarview" class:hidden={!show} bind:this={sidebar}>
52
- <slot></slot>
53
- </div>
54
- <div id="grabber" on:mousedown|preventDefault={onGrabberMouseDown}></div>
55
-{/if}
4
+<div id="sidebarview" bind:this={sidebar}>
5
+ <slot></slot>
6
+</div>
7
8
<style>
9
#sidebarview {
10
height: 100%;
60
- width: 15rem;
61
- border-right: 1px solid #333;
11
display: flex;
12
flex-direction: column;
13
align-items: center;
65
- min-width: 125px;
66
- max-width: 80%;
67
- }
68
- .hidden {
69
- display: none !important;
70
- }
71
- #grabber {
72
- min-width: 3px;
73
- height: 100%;
74
- cursor: ew-resize;
75
- position: relative;
76
- left: -3px;
77
- }
78
- #grabber:hover {
79
- background-color: #1eaedb;
80
- transition: 0.2s;
81
- }
82
- :global(.showgrabber) {
83
- background-color: #1eaedb;
84
- cursor: ew-resize;
14
}
15
</style>
\ No newline at end of file
src/overrides.css
+46
@@ -75,4 +75,50 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active, a.bx--tabs__nav-link {
75
}
76
.bx--tree-parent-node.bx--tree-node--selected>.bx--tree-node__label {
77
background-color: transparent !important;
78
+}
79
+/*----------------------*/
80
+.editor-pane .splitpanes__pane {
81
+ background-color: transparent;
82
+ transition: none !important;
83
+}
84
+.editor-pane .splitpanes__splitter {
85
+ background-color: #333;
86
+ position: relative;
87
+}
88
+.editor-pane .splitpanes__splitter.splitpanes__splitter__active {
89
+ z-index: 5;
90
+}
91
+.editor-pane .splitpanes__splitter::before {
92
+ content: '';
93
+ position: absolute;
94
+ left: 0;
95
+ top: 0;
96
+ transition: opacity 0.2s;
97
+ background-color: #2d6fd2;
98
+ opacity: 0;
99
+ z-index: 2;
100
+}
101
+.editor-pane .splitpanes__splitter:hover::before {
102
+ opacity: 1;
103
+}
104
+.editor-pane.splitpanes--vertical > .splitpanes__splitter::before {
105
+ left: -1.5px;
106
+ right: -1.5px;
107
+ height: 100%;
108
+ cursor: ew-resize;
109
+}
110
+.editor-pane.splitpanes--horizontal > .splitpanes__splitter::before {
111
+ top: -1.5px;
112
+ bottom: -1.5px;
113
+ width: 100%;
114
+ cursor: ns-resize;
115
+}
116
+.editor-pane.splitpanes--dragging .splitpanes__splitter::before {
117
+ opacity: 1;
118
+}
119
+.editor-pane.splitpanes--vertical.splitpanes--dragging {
120
+ cursor: ew-resize;
121
+}
122
+.editor-pane.splitpanes--horizontal.splitpanes--dragging {
123
+ cursor: ns-resize;
124
}
\ No newline at end of file