diff --git a/ui/src/components/widgets/Table.svelte b/ui/src/components/widgets/Table.svelte index 17e31c2..c59aa2d 100644 --- a/ui/src/components/widgets/Table.svelte +++ b/ui/src/components/widgets/Table.svelte @@ -4,10 +4,12 @@ import type { OrderedListing } from "upend/types"; import Marquee from "../Marquee.svelte"; import Address from "../Address.svelte"; - import { createEventDispatcher } from "svelte"; + import { createEventDispatcher, getContext } from "svelte"; import type { AttributeChange } from "../../types/base"; - + import { useParams } from "svelte-navigator"; + import type { Writable } from "svelte/store"; const dispatch = createEventDispatcher(); + const params = useParams(); export let columns = "attribute, value"; export let header = true; @@ -99,6 +101,10 @@ } }); + // Navigation highlights + const { index } = getContext("browse") as { index: Writable }; + $: addresses = $params.addresses.split(","); + // Formatting & Display const ATTRIBUTE_LABELS: { [key: string]: string } = { FILE_MIME: "MIME type", @@ -160,7 +166,12 @@ {/if} {#each sortedAttributes as [id, entry] (id)} - + {#if editable} @@ -263,6 +274,36 @@ width: 100%; table-layout: fixed; + tr { + &.left-active { + background: linear-gradient( + 90deg, + rgba(255, 166, 0, 1) 0%, + rgba(0, 0, 0, 0) 50% + ); + } + + &.right-active { + background: linear-gradient( + 90deg, + rgba(255, 166, 0, 0) 50%, + rgba(255, 166, 0, 1) 100% + ); + } + + &.left-active.right-active { + background: linear-gradient( + 90deg, + rgba(255, 166, 0, 1) 0%, + rgba(255, 166, 0, 0) 25%, + rgba(255, 166, 0, 0) 75%, + rgba(255, 166, 0, 1) 100% + ); + } + + border-radius: 4px; + } + th { text-align: left; } @@ -273,6 +314,8 @@ line-height: 1em; line-break: anywhere; + border: transparent; + &.attr-action { max-width: 1em; }