added context menus for file tree
mellbacon committed
Aug 9, 2022 at 18:10 UTC
a2f86cef989ffe5f11bcf7cac88f8eb5dae0138d
3 files changed
+213
src/components/FileTree/LeafNodeMenu.svelte
new
+45
@@ -0,0 +1,45 @@
1
+<script lang="ts">
2
+ import { ContextMenuDivider, ContextMenuGroup, ContextMenuOption } from "carbon-components-svelte";
3
+ import ContextMenu from "../ContextMenu/ContextMenu.svelte";
4
+ import RenameModel from "../Modal/RenameModel.svelte";
5
+ import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
6
+ import Paste from "carbon-icons-svelte/lib/Paste.svelte";
7
+ import Cut from "carbon-icons-svelte/lib/Cut.svelte";
8
+ import Script from "carbon-icons-svelte/lib/Script.svelte";
9
+ export let target;
10
+ export let filename;
11
+ export let path;
12
+ let open;
13
+</script>
14
+
15
+<ContextMenu {target}>
16
+ <ContextMenuOption labelText="Edit">
17
+ <ContextMenuOption indented icon={CopyFile} labelText="Copy">
18
+ <span class="contextshortcut" slot="shortcutText">Ctrl + C</span>
19
+ </ContextMenuOption>
20
+ <ContextMenuOption indented icon={Cut} labelText="Cut">
21
+ <span class="contextshortcut" slot="shortcutText">Ctrl + X</span>
22
+ </ContextMenuOption>
23
+ <ContextMenuOption indented labelText="Rename..." on:click={() => {open = true}}>
24
+ <span class="contextshortcut" slot="shortcutText">F2</span>
25
+ </ContextMenuOption>
26
+ <ContextMenuOption indented icon={Script} labelText="Edit {filename}"></ContextMenuOption>
27
+ </ContextMenuOption>
28
+ <ContextMenuOption labelText="Copy Path...">
29
+ <ContextMenuOption labelText="Copy Relative Path"></ContextMenuOption>
30
+ <ContextMenuOption labelText="Copy Absolute Path"></ContextMenuOption>
31
+ </ContextMenuOption>
32
+ <ContextMenuOption labelText="Show in Explorer"></ContextMenuOption>
33
+ <ContextMenuDivider></ContextMenuDivider>
34
+ <ContextMenuOption labelText="Delete...">
35
+ <span class="contextshortcut" slot="shortcutText">Delete</span>
36
+ </ContextMenuOption>
37
+</ContextMenu>
38
+
39
+<RenameModel bind:open bind:filename={filename} bind:path={path} />
40
+
41
+<style>
42
+ .contextshortcut {
43
+ color: #8c8c8c;
44
+ }
45
+</style>
\ No newline at end of file
src/components/FileTree/ParentNodeMenu.svelte
new
+46
@@ -0,0 +1,46 @@
1
+<script lang="ts">
2
+ import { ContextMenuDivider, ContextMenuGroup, ContextMenuOption } from "carbon-components-svelte";
3
+ import ContextMenu from "../ContextMenu/ContextMenu.svelte";
4
+ import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
5
+ import Paste from "carbon-icons-svelte/lib/Paste.svelte";
6
+ import Cut from "carbon-icons-svelte/lib/Cut.svelte";
7
+ import RenameModel from "../Modal/RenameModel.svelte";
8
+ export let target;
9
+ export let filename;
10
+ export let path;
11
+ let open;
12
+</script>
13
+
14
+<ContextMenu {target}>
15
+ <ContextMenuOption labelText="Edit">
16
+ <ContextMenuOption indented icon={CopyFile} labelText="Copy">
17
+ <span class="contextshortcut" slot="shortcutText">Ctrl + C</span>
18
+ </ContextMenuOption>
19
+ <ContextMenuOption indented icon={Cut} labelText="Cut">
20
+ <span class="contextshortcut" slot="shortcutText">Ctrl + X</span>
21
+ </ContextMenuOption>
22
+ <ContextMenuOption indented icon={Paste} labelText="Paste">
23
+ <span class="contextshortcut" slot="shortcutText">Ctrl + V</span>
24
+ </ContextMenuOption>
25
+ <ContextMenuOption indented labelText="Rename..." on:click={() => {open = true}}>
26
+ <span class="contextshortcut" slot="shortcutText">F2</span>
27
+ </ContextMenuOption>
28
+ </ContextMenuOption>
29
+ <ContextMenuOption labelText="Copy Path...">
30
+ <ContextMenuOption labelText="Copy Relative Path"></ContextMenuOption>
31
+ <ContextMenuOption labelText="Copy Absolute Path"></ContextMenuOption>
32
+ </ContextMenuOption>
33
+ <ContextMenuOption labelText="Show in Explorer"></ContextMenuOption>
34
+ <ContextMenuDivider></ContextMenuDivider>
35
+ <ContextMenuOption labelText="Delete...">
36
+ <span class="contextshortcut" slot="shortcutText">Delete</span>
37
+ </ContextMenuOption>
38
+</ContextMenu>
39
+
40
+<RenameModel bind:open bind:filename={filename} bind:path={path} />
41
+
42
+<style>
43
+ .contextshortcut {
44
+ color: #8c8c8c;
45
+ }
46
+</style>
\ No newline at end of file
src/components/Modal/RenameModel.svelte
new
+122
@@ -0,0 +1,122 @@
1
+<script lang="ts">
2
+ import { Modal } from "carbon-components-svelte";
3
+ import Input from "../Input/Input.svelte";
4
+ import { fs } from "@tauri-apps/api";
5
+ import { updateTree } from "../FileTree/TreeData";
6
+ export let open = false;
7
+ export let filename = "";
8
+ export let path = "/";
9
+ let filenameinput = "";
10
+ let extinput = filenameinput.split(".")[1]
11
+ ? filenameinput.split(".")[1]
12
+ : "-";
13
+
14
+ function getExt() {
15
+ extinput = filenameinput.split(".")[1];
16
+ if (extinput === undefined || extinput === "") {
17
+ extinput = "-";
18
+ }
19
+ }
20
+</script>
21
+
22
+<Modal
23
+ preventCloseOnClickOutside
24
+ bind:open
25
+ modalHeading="Rename {filename}"
26
+ on:open
27
+ on:close
28
+ passiveModal
29
+>
30
+ <div class="modelcontent">
31
+ <div class="description">
32
+ <p>Give a new name to {filename}</p>
33
+ </div>
34
+ <div class="input">
35
+ <Input
36
+ bind:value={filenameinput}
37
+ labelText="Name:"
38
+ placeholder="Enter name..."
39
+ on:input={() => {
40
+ getExt();
41
+ }}
42
+ />
43
+ <div class="divider" />
44
+ <Input
45
+ readonly
46
+ placeholder={extinput}
47
+ _class="rename-ext"
48
+ labelText="Extension:"
49
+ />
50
+ </div>
51
+ <div class="buttongroup">
52
+ <div class="button disabled">Back</div>
53
+ <div
54
+ class="button"
55
+ on:click={async () => {
56
+ let oldpath = path;
57
+ let newpath = path.split("\\");
58
+ newpath.pop();
59
+
60
+ newpath.push(`${filenameinput}`);
61
+ path = newpath.join("\\");
62
+
63
+ await fs.renameFile(oldpath, path);
64
+ await updateTree();
65
+ open = false;
66
+ }}
67
+ >
68
+ Rename
69
+ </div>
70
+ </div>
71
+ </div>
72
+</Modal>
73
+
74
+<style>
75
+ .modelcontent {
76
+ display: flex;
77
+ flex-direction: column;
78
+ justify-content: center;
79
+ }
80
+ .description {
81
+ width: 100%;
82
+ }
83
+ .button {
84
+ width: 80px;
85
+ height: 35px;
86
+ border-radius: 1px;
87
+ margin: 0 5px 0 5px;
88
+ display: flex;
89
+ justify-content: center;
90
+ align-items: center;
91
+ background-color: #2276b2;
92
+ color: #f9f9f9;
93
+ cursor: pointer;
94
+ }
95
+ .button:hover {
96
+ background-color: #195b8a;
97
+ }
98
+ .buttongroup {
99
+ width: 100%;
100
+ display: flex;
101
+ justify-content: center;
102
+ margin-top: 40px;
103
+ }
104
+ .disabled {
105
+ background-color: #a9a9a9;
106
+ color: #7a7a7a;
107
+ cursor: not-allowed;
108
+ }
109
+ .input {
110
+ display: flex;
111
+ }
112
+ .divider {
113
+ width: 0.025rem;
114
+ height: 2.5rem;
115
+ margin: 24px 0px 0 0px;
116
+ content: "";
117
+ background-color: #606060;
118
+ }
119
+ :global(.rename-ext) {
120
+ flex-grow: inherit;
121
+ }
122
+</style>