add upobjectcard
This commit is contained in:
parent
253752000f
commit
10a60cf210
2 changed files with 102 additions and 18 deletions
98
ui/src/components/display/UpObjectCard.svelte
Normal file
98
ui/src/components/display/UpObjectCard.svelte
Normal file
|
@ -0,0 +1,98 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher } from "svelte";
|
||||||
|
import { BLOB_TYPE_ADDR } from "upend/constants";
|
||||||
|
import HashBadge from "./HashBadge.svelte";
|
||||||
|
import Ellipsis from "../utils/Ellipsis.svelte";
|
||||||
|
import UpLink from "./UpLink.svelte";
|
||||||
|
import { useEntity } from "../../lib/entity";
|
||||||
|
import { readable } from "svelte/store";
|
||||||
|
import { notify, UpNotification } from "../../notifications";
|
||||||
|
import { Link } from "svelte-navigator";
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
export let address: string;
|
||||||
|
export let labels: string[] = [];
|
||||||
|
|
||||||
|
let resolving = true;
|
||||||
|
|
||||||
|
$: ({ entity } = useEntity(address));
|
||||||
|
$: resolving = !Boolean($entity);
|
||||||
|
|
||||||
|
// Identification
|
||||||
|
let inferredIds: string[] = [];
|
||||||
|
$: inferredIds = $entity?.identify() || [];
|
||||||
|
|
||||||
|
$: displayLabel =
|
||||||
|
Array.from(new Set(inferredIds.concat(labels))).join(" | ") || address;
|
||||||
|
|
||||||
|
$: dispatch("resolved", inferredIds);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="upcard" class:identified={Boolean(inferredIds)}>
|
||||||
|
<Link class="main" to="/browse/{address}">
|
||||||
|
<div class="visual">
|
||||||
|
<HashBadge {address} />
|
||||||
|
</div>
|
||||||
|
<div class="label" class:resolving title={displayLabel}>
|
||||||
|
<h2>
|
||||||
|
<Ellipsis value={displayLabel} />
|
||||||
|
</h2>
|
||||||
|
{#if $entity?.get("NOTE")}
|
||||||
|
<p class="note">
|
||||||
|
{$entity.get("NOTE")}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.upcard {
|
||||||
|
background: var(--background-emph);
|
||||||
|
|
||||||
|
border: 0.12em solid var(--foreground);
|
||||||
|
border-radius: 0.2em;
|
||||||
|
padding: 0.5em;
|
||||||
|
|
||||||
|
font-family: var(--monospace-font);
|
||||||
|
line-break: anywhere;
|
||||||
|
|
||||||
|
&.identified {
|
||||||
|
font-family: var(--default-font);
|
||||||
|
font-size: 0.95em;
|
||||||
|
line-break: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.main) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: unset;
|
||||||
|
margin: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note {
|
||||||
|
margin: 0;
|
||||||
|
font-size: .66em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual {
|
||||||
|
display: contents;
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resolving {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -4,6 +4,7 @@
|
||||||
import { Link } from "svelte-navigator";
|
import { Link } from "svelte-navigator";
|
||||||
import { UpListing } from "upend";
|
import { UpListing } from "upend";
|
||||||
import type { IFile, ListingResult, VaultInfo } from "upend/types";
|
import type { IFile, ListingResult, VaultInfo } from "upend/types";
|
||||||
|
import UpObjectCard from "../components/display/UpObjectCard.svelte";
|
||||||
|
|
||||||
let infoData: VaultInfo | undefined;
|
let infoData: VaultInfo | undefined;
|
||||||
|
|
||||||
|
@ -43,18 +44,8 @@
|
||||||
{:then data}
|
{:then data}
|
||||||
<ul>
|
<ul>
|
||||||
{#each data as root}
|
{#each data as root}
|
||||||
<li>
|
<li class="root">
|
||||||
<sl-card class="root">
|
<UpObjectCard address={root.address} />
|
||||||
<Link class="root-link" to="/browse/{root.address}">
|
|
||||||
<h1>{root.identify()}</h1>
|
|
||||||
{#if root.get("NOTE")}
|
|
||||||
<p>{root.get("NOTE")}</p>
|
|
||||||
{/if}
|
|
||||||
</Link>
|
|
||||||
<div slot="footer">
|
|
||||||
{root.attr["HAS"]?.length || 0} children
|
|
||||||
</div>
|
|
||||||
</sl-card>
|
|
||||||
</li>
|
</li>
|
||||||
{:else}
|
{:else}
|
||||||
<li>No roots :(</li>
|
<li>No roots :(</li>
|
||||||
|
@ -114,12 +105,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.root {
|
.root {
|
||||||
width: 100%;
|
font-size: 24px;
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.root-link) {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue