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

Group contact messages, and try to fix some messages overflowing width.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4238 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams 2023-03-19 23:31:08 +00:00
parent bdeee7fc0e
commit 3d2c88c201
4 changed files with 45 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/ssb/tf-app.js
View File

@ -135,9 +135,9 @@ class TfElement extends LitElement {
cache.last_row_id = max_row_id;
let store = JSON.stringify(cache);
/* 2023-02-20: Exceeding message size. */
if (store.length < 512 * 1024) {
//if (store.length < 512 * 1024) {
await tfrpc.rpc.databaseSet('following', store);
}
//}
return [result, cache.following];
}
@ -280,16 +280,6 @@ class TfElement extends LitElement {
}
}
add_fake_news() {
this.unread = [{
author: this.whoami,
placeholder: true,
id: '%fake_id',
text: 'text',
content: 'hello',
}, ...this.unread];
}
async set_tab(tab) {
this.tab = tab;
if (tab === 'news') {
@ -326,7 +316,6 @@ class TfElement extends LitElement {
return html`
${this.render_id_picker()}
${tabs}
<!-- <input type="button" value="Fake News" @click=${this.add_fake_news}></input> -->
${contents}
`;
}

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

@ -148,7 +148,7 @@ class TfMessageElement extends LitElement {
} else if (mention.link?.startsWith('&') &&
mention.name?.startsWith('video:')) {
return html`
<video controls style="max-height: 240px">
<video controls style="max-height: 240px; max-width: 128px">
<source src=${'/' + mention.link + '/view'}></source>
</video>
`;
@ -222,7 +222,7 @@ class TfMessageElement extends LitElement {
html`<input type="button" value="Raw" @click=${() => self.raw = true}></input>`;
function small_frame(inner) {
return html`
<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; display: inline-block">
<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>
<span style="padding-right: 8px"><a tfarget="_top" href=${'#' + self.message.id}>%</a> ${new Date(self.message.timestamp).toLocaleString()}</span>
${raw_button}
@ -231,7 +231,14 @@ class TfMessageElement extends LitElement {
</div>
`
}
if (this.message.placeholder) {
if (this.message?.type === 'contact_group') {
return html`
<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere">
${this.message.messages.map(x =>
html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded}></tf-message>`
)}
</div>`;
} else if (this.message.placeholder) {
return html`
<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere">
<a target="_top" href=${'#' + this.message.id}>${this.message.id}</a> (placeholder)
@ -270,8 +277,9 @@ class TfMessageElement extends LitElement {
${description}
`);
} else if (content.type == 'contact') {
return small_frame(html`
return html`
<div>
<tf-user id=${this.message.author} .users=${this.users}></tf-user>
is
${
content.blocking === true ? 'blocking' :
@ -282,7 +290,7 @@ class TfMessageElement extends LitElement {
}
<tf-user id=${this.message.content.contact} .users=${this.users}></tf-user>
</div>
`);
`;
} else if (content.type == 'post') {
let reply = (this.drafts[this.message?.id] !== undefined) ? html`
<tf-compose

22
apps/ssb/tf-news.js
View File

@ -145,9 +145,29 @@ class TfNewsElement extends LitElement {
return recursive_sort(roots, true);
}
group_following(messages) {
let result = [];
let group = [];
for (let message of messages) {
if (message?.content?.type === 'contact') {
group.push(message);
} else {
if (group.length > 0) {
result.push({
type: 'contact_group',
messages: group,
});
group = [];
}
result.push(message);
}
}
return result;
}
load_and_render(messages) {
let messages_by_id = this.process_messages(messages);
let final_messages = this.finalize_messages(messages_by_id);
let final_messages = this.group_following(this.finalize_messages(messages_by_id));
return html`
<div style="display: flex; flex-direction: column">
${final_messages.map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded} collapsed=true></tf-message>`)}

13
apps/ssb/tf-user.js
View File

@ -19,18 +19,23 @@ class TfUserElement extends LitElement {
}
render() {
let name = this.users?.[this.id]?.name;
name = name !== undefined ?
html`<a target="_top" href=${'#' + this.id}>${name}</a>` :
html`<a target="_top" href=${'#' + this.id}>${this.id}</a>`;
if (this.users[this.id]) {
let image = this.users[this.id].image;
image = typeof(image) == 'string' ? image : image?.link;
return html`
<div style="display: inline-block; font-weight: bold">
<img style="width: 2em; height: 2em; vertical-align: middle; border-radius: 50%" ?hidden=${image === undefined} src="${image ? '/' + image + '/view' : undefined}">
<a target="_top" href=${'#' + this.id}>${this.users[this.id].name ?? this.id}</a>
<img style="width: 2em; height: 2em; vertical-align: middle; border-radius: 50%" ?hidden=${image === undefined} src="${image ? '/' + image + '/view' : undefined}">
${name}
</div>`;
} else {
return html`
<div style="display: inline-block; font-weight: bold; word-wrap: anywhere">
<a target="_top" href=${'#' + this.id}>${this.id}</a>
<div style="display: inline-block; font-weight: bold">
${name}
</div>`;
}
}