Editor tabs/footer rewrite
mellobacon committed
Nov 25, 2022 at 01:43 UTC
2876f72216dd3238fef99e9f6b55a6ff7a0cd350
4 files changed
+71
-33
src/components/Content/Editor/Editor.svelte
-2
@@ -1,9 +1,7 @@
1
<script lang="ts">
2
- import EditorTabs from "./EditorTabs.svelte";
2
import { hidden } from "./scripts/Tab";
3
</script>
4
6
-<EditorTabs />
5
<div id="tabview" class:hidden={$hidden}></div>
6
7
<style>
src/components/Content/Editor/EditorTabs.svelte
+22
-16
@@ -15,29 +15,35 @@
15
})
16
</script>
17
18
-<div id="editor-tabs" bind:this={tabcontainer} class:hidden={$hidden}>
19
- {#each $tabs as tab}
20
- <Tab label={tab.label} path={tab.path} active={tab.active} id={tab.id} saved={tab.saved} />
21
- {/each}
18
+<div id="editor-tabs" class:hidden={$hidden}>
19
+ <div id="tablist" bind:this={tabcontainer}>
20
+ {#each $tabs as tab}
21
+ <Tab label={tab.label} path={tab.path} active={tab.active} id={tab.id} unsaved={tab.saved} />
22
+ {/each}
23
+ </div>
24
</div>
25
24
-<style>
26
+<style lang="scss">
27
.hidden {
28
visibility: hidden;
29
}
28
- :global(#editor-tabs) {
30
+ #editor-tabs {
31
width: -webkit-fill-available;
30
- height: 2rem;
31
- background-color: #333;
32
display: flex;
33
+ align-items: center;
34
+ justify-content: space-between;
35
position: absolute;
34
- overflow-x: overlay;
35
- top: 2rem;
36
- }
37
- :global(#editor-tabs::-webkit-scrollbar) {
38
- height: 4px;
39
- }
40
- :global(#editor-tabs::-webkit-scrollbar-thumb) {
41
- background-color: #ffffff12;
36
+ box-shadow: inset 0px -1px 0 0 #333;
37
+ #tablist {
38
+ position: absolute;
39
+ height: 100%;
40
+ display: flex;
41
+ &::-webkit-scrollbar {
42
+ height: 4px;
43
+ }
44
+ &::-webkit-scrollbar-thumb {
45
+ background-color: #ffffff12;
46
+ }
47
+ }
48
}
49
</style>
src/components/Content/Editor/Tab.svelte
+28
-8
@@ -5,17 +5,22 @@
5
export let label = "Untitled-1";
6
export let path = "";
7
export let active = false;
8
- export let saved = false;
8
+ export let unsaved = false;
9
let tab;
10
</script>
11
-<div bind:this={tab} title={path} id={`tab-${id}`} class="tab" class:tab-active={active} class:unsaved={!saved}>
11
+<div bind:this={tab} title={path} id={`tab-${id}`} class="tab" class:tab-active={active} class:unsaved={unsaved}>
12
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
13
<div class="tab-content" on:click = {
14
() => {
15
setActive(id);
16
}
17
}>
18
<span class="tab-label">{label}</span>
19
+ {#if unsaved}
20
+ <span></span>
21
+ {/if}
22
</div>
23
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
24
<div class="close-tab" on:click={() => {
25
closeTab(id);
26
}}>
@@ -25,9 +30,9 @@
30
31
<TabMenu target={tab} id={id} filename={label} filepath={path} />
32
28
-<style>
33
+<style lang="scss">
34
.tab {
30
- background-color: rgb(58 58 58);
35
+ background-color: #1c1c1c;
36
height: 100%;
37
min-width: min-content;
38
flex-grow: 0.05;
@@ -37,10 +42,14 @@
42
justify-content: space-between;
43
align-items: center;
44
cursor: pointer;
45
+ padding: 0 10px;
46
box-shadow: inset 0px -0.5px 0 0 #bdd4ff;
47
+ &:not(.active):hover {
48
+ background-color: #2b2b2b;
49
+ }
50
}
51
.tab:not(.tab-active):hover {
43
- background-color: rgb(43, 43, 43);
52
+ background-color: #2b2b2b;
53
}
54
.tab-content::-webkit-scrollbar {
55
height: 4px;
@@ -52,10 +61,20 @@
61
display: flex;
62
justify-content: center;
63
align-items: center;
55
- margin-left: 2rem;
64
overflow-x: overlay;
65
overflow-y: hidden;
66
height: 100%;
67
+ padding-left: 2px;
68
+ :nth-child(2) {
69
+ display: block;
70
+ width: 6px;
71
+ height: 6px;
72
+ background-color: white;
73
+ border-radius: 50%;
74
+ left: -11px;
75
+ top: 0.5px;
76
+ position: relative;
77
+ }
78
}
79
.tab-active {
80
background-color: rgb(28, 28, 28);
@@ -74,16 +93,17 @@
93
}
94
.close-tab span::before {
95
content: "\2715";
77
- line-height: 30px;
96
+ font-size: 13px;
97
}
98
.close-tab span:hover {
99
color: gray;
100
}
101
.close-tab {
102
width: 2rem;
84
- margin-right: .25rem;
103
margin-left: -1rem;
104
display: flex;
105
justify-content: center;
106
+ position: relative;
107
+ left: 10px;
108
}
109
</style>
\ No newline at end of file
src/components/Content/MainContainer.svelte
+21
-7
@@ -1,24 +1,38 @@
1
<script lang="ts">
2
+ import { Splitpanes, Pane } from "svelte-splitpanes";
3
import Editor from "./Editor/Editor.svelte";
3
- import Footer from "../Footer/Footer.svelte";
4
+ import Footer, { showpanel, tool } from "../Footer/Footer.svelte";
5
+ import EditorTabs from "./Editor/EditorTabs.svelte";
6
+
7
+ let panelsize = 20;
8
+ function updatePanelSize(event) {
9
+ if ($showpanel) {
10
+ panelsize = event.detail[1].size;
11
+ }
12
+ }
13
</script>
14
15
<div id="container">
7
- <div class="main">
8
- <Editor />
9
- </div>
16
+ <Splitpanes theme="editor-pane" horizontal on:resized={updatePanelSize}>
17
+ <Pane>
18
+ <div class="main">
19
+ <EditorTabs />
20
+ <Editor />
21
+ </div>
22
+ </Pane>
23
+ {#if $showpanel}
24
+ <Pane bind:size={panelsize} minSize={4}><div class="panel">{$tool.content}</Pane>
25
+ {/if}
26
+ </Splitpanes>
27
<Footer></Footer>
28
</div>
29
30
<style>
31
#container {
15
- flex-grow: 1;
32
height: 100%;
33
overflow: hidden;
34
}
35
.main {
20
- width: 100%;
21
- height: calc(100% - 1.4rem);
36
background-image: url("/assets/images/Watermark(3).png");
37
background-repeat: no-repeat;
38
background-position: center;