feat: added modals for making new files and folders
mellbacon committed
Jun 14, 2023 at 17:10 UTC
8abf7690951b186d4ac605f2e883278df2ba35ea
4 files changed
+77
-1
src/App.svelte
+15
@@ -9,6 +9,7 @@
9
import { loadTheme } from "./config/themehandler";
10
import { appWindow } from '@tauri-apps/api/window';
11
import { writable } from "svelte/store";
12
+ import InputModal from "./lib/Modals/InputModal.svelte";
13
let resolution = writable(0);
14
15
let minPanelSize = 10;
@@ -56,6 +57,15 @@
57
}
58
}
59
</script>
60
+<script lang="ts" context="module">
61
+ const _openPopup = writable(false);
62
+ const popupAtt = writable({});
63
+
64
+ export function openInputModal(title: string, description: string, buttons: any[], options = undefined) {
65
+ popupAtt.set({title: title, description: description, buttons: buttons, options:options});
66
+ _openPopup.set(true);
67
+ }
68
+</script>
69
70
<svelte:window on:contextmenu|preventDefault></svelte:window>
71
@@ -77,6 +87,11 @@
87
</Splitpanes>
88
</div>
89
<Statusbar />
90
+
91
+{#if $_openPopup}
92
+ <InputModal bind:open={$_openPopup} title={$popupAtt.title} buttons={$popupAtt.buttons} description={$popupAtt.description} options={$popupAtt.options}></InputModal>
93
+{/if}
94
+
95
<style lang="scss">
96
#main {
97
display: flex;
src/lib/File.ts
+16
@@ -142,3 +142,19 @@ export async function moveToTrash(p: string) {
142
if (!await dialog.ask(`Are you sure you want to delete ${p.split(path.sep).pop()}?`)) return;
143
await invoke("delete_file", {path: p, perm: false, isFile: p.includes(path.sep)})
144
}
145
+
146
+export async function createFolder(p) {
147
+ try {
148
+ await fs.createDir(p);
149
+ } catch (error) {
150
+ console.log(error);
151
+ }
152
+}
153
+export async function createFile(p) {
154
+ try {
155
+ await fs.writeFile(p, "");
156
+ } catch (error) {
157
+ console.log(error);
158
+ }
159
+ addEditorTab(p, p.split(path.sep).pop());
160
+}
src/lib/FileTree/FileTreeList.svelte
+13
-1
@@ -10,8 +10,10 @@
10
import Directory from "../../util/icons/Directory.svelte";
11
import {filetree} from "../FileTree.svelte";
12
import ContextMenu from "../utility/ContextMenu.svelte";
13
- import { moveFile, moveToTrash, openInExplorer } from "../File";
13
+ import { createFile, createFolder, moveFile, moveToTrash, openInExplorer } from "../File";
14
import { clipboard } from "@tauri-apps/api";
15
+ import { openInputModal } from "../../App.svelte";
16
+ import { path as p } from "@tauri-apps/api";
17
18
export let root = false;
19
export let isroot = false;
@@ -32,6 +34,16 @@
34
let contextmenu = false;
35
let contextmenuitems = [
36
{name: "Open in File Explorer", shortcut: "", action: async () => {await openInExplorer(path)}},
37
+ {name: "New Folder...", shortcut: "", action: () => {openInputModal("Create New Folder",
38
+ `Create a new folder in ${path}`, [
39
+ {name: "Create Folder", action: async (name) => { await createFolder(`${path}${p.sep}${name}`)}},
40
+ {name: "Cancel", action: () => {}}
41
+ ], {label: "Folder Name"})}},
42
+ {name: "New File...", shortcut: "", action: () => {openInputModal("Create New File",
43
+ `Create a new file in ${path}`, [
44
+ {name: "Create File", action: (name) => {createFile(`${path}${p.sep}${name}`)}},
45
+ {name: "Cancel", action: () => {}}
46
+ ], {label: "File Name"})}},
47
{name: "Copy", shortcut: "Ctrl + C", action: () => {console.warn("Feature not implemented yet.")}},
48
{name: "Cut", disabled: isroot, shortcut: "Ctrl + X", action: () => {console.warn("Feature not implemented yet.")}},
49
{name: "Paste", shortcut: "Ctrl + X", disabled: true, action: () => {console.warn("Feature not implemented yet.")}},
src/lib/Modals/InputModal.svelte
new
+33
@@ -0,0 +1,33 @@
1
+<script lang="ts">
2
+ import { onMount } from "svelte";
3
+ import Input from "../utility/Input.svelte";
4
+ import Popup from "../utility/Popup.svelte";
5
+
6
+ export let title;
7
+ export let buttons;
8
+ export let description = "";
9
+ export let options = {label: null, placeholder: "Enter text..."};
10
+ export let open = false;
11
+
12
+
13
+ onMount(() => {
14
+ if (!options.placeholder) {
15
+ options.placeholder = "Enter text..."
16
+ }
17
+ })
18
+
19
+ let value = "";
20
+ async function handleButtonClick(buttonAction) {
21
+ await buttonAction(value);
22
+ open = false;
23
+ }
24
+
25
+</script>
26
+<Popup bind:open {title} {description}>
27
+ <Input bind:value label={options.label} placeholder={options.placeholder} />
28
+ <svelte:fragment slot="buttons">
29
+ {#each buttons as button}
30
+ <button on:click={async () => {await handleButtonClick(button.action)}}>{button.name}</button>
31
+ {/each}
32
+ </svelte:fragment>
33
+</Popup>
\ No newline at end of file