added tab toolbar
mellbacon committed
May 7, 2023 at 00:57 UTC
c94745f2ee3341ac0403a37974f850d9dd58a30e
2 files changed
+23
-4
src/lib/EditorTabList.svelte
+17
-4
@@ -1,8 +1,10 @@
1
<script lang="ts">
2
import { onMount } from "svelte";
3
import Tab from "./Tab.svelte";
4
- import { tabs, hidden } from "./scripts/Tab";
4
+ import { tabs, hidden, CloseAllTabs } from "./scripts/Tab";
5
import Sortable from 'sortablejs';
6
+ import VerticalDots from "carbon-icons-svelte/lib/OverflowMenuVertical.svelte";
7
+ import Dropdown from "./utility/Dropdown.svelte";
8
9
let tabcontainer = null;
10
@@ -22,6 +24,12 @@
24
<Tab id={tab.id} label={tab.label} path={tab.path} active={tab.active} />
25
{/each}
26
</div>
27
+ <div class="tab-toolbar">
28
+ <Dropdown right menu={{icon: VerticalDots, children: [
29
+ {name: "Close All Tabs", action: () => {CloseAllTabs()}},
30
+ {name: "Close Saved Tabs", disabled: true}
31
+ ]}}></Dropdown>
32
+ </div>
33
</div>
34
35
<style lang="scss">
@@ -32,18 +40,23 @@
40
width: -webkit-fill-available;
41
display: flex;
42
justify-content: space-between;
35
- position: absolute;
36
- left: 0.5px; /*temp fix to show over the sidebar border*/
43
#editor-tablist {
44
position: relative;
45
display: flex;
46
overflow-x: overlay;
47
&::-webkit-scrollbar {
42
- height: 7px;
48
+ height: 5px;
49
}
50
&::-webkit-scrollbar-thumb {
51
background-color: #e8e8e81f;
52
}
53
}
54
}
55
+ .tab-toolbar {
56
+ height: 100%;
57
+ display: flex;
58
+ align-items: center;
59
+ color: white;
60
+ padding: 0 5px;
61
+ }
62
</style>
\ No newline at end of file
src/lib/scripts/Tab.ts
+6
@@ -55,6 +55,12 @@ export function setActive(id: number) {
55
tabs.set(tablist);
56
}
57
58
+export function CloseAllTabs() {
59
+ for (const tab of tablist) {
60
+ closeTab(tab.id);
61
+ }
62
+}
63
+
64
export function closeTab(tabid: number) {
65
if (activeid === tabid) {
66
for (let i = 0; i <= tablist.length - 1; i++) {