cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 27 Wiki Activity

Hide too-new messages, and cycle between message, raw, and markdown views of messages.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4394 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-08-09 23:39:17 +00:00
parent 5c1c33d33e
commit 6ed2c702d8
2 changed files with 50 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
apps/ssb/tf-message.js
View File

@ -11,7 +11,7 @@ class TfMessageElement extends LitElement {
message: {type: Object}, message: {type: Object},
users: {type: Object}, users: {type: Object},
drafts: {type: Object}, drafts: {type: Object},
raw: {type: Boolean}, format: {type: String},
blog_data: {type: String}, blog_data: {type: String},
expanded: {type: Object}, expanded: {type: Object},
decrypted: {type: Object}, decrypted: {type: Object},
@ -27,7 +27,7 @@ class TfMessageElement extends LitElement {
this.message = {}; this.message = {};
this.users = {}; this.users = {};
this.drafts = {}; this.drafts = {};
this.raw = false; this.format = 'message';
this.expanded = {}; this.expanded = {};
this.decrypted = undefined; this.decrypted = undefined;
} }
@ -255,16 +255,30 @@ class TfMessageElement extends LitElement {
content = this.decrypted; content = this.decrypted;
} }
let self = this; let self = this;
let raw_button = this.raw ? let raw_button;
html`<input type="button" value="Message" @click=${() => self.raw = false}></input>` : switch (this.format) {
html`<input type="button" value="Raw" @click=${() => self.raw = true}></input>`; case 'raw':
if (content?.type == 'post' || content?.type == 'blog') {
raw_button = html`<input type="button" value="Markdown" @click=${() => self.format = 'md'}></input>`;
} else {
raw_button = html`<input type="button" value="Message" @click=${() => self.format = 'message'}></input>`;
}
break;
case 'md':
raw_button = html`<input type="button" value="Message" @click=${() => self.format = 'message'}></input>`;
break;
default:
raw_button = html`<input type="button" value="Raw" @click=${() => self.format = 'raw'}></input>`;
break;
}
function small_frame(inner) { function small_frame(inner) {
let body;
return html` return html`
<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere"> <div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere">
<tf-user id=${self.message.author} .users=${self.users}></tf-user> <tf-user id=${self.message.author} .users=${self.users}></tf-user>
<span style="padding-right: 8px"><a tfarget="_top" href=${'#' + self.message.id}>%</a> ${new Date(self.message.timestamp).toLocaleString()}</span> <span style="padding-right: 8px"><a tfarget="_top" href=${'#' + self.message.id}>%</a> ${new Date(self.message.timestamp).toLocaleString()}</span>
${raw_button} ${raw_button}
${self.raw ? self.render_raw() : inner} ${self.format == 'raw' ? self.render_raw() : inner}
${self.render_votes()} ${self.render_votes()}
</div> </div>
`; `;
@ -342,9 +356,18 @@ class TfMessageElement extends LitElement {
<input type="button" value="Reply" @click=${this.show_reply}></input> <input type="button" value="Reply" @click=${this.show_reply}></input>
`; `;
let self = this; let self = this;
let body = this.raw ? let body;
this.render_raw() : switch (this.format) {
unsafeHTML(tfutils.markdown(content.text)); case 'raw':
body = this.render_raw();
break;
case 'md':
body = html`<code style="white-space: pre-wrap; overflow-wrap: anywhere">${content.text}</code>`;
break;
case 'message':
body = unsafeHTML(tfutils.markdown(content.text));
break;
}
let content_warning = html` let content_warning = html`
<div class="content_warning" @click=${x => this.toggle_expanded(':cw')}>${content.contentWarning}</div> <div class="content_warning" @click=${x => this.toggle_expanded(':cw')}>${content.contentWarning}</div>
`; `;
@ -406,9 +429,16 @@ class TfMessageElement extends LitElement {
this.expanded[(this.message.id || '') + ':blog'] ? this.expanded[(this.message.id || '') + ':blog'] ?
html`<div>${this.blog_data ? unsafeHTML(tfutils.markdown(this.blog_data)) : 'Loading...'}</div>` : html`<div>${this.blog_data ? unsafeHTML(tfutils.markdown(this.blog_data)) : 'Loading...'}</div>` :
undefined; undefined;
let body = this.raw ? let body;
this.render_raw() : switch (this.format) {
html` case 'raw':
body = this.render_raw();
break;
case 'md':
body = content.summary;
break;
case 'message':
body = html`
<div <div
style="border: 1px solid #fff; border-radius: 1em; padding: 8px; margin: 4px; cursor: pointer" style="border: 1px solid #fff; border-radius: 1em; padding: 8px; margin: 4px; cursor: pointer"
@click=${x => self.toggle_expanded(':blog')}> @click=${x => self.toggle_expanded(':blog')}>
@ -420,6 +450,8 @@ class TfMessageElement extends LitElement {
</div> </div>
${payload} ${payload}
`; `;
break;
}
return html` return html`
<style> <style>
code { code {

7
apps/ssb/tf-tab-news-feed.js
View File

@ -70,7 +70,7 @@ class TfTabNewsFeedElement extends LitElement {
WITH news AS (SELECT messages.* WITH news AS (SELECT messages.*
FROM messages FROM messages
JOIN json_each(?) AS following ON messages.author = following.value JOIN json_each(?) AS following ON messages.author = following.value
WHERE messages.timestamp > ? WHERE messages.timestamp > ? AND messages.timestamp < ?
ORDER BY messages.timestamp DESC) ORDER BY messages.timestamp DESC)
SELECT messages.* SELECT messages.*
FROM news FROM news
@ -87,6 +87,11 @@ class TfTabNewsFeedElement extends LitElement {
[ [
JSON.stringify(this.following), JSON.stringify(this.following),
this.start_time, this.start_time,
/*
** Don't show messages more than a day into the future to prevent
** messages with far-future timestamps from staying at the top forever.
*/
new Date().valueOf() + 24 * 60 * 60 * 1000,
]); ]);
} }
} }