diff --git a/apps/ssb.json b/apps/ssb.json index a95e2387..1e513478 100644 --- a/apps/ssb.json +++ b/apps/ssb.json @@ -1,5 +1,5 @@ { "type": "tildefriends-app", "emoji": "🦀", - "previous": "&J8epgiTHHI/2GtNoS+FW3UpyTrIEL4ltovW1JpmwSW4=.sha256" + "previous": "&ceivZzkWd2Bvvdzdvdv68bZm2Y9oC0J352C78ZmMMU4=.sha256" } diff --git a/apps/ssb/emojis.js b/apps/ssb/emojis.js index 5d144541..a09b8b1e 100644 --- a/apps/ssb/emojis.js +++ b/apps/ssb/emojis.js @@ -1,6 +1,6 @@ import * as tfrpc from '/static/tfrpc.js'; import {html, render} from './lit-all.min.js'; -import {styles} from './tf-styles.js'; +import {styles, generate_theme} from './tf-styles.js'; let g_emojis; @@ -140,6 +140,9 @@ export async function picker(callback, anchor, author, recent) { +
` )} +
`; let contents = this.guest @@ -854,6 +871,9 @@ class TfElement extends LitElement { ` : undefined; return html` +
`; let result = html` + + ${this._render()} + `; + } } customElements.define('tf-message', TfMessageElement); diff --git a/apps/ssb/tf-news.js b/apps/ssb/tf-news.js index 62ee2441..4c5a200c 100644 --- a/apps/ssb/tf-news.js +++ b/apps/ssb/tf-news.js @@ -1,6 +1,6 @@ import {LitElement, html, unsafeHTML, repeat, until} from './lit-all.min.js'; import * as tfrpc from '/static/tfrpc.js'; -import {styles} from './tf-styles.js'; +import {styles, generate_theme} from './tf-styles.js'; class TfNewsElement extends LitElement { static get properties() { @@ -231,6 +231,9 @@ class TfNewsElement extends LitElement { } } return html` +
${repeat( final_messages, diff --git a/apps/ssb/tf-profile.js b/apps/ssb/tf-profile.js index 85cc7170..208d2834 100644 --- a/apps/ssb/tf-profile.js +++ b/apps/ssb/tf-profile.js @@ -1,7 +1,7 @@ import {LitElement, html, until, unsafeHTML} from './lit-all.min.js'; import * as tfrpc from '/static/tfrpc.js'; import * as tfutils from './tf-utils.js'; -import {styles} from './tf-styles.js'; +import {styles, generate_theme} from './tf-styles.js'; class TfProfileElement extends LitElement { static get properties() { @@ -316,7 +316,9 @@ class TfProfileElement extends LitElement { } image = this.editing?.image ?? image; let description = this.editing?.description ?? profile.description; - return html`
+ return html` + +

(${tfutils.human_readable_size(this.size)} in ${this.sequence} messages)

diff --git a/apps/ssb/tf-reactions-modal.js b/apps/ssb/tf-reactions-modal.js index f4a30a3b..59f9ae1c 100644 --- a/apps/ssb/tf-reactions-modal.js +++ b/apps/ssb/tf-reactions-modal.js @@ -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`
+ ? html`
-
-
-

Reactions

- × -
-
    - ${this.votes - .sort((x, y) => y.timestamp - x.timestamp) - .map( - (x) => html` -
  • - ${x?.content?.vote?.expression} +
    +
    +

    Reactions

    + × +
    +
      + ${this.votes + .sort((x, y) => y.timestamp - x.timestamp) + .map( + (x) => html` +
    • - - ${new Date(x?.timestamp).toLocaleString()} -
      • - ` - )} -
    -
    - -
    + ${x?.content?.vote?.expression} + + ${new Date(x?.timestamp).toLocaleString()} +
    • + ` + )} +
+
+ +
+
-
-
` +
` : undefined; } } diff --git a/apps/ssb/tf-styles.js b/apps/ssb/tf-styles.js index 8c544207..bbea75a1 100644 --- a/apps/ssb/tf-styles.js +++ b/apps/ssb/tf-styles.js @@ -1,4 +1,5 @@ -import {css, unsafeCSS} from './lit-all.min.js'; +import {css, unsafeCSS, until} from './lit-all.min.js'; +import * as tfrpc from '/static/tfrpc.js'; const tf = css` img { @@ -408,16 +409,8 @@ function is_dark(hex, value) { return (r * 299 + g * 587 + b * 114) / 1000 < value; } -function generated() { - let now = new Date(); - let k_color = rgb_to_hex([ - (now.getDay() * 128) / 6, - (now.getHours() * 128) / 23, - (now.getSeconds() * 128) / 59, - ]); - //let k_color = '#034f84'; - //let k_color = rgb_to_hex([Math.random() * 256, Math.random() * 256, Math.random() * 256]); - let [r, g, b] = hex_to_rgb(k_color); +export function generate(color) { + let [r, g, b] = hex_to_rgb(color); let [h, s, l] = rgb_to_hsl(r, g, b); let theme1 = { @@ -461,4 +454,28 @@ function generated() { return unsafeCSS(result); } -export let styles = [tf, w3, generated()]; +let g_theme; +export function generate_theme() { + return g_theme + ? g_theme + : until( + tfrpc.rpc.localStorageGet('color').then(function (value) { + g_theme = generate(value ?? '#034f84'); + return g_theme; + }), + generated_now() + ); +} + +function generated_now() { + let now = new Date(); + return generate( + rgb_to_hex([ + (now.getDay() * 128) / 6, + (now.getHours() * 128) / 23, + (now.getSeconds() * 128) / 59, + ]) + ); +} + +export let styles = [tf, w3]; diff --git a/apps/ssb/tf-tab-connections.js b/apps/ssb/tf-tab-connections.js index e07aa550..74172948 100644 --- a/apps/ssb/tf-tab-connections.js +++ b/apps/ssb/tf-tab-connections.js @@ -1,6 +1,6 @@ import {LitElement, html} from './lit-all.min.js'; import * as tfrpc from '/static/tfrpc.js'; -import {styles} from './tf-styles.js'; +import {styles, generate_theme} from './tf-styles.js'; class TfTabConnectionsElement extends LitElement { static get properties() { @@ -251,6 +251,9 @@ class TfTabConnectionsElement extends LitElement { render() { let self = this; return html` +

New Connection

diff --git a/apps/ssb/tf-tab-news-feed.js b/apps/ssb/tf-tab-news-feed.js index e9e659b2..e7d9f6be 100644 --- a/apps/ssb/tf-tab-news-feed.js +++ b/apps/ssb/tf-tab-news-feed.js @@ -1,6 +1,6 @@ import {LitElement, cache, html, unsafeHTML, until} from './lit-all.min.js'; import * as tfrpc from '/static/tfrpc.js'; -import {styles} from './tf-styles.js'; +import {styles, generate_theme} from './tf-styles.js'; class TfTabNewsFeedElement extends LitElement { static get properties() { @@ -538,6 +538,9 @@ class TfTabNewsFeedElement extends LitElement { `; } return cache(html` + ${this.unread_allowed() ? html`