From e7b86626dfa7dccb7294b796cf3b318d905f7edf Mon Sep 17 00:00:00 2001 From: emma Date: Thu, 2 Nov 2023 15:48:16 -0400 Subject: [PATCH] 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 --- src/coll-index.ts | 156 ++++++++++++++++++++++++++-------------------- src/coll.ts | 99 +++++++++++++++-------------- src/types.ts | 3 + 3 files changed, 141 insertions(+), 117 deletions(-) diff --git a/src/coll-index.ts b/src/coll-index.ts index ee0b665..c25eb92 100644 --- a/src/coll-index.ts +++ b/src/coll-index.ts @@ -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``; } @@ -405,56 +404,74 @@ 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`
-

Source

+

Source

+
${coll.sourceUrl && (coll.sourceUrl.startsWith("http://") || coll.sourceUrl.startsWith("https://")) - ? html` ${coll.sourceUrl} ` - : html` ${coll.sourceUrl} `} - - - - - - ${coll.sourceUrl && coll.sourceUrl.startsWith("googledrive://") - ? html`

(${coll.filename})

` - : ""} + ? html` ${coll.sourceUrl} ` + : html` ${coll.sourceUrl}`} + ${coll.sourceUrl && coll.sourceUrl.startsWith("googledrive://") + ? html` (${coll.filename})` + : ""} + + + +
+
+
+

Collection id

+
+ ${coll.coll} + + + +

Date Loaded

- ${coll.ctime ? new Date(coll.ctime).toLocaleString() : ""} +
+ ${coll.ctime ? new Date(coll.ctime).toLocaleString() : ""} +

Total Size

- ${prettyBytes(Number(coll.totalSize || coll.size || 0))} +
+ ${prettyBytes(Number(coll.totalSize || coll.size || 0))} +
`; } @@ -470,7 +487,7 @@ class CollInfo extends LitElement { > - ${this.renderSource(coll)} + ${this.renderSource()} `; } @@ -494,24 +511,16 @@ class CollInfo extends LitElement { : ""; return html`
-
- - ${coll.name || coll.title || coll.filename} - -
- ${coll.desc - ? html`
-

Description

- ${coll.desc} -
` - : html``} - ${coll.description + ${coll.name || coll.title ? html`
-

Description

- ${coll.description} +

Title

+
${coll.name || coll.title}
` - : html``} - + : ""} +
+

Filename

+
${coll.filename}
+
${coll.resources ? html`

Files

@@ -525,61 +534,70 @@ class CollInfo extends LitElement { )}
` - : html`
-

Filename

- ${coll.filename} -
`} - ${this.renderSource(coll)} + : ""} + ${this.renderSource()} ${domain ? html`

Observed By

-

${domain}

- ${certFingerprintUrl - ? html`View Certificate` - : ""} + +

${domain}

+ ${certFingerprintUrl + ? html`View Certificate` + : ""} +
` : software ? html`

Created With

- ${software || "Unknown"} +
${software || "Unknown"}
` : ""}

Validation

- ${numValid > 0 || numInvalid > 0 - ? html`

- ${numValid} hashes - verified${numInvalid ? html`, ${numInvalid} invalid` : ""} -

` - : html` Not Available`} +
+ ${numValid > 0 || numInvalid > 0 + ? html`

+ ${numValid} hashes + verified${numInvalid ? html`, ${numInvalid} invalid` : ""} +

` + : html` Not Available`} +

Package Hash

- ${datapackageHash || "Not Available"} +
+ ${datapackageHash || "Not Available"} + + + +

Observer Public Key

- ${publicKey || "Not Available"} +
+ ${publicKey || "Not Available"} + + + +

Loading Mode

- ${coll.onDemand ? "Download On-Demand" : "Fully Local"} -
-
-

Collection id

- ${coll.coll} +
+ ${coll.onDemand ? "Download On-Demand" : "Fully Local"} +
`; } @@ -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; } diff --git a/src/coll.ts b/src/coll.ts index 87d2974..efd5c38 100644 --- a/src/coll.ts +++ b/src/coll.ts @@ -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 = 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()} + + ${this.renderCollInfo()} + Close + `; + if (!this.collInfo) + return html` + + Archive info is not available
+ Please reload and try again. + `; + return html``; } 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`