added tab container in the editor view
mellbacon committed
Apr 28, 2023 at 02:45 UTC
45c34f78750e991380a7564e211be76fcb1c5630
3 files changed
+55
-2
src/App.svelte
+26
-2
@@ -4,6 +4,13 @@
4
import { Pane, Splitpanes } from 'svelte-splitpanes';
5
import SidebarView from "./lib/SidebarView.svelte";
6
import Statusbar from "./lib/Statusbar.svelte";
7
+ import EditorTabList from "./lib/EditorTabList.svelte";
8
+ import { onMount } from "svelte";
9
+ import { loadTheme } from "./config/themehandler";
10
+
11
+ onMount(async () => {
12
+ await loadTheme("dark");
13
+ })
14
</script>
15
16
<Header />
@@ -15,12 +22,29 @@
22
<SidebarView content={$tool.content}></SidebarView>
23
</Pane>
24
{/if}
18
- <Pane></Pane>
25
+ <Pane>
26
+ <div id="container">
27
+ <div id="editor-view">
28
+ <EditorTabList />
29
+ </div>
30
+ </div>
31
+ </Pane>
32
</Splitpanes>
33
</div>
34
<Statusbar />
22
-<style>
35
+<style lang="scss">
36
#main {
37
display: flex;
38
}
39
+ #container {
40
+ height: 100%;
41
+ overflow: hidden;
42
+ }
43
+ #editor-view {
44
+ background-image: url("/assets/images/Watermark(3).png");
45
+ background-repeat: no-repeat;
46
+ background-position: center;
47
+ position: relative;
48
+ height: 100%;
49
+ }
50
</style>
\ No newline at end of file
src/lib/EditorTabList.svelte
new
+27
@@ -0,0 +1,27 @@
1
+<script lang="ts">
2
+ let tabcontainer = null;
3
+</script>
4
+<div id="editor-tabs">
5
+ <div bind:this={tabcontainer} id="editor-tablist"></div>
6
+</div>
7
+
8
+<style lang="scss">
9
+ #editor-tabs {
10
+ width: -webkit-fill-available;
11
+ display: flex;
12
+ justify-content: space-between;
13
+ position: absolute;
14
+ z-index: 2;
15
+ #editor-tablist {
16
+ position: relative;
17
+ display: flex;
18
+ overflow-x: overlay;
19
+ &::-webkit-scrollbar {
20
+ height: 7px;
21
+ }
22
+ &::-webkit-scrollbar-thumb {
23
+ background-color: #e8e8e81f;
24
+ }
25
+ }
26
+ }
27
+</style>
\ No newline at end of file
src/lib/Header.svelte
+2
@@ -98,6 +98,8 @@
98
width: 100%;
99
display: flex;
100
align-items: center;
101
+ position: relative;
102
+ z-index: 3;
103
}
104
#logo {
105
background-size: 20px;