archivalo-oss/replayweb.page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
emma
2023-11-29 15:52:12 -05:00
parent 4d55efa341
commit e7b86626df
3 changed files with 141 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/coll-index.ts
+65 -47
View File
@@ -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>
${coll.name || coll.title
? html`<div class="column">
<p class="minihead">Title</p>
<div class="col-content">${coll.name || coll.title}</div>
</div>`
: ""}
<div class="column">
<p class="minihead">Filename</p>
<div class="col-content">${coll.filename}</div>
</div>
${coll.desc
? html` <div class="column">
<p class="minihead">Description</p>
${coll.desc}
</div>`
: html``}
${coll.description
? html`<div class="column">
<p class="minihead">Description</p>
${coll.description}
</div>`
: html``}
<!-- Only show filename if coll.resources doesn't exist -->
${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;
}
src/coll.ts
+46 -43
View File
@@ -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);
src/types.ts
+3
View File
@@ -14,4 +14,7 @@ export interface Coll {
onDemand?: any;
pages?: any[];
lists?: any[];
ctime?: string;
totalSize?: unknown;
size?: unknown;
}