feat: add download button to UpObject
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
This commit is contained in:
parent
28df11e41c
commit
8625b7f519
1 changed files with 29 additions and 8 deletions
|
@ -4,6 +4,7 @@
|
||||||
import HashBadge from "./HashBadge.svelte";
|
import HashBadge from "./HashBadge.svelte";
|
||||||
import Ellipsis from "../utils/Ellipsis.svelte";
|
import Ellipsis from "../utils/Ellipsis.svelte";
|
||||||
import UpLink from "./UpLink.svelte";
|
import UpLink from "./UpLink.svelte";
|
||||||
|
import Icon from "../utils/Icon.svelte";
|
||||||
import { readable, type Readable } from "svelte/store";
|
import { readable, type Readable } from "svelte/store";
|
||||||
import { notify, UpNotification } from "../../notifications";
|
import { notify, UpNotification } from "../../notifications";
|
||||||
import IconButton from "../utils/IconButton.svelte";
|
import IconButton from "../utils/IconButton.svelte";
|
||||||
|
@ -12,7 +13,9 @@
|
||||||
import type { UpObject } from "upend";
|
import type { UpObject } from "upend";
|
||||||
import type { ADDRESS_TYPE, EntityInfo } from "upend/types";
|
import type { ADDRESS_TYPE, EntityInfo } from "upend/types";
|
||||||
import { useEntity } from "../../lib/entity";
|
import { useEntity } from "../../lib/entity";
|
||||||
|
import { i18n } from "../../i18n";
|
||||||
import api from "../../lib/api";
|
import api from "../../lib/api";
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
export let address: string;
|
export let address: string;
|
||||||
|
@ -124,9 +127,7 @@
|
||||||
<div class="separator" />
|
<div class="separator" />
|
||||||
<div class="label" class:resolving title={displayLabel}>
|
<div class="label" class:resolving title={displayLabel}>
|
||||||
{#if banner && isFile}
|
{#if banner && isFile}
|
||||||
<a href="{api.apiUrl}/raw/{address}" download={inferredIds[0]}>
|
<Ellipsis value={displayLabel} />
|
||||||
<Ellipsis value={displayLabel} />
|
|
||||||
</a>
|
|
||||||
{:else if link}
|
{:else if link}
|
||||||
<UpLink to={{ entity: address }}>
|
<UpLink to={{ entity: address }}>
|
||||||
<Ellipsis value={displayLabel} />
|
<Ellipsis value={displayLabel} />
|
||||||
|
@ -143,13 +144,23 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</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">
|
<div class="icon">
|
||||||
<IconButton
|
<IconButton
|
||||||
name="window-open"
|
name="window-alt"
|
||||||
on:click={nativeOpen}
|
on:click={nativeOpen}
|
||||||
title="Open in default application..."
|
title={$i18n.t("Open in default application...")}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -218,10 +229,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
margin: 0 0.25em;
|
margin: 0 0.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resolving {
|
.resolving {
|
||||||
opacity: 0.7;
|
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>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue