thm
/
upend
1
0
Fork 0
Code Issues 73 Pull Requests Packages Projects Releases 5 Wiki Activity

[ui] refactor TextViewer, deduplicate

feat/vaults
Tomáš Mládek 2022-01-24 16:01:58 +01:00
parent 1c9026d13c
commit cf9b090f71
1 changed files with 21 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
webui/src/components/display/blobs/TextViewer.svelte
View File

@ -4,7 +4,7 @@
import Spinner from "../../utils/Spinner.svelte";
export let address: string;
let mode: "preview" | "full" | "markdown" = "markdown";
let mode: "preview" | "full" | "markdown" = "preview";
$: textContent = (async () => {
const response = await fetch(
@ -19,46 +19,30 @@
return text;
}
})();
const tabs = [
["image", "preview", "Preview"],
["shape-circle", "full", "Full"],
["edit", "markdown", "Markdown"],
] as [string, typeof mode, string][];
</script>
<div class="text-preview">
<header class="text-header">
<div
class="tab"
class:active={mode == "preview"}
on:click={() => (mode = "preview")}
>
<IconButton
name="image"
active={mode == "preview"}
on:click={() => (mode = "preview")}
/>
<div class="label">Preview</div>
</div>
<div
class="tab"
class:active={mode == "full"}
on:click={() => (mode = "full")}
>
<IconButton
name="shape-circle"
active={mode == "full"}
on:click={() => (mode = "full")}
/>
<div class="label">Full</div>
</div>
<div
class="tab"
class:active={mode == "markdown"}
on:click={() => (mode = "markdown")}
>
<IconButton
name="edit"
active={mode == "markdown"}
on:click={() => (mode = "markdown")}
/>
<div class="label">Markdown</div>
</div>
{#each tabs as [icon, targetMode, label]}
<div
class="tab"
class:active={mode == targetMode}
on:click={() => (mode = targetMode)}
>
<IconButton
name={icon}
active={mode == targetMode}
on:click={() => (mode = targetMode)}
/>
<div class="label">{label}</div>
</div>
{/each}
</header>
<div class="text" class:markdown={mode === "markdown"}>
{#await textContent}