tildefriends/apps/ssb/tf-user.js
Cory McWilliams e1f4f7f95b
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 15m23s
ssb: Don't stretch profile images when fitting into a circle. I swear I did this ages ago.
2024-10-10 21:41:34 -04:00

52 lines
1.3 KiB
JavaScript

import {LitElement, html} from './lit-all.min.js';
import * as tfrpc from '/static/tfrpc.js';
import {styles} from './tf-styles.js';
class TfUserElement extends LitElement {
static get properties() {
return {
id: {type: String},
users: {type: Object},
};
}
static styles = styles;
constructor() {
super();
this.id = null;
this.users = {};
}
render() {
let image = html`<span
class="w3-theme-light w3-circle"
style="display: inline-block; width: 2em; height: 2em; text-align: center; line-height: 2em"
>?</span
>`;
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_link = this.users[this.id].image;
image_link =
typeof image_link == 'string' ? image_link : image_link?.link;
if (image_link !== undefined) {
image = html`<img
class="w3-circle"
style="width: 2em; height: 2em; vertical-align: middle; object-fit: cover"
src="/${image_link}/view"
/>`;
}
}
return html` <div style="display: inline-block; font-weight: bold">
${image} ${name}
</div>`;
}
}
customElements.define('tf-user', TfUserElement);