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

replay bar tweaks:

Browse Source 
- menu: add capture date, and about replayweb.page, logo + version
- ensure loader anim is shown even on mobile
- location bar: esc resets to current url
- bump verstion to 1.0.1
This commit is contained in:
Ilya Kreymer
2020-06-30 09:19:45 -07:00
parent 7066b32e95
commit 75ccdd5f00
3 changed files with 80 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/replay.js
+40 -6
View File
@@ -1,5 +1,5 @@
import { LitElement, html, css } from 'lit-element';
import { wrapCss } from './misc';
import { wrapCss, rwpLogo } from './misc';
import { tsToDate } from './pageutils';
@@ -253,9 +253,25 @@ class Replay extends LitElement
z-index: 10;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFF 15%, #FFF);
margin: -35px 0 0 0px;
padding-left: 3em;
line-height: 2;
}
.menu-head {
font-size: 10px;
font-weight: bold;
display: block;
}
.menu-logo {
vertical-align: middle;
}
.menu-version {
font-size: 10px;
}
.dropdown-item.info {
font-style: italic;
}
input:focus + #datetime {
display: none;
}
@@ -284,6 +300,8 @@ class Replay extends LitElement
}
render() {
const dateStr = tsToDate(this.replayTS).toLocaleString();
return html`
${this.embed !== "replayonly" ? html`
<div class="replay-bar">
@@ -305,7 +323,7 @@ class Replay extends LitElement
</span>
</button>
` : ``}
<button id="refresh" class="button is-hidden-mobile is-borderless ${this.isLoading ? 'is-loading' : ''}" @click="${this.onRefresh}">
<button id="refresh" class="button is-borderless ${this.isLoading ? 'is-loading' : 'is-hidden-mobile'}" @click="${this.onRefresh}">
<span class="icon is-small">
${!this.isLoading ? html`
<fa-icon size="1.0em" class="has-text-grey" .svg="${fasRefresh}"></fa-icon>
@@ -314,8 +332,8 @@ class Replay extends LitElement
</button>
<form @submit="${this.onSubmit}">
<div class="control is-expanded">
<input id="url" class="input" type="text" .value="${this.replayUrl}" placeholder="https://... Enter a URL to replay from the archive here"/>
<p id="datetime" class="control is-hidden-mobile">${tsToDate(this.replayTS).toLocaleString()}</p>
<input id="url" class="input" type="text" @keydown="${this.onKeyDown}" .value="${this.replayUrl}" placeholder="https://... Enter a URL to replay from the archive here"/>
<p id="datetime" class="control is-hidden-mobile">${dateStr}</p>
</div>
</form>
@@ -350,9 +368,7 @@ class Replay extends LitElement
</a>` : ``}
<a class="dropdown-item is-hidden-tablet" @click="${this.onRefresh}">
<span class="icon is-small">
${!this.isLoading ? html`
<fa-icon size="1.0em" class="has-text-grey" .svg="${fasRefresh}"></fa-icon>
` : ``}
</span>
<span>Reload</span>
</a>
@@ -361,6 +377,18 @@ class Replay extends LitElement
<a class="dropdown-item" @click="${this.onPurgeCache}">
Purge Cache + Full Reload
</a>` : ``}
<hr class="dropdown-divider is-hidden-desktop">
<div class="dropdown-item info is-hidden-desktop">
<span class="menu-head">Capture Date</span>${dateStr}
</div>
${this.embed ? html`
<hr class="dropdown-divider">
<a href="https://replayweb.page/" target="_blank" class="dropdown-item info">
<fa-icon class="menu-logo" size="1.0rem" .svg=${rwpLogo}></fa-icon>
<span>&nbsp;About ReplayWeb.page</span>
<span class="menu-version">(${__VERSION__})</span>
</a>
` : ``}
</div>
</div>
</div>
@@ -402,6 +430,12 @@ class Replay extends LitElement
`;
}
onKeyDown(event) {
if (event.key === "Esc" || event.key === "Escape") {
event.target.value = this.replayUrl;
}
}
onMenu(event) {
event.stopPropagation();
this.menuActive = !this.menuActive;