[ui] move highlight logic to UpObject
parent
ce6903c43d
commit
5bb58ca414
|
@ -1,14 +1,16 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher, getContext } from "svelte";
|
||||||
import { BLOB_TYPE_ADDR } from "upend/constants";
|
import { BLOB_TYPE_ADDR } from "upend/constants";
|
||||||
import HashBadge from "./HashBadge.svelte";
|
import HashBadge from "./HashBadge.svelte";
|
||||||
import Ellipsis from "../utils/Ellipsis.svelte";
|
import Ellipsis from "../utils/Ellipsis.svelte";
|
||||||
import UpLink from "./UpLink.svelte";
|
import UpLink from "./UpLink.svelte";
|
||||||
import { useEntity } from "../../lib/entity";
|
import { useEntity } from "../../lib/entity";
|
||||||
import { readable } from "svelte/store";
|
import { Readable, readable } from "svelte/store";
|
||||||
import { notify, UpNotification } from "../../notifications";
|
import { notify, UpNotification } from "../../notifications";
|
||||||
import IconButton from "../utils/IconButton.svelte";
|
import IconButton from "../utils/IconButton.svelte";
|
||||||
|
import { useParams } from "svelte-navigator";
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
const params = useParams();
|
||||||
|
|
||||||
export let address: string;
|
export let address: string;
|
||||||
export let labels: string[] = [];
|
export let labels: string[] = [];
|
||||||
|
@ -32,6 +34,11 @@
|
||||||
|
|
||||||
$: dispatch("resolved", inferredIds);
|
$: dispatch("resolved", inferredIds);
|
||||||
|
|
||||||
|
// Navigation highlights
|
||||||
|
const index =
|
||||||
|
(getContext("browse") as { index: Readable<number> })?.index || undefined;
|
||||||
|
$: addresses = $params.addresses.split(",");
|
||||||
|
|
||||||
// Native open
|
// Native open
|
||||||
function nativeOpen() {
|
function nativeOpen() {
|
||||||
notify.emit(
|
notify.emit(
|
||||||
|
@ -71,39 +78,61 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="address" class:identified={Boolean(inferredIds)} class:banner>
|
<div
|
||||||
<HashBadge {address} />
|
class="upobject"
|
||||||
<div class="separator" />
|
class:left-active={address == addresses[$index - 1]}
|
||||||
<div class="label" class:resolving title={displayLabel}>
|
class:right-active={address == addresses[$index + 1]}
|
||||||
|
>
|
||||||
|
<div class="address" class:identified={Boolean(inferredIds)} class:banner>
|
||||||
|
<HashBadge {address} />
|
||||||
|
<div class="separator" />
|
||||||
|
<div class="label" class:resolving title={displayLabel}>
|
||||||
|
{#if banner && isFile}
|
||||||
|
<a href="/api/raw/{address}" target="_blank">
|
||||||
|
<Ellipsis value={displayLabel} />
|
||||||
|
</a>
|
||||||
|
{:else if link}
|
||||||
|
<UpLink to={{ entity: address }}>
|
||||||
|
<Ellipsis value={displayLabel} />
|
||||||
|
</UpLink>
|
||||||
|
{:else}
|
||||||
|
<Ellipsis value={displayLabel} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
{#if banner && isFile}
|
{#if banner && isFile}
|
||||||
<a href="/api/raw/{address}" target="_blank">
|
<div class="icon">
|
||||||
<Ellipsis value={displayLabel} />
|
<IconButton
|
||||||
</a>
|
name="window-open"
|
||||||
{:else if link}
|
on:click={nativeOpen}
|
||||||
<UpLink to={{ entity: address }}>
|
title="Open in default application..."
|
||||||
<Ellipsis value={displayLabel} />
|
/>
|
||||||
</UpLink>
|
</div>
|
||||||
{:else}
|
|
||||||
<Ellipsis value={displayLabel} />
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{#if banner && isFile}
|
|
||||||
<div class="icon">
|
|
||||||
<IconButton
|
|
||||||
name="window-open"
|
|
||||||
on:click={nativeOpen}
|
|
||||||
title="Open in default application..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
@use "../../styles/colors";
|
||||||
|
|
||||||
|
.upobject {
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&.left-active {
|
||||||
|
background: linear-gradient(90deg, colors.$orange 0%, transparent 100%);
|
||||||
|
padding: 2px 0 2px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right-active {
|
||||||
|
background: linear-gradient(90deg, transparent 0%, colors.$orange 100%);
|
||||||
|
padding: 2px 2px 2px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.address {
|
.address {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
padding: 0.1em .25em;
|
padding: 0.1em 0.25em;
|
||||||
|
|
||||||
font-family: var(--monospace-font);
|
font-family: var(--monospace-font);
|
||||||
line-break: anywhere;
|
line-break: anywhere;
|
||||||
|
@ -134,7 +163,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
margin: 0 .25em;
|
margin: 0 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resolving {
|
.resolving {
|
||||||
|
|
|
@ -13,7 +13,6 @@
|
||||||
import type { IValue } from "upend/types";
|
import type { IValue } from "upend/types";
|
||||||
import Editable from "../utils/Editable.svelte";
|
import Editable from "../utils/Editable.svelte";
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
const params = useParams();
|
|
||||||
|
|
||||||
export let columns: string;
|
export let columns: string;
|
||||||
export let header = true;
|
export let header = true;
|
||||||
|
@ -45,7 +44,11 @@
|
||||||
dispatch("change", { type: "delete", address } as AttributeChange);
|
dispatch("change", { type: "delete", address } as AttributeChange);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
async function updateEntry(address: string, attribute: string, value: IValue) {
|
async function updateEntry(
|
||||||
|
address: string,
|
||||||
|
attribute: string,
|
||||||
|
value: IValue
|
||||||
|
) {
|
||||||
dispatch("change", {
|
dispatch("change", {
|
||||||
type: "update",
|
type: "update",
|
||||||
address,
|
address,
|
||||||
|
@ -147,10 +150,6 @@
|
||||||
|
|
||||||
sortAttributes();
|
sortAttributes();
|
||||||
|
|
||||||
// Navigation highlights
|
|
||||||
const { index } = getContext("browse") as { index: Writable<number> };
|
|
||||||
$: addresses = $params.addresses.split(",");
|
|
||||||
|
|
||||||
// Formatting & Display
|
// Formatting & Display
|
||||||
const ATTRIBUTE_LABELS: { [key: string]: string } = {
|
const ATTRIBUTE_LABELS: { [key: string]: string } = {
|
||||||
FILE_MIME: "MIME type",
|
FILE_MIME: "MIME type",
|
||||||
|
@ -219,12 +218,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#each sortedAttributes as entry (entry.address)}
|
{#each sortedAttributes as entry (entry.address)}
|
||||||
<tr
|
<tr>
|
||||||
class:left-active={entry.entity == addresses[$index - 1] ||
|
|
||||||
entry.value.c == addresses[$index - 1]}
|
|
||||||
class:right-active={entry.value.c == addresses[$index + 1] ||
|
|
||||||
entry.entity == addresses[$index + 1]}
|
|
||||||
>
|
|
||||||
{#if editable}
|
{#if editable}
|
||||||
<td class="attr-action">
|
<td class="attr-action">
|
||||||
<IconButton
|
<IconButton
|
||||||
|
@ -313,36 +307,12 @@
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@use "../../styles/colors";
|
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
|
|
||||||
border-spacing: 0.5em 0;
|
border-spacing: 0.5em 0;
|
||||||
|
|
||||||
tr {
|
|
||||||
&.left-active {
|
|
||||||
td:first-child {
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
colors.$orange 0%,
|
|
||||||
transparent 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right-active {
|
|
||||||
td:last-child {
|
|
||||||
background: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
transparent 0%,
|
|
||||||
colors.$orange 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
th {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue