added tab menu
mellbacon committed
Aug 23, 2022 at 13:21 UTC
db4c8dc9eef7801e4f2d4e36dd5d8b2affb3d47d
2 files changed
+67
-1
src/components/Content/Editor/Tab.svelte
+6
-1
@@ -1,11 +1,14 @@
1
<script lang="ts">
2
+ import TabMenu from "./TabMenu.svelte";
3
import { setActive, closeTab } from "./Tabs";
4
export let id = 0;
5
export let label = "Untitled-1";
6
+ export let path = "";
7
export let active = false;
8
export let unsaved = false;
9
+ let tab;
10
</script>
8
-<div id={`tab-${id.toString()}`} class="tab" class:tab-active={active} class:unsaved={unsaved} on:click = {
11
+<div bind:this={tab} title={path} id={`tab-${id.toString()}`} class="tab" class:tab-active={active} class:unsaved={unsaved} on:click = {
12
() => {
13
setActive(id);
14
}
@@ -20,6 +23,8 @@
23
</div>
24
</div>
25
26
+<TabMenu target={tab} id={id} filename={label} filepath={path} />
27
+
28
<style>
29
.tab {
30
background-color: rgb(58 58 58);
src/components/Content/Editor/TabMenu.svelte
new
+61
@@ -0,0 +1,61 @@
1
+<script lang="ts">
2
+ import { ContextMenuOption } from "carbon-components-svelte";
3
+ import ContextMenu from "../../ContextMenu/ContextMenu.svelte";
4
+ import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
5
+ import Cut from "carbon-icons-svelte/lib/Cut.svelte";
6
+ import { clipboard, shell, path } from "@tauri-apps/api";
7
+ import { closeTab } from "./Tabs";
8
+ export let id: number;
9
+ export let target;
10
+ export let filename;
11
+ export let filepath;
12
+
13
+ async function copyToClipboard(input) {
14
+ await clipboard.writeText(input);
15
+ }
16
+</script>
17
+
18
+<ContextMenu {target}>
19
+ <ContextMenuOption indented icon={CopyFile} labelText="Close Tab" on:click={() => {
20
+ //closeTab(id);
21
+ console.log(id);
22
+ }}>
23
+ <span class="contextshortcut" slot="shortcutText">Ctrl + F4</span>
24
+ </ContextMenuOption>
25
+ <ContextMenuOption indented icon={Cut} labelText="Close Others" on:click={() => {
26
+ let tabs = document.getElementsByClassName("tab");
27
+ console.log(id);
28
+ for (const tab of tabs) {
29
+ let t = tab.id;
30
+ let tabid = parseInt(t.split("-").pop());
31
+ if (tabid !== id) {
32
+ console.log(`close tab: ${tabid}`)
33
+ }
34
+ }
35
+ }} ></ContextMenuOption>
36
+ <ContextMenuOption indented labelText="Close Saved Tabs" on:click={() => {}}>
37
+ <span class="contextshortcut" slot="shortcutText">Ctrl + X S</span>
38
+ </ContextMenuOption>
39
+ <ContextMenuOption indented labelText="Close All Tabs" on:click={() => {}}>
40
+ <span class="contextshortcut" slot="shortcutText">Ctrl + X A</span>
41
+ </ContextMenuOption>
42
+ <!--TODO: Make this relative instead of file name. Am lazy-->
43
+ <ContextMenuOption on:click={() => copyToClipboard(filename)}>
44
+ <span slot="labelText" title={filename}>Copy File Name</span>
45
+ </ContextMenuOption>
46
+ <ContextMenuOption on:click={() => copyToClipboard(filepath)}>
47
+ <span slot="labelText" title={filepath}>Copy Absolute Path</span>
48
+ </ContextMenuOption>
49
+ <ContextMenuOption labelText="Show in Explorer" on:click={() => {
50
+ let dir = filepath.split(path.sep);
51
+ dir.pop();
52
+ dir = dir.join(path.sep);
53
+ shell.open(dir);
54
+ }}></ContextMenuOption>
55
+</ContextMenu>
56
+
57
+<style>
58
+ .contextshortcut {
59
+ color: #8c8c8c;
60
+ }
61
+</style>
\ No newline at end of file