tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

ssb: Collapse contact group users to only icons.

Browse Source
This commit is contained in:
Cory McWilliams
2025-06-27 12:46:15 -04:00
parent 37e1c5d97b
commit 8f84ff2611
3 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ssb.json
View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🦀", "emoji": "🦀",
"previous": "&fVXd+mdbqIz9h7nKYnoFkCyfOKDeCUaAJG2/i7h/5hs=.sha256" "previous": "&fHj5cygP9tDGnJRTFZes1kywnjetkTH9z74qFy8nhXg=.sha256"
} }

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

@ -686,7 +686,7 @@ class TfMessageElement extends LitElement {
${x.action} ${x.action}
${x.users.map( ${x.users.map(
(y) => html` (y) => html`
<tf-user id=${y} .users=${this.users}></tf-user> <tf-user id=${y} .users=${this.users} icon_only=true></tf-user>
` `
)} )}
</div> </div>

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

@ -7,6 +7,7 @@ class TfUserElement extends LitElement {
return { return {
id: {type: String}, id: {type: String},
fallback_name: {type: String}, fallback_name: {type: String},
icon_only: {type: Boolean},
users: {type: Object}, users: {type: Object},
}; };
} }
@ -17,6 +18,7 @@ class TfUserElement extends LitElement {
super(); super();
this.id = null; this.id = null;
this.fallback_name = null; this.fallback_name = null;
this.icon_only = false;
this.users = {}; this.users = {};
} }
@ -32,7 +34,9 @@ class TfUserElement extends LitElement {
>😎</span >😎</span
>`; >`;
let name = this.users?.[this.id]?.name; let name = this.users?.[this.id]?.name;
name = html`<a target="_top" href=${'#' + this.id} name = this.icon_only
? undefined
: html`<a target="_top" href=${'#' + this.id}
>${name ?? this.fallback_name ?? this.id}</a >${name ?? this.fallback_name ?? this.id}</a
>`; >`;
@ -48,6 +52,7 @@ class TfUserElement extends LitElement {
class=${'w3-theme-l4 ' + shape} class=${'w3-theme-l4 ' + shape}
style="width: 2em; height: 2em; vertical-align: middle; object-fit: cover" style="width: 2em; height: 2em; vertical-align: middle; object-fit: cover"
src="/${image_link}/view" src="/${image_link}/view"
alt=${name ?? this.fallback_name ?? this.id}
/>`; />`;
} }
} }