[ui] use AttributeView on Home, add Gallery view
also AttributeView doesn't need a title and UpType doesn't require an addressfeat/vaults
parent
51cdd78023
commit
0b52e11f41
|
@ -46,7 +46,7 @@
|
||||||
<section class="attribute-view labelborder">
|
<section class="attribute-view labelborder">
|
||||||
<header>
|
<header>
|
||||||
<h3>
|
<h3>
|
||||||
{#if type && type !== UNTYPED}
|
{#if !title && type?.address}
|
||||||
<UpLink to={{ entity: type.address }}>
|
<UpLink to={{ entity: type.address }}>
|
||||||
{#if type.icon}
|
{#if type.icon}
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
|
@ -60,7 +60,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
</UpLink>
|
</UpLink>
|
||||||
{:else}
|
{:else}
|
||||||
{title || "???"}
|
{title || ""}
|
||||||
{/if}
|
{/if}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
|
|
|
@ -17,7 +17,7 @@ section.labelborder {
|
||||||
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
background: var(--background-lighter);
|
background: var(--current-background, var(--background-lighter));
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
|
|
@ -3,11 +3,12 @@
|
||||||
|
|
||||||
import type { UpEntry, UpListing } from "upend";
|
import type { UpEntry, UpListing } from "upend";
|
||||||
import { query } from "../../lib/entity";
|
import { query } from "../../lib/entity";
|
||||||
import { defaultEntitySort } from "../../util/sort";
|
import { defaultEntitySort, entityValueSort } from "../../util/sort";
|
||||||
import Thumbnail from "./gallery/Thumbnail.svelte";
|
import Thumbnail from "./gallery/Thumbnail.svelte";
|
||||||
|
|
||||||
export let entries: UpEntry[];
|
export let entries: UpEntry[];
|
||||||
export let editable = false;
|
export let editable = false;
|
||||||
|
export let showEntities = false;
|
||||||
|
|
||||||
// Sorting
|
// Sorting
|
||||||
let sortedAttributes = entries;
|
let sortedAttributes = entries;
|
||||||
|
@ -48,7 +49,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function sortAttributes() {
|
function sortAttributes() {
|
||||||
sortedAttributes = defaultEntitySort(entries, sortKeys);
|
sortedAttributes = showEntities
|
||||||
|
? entityValueSort(entries, sortKeys)
|
||||||
|
: defaultEntitySort(entries, sortKeys);
|
||||||
}
|
}
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
|
@ -89,7 +92,7 @@
|
||||||
{#each sortedAttributes as entry (entry.address)}
|
{#each sortedAttributes as entry (entry.address)}
|
||||||
<div class="thumbnail">
|
<div class="thumbnail">
|
||||||
<Thumbnail
|
<Thumbnail
|
||||||
address={String(entry.value.c)}
|
address={String(showEntities ? entry.entity : entry.value.c)}
|
||||||
on:resolved={(event) => {
|
on:resolved={(event) => {
|
||||||
addSortKeys(String(entry.value.c), event.detail);
|
addSortKeys(String(entry.value.c), event.detail);
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -2,7 +2,7 @@ import Table from "../components/widgets/Table.svelte";
|
||||||
import Gallery from "../components/widgets/Gallery.svelte";
|
import Gallery from "../components/widgets/Gallery.svelte";
|
||||||
|
|
||||||
export class UpType {
|
export class UpType {
|
||||||
address: string;
|
address: string | undefined;
|
||||||
name: string | null = null;
|
name: string | null = null;
|
||||||
label: string | null = null;
|
label: string | null = null;
|
||||||
attributes: string[] = [];
|
attributes: string[] = [];
|
||||||
|
@ -20,7 +20,7 @@ export class UpType {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const UNTYPED = new UpType("UNTYPED");
|
export const UNTYPED = new UpType();
|
||||||
|
|
||||||
export interface Component {
|
export interface Component {
|
||||||
component: any; // TODO
|
component: any; // TODO
|
||||||
|
@ -91,4 +91,33 @@ const TYPE_WIDGETS: { [key: string]: Widget[] } = {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
HOME_VIEW: [
|
||||||
|
{
|
||||||
|
name: "list-table",
|
||||||
|
icon: "list-ul",
|
||||||
|
components: [
|
||||||
|
{
|
||||||
|
component: Table,
|
||||||
|
props: {
|
||||||
|
columns: "value, entity",
|
||||||
|
orderByValue: true,
|
||||||
|
unfixed: true,
|
||||||
|
header: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "gallery-view",
|
||||||
|
icon: "image",
|
||||||
|
components: [
|
||||||
|
{
|
||||||
|
component: Gallery,
|
||||||
|
props: {
|
||||||
|
showEntities: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|
|
@ -2,11 +2,13 @@
|
||||||
import { formatRelative } from "date-fns";
|
import { formatRelative } from "date-fns";
|
||||||
import { UpListing } from "upend";
|
import { UpListing } from "upend";
|
||||||
import type { ListingResult } from "upend/types";
|
import type { ListingResult } from "upend/types";
|
||||||
|
import AttributeView from "../components/AttributeView.svelte";
|
||||||
import UpObject from "../components/display/UpObject.svelte";
|
import UpObject from "../components/display/UpObject.svelte";
|
||||||
import UpObjectCard from "../components/display/UpObjectCard.svelte";
|
import UpObjectCard from "../components/display/UpObjectCard.svelte";
|
||||||
import Spinner from "../components/utils/Spinner.svelte";
|
import Spinner from "../components/utils/Spinner.svelte";
|
||||||
import Table from "../components/widgets/Table.svelte";
|
import Table from "../components/widgets/Table.svelte";
|
||||||
import { query } from "../lib/entity";
|
import { query } from "../lib/entity";
|
||||||
|
import { UpType } from "../lib/types";
|
||||||
import { vaultInfo } from "../util/info";
|
import { vaultInfo } from "../util/info";
|
||||||
import { updateTitle } from "../util/title";
|
import { updateTitle } from "../util/title";
|
||||||
|
|
||||||
|
@ -25,6 +27,9 @@
|
||||||
const { result: latestQuery } = query(`(matches ? "ADDED" ?)`);
|
const { result: latestQuery } = query(`(matches ? "ADDED" ?)`);
|
||||||
$: latest = ($latestQuery?.entries || []).slice(0, 25);
|
$: latest = ($latestQuery?.entries || []).slice(0, 25);
|
||||||
|
|
||||||
|
const HomeViewType = new UpType();
|
||||||
|
HomeViewType.name = "HOME_VIEW";
|
||||||
|
|
||||||
updateTitle("Home");
|
updateTitle("Home");
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -56,11 +61,10 @@
|
||||||
{#if $lastVisitedQuery == undefined}
|
{#if $lastVisitedQuery == undefined}
|
||||||
<Spinner centered />
|
<Spinner centered />
|
||||||
{:else}
|
{:else}
|
||||||
<Table
|
<AttributeView
|
||||||
columns="value, entity"
|
--current-background="var(--background)"
|
||||||
entries={lastVisited}
|
entries={lastVisited}
|
||||||
orderByValue
|
type={HomeViewType}
|
||||||
unfixed
|
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
@ -72,7 +76,11 @@
|
||||||
{#if $latestQuery == undefined}
|
{#if $latestQuery == undefined}
|
||||||
<Spinner centered />
|
<Spinner centered />
|
||||||
{:else}
|
{:else}
|
||||||
<Table columns="value, entity" entries={latest} orderByValue unfixed />
|
<AttributeView
|
||||||
|
--current-background="var(--background)"
|
||||||
|
entries={latest}
|
||||||
|
type={HomeViewType}
|
||||||
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -98,7 +106,7 @@
|
||||||
|
|
||||||
.latest,
|
.latest,
|
||||||
.lastVisited {
|
.lastVisited {
|
||||||
margin: 1rem;
|
margin: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.roots {
|
.roots {
|
||||||
|
|
Loading…
Reference in New Issue