thm
/
upend
1
0
Fork 0
Code Issues 75 Pull Requests Packages Projects Releases 6 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"; import Spinner from "../../utils/Spinner.svelte";
export let address: string; export let address: string;
let mode: "preview" | "full" | "markdown" = "markdown"; let mode: "preview" | "full" | "markdown" = "preview";
$: textContent = (async () => { $: textContent = (async () => {
const response = await fetch( const response = await fetch(
@ -19,46 +19,30 @@
return text; return text;
} }
})(); })();
const tabs = [
["image", "preview", "Preview"],
["shape-circle", "full", "Full"],
["edit", "markdown", "Markdown"],
] as [string, typeof mode, string][];
</script> </script>
<div class="text-preview"> <div class="text-preview">
<header class="text-header"> <header class="text-header">
<div {#each tabs as [icon, targetMode, label]}
class="tab" <div
class:active={mode == "preview"} class="tab"
on:click={() => (mode = "preview")} class:active={mode == targetMode}
> on:click={() => (mode = targetMode)}
<IconButton >
name="image" <IconButton
active={mode == "preview"} name={icon}
on:click={() => (mode = "preview")} active={mode == targetMode}
/> on:click={() => (mode = targetMode)}
<div class="label">Preview</div> />
</div> <div class="label">{label}</div>
<div </div>
class="tab" {/each}
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>
</header> </header>
<div class="text" class:markdown={mode === "markdown"}> <div class="text" class:markdown={mode === "markdown"}>
{#await textContent} {#await textContent}