69 lines
1.6 KiB
JavaScript
69 lines
1.6 KiB
JavaScript
import {LitElement, html, unsafeHTML} from './lit-all.min.js';
|
|
import {styles} from './tf-styles.js';
|
|
|
|
class TfReactionsModalElement extends LitElement {
|
|
static get properties() {
|
|
return {
|
|
users: {type: Object},
|
|
votes: {type: Array},
|
|
};
|
|
}
|
|
|
|
static styles = styles;
|
|
|
|
constructor() {
|
|
super();
|
|
this.votes = [];
|
|
this.users = {};
|
|
}
|
|
|
|
clear() {
|
|
this.votes = [];
|
|
}
|
|
|
|
render() {
|
|
let self = this;
|
|
return this.votes?.length
|
|
? html` <div
|
|
class="w3-modal w3-animate-opacity"
|
|
style="display: block; box-sizing: border-box"
|
|
>
|
|
<div class="w3-modal-content w3-card-4 w3-theme-d1">
|
|
<div class="w3-container w3-padding">
|
|
<header class="w3-container">
|
|
<h2>Reactions</h2>
|
|
<span class="w3-button w3-display-topright" @click=${this.clear}
|
|
>×</span
|
|
>
|
|
</header>
|
|
<ul class="w3-theme-dark w3-container w3-ul">
|
|
${this.votes.map(
|
|
(x) => html`
|
|
<li class="w3-bar">
|
|
<span class="w3-bar-item"
|
|
>${x?.content?.vote?.expression}</span
|
|
>
|
|
<tf-user
|
|
class="w3-bar-item"
|
|
id=${x.author}
|
|
.users=${this.users}
|
|
></tf-user>
|
|
<span class="w3-bar-item w3-right"
|
|
>${new Date(x?.timestamp).toLocaleString()}</span
|
|
>
|
|
</li>
|
|
`
|
|
)}
|
|
</ul>
|
|
<footer class="w3-container w3-padding">
|
|
<button class="w3-button" @click=${this.clear}>Close</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
: undefined;
|
|
}
|
|
}
|
|
|
|
customElements.define('tf-reactions-modal', TfReactionsModalElement);
|