[ui] base of file/url upload dialog
parent
9e96863ece
commit
e0444528d7
|
@ -7,6 +7,7 @@
|
||||||
import Browse from "./views/Browse.svelte";
|
import Browse from "./views/Browse.svelte";
|
||||||
import Search from "./views/Search.svelte";
|
import Search from "./views/Search.svelte";
|
||||||
import DropAdd from "./components/DropAdd.svelte";
|
import DropAdd from "./components/DropAdd.svelte";
|
||||||
|
import AddModal from "./components/AddModal.svelte";
|
||||||
|
|
||||||
const history = createHistory(createHashSource());
|
const history = createHistory(createHashSource());
|
||||||
|
|
||||||
|
@ -35,6 +36,7 @@
|
||||||
</Router>
|
</Router>
|
||||||
|
|
||||||
<DropAdd />
|
<DropAdd />
|
||||||
|
<AddModal />
|
||||||
|
|
||||||
<style global lang="scss">
|
<style global lang="scss">
|
||||||
@use "normalize.css/normalize.css";
|
@use "normalize.css/normalize.css";
|
||||||
|
|
|
@ -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">
|
<script lang="ts">
|
||||||
|
import { addEmitter } from "./AddModal.svelte";
|
||||||
import Icon from "./utils/Icon.svelte";
|
import Icon from "./utils/Icon.svelte";
|
||||||
|
|
||||||
let dragging = false;
|
let dragging = false;
|
||||||
|
|
||||||
function onDrop(ev: DragEvent) {
|
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;
|
dragging = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onDragEnter(ev: DragEvent) {
|
function onDragEnter(ev: DragEvent) {}
|
||||||
console.log("dragstart!");
|
|
||||||
}
|
|
||||||
|
|
||||||
function onDragOver(ev: DragEvent) {
|
function onDragOver(ev: DragEvent) {
|
||||||
dragging = true;
|
dragging = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onDragLeave(ev: DragEvent) {
|
function onDragLeave(ev: DragEvent) {
|
||||||
console.log("dragleave!");
|
|
||||||
dragging = false;
|
dragging = false;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Link, useLocation, useNavigate, useParams } from "svelte-navigator";
|
import { Link, useLocation, useNavigate, useParams } from "svelte-navigator";
|
||||||
import { useMatch } from "svelte-navigator";
|
import { useMatch } from "svelte-navigator";
|
||||||
|
import { addEmitter } from "../AddModal.svelte";
|
||||||
import Icon from "../utils/Icon.svelte";
|
import Icon from "../utils/Icon.svelte";
|
||||||
import Input from "../utils/Input.svelte";
|
import Input from "../utils/Input.svelte";
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
@ -19,6 +20,13 @@
|
||||||
navigate("/");
|
navigate("/");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let fileInput: HTMLInputElement;
|
||||||
|
function onFileChange() {
|
||||||
|
if (fileInput.files.length > 0) {
|
||||||
|
addEmitter.emit("files", Array.from(fileInput.files));
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="header">
|
<div class="header">
|
||||||
|
@ -37,8 +45,9 @@
|
||||||
<Icon name="search" slot="prefix" />
|
<Icon name="search" slot="prefix" />
|
||||||
</Input>
|
</Input>
|
||||||
</div>
|
</div>
|
||||||
<button class="add-button">
|
<button class="add-button" on:click={() => fileInput.click()}>
|
||||||
<Icon name="plus-circle" />
|
<Icon name="plus-circle" />
|
||||||
|
<input type="file" bind:this={fileInput} on:change={onFileChange} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -91,6 +100,10 @@
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
display: block;
|
display: block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue