cory/tildefriends
5
6
Fork 2
Code Issues 35 Pull Requests Actions Releases 33 Wiki Activity

ssb: Support expanding profile images the same as other images. #122
Some checks failed
Build Tilde Friends / Build-All (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Cory McWilliams 2025-05-31 16:11:13 -04:00
parent 4040d6aa08
commit ab9f57f044
3 changed files with 37 additions and 4 deletions
Show Stats 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",
"emoji": "🦀",
"previous": "&DJCofULiC7mj62IoWQGTveRUQvFrf9oL5BBaUhXQdf0=.sha256"
"previous": "&XXMkhzapfVH8TnYyi4A+lCq2orE57Z5kStC4AbfX04Q=.sha256"
}

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

@ -616,7 +616,6 @@ class TfMessageElement extends LitElement {
if (group) {
result.push({author: last[0], action: last[1], users: group});
}
console.log(this.message.messages, result);
return result;
}
@ -736,7 +735,7 @@ class TfMessageElement extends LitElement {
}
if (content.image !== undefined) {
image = html`
<div><img src=${'/' + (typeof content.image?.link == 'string' ? content.image.link : content.image) + '/view'} style="width: 256px; height: auto"></img></div>
<div @click=${this.body_click}><img src=${'/' + (typeof content.image?.link == 'string' ? content.image.link : content.image) + '/view'} style="width: 256px; height: auto"></img></div>
`;
}
if (content.description !== undefined) {

36
apps/ssb/tf-profile.js
View File

@ -166,6 +166,40 @@ class TfProfileElement extends LitElement {
navigator.clipboard.writeText(this.id);
}
show_image(link) {
let div = document.createElement('div');
div.style.left = 0;
div.style.top = 0;
div.style.width = '100%';
div.style.height = '100%';
div.style.position = 'fixed';
div.style.background = '#000';
div.style.zIndex = 100;
div.style.display = 'grid';
let img = document.createElement('img');
img.src = link;
img.style.maxWidth = '100%';
img.style.maxHeight = '100%';
img.style.display = 'block';
img.style.margin = 'auto';
img.style.objectFit = 'contain';
img.style.width = '100%';
div.appendChild(img);
function image_close(event) {
document.body.removeChild(div);
window.removeEventListener('keydown', image_close);
}
div.onclick = image_close;
window.addEventListener('keydown', image_close);
document.body.appendChild(div);
}
body_click(event) {
if (event.srcElement.tagName == 'IMG') {
this.show_image(event.srcElement.src);
}
}
render() {
this.load();
let self = this;
@ -254,7 +288,7 @@ class TfProfileElement extends LitElement {
<header class="w3-container">
<p><tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)} in ${this.sequence} messages)</p>
</header>
<div class="w3-container">
<div class="w3-container" @click=${this.body_click}>
<div class="w3-margin-bottom" style="display: flex; flex-direction: row">
<input type="text" class="w3-input w3-border w3-theme-d1" style="display: flex 1 1" readonly value=${this.id}></input>
<button class="w3-button w3-theme-d1 w3-ripple" style="flex: 0 0 auto" @click=${this.copy_id}>Copy</button>