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