blitzwing/cobalt-7
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web/FileReceiver: reduce icon size, change icon when dragged over

Browse source
This commit is contained in:
wukko 2024-08-13 16:48:53 +06:00
parent b9958a8102
commit c8904fd939
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
web/src/components/misc/FileReceiver.svelte
View file

@ -2,7 +2,8 @@
import { t } from "$lib/i18n/translations"; import { t } from "$lib/i18n/translations";
import Meowbalt from "$components/misc/Meowbalt.svelte"; import Meowbalt from "$components/misc/Meowbalt.svelte";
import IconFileUpload from "@tabler/icons-svelte/IconFileUpload.svelte"; import IconFileImport from "@tabler/icons-svelte/IconFileImport.svelte";
import IconUpload from "@tabler/icons-svelte/IconUpload.svelte";
export let file: File | undefined; export let file: File | undefined;
export let draggedOver = false; export let draggedOver = false;
@ -38,7 +39,11 @@
</div> </div>
<div class="open-file-icon"> <div class="open-file-icon">
<IconFileUpload /> {#if draggedOver}
<IconUpload />
{:else}
<IconFileImport />
{/if}
</div> </div>
<div class="open-file-text"> <div class="open-file-text">
@ -60,10 +65,11 @@
<style> <style>
.open-file-button { .open-file-button {
position: relative;
flex-direction: column; flex-direction: column;
gap: 8px;
padding: 32px; padding: 32px;
transition: box-shadow 0.2s; transition: box-shadow 0.2s;
position: relative;
} }
.open-file-button:not(:focus-visible) { .open-file-button:not(:focus-visible) {
@ -131,9 +137,9 @@
} }
.open-file-icon :global(svg) { .open-file-icon :global(svg) {
width: 52px; width: 32px;
height: 52px; height: 32px;
stroke-width: 1.5px; stroke-width: 1.8px;
} }
.open-file-text { .open-file-text {