From 8625b7f519e65c6d1422374f2c814f81d0e2e785 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Mon, 31 Jul 2023 15:57:17 +0200
Subject: [PATCH] feat: add download button to UpObject

---
 webui/src/components/display/UpObject.svelte | 37 +++++++++++++++-----
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/webui/src/components/display/UpObject.svelte b/webui/src/components/display/UpObject.svelte
index e7c9c01..5d68c35 100644
--- a/webui/src/components/display/UpObject.svelte
+++ b/webui/src/components/display/UpObject.svelte
@@ -4,6 +4,7 @@
   import HashBadge from "./HashBadge.svelte";
   import Ellipsis from "../utils/Ellipsis.svelte";
   import UpLink from "./UpLink.svelte";
+  import Icon from "../utils/Icon.svelte";
   import { readable, type Readable } from "svelte/store";
   import { notify, UpNotification } from "../../notifications";
   import IconButton from "../utils/IconButton.svelte";
@@ -12,7 +13,9 @@
   import type { UpObject } from "upend";
   import type { ADDRESS_TYPE, EntityInfo } from "upend/types";
   import { useEntity } from "../../lib/entity";
+  import { i18n } from "../../i18n";
   import api from "../../lib/api";
+
   const dispatch = createEventDispatcher();
 
   export let address: string;
@@ -124,9 +127,7 @@
     <div class="separator" />
     <div class="label" class:resolving title={displayLabel}>
       {#if banner && isFile}
-        <a href="{api.apiUrl}/raw/{address}" download={inferredIds[0]}>
-          <Ellipsis value={displayLabel} />
-        </a>
+        <Ellipsis value={displayLabel} />
       {:else if link}
         <UpLink to={{ entity: address }}>
           <Ellipsis value={displayLabel} />
@@ -143,13 +144,23 @@
         </div>
       {/if}
     </div>
-    {#if $vaultInfo?.desktop}
-      {#if banner && isFile}
+    {#if banner && isFile}
+      <div class="icon">
+        <a
+          class="link-button"
+          href="{api.apiUrl}/raw/{address}"
+          download={inferredIds[0]}
+          title={$i18n.t("Download as file")}
+        >
+          <Icon name="download" />
+        </a>
+      </div>
+      {#if $vaultInfo?.desktop}
         <div class="icon">
           <IconButton
-            name="window-open"
+            name="window-alt"
             on:click={nativeOpen}
-            title="Open in default application..."
+            title={$i18n.t("Open in default application...")}
           />
         </div>
       {/if}
@@ -218,10 +229,20 @@
   }
 
   .icon {
-    margin: 0 0.25em;
+    margin: 0 0.1em;
   }
 
   .resolving {
     opacity: 0.7;
   }
+
+  .link-button {
+    opacity: 0.66;
+    transition: opacity 0.2s, color 0.2s;
+
+    &:hover {
+      opacity: 1;
+      color: var(--active-color, var(--primary));
+    }
+  }
 </style>