cory/tildefriends
5
6
Fork 2
Code Issues 28 Pull Requests Actions Releases 38 Wiki Activity

ssb: Add a manual theme color picker.
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 18m1s
Details

Browse Source
This commit is contained in:
Cory McWilliams
2025-10-22 19:39:20 -04:00
parent 49b1834bc6
commit 5647196924
16 changed files with 165 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
apps/ssb/tf-reactions-modal.js
View File

@@ -1,5 +1,5 @@
import {LitElement, html, unsafeHTML} from './lit-all.min.js';
import {styles} from './tf-styles.js';
import {styles, generate_theme} from './tf-styles.js';
class TfReactionsModalElement extends LitElement {
static get properties() {
@@ -24,50 +24,57 @@ class TfReactionsModalElement extends LitElement {
render() {
let self = this;
return this.votes?.length
? html` <div
class="w3-modal w3-animate-opacity"
style="display: block; box-sizing: border-box; z-index: 10"
@click=${this.clear}
>
? html` <style>
${generate_theme()}
</style>
<div
class="w3-modal-content w3-card-4 w3-theme-d1"
onclick="event.stopPropagation()"
class="w3-modal w3-animate-opacity"
style="display: block; box-sizing: border-box; z-index: 10"
@click=${this.clear}
>
<div class="w3-container w3-padding">
<header class="w3-container">
<h2>Reactions</h2>
<span class="w3-button w3-display-topright" @click=${this.clear}
>&times;</span
>
</header>
<ul class="w3-theme-dark w3-container w3-ul">
${this.votes
.sort((x, y) => y.timestamp - x.timestamp)
.map(
(x) => html`
<li style="display: flex; flex-direction: row; gap: 4px">
<span style="flex-basis: 3em"
>${x?.content?.vote?.expression}</span
<div
class="w3-modal-content w3-card-4 w3-theme-d1"
onclick="event.stopPropagation()"
>
<div class="w3-container w3-padding">
<header class="w3-container">
<h2>Reactions</h2>
<span
class="w3-button w3-display-topright"
@click=${this.clear}
>&times;</span
>
</header>
<ul class="w3-theme-dark w3-container w3-ul">
${this.votes
.sort((x, y) => y.timestamp - x.timestamp)
.map(
(x) => html`
<li
style="display: flex; flex-direction: row; gap: 4px"
>
<tf-user
style="flex: 1 1"
id=${x.author}
.users=${this.users}
></tf-user>
<span
style="flex-shrink: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
>${new Date(x?.timestamp).toLocaleString()}</span
>
</li>
`
)}
</ul>
<footer class="w3-container w3-padding">
<button class="w3-button" @click=${this.clear}>Close</button>
</footer>
<span style="flex-basis: 3em"
>${x?.content?.vote?.expression}</span
>
<tf-user
style="flex: 1 1"
id=${x.author}
.users=${this.users}
></tf-user>
<span
style="flex-shrink: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
>${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>
</div>`
</div>`
: undefined;
}
}