Fixed overflow
mellobacon committed
Nov 29, 2022 at 17:35 UTC
2735367a244a3654e028f0ca31bdb2a9704b8801
4 files changed
+50
-1
src/components/Footer/Footer.svelte
+1
-1
@@ -82,7 +82,7 @@
82
<style lang="scss">
83
#footer {
84
z-index: 8000;
85
- width: 100%;
85
+ width: -webkit-fill-available;
86
display: flex;
87
align-items: center;
88
border-top: 1px solid #393939;
src/components/Tabs/EditorTabs.svelte
+47
@@ -3,7 +3,10 @@
3
import { onMount } from "svelte";
4
import Tab from "./Tab.svelte";
5
import { hidden, tabs } from "./scripts/Tab";
6
+ import { Add, ChevronDown, OverflowMenuVertical, Play } from "carbon-icons-svelte";
7
+ import { OverflowMenu, OverflowMenuItem } from "carbon-components-svelte";
8
let tabcontainer;
9
+ export let canAdd = false;
10
onMount(() => {
11
Sortable.create(tabcontainer, {
12
draggable: ".tab",
@@ -13,6 +16,10 @@
16
sort: true
17
})
18
})
19
+
20
+ let tabmenu = [
21
+ { option: "Close All Tabs", onclick: () => { console.log("click"); } },
22
+ ]
23
</script>
24
25
<div id="editor-tabs" class:hidden={$hidden}>
@@ -21,6 +28,25 @@
28
<Tab label={tab.label} path={tab.path} active={tab.active} id={tab.id} unsaved={tab.saved} />
29
{/each}
30
</div>
31
+ <div class="tools">
32
+ <div class="overflow-list">
33
+ <ChevronDown />
34
+ </div>
35
+ <div class="play">
36
+ {#if canAdd}
37
+ <Add></Add>
38
+ {:else}
39
+ <Play />
40
+ {/if}
41
+ </div>
42
+ <OverflowMenu style="width: auto;" size="sm" title="" class="tab-settings">
43
+ {#each tabmenu as option}
44
+ <OverflowMenuItem on:click={option.onclick}>
45
+ <span class="option">{option.option}</span>
46
+ </OverflowMenuItem>
47
+ {/each}
48
+ </OverflowMenu>
49
+ </div>
50
</div>
51
52
<style lang="scss">
@@ -33,6 +59,7 @@
59
justify-content: space-between;
60
position: absolute;
61
box-shadow: inset 0px -1px 0 0 #333;
62
+ z-index: 2;
63
#tablist {
64
position: relative;
65
display: flex;
@@ -44,5 +71,25 @@
71
background-color: #e8e8e81f;
72
}
73
}
74
+ .tools {
75
+ display: flex;
76
+ .play, .overflow-list {
77
+ display: flex;
78
+ justify-content: center;
79
+ align-items: center;
80
+ height: 100%;
81
+ cursor: pointer;
82
+ padding: 0 5px;
83
+ background-color: #161616;
84
+ box-shadow: inset 0px -1px 0 0 #333;
85
+ &:hover {
86
+ background-color: #ffffff12;
87
+ }
88
+ }
89
+ :global(svg) {
90
+ width: 20px;
91
+ height: 20px;
92
+ }
93
+ }
94
}
95
</style>
src/components/View/Editor.svelte
+1
@@ -10,6 +10,7 @@
10
height: 100%;
11
background-color: #1C1C1C;
12
z-index: 1;
13
+ position: absolute;
14
}
15
.hidden {
16
visibility: hidden;
src/components/View/MainView.svelte
+1
@@ -49,5 +49,6 @@
49
background-image: url("/assets/images/Watermark(3).png");
50
background-repeat: no-repeat;
51
background-position: center;
52
+ position: relative;
53
}
54
</style>
\ No newline at end of file