feature: added context menu for tabs
mellbacon committed
Aug 28, 2023 at 19:12 UTC
cb257a4439885b8ee87476a4e7e62f9bf497d2fe
3 files changed
+32
-8
src/lib/EditorTabList.svelte
+15
-5
@@ -3,6 +3,17 @@
3
import Dropdown from "./utility/Dropdown.svelte";
4
import TabList from "./Tab/TabList.svelte";
5
import { Tab } from "./Tab/Tab";
6
+ import { afterUpdate } from "svelte";
7
+
8
+ let toolbar: HTMLElement = null;
9
+ let tablist: HTMLElement = null;
10
+
11
+ $: width = "";
12
+
13
+ afterUpdate(() => {
14
+ let tablistwidth = tablist.parentElement.parentElement.parentElement.clientWidth;
15
+ width = `${tablistwidth - toolbar.clientWidth}px`;
16
+ })
17
</script>
18
<script lang="ts" context="module">
19
let activetabid = null;
@@ -55,7 +66,7 @@
66
editorTab.setActive(tab.id);
67
}
68
}
58
- async function closeAllTabs() {
69
+ export async function closeAllTabs() {
70
await editorTab.closeAllTabs();
71
}
72
export function getActiveTab() {
@@ -72,9 +83,9 @@
83
export let isfile = editorTab.isfile;
84
export let tabs = editorTab.tabs;
85
</script>
75
-<div id="editor-tabs" class:hidden={$hidden}>
76
- <TabList tabs={tabs} on:closetab={async (e) => {await closeTab(e.detail.tabid)}} on:select={(e) => {editorTab.setActive(e.detail.tabid)}}></TabList>
77
- <div class="tab-toolbar">
86
+<div id="editor-tabs" bind:this={tablist} class:hidden={$hidden}>
87
+ <TabList tabs={tabs} {width} on:closetab={async (e) => {await closeTab(e.detail.tabid)}} on:select={(e) => {editorTab.setActive(e.detail.tabid)}}></TabList>
88
+ <div class="tab-toolbar" bind:this={toolbar}>
89
<Dropdown right menu={{icon: VerticalDots, children: [
90
{name: "Close All Tabs", action: async () => {await closeAllTabs()}},
91
]}}></Dropdown>
@@ -89,7 +100,6 @@
100
width: -webkit-fill-available;
101
display: flex;
102
justify-content: space-between;
92
- position: absolute;
103
}
104
.tab-toolbar {
105
height: 100%;
src/lib/Tab/Tab.svelte
+15
-1
@@ -1,5 +1,7 @@
1
<script lang="ts">
2
import { createEventDispatcher } from "svelte";
3
+ import ContextMenu from "../utility/ContextMenu.svelte";
4
+ import { commands } from "../../config/commands";
5
const dispatch = createEventDispatcher();
6
7
export let id = 0;
@@ -16,10 +18,18 @@
18
function handleClose(tabid) {
19
dispatch("closetab", {tabid: tabid});
20
}
21
+
22
+ let contextmenu = false;
23
+ let contextmenuitems = [
24
+ {name: "Close Tab", shortcut: commands.closeTab.keybind, action: commands.closeTab.command},
25
+ {name: "Close All Tabs", shortcut: "", action: commands.closeAllTabs.command},
26
+ {name: "Open In Explorer", shortcut: commands.openInExplorer.keybind, action: () => {commands.openInExplorer.command(path)}},
27
+ {name: "Rename File", shortcut: commands.renameFile.keybind, action: () => {commands.renameFile.command(label, path)}},
28
+ ]
29
</script>
30
<div bind:this={tab} title={path} id={`editorTab-${id}`} class="tab" class:active={active}>
31
<!-- svelte-ignore a11y-click-events-have-key-events -->
22
- <div class="tab-content" on:mousedown = {(e) => { if (e.button === 0) handleSelect(id);}}>
32
+ <div class="tab-content" on:mousedown = {(e) => { if (e.button === 0) handleSelect(id);}} on:mouseup={(e) => {if (e.button === 2) contextmenu = true;}}>
33
<span class="tab-label">{label}</span>
34
<span class="save-state" class:saved></span>
35
</div>
@@ -29,6 +39,10 @@
39
</div>
40
</div>
41
42
+{#if contextmenu}
43
+ <ContextMenu target={tab} items={contextmenuitems}></ContextMenu>
44
+{/if}
45
+
46
<style lang="scss">
47
.tab {
48
height: 100%;
src/lib/Tab/TabList.svelte
+2
-2
@@ -8,6 +8,7 @@
8
9
export let tabs: Writable<any[]>;
10
export let addTab = false;
11
+ export let width = "unset";
12
13
let tabcontainer = null;
14
@@ -37,7 +38,7 @@
38
}
39
})
40
</script>
40
-<div bind:this={tabcontainer} id="tablist">
41
+<div bind:this={tabcontainer} id="tablist" style="max-width: {width};">
42
{#each $tabs as tab}
43
<Tab on:closetab on:select id={tab.id} label={tab.label} path={tab.path} active={tab.active} saved={tab.saved} />
44
{/each}
@@ -45,7 +46,6 @@
46
47
<style lang="scss">
48
#tablist {
48
- position: relative;
49
display: flex;
50
overflow-x: overlay;
51
&::-webkit-scrollbar {