[ui] base of file/url upload dialog
This commit is contained in:
parent
9e96863ece
commit
e0444528d7
4 changed files with 66 additions and 6 deletions
|
@ -7,6 +7,7 @@
|
|||
import Browse from "./views/Browse.svelte";
|
||||
import Search from "./views/Search.svelte";
|
||||
import DropAdd from "./components/DropAdd.svelte";
|
||||
import AddModal from "./components/AddModal.svelte";
|
||||
|
||||
const history = createHistory(createHashSource());
|
||||
|
||||
|
@ -35,6 +36,7 @@
|
|||
</Router>
|
||||
|
||||
<DropAdd />
|
||||
<AddModal />
|
||||
|
||||
<style global lang="scss">
|
||||
@use "normalize.css/normalize.css";
|
||||
|
|
44
webui/src/components/AddModal.svelte
Normal file
44
webui/src/components/AddModal.svelte
Normal file
|
@ -0,0 +1,44 @@
|
|||
<script context="module" lang="ts">
|
||||
export type AddEvents = {
|
||||
files: File[];
|
||||
urls: string[];
|
||||
};
|
||||
export const addEmitter = mitt<AddEvents>();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import mitt from "mitt";
|
||||
|
||||
let files: File[] = [];
|
||||
let URLs: string[] = [];
|
||||
$: visible = files.length + URLs.length > 0;
|
||||
|
||||
addEmitter.on("files", (ev) => {
|
||||
files = ev;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="addmodal-container" class:visible>
|
||||
<div class="addmodal">
|
||||
{#each files as file}
|
||||
<div>{file.name}</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.addmodal-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: var(--foreground);
|
||||
|
||||
display: none;
|
||||
&.visible {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,23 +1,24 @@
|
|||
<script lang="ts">
|
||||
import { addEmitter } from "./AddModal.svelte";
|
||||
import Icon from "./utils/Icon.svelte";
|
||||
|
||||
let dragging = false;
|
||||
|
||||
function onDrop(ev: DragEvent) {
|
||||
console.log(ev.dataTransfer);
|
||||
console.debug(ev.dataTransfer);
|
||||
if (ev.dataTransfer.files.length > 0) {
|
||||
addEmitter.emit("files", Array.from(ev.dataTransfer.files));
|
||||
} // TODO: else check for URLs
|
||||
dragging = false;
|
||||
}
|
||||
|
||||
function onDragEnter(ev: DragEvent) {
|
||||
console.log("dragstart!");
|
||||
}
|
||||
function onDragEnter(ev: DragEvent) {}
|
||||
|
||||
function onDragOver(ev: DragEvent) {
|
||||
dragging = true;
|
||||
}
|
||||
|
||||
function onDragLeave(ev: DragEvent) {
|
||||
console.log("dragleave!");
|
||||
dragging = false;
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { Link, useLocation, useNavigate, useParams } from "svelte-navigator";
|
||||
import { useMatch } from "svelte-navigator";
|
||||
import { addEmitter } from "../AddModal.svelte";
|
||||
import Icon from "../utils/Icon.svelte";
|
||||
import Input from "../utils/Input.svelte";
|
||||
const navigate = useNavigate();
|
||||
|
@ -19,6 +20,13 @@
|
|||
navigate("/");
|
||||
}
|
||||
}
|
||||
|
||||
let fileInput: HTMLInputElement;
|
||||
function onFileChange() {
|
||||
if (fileInput.files.length > 0) {
|
||||
addEmitter.emit("files", Array.from(fileInput.files));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="header">
|
||||
|
@ -37,8 +45,9 @@
|
|||
<Icon name="search" slot="prefix" />
|
||||
</Input>
|
||||
</div>
|
||||
<button class="add-button">
|
||||
<button class="add-button" on:click={() => fileInput.click()}>
|
||||
<Icon name="plus-circle" />
|
||||
<input type="file" bind:this={fileInput} on:change={onFileChange} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
@ -91,6 +100,10 @@
|
|||
line-height: 1;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue