feat: added bottom panel
Signed-off-by: mellobacon <mellodev@outlook.com>
mellobacon committed
Nov 8, 2023 at 03:49 UTC
ab24b9905cf7ed169c808161ed7d5eb93b75cdea
4 files changed
+76
-11
src/App.svelte
+24
-6
@@ -3,7 +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";
6
+ import Statusbar, { showBottomPanel, editortool } from "./lib/Statusbar.svelte";
7
import EditorTabList, {hidden, updateTablistWidth} from "./lib/EditorTabList.svelte";
8
import { onMount } from "svelte";
9
import { appWindow } from '@tauri-apps/api/window';
@@ -12,10 +12,12 @@
12
import RenameModal from "./lib/Modals/RenameModal.svelte";
13
import { loadDefaultSettings } from "./config/config";
14
import { error } from "tauri-plugin-log-api";
15
+ import ToolView from "./lib/ToolView.svelte";
16
let resolution = writable(0);
17
18
let minPanelSize = 10;
19
let panelSize = 15;
20
+ let bottomPanelSize = 20;
21
22
onMount(async () => {
23
await loadDefaultSettings();
@@ -100,9 +102,20 @@
102
</Pane>
103
{/if}
104
<Pane>
103
- <div id="container">
104
- <EditorTabList />
105
- <div id="tabview" class:hidden={$hidden}></div>
105
+ <div class="__">
106
+ <Splitpanes horizontal theme="editor-panes">
107
+ <Pane>
108
+ <div id="container">
109
+ <EditorTabList />
110
+ <div id="tabview" class:hidden={$hidden}></div>
111
+ </div>
112
+ </Pane>
113
+ {#if $showBottomPanel}
114
+ <Pane minSize={5} bind:size={bottomPanelSize} class="view-bottom-pane">
115
+ <ToolView content={$editortool.content}></ToolView>
116
+ </Pane>
117
+ {/if}
118
+ </Splitpanes>
119
</div>
120
</Pane>
121
</Splitpanes>
@@ -115,6 +128,10 @@
128
{/if}
129
130
<style lang="scss">
131
+ .__ {
132
+ height: 100%;
133
+ overflow: hidden;
134
+ }
135
#main {
136
display: flex;
137
}
@@ -127,11 +144,12 @@
144
}
145
#tabview {
146
width: -webkit-fill-available;
130
- margin-left: 0.1rem;
147
z-index: 1;
132
- position: absolute;
148
}
149
.hidden {
150
visibility: hidden;
151
}
152
+ :global(.view-bottom-pane) {
153
+ z-index: 1;
154
+ }
155
</style>
\ No newline at end of file
src/global.css
+2
-4
@@ -78,7 +78,7 @@ ul {
78
position: relative;
79
}
80
.editor-panes .splitpanes__splitter.splitpanes__splitter__active {
81
- z-index: 1;
81
+ z-index: 2;
82
}
83
.editor-panes .splitpanes__splitter::before {
84
content: '';
@@ -105,9 +105,7 @@ ul {
105
width: 100%;
106
cursor: ns-resize;
107
}
108
-.editor-panes.splitpanes--dragging .splitpanes__splitter::before {
109
- opacity: 1;
110
-}
108
+
109
.editor-panes.splitpanes--vertical.splitpanes--dragging {
110
cursor: ew-resize;
111
}
src/lib/Statusbar.svelte
+44
-1
@@ -3,11 +3,31 @@
3
import { line_info, language, encoding } from "./Editor.svelte";
4
import { getVersion } from '@tauri-apps/api/app';
5
import { onMount } from "svelte";
6
+ import { Terminal } from "carbon-icons-svelte";
7
8
let appVersion = "";
9
onMount(async () => {
10
appVersion = await getVersion();
11
})
12
+
13
+ const tools = [
14
+ {name: "Terminal", content: "terminal", icon: Terminal, action: (t) => toggleBottomPanel(t)}
15
+ ]
16
+</script>
17
+<script lang="ts" context="module">
18
+ import { writable } from "svelte/store";
19
+ export let showBottomPanel = writable(false);
20
+ let show = false;
21
+
22
+ export let editortool = writable({name: "", content: null});
23
+
24
+ export function toggleBottomPanel(x = null) {
25
+ show = !show;
26
+ showBottomPanel.set(show);
27
+ if (x) {
28
+ editortool.set({name: x.name, content: x.content});
29
+ }
30
+ }
31
</script>
32
33
<div id="statusbar">
@@ -16,7 +36,11 @@
36
<div class="divider"></div>
37
</div>
38
<div class="editor-tools">
19
-
39
+ {#each tools as tool}
40
+ <span class="tool" title={tool.name} on:click={() => {tool.action(tool)}}>
41
+ <svelte:component this={tool.icon}></svelte:component>
42
+ </span>
43
+ {/each}
44
</div>
45
{#if $isfile}
46
<div class="editor-info">
@@ -36,6 +60,10 @@
60
display: flex;
61
align-items: center;
62
font-size: 0.9rem;
63
+ :global(span svg) {
64
+ width: 20px;
65
+ height: 20px;
66
+ }
67
}
68
#title {
69
color: #8c8c8c;
@@ -58,6 +86,21 @@
86
align-items: center;
87
justify-content: flex-start;
88
padding-left: 10px;
89
+ .tool {
90
+ height: 100%;
91
+ padding: 0 5px;
92
+ position: relative;
93
+ color: #8c8c8c;
94
+ &:hover {
95
+ cursor: pointer;
96
+ background-color: #363636;
97
+ }
98
+ }
99
+ span {
100
+ display: flex;
101
+ align-items: center;
102
+ justify-content: center;
103
+ }
104
}
105
.editor-info {
106
display: flex;
src/lib/ToolView.svelte
new
+6
@@ -0,0 +1,6 @@
1
+<script lang="ts">
2
+ export let content = null;
3
+</script>
4
+<div id="toolview">
5
+ {content}
6
+</div>
\ No newline at end of file