From 0d41fe6fa3d65e6a72274c846cac83c42424e73c Mon Sep 17 00:00:00 2001 From: wukko <me@wukko.me> Date: Tue, 13 Aug 2024 16:15:00 +0600 Subject: [PATCH] web/FileReceiver: animated svg dashed stroke, padding improvements --- web/src/components/misc/FileReceiver.svelte | 71 ++++++++++++++++----- 1 file changed, 55 insertions(+), 16 deletions(-) diff --git a/web/src/components/misc/FileReceiver.svelte b/web/src/components/misc/FileReceiver.svelte index 7f570186..cc30b333 100644 --- a/web/src/components/misc/FileReceiver.svelte +++ b/web/src/components/misc/FileReceiver.svelte @@ -31,6 +31,12 @@ <Meowbalt emotion="question" /> <button class="open-file-button" on:click={() => openFile()}> + <div class="dashed-stroke"> + <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> + <rect width="100%" height="100%" fill="none" rx="24" ry="24" /> + </svg> + </div> + <div class="open-file-icon"> <IconFileUpload /> </div> @@ -45,7 +51,7 @@ </div> <div class="subtext accept-list"> {$t("receiver.accept", { - formats: acceptExtensions.join(", ") + formats: acceptExtensions.join(", "), })} </div> </div> @@ -53,33 +59,66 @@ </div> <style> + .open-file-button { + flex-direction: column; + padding: 32px; + transition: box-shadow 0.2s; + position: relative; + } + + .open-file-button:not(:focus-visible) { + box-shadow: none; + } + + .open-file-button, + .dashed-stroke :global(svg) { + border-radius: 24px; + } + + .dragged-over .open-file-button { + background-image: none; + box-shadow: 0 0 50px 10px var(--button-hover); + } + .open-file-container { display: flex; flex-direction: column; align-items: center; } - .open-file-button { - flex-direction: column; - padding: 36px; - border-radius: 24px; - box-shadow: none; - background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='24' ry='24' stroke='%236E6E6E60' stroke-width='5' stroke-dasharray='10%2c20' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); + .dashed-stroke { + position: absolute; + height: 100%; + width: 100%; + bottom: 0; + pointer-events: none; + } - transition: box-shadow 0.2s; + .dashed-stroke :global(svg rect) { + width: 100%; + height: 100%; + stroke-width: 5; + stroke-dashoffset: 3; + stroke-linecap: square; + stroke-dasharray: 10, 15; + stroke: var(--input-border); + transition: + stroke-dasharray 0.2s, + stroke-dashoffset 0.2s; + } + + .dragged-over .dashed-stroke :global(svg rect) { + stroke-dasharray: 20, 5; + stroke-dashoffset: 8; } .open-file-container :global(.meowbalt) { clip-path: inset(0px 0px 16px 0px); margin-bottom: -16px; - transition: clip-path 0.2s, margin-bottom 0.2s; - } - - .dragged-over .open-file-button { - box-shadow: - 0 0 0 2px var(--button-hover-transparent) inset, - 0 0 50px 10px var(--button-hover); + transition: + clip-path 0.2s, + margin-bottom 0.2s; } .dragged-over :global(.meowbalt) { @@ -100,7 +139,7 @@ .open-file-text { display: flex; flex-direction: column; - gap: 10px; + gap: 8px; } .open-title {