1
0
Fork 0
mirror of synced 2024-06-13 16:05:06 +12:00

make attachments downloadable and images clickable

This commit is contained in:
Martin McKeaveney 2021-05-23 15:40:00 +01:00
parent f992c650d2
commit b8c18d3d91
6 changed files with 43 additions and 2 deletions

View file

@ -71,6 +71,7 @@
"@spectrum-css/tags": "^3.0.2",
"@spectrum-css/textfield": "^3.0.1",
"@spectrum-css/toast": "^3.0.1",
"@spectrum-css/tooltip": "^3.0.3",
"@spectrum-css/treeview": "^3.0.2",
"@spectrum-css/typography": "^3.0.1",
"@spectrum-css/underlay": "^2.0.9",

View file

@ -1,6 +1,12 @@
<script>
import Tooltip from "../Tooltip/Tooltip.svelte"
import Link from "../Link/Link.svelte"
import { createEventDispatcher } from "svelte"
export let value
const dispatch = createEventDispatcher()
const displayLimit = 5
$: attachments = value?.slice(0, displayLimit) ?? []
$: leftover = (value?.length ?? 0) - attachments.length
@ -13,9 +19,17 @@
{#each attachments as attachment}
{#if isImage(attachment.extension)}
<img src={attachment.url} alt={attachment.extension} />
<Link quiet target="_blank" href={attachment.url}>
<img src={attachment.url} alt={attachment.extension} />
</Link>
{:else}
<div class="file">{attachment.extension}</div>
<Tooltip text={attachment.name} direction="right">
<div class="file">
<Link quiet target="_blank" href={attachment.url}
>{attachment.extension}</Link
>
</div>
</Tooltip>
{/if}
{/each}
{#if leftover}

View file

@ -0,0 +1,14 @@
<script>
import "@spectrum-css/tooltip/dist/index-vars.css"
export let direction = "top"
export let text = ""
</script>
<span class="u-tooltip-showOnHover tooltip">
<slot />
<div class={`spectrum-Tooltip spectrum-Tooltip--${direction}`}>
<span class="spectrum-Tooltip-label">{text}</span>
<span class="spectrum-Tooltip-tip" />
</div>
</span>

View file

@ -30,6 +30,7 @@ export { default as Label } from "./Label/Label.svelte"
export { default as Layout } from "./Layout/Layout.svelte"
export { default as Page } from "./Layout/Page.svelte"
export { default as Link } from "./Link/Link.svelte"
export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
export { default as Menu } from "./Menu/Menu.svelte"
export { default as MenuSection } from "./Menu/Section.svelte"
export { default as MenuSeparator } from "./Menu/Separator.svelte"

View file

@ -236,6 +236,11 @@
resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.2.tgz#8e27cce799b1b1d0054a88b135dddf7fbf1bdc78"
integrity sha512-sJp8DRsU2iSF67hlOQHFdRkbJHncspoOywHEsqcjh2KFl8gRY12rQL0ORG6J2THUt0LVBWSy48iwph9s4rkwsA==
"@spectrum-css/tooltip@^3.0.3":
version "3.0.3"
resolved "https://registry.yarnpkg.com/@spectrum-css/tooltip/-/tooltip-3.0.3.tgz#26b8ca3b3d30e29630244d85eb4fc11d0c841281"
integrity sha512-ztRF7WW1FzyNavXBRc+80z67UoOrY9wl3cMYsVD3MpDnyxdzP8cjza1pCcolKBaFqRTcQKkxKw3GWtGICRKR5A==
"@spectrum-css/treeview@^3.0.2":
version "3.0.2"
resolved "https://registry.yarnpkg.com/@spectrum-css/treeview/-/treeview-3.0.2.tgz#d54d8f17290babb1c885f5d9355e225421beb0d2"

View file

@ -65,6 +65,12 @@
)
}
const selectAttachment = ({ url }) => {
$goto(
`/builder/app/${$params.application}/data/table/${tableId}/relationship/${rowId}/${fieldName}`
)
}
const deleteRows = async () => {
await api.post(`/api/${tableId}/rows`, {
rows: selectedRows,