Skip to content

Commit

Permalink
rework info popup to better match 2.0 design
Browse files Browse the repository at this point in the history
  • Loading branch information
@emma-sg
emma-sg committed Nov 2, 2023
1 parent 646a078 commit 7a22a32
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 69 deletions.
157 changes: 88 additions & 69 deletions src/coll-index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,6 @@ class CollIndex extends LitElement {
line-height: 0.4em;
padding: 6px;
border-radius: 10px;
display: none;
position: absolute;
}
.copy:active {
Expand Down Expand Up @@ -346,7 +345,7 @@ class CollIndex extends LitElement {
`;
}

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

Expand Down Expand Up @@ -381,6 +380,7 @@ class CollInfo extends LitElement {
.column {
word-break: break-word;
position: relative;
/* font-family: monospace; */
}
:host {
Expand All @@ -405,56 +405,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`
<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>
<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>`
: ""}
? 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>
</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>
${coll.ctime ? new Date(coll.ctime).toLocaleString() : ""}
<div class="col-content">
${coll.ctime ? new Date(coll.ctime).toLocaleString() : ""}
</div>
</div>
<div class="column is-2">
<p class="minihead">Total Size</p>
${prettyBytes(Number(coll.totalSize || coll.size || 0))}
<div class="col-content">
${prettyBytes(Number(coll.totalSize || coll.size || 0))}
</div>
</div>
`;
}
Expand All @@ -470,7 +488,7 @@ class CollInfo extends LitElement {
>
</span>
</div>
${this.renderSource(coll)}
${this.renderSource()}
</div>`;
}

Expand All @@ -494,24 +512,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>
Expand All @@ -525,61 +535,70 @@ 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>
<p>${domain}</p>
${certFingerprintUrl
? html`<span
><a target="_blank" href="${certFingerprintUrl}"
>View Certificate</a
></span
>`
: ""}
<span class="col-content">
<p>${domain}</p>
${certFingerprintUrl
? html`<span
><a target="_blank" href="${certFingerprintUrl}"
>View Certificate</a
></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>
${numValid > 0 || numInvalid > 0
? html` <p>
${numValid} hashes
verified${numInvalid ? html`, ${numInvalid} invalid` : ""}
</p>`
: html` Not Available`}
<div class="col-content">
${numValid > 0 || numInvalid > 0
? html` <p>
${numValid} hashes
verified${numInvalid ? html`, ${numInvalid} invalid` : ""}
</p>`
: html` Not Available`}
</div>
</div>
<div class="column">
<p class="minihead">Package Hash</p>
${datapackageHash || "Not Available"}
<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>
${publicKey || "Not Available"}
<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>
${coll.onDemand ? "Download On-Demand" : "Fully Local"}
</div>
<div class="column">
<p class="minihead">Collection id</p>
${coll.coll}
<div class="col-content">
${coll.onDemand ? "Download On-Demand" : "Fully Local"}
</div>
</div>
</div>`;
}
Expand All @@ -588,10 +607,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;
}

Expand Down
3 changes: 3 additions & 0 deletions src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,7 @@ export interface Coll {
onDemand?: any;
pages?: any[];
lists?: any[];
ctime?: string;
totalSize?: unknown;
size?: unknown;
}

0 comments on commit 7a22a32

Please sign in to comment.