qr-generator: Improve download buttons

eliandoran · Jul 10, 2024 · 17c6291 · 17c6291
1 parent 01554a8
commit 17c6291
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 18 deletions.
diff --git a/src/lib/components/action-card-item.svelte b/src/lib/components/action-card-item.svelte
@@ -4,14 +4,16 @@
 
     export let icon = undefined;
     export let label;
-    export let href;
+    export let href = null;
     export let tooltip = undefined;
+    export let enabled = true;
 </script>
 
 <li>
-    {#if !href}
+    {#if href === null}
         <button
             class="action-card-item"
+            class:disabled={!enabled}
             on:click
             title={ tooltip }
             use:tooltipAction={{ position: "left" }}
@@ -23,6 +25,7 @@
     {:else}
     <a
         class="action-card-item"
+        class:disabled={!enabled}
         {href}
         on:click
         title={ tooltip }
@@ -49,6 +52,11 @@
         font-size: 0.85rem;
     }
 
+    .action-card-item.disabled {
+        opacity: 0.5;
+        cursor: default;
+    }
+
     .action-card-item:hover {
         background: var(--action-card-hover);
     }

diff --git a/src/routes/qr-generator/+page.svelte b/src/routes/qr-generator/+page.svelte
@@ -8,12 +8,12 @@
 	import WarningBox from "$lib/components/warning-box.svelte";
 	import TextArea from "$lib/components/input/text-area.svelte";
 	import ActionCard from "$lib/components/action-card.svelte";
-	import ActionCardItem from "$lib/components/action-card-item.svelte";
 
   import FileCodeOutline from "svelte-material-icons/FileCodeOutline.svelte";
   import FilePngBox from "svelte-material-icons/FilePngBox.svelte";
   import FileJpgBox from "svelte-material-icons/FileJpgBox.svelte";
 	import StackView from "$lib/components/stack-view.svelte";
+	import QrDownloadButton from "./qr-download-button.svelte";
 
   let errorMessage = "";
   let data = "https://eliandoran.github.io/toolkit/";
@@ -42,6 +42,10 @@
 
   function rebuildQr(...args) {
     key = {};
+    svgDownloadUrl = "";
+    pngDownloadUrl = "";
+    jpgDownloadUrl = "";
+    webpDownloadUrl = "";
   }
 
   function onQrCodeGenerated() {
@@ -239,21 +243,10 @@
 
       <div class="actions">
         <ActionCard columns="always">
-          {#if svgDownloadUrl}
-            <ActionCardItem label="Download as SVG" href={svgDownloadUrl} icon={FileCodeOutline} download _target="blank" />
-          {/if}
-
-          {#if pngDownloadUrl}
-            <ActionCardItem label="Download as PNG" href={pngDownloadUrl} icon={FilePngBox} download _target="blank" />
-          {/if}
-
-          {#if jpgDownloadUrl}
-            <ActionCardItem label="Download as JPEG" href={jpgDownloadUrl} icon={FileJpgBox} download _target="blank" />
-          {/if}
-
-          {#if webpDownloadUrl}        
-            <ActionCardItem label="Download as WebP" href={webpDownloadUrl} download _target="blank" />
-          {/if}
+          <QrDownloadButton extension="SVG" url={svgDownloadUrl} icon={FileCodeOutline} />
+          <QrDownloadButton extension="PNG" url={pngDownloadUrl} icon={FilePngBox} />
+          <QrDownloadButton extension="JPEG" url={jpgDownloadUrl} icon={FileJpgBox} />
+          <QrDownloadButton extension="WebP" url={webpDownloadUrl} />
         </ActionCard>
       </div>
     </div>

diff --git a/src/routes/qr-generator/qr-download-button.svelte b/src/routes/qr-generator/qr-download-button.svelte
@@ -0,0 +1,13 @@
+<script>
+	import ActionCardItem from "$lib/components/action-card-item.svelte";
+
+    export let url = null;
+    export let icon = null;
+    export let extension;
+</script>
+
+<ActionCardItem
+    label="Download as {extension}"
+    href={url}
+    icon={icon}
+    download _target="blank" />