move archive info into a dialog in dropdown menu (#235)

using sl-dialog and sl-button for components show error message when coll info is missing rework info popup to better match 2.0 design remove extra comment i forgot
2023-11-29 15:52:12 -05:00
parent 4d55efa341
commit e7b86626df
3 changed files with 141 additions and 117 deletions
@@ -189,7 +189,6 @@ class CollIndex extends LitElement {
        line-height: 0.4em;
        padding: 6px;
        border-radius: 10px;
-        display: none;
        position: absolute;
      }
      .copy:active {
@@ -346,7 +345,7 @@ class CollIndex extends LitElement {
    `;
  }

-  renderCollInfo(coll) {
+  renderCollInfo(coll: Coll) {
    return html`<wr-coll-info .coll=${coll}></wr-coll-info>`;
  }

@@ -405,57 +404,75 @@ class CollInfo extends LitElement {
        height: 100%;
      }
      .column:hover > .copy,
-      .source-text:hover + .copy,
+      .col-content:hover .copy,
      .copy:hover {
-        display: inline;
+        color: inherit;
      }
      .copy {
        color: black;
        margin: 0px;
-        margin: 0;
+        margin: -4px 0 0;
        line-height: 0.4em;
        padding: 6px;
        border-radius: 10px;
-        display: none;
        position: absolute;
      }
      .copy:active {
        background-color: lightgray;
      }
+      .col-content {
+        font-family: monospace;
+        font-size: 14px;
+        color: #1f2937;
+      }
      .minihead {
-        font-size: 10px;
-        font-weight: bold;
+        font-size: 12px;
+        line-height: 16px;
+        margin-bottom: 4px;
      }
    `;
  }

-  renderSource(coll) {
+  renderSource() {
+    const coll = this.coll;
    return html`
      <div class="column is-4">
-        <span class="source-text"
-          ><p class="minihead">Source</p>
+        <p class="minihead">Source</p>
+        <div class="col-content">
          ${coll.sourceUrl &&
          (coll.sourceUrl.startsWith("http://") ||
            coll.sourceUrl.startsWith("https://"))
-            ? html` <a href="${coll.sourceUrl}">${coll.sourceUrl}&nbsp;</a>`
-            : html` ${coll.sourceUrl}&nbsp;`}
-        </span>
-
+            ? html` <a href="${coll.sourceUrl}">${coll.sourceUrl}</a> `
+            : html` ${coll.sourceUrl}`}
+          ${coll.sourceUrl && coll.sourceUrl.startsWith("googledrive://")
+            ? html` <i>(${coll.filename})</i>`
+            : ""}
          <a @click="${(e) => this.onCopy(e, coll.sourceUrl)}" class="copy">
            <fa-icon .svg="${fasCopy}"></fa-icon>
          </a>
-        ${coll.sourceUrl && coll.sourceUrl.startsWith("googledrive://")
-          ? html` <p><i>(${coll.filename})</i></p>`
-          : ""}
+        </div>
+      </div>
+      <div class="column">
+        <p class="minihead">Collection id</p>
+        <div class="col-content">
+          ${coll.coll}
+          <a @click="${(e) => this.onCopy(e, coll.coll)}" class="copy">
+            <fa-icon .svg="${fasCopy}"></fa-icon>
+          </a>
+        </div>
      </div>
      <div class="column is-2">
        <p class="minihead">Date Loaded</p>
+        <div class="col-content">
          ${coll.ctime ? new Date(coll.ctime).toLocaleString() : ""}
        </div>
+      </div>
      <div class="column is-2">
        <p class="minihead">Total Size</p>
+        <div class="col-content">
          ${prettyBytes(Number(coll.totalSize || coll.size || 0))}
        </div>
+      </div>
    `;
  }

@@ -470,7 +487,7 @@ class CollInfo extends LitElement {
          >
        </span>
      </div>
-      ${this.renderSource(coll)}
+      ${this.renderSource()}
    </div>`;
  }

@@ -494,24 +511,16 @@ class CollInfo extends LitElement {
      : "";

    return html` <div class="columns">
-      <div class="column col-title is-4">
-        <span class="subtitle has-text-weight-bold">
-          ${coll.name || coll.title || coll.filename}
-        </span>
-      </div>
-      ${coll.desc
-        ? html` <div class="column">
-            <p class="minihead">Description</p>
-            ${coll.desc}
-          </div>`
-        : html``}
-      ${coll.description
+      ${coll.name || coll.title
        ? html`<div class="column">
-            <p class="minihead">Description</p>
-            ${coll.description}
+            <p class="minihead">Title</p>
+            <div class="col-content">${coll.name || coll.title}</div>
          </div>`
-        : html``}
-      <!--  Only show filename if coll.resources doesn't exist -->
+        : ""}
+      <div class="column">
+        <p class="minihead">Filename</p>
+        <div class="col-content">${coll.filename}</div>
+      </div>
      ${coll.resources
        ? html`<div class="column">
            <p class="minihead">Files</p>
@@ -525,15 +534,13 @@ class CollInfo extends LitElement {
              )}
            </ol>
          </div>`
-        : html`<div class="column">
-            <p class="minihead">Filename</p>
-            ${coll.filename}
-          </div>`}
-      ${this.renderSource(coll)}
+        : ""}
+      ${this.renderSource()}
      ${domain
        ? html`
            <div class="column">
              <p class="minihead">Observed By</p>
+              <span class="col-content">
                <p>${domain}</p>
                ${certFingerprintUrl
                  ? html`<span
@@ -542,19 +549,21 @@ class CollInfo extends LitElement {
                      ></span
                    >`
                  : ""}
+              </span>
            </div>
          `
        : software
        ? html`
            <div class="column">
              <p class="minihead">Created With</p>
-              ${software || "Unknown"}
+              <div class="col-content">${software || "Unknown"}</div>
            </div>
          `
        : ""}

      <div class="column">
        <p class="minihead">Validation</p>
+        <div class="col-content">
          ${numValid > 0 || numInvalid > 0
            ? html` <p>
                ${numValid} hashes
@@ -562,24 +571,33 @@ class CollInfo extends LitElement {
              </p>`
            : html` Not Available`}
        </div>
+      </div>

      <div class="column">
        <p class="minihead">Package Hash</p>
+        <div class="col-content">
          ${datapackageHash || "Not Available"}
+          <a @click="${(e) => this.onCopy(e, datapackageHash)}" class="copy">
+            <fa-icon .svg="${fasCopy}"></fa-icon>
+          </a>
+        </div>
      </div>

      <div class="column">
        <p class="minihead">Observer Public Key</p>
+        <div class="col-content">
          ${publicKey || "Not Available"}
+          <a @click="${(e) => this.onCopy(e, publicKey)}" class="copy">
+            <fa-icon .svg="${fasCopy}"></fa-icon>
+          </a>
+        </div>
      </div>

      <div class="column">
        <p class="minihead">Loading Mode</p>
+        <div class="col-content">
          ${coll.onDemand ? "Download On-Demand" : "Fully Local"}
        </div>
-      <div class="column">
-        <p class="minihead">Collection id</p>
-        ${coll.coll}
      </div>
    </div>`;
  }
@@ -588,10 +606,10 @@ class CollInfo extends LitElement {
    return this.detailed ? this.renderDetailed() : this.renderSummaryView();
  }

-  onCopy(event, sourceUrl) {
+  onCopy(event: Event, text: string | undefined) {
    event.preventDefault();
    event.stopPropagation();
-    navigator.clipboard.writeText(sourceUrl);
+    if (text) navigator.clipboard.writeText(text);
    return false;
  }

@@ -1,10 +1,15 @@
 import { LitElement, html, css } from "lit";
 import { property, state } from "lit/decorators.js";
+import { ref, createRef, type Ref } from "lit/directives/ref.js";
 import type {
+  SlDialog,
  SlDropdown,
  SlMenu,
  SlSelectEvent,
 } from "@shoelace-style/shoelace";
+import "@shoelace-style/shoelace/dist/components/alert/alert.js";
+import "@shoelace-style/shoelace/dist/components/button/button.js";
+import "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
 import {
  wrapCss,
  rwpLogo,
@@ -80,7 +85,7 @@ class Coll extends LitElement {

  @property({ type: Object, attribute: false })
  tabData: {
-    view?: string;
+    view?: "story" | "pages" | "resources";
    url?: string;
    ts?: string;
    multiTs?: string[];
@@ -149,6 +154,8 @@ class Coll extends LitElement {

  private observer?: IntersectionObserver;

+  private archiveInfoDialog: Ref<SlDialog> = createRef();
+
  private readonly tabNames = ["pages", "story", "resources", "info"];
  private readonly tabLabels = {
    pages: "Pages",
@@ -776,17 +783,7 @@ class Coll extends LitElement {
        width: 100%;
      }

-      .info-bg {
-        background-color: whitesmoke;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        overflow: auto;
-      }
-
      .is-list {
-        margin: 1em;
-        background-color: whitesmoke;
        height: fit-content;
      }

@@ -876,6 +873,15 @@ class Coll extends LitElement {
    } else if (this.collInfo) {
      return html`
        ${this.renderLocationBar()} ${this.renderVerifyInfo()}
+        <sl-dialog label="Archive Info" ${ref(this.archiveInfoDialog)}>
+          ${this.renderCollInfo()}
+          <sl-button
+            slot="footer"
+            variant="primary"
+            @click="${this.onHideInfoDialog}"
+            >Close</sl-button
+          >
+        </sl-dialog>
        <div id="tabContents">
          <div
            id="contents"
@@ -1022,31 +1028,6 @@ class Coll extends LitElement {
          </a>
        </li>

-        <li class="${this.tabData.view === "info" ? "is-active" : ""}">
-          <a
-            @click="${this.onTabClick}"
-            href="#info"
-            class="is-size-6"
-            aria-label="Archive Info"
-            aria-current="${(this.tabData.view === "info"
-              ? "location"
-              : "") as any}"
-          >
-            <span class="icon"
-              ><fa-icon
-                .svg="${fasInfoIcon}"
-                aria-hidden="true"
-                title="Archive Info"
-              ></fa-icon
-            ></span>
-            <span
-              class="tab-label ${isSidebar ? "is-hidden" : ""}"
-              title="Archive Info"
-              >Info</span
-            >
-          </a>
-        </li>
-
        ${isSidebar
          ? html` <li class="sidebar-nav right">
              <a
@@ -1379,6 +1360,21 @@ class Coll extends LitElement {
                        <span class="menu-head">Capture Date</span>${dateStr}
                      </div>`
                  : ""}
+                <a
+                  href="#"
+                  role="button"
+                  class="dropdown-item"
+                  @click="${this.onShowInfoDialog}"
+                >
+                  <span class="icon is-small">
+                    <fa-icon
+                      class="has-text-grey"
+                      aria-hidden="true"
+                      .svg="${fasInfoIcon}"
+                    ></fa-icon>
+                  </span>
+                  <span>Archive Info</span>
+                </a>
                <hr class="dropdown-divider" />
                <a
                  href="#"
@@ -1480,16 +1476,19 @@ class Coll extends LitElement {
  }

  renderCollInfo() {
-    if (!this.collInfo) return;
-    return html` <div class="info-bg">
-      <wr-coll-info
+    if (!this.collInfo)
+      return html`<sl-alert open variant="warning">
+        <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
+        <strong>Archive info is not available</strong><br />
+        Please reload and try again.
+      </sl-alert>`;
+    return html`<wr-coll-info
      class="is-list"
      .coll="${this.collInfo}"
      ?detailed="${true}"
      ?canDelete="${!this.embed}"
      @coll-purge="${this.onPurgeCache}"
-      ></wr-coll-info>
-    </div>`;
+    ></wr-coll-info>`;
  }

  renderExtraToolbar(/*isDropdown = false*/) {
@@ -1500,10 +1499,8 @@ class Coll extends LitElement {
    const isStory = this.hasStory && this.tabData.view === "story";
    const isPages = this.tabData.view === "pages";
    const isResources = this.tabData.view === "resources";
-    const isInfo = this.tabData.view === "info";

    return html`
-      ${isInfo ? this.renderCollInfo() : html``}
      ${isStory
        ? html` <wr-coll-story
            .collInfo="${this.collInfo || {}}"
@@ -1796,6 +1793,12 @@ class Coll extends LitElement {
  onAbout() {
    this.dispatchEvent(new CustomEvent("about-show"));
  }
+  onShowInfoDialog() {
+    this.archiveInfoDialog.value?.show();
+  }
+  onHideInfoDialog() {
+    this.archiveInfoDialog.value?.hide();
+  }
 }

 customElements.define("wr-coll", Coll);
@@ -14,4 +14,7 @@ export interface Coll {
  onDemand?: any;
  pages?: any[];
  lists?: any[];
+  ctime?: string;
+  totalSize?: unknown;
+  size?: unknown;
 }