69 lines
2.1 KiB
Svelte
69 lines
2.1 KiB
Svelte
|
<script>
|
||
|
|
import Icon from "../common/Icon.svelte";
|
||
|
|
import { imgurl } from "../files/imageserver";
|
||
|
|
import { getContext } from "svelte";
|
||
|
|
export let record;
|
||
|
|
const channel = getContext("channel");
|
||
|
|
export let size = "small";
|
||
|
|
export let showFilename = false;
|
||
|
|
let imageSide;
|
||
|
|
let fileSide;
|
||
|
|
let fontSize;
|
||
|
|
if (size == "large") {
|
||
|
|
imageSide = 256;
|
||
|
|
fileSide = 32;
|
||
|
|
fontSize = "20";
|
||
|
|
} else if (size == "medium") {
|
||
|
|
imageSide = 128;
|
||
|
|
fileSide = 12;
|
||
|
|
fontSize = "17";
|
||
|
|
} else if (size == "small") {
|
||
|
|
imageSide = 64;
|
||
|
|
fileSide = 12;
|
||
|
|
fontSize = "15";
|
||
|
|
} else if (size == "tiny") {
|
||
|
|
imageSide = 42;
|
||
|
|
fileSide = 12;
|
||
|
|
fontSize = "13";
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{#if record}
|
||
|
|
{#if record._file.mime.startsWith("image")}
|
||
|
|
<!-- href={imgurl(record)} -->
|
||
|
|
<a
|
||
|
|
href="{channel.lucentUrl}/records/{record.id}"
|
||
|
|
title={record._file.path}
|
||
|
|
class="d-flex align-items-center justify-content-center "
|
||
|
|
style="width:{imageSide}px;height:{imageSide}px"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
class="rounded w-100"
|
||
|
|
src={imgurl(record, imageSide, imageSide, "crop")}
|
||
|
|
alt={record._file.path}
|
||
|
|
/>
|
||
|
|
</a>
|
||
|
|
{:else}
|
||
|
|
<!-- href="{channelurl}/files/download?schema={record._sys.schema}&path={record._file.path}" -->
|
||
|
|
<a
|
||
|
|
href="{channel.lucentUrl}/records/{record.id}"
|
||
|
|
title={record._file.path}
|
||
|
|
class="btn btn-outline-primary btn-sm d-flex align-items-center justify-content-center"
|
||
|
|
style="width:{imageSide}px;height:{imageSide}px"
|
||
|
|
>
|
||
|
|
<Icon icon="file" width={fileSide} height={fileSide} />
|
||
|
|
<span class="ms-2" style="font-size:{fontSize}px"
|
||
|
|
>.{record._file.path.split(".").pop()}</span
|
||
|
|
>
|
||
|
|
</a>
|
||
|
|
{/if}
|
||
|
|
{/if}
|
||
|
|
{#if showFilename}
|
||
|
|
<a
|
||
|
|
href="{channel.lucentUrl}/records/{record.id}"
|
||
|
|
title={record._file.path}
|
||
|
|
class="preview-file-filename lx-small-text text-decoration-none"
|
||
|
|
>{record._file.path}</a
|
||
|
|
>
|
||
|
|
{/if}
|