From 5bb58ca4148c9b44d7f86f85c10040f252ed0bae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Fri, 28 Jan 2022 23:24:30 +0100
Subject: [PATCH] [ui] move highlight logic to UpObject

---
 webui/src/components/display/UpObject.svelte | 81 +++++++++++++-------
 webui/src/components/widgets/Table.svelte    | 42 ++--------
 2 files changed, 61 insertions(+), 62 deletions(-)

diff --git a/webui/src/components/display/UpObject.svelte b/webui/src/components/display/UpObject.svelte
index 5fa00c8..86627ff 100644
--- a/webui/src/components/display/UpObject.svelte
+++ b/webui/src/components/display/UpObject.svelte
@@ -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 {
diff --git a/webui/src/components/widgets/Table.svelte b/webui/src/components/widgets/Table.svelte
index a5554b8..b97e76c 100644
--- a/webui/src/components/widgets/Table.svelte
+++ b/webui/src/components/widgets/Table.svelte
@@ -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;
     }