fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(helpdesk): add skeleton loader and lightbox for image previews

Browse Source 
- Skeleton shimmer placeholder shown while SOAP image loads
- onload hides skeleton, onerror hides entire preview
- data-fslightbox="ticket-files" on image link enables FsLightbox
  overlay (auto-detected by global MutationObserver)
- cursor: zoom-in on preview images
- Gallery name "ticket-files" groups all images in the feed

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-05 23:03:13 +02:00
parent 5730a9a7b7
commit 8187c9b4dd
2 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
modules/helpdesk/web/css/helpdesk.css
View File

@@ -1318,6 +1318,14 @@
display: block; display: block;
max-width: 16rem; max-width: 16rem;
margin-left: 1.35rem; margin-left: 1.35rem;
position: relative;
}
.helpdesk-chat-file-skeleton {
display: block;
width: 12rem;
height: 8rem;
border-radius: var(--app-radius, 0.375rem);
} }
.helpdesk-chat-file-preview img { .helpdesk-chat-file-preview img {
@@ -1326,6 +1334,7 @@
height: auto; height: auto;
border-radius: var(--app-radius, 0.375rem); border-radius: var(--app-radius, 0.375rem);
border: 1px solid var(--app-muted-border-color); border: 1px solid var(--app-muted-border-color);
cursor: zoom-in;
} }
.helpdesk-chat-file-link { .helpdesk-chat-file-link {

5
modules/helpdesk/web/js/helpdesk-communication.js
View File

@@ -126,7 +126,10 @@ export function renderCommunicationFeed(entries, options = {}) {
html += `<span class="helpdesk-chat-activity-pill">${esc(actor)} ${esc(t('attached a file'))}`; html += `<span class="helpdesk-chat-activity-pill">${esc(actor)} ${esc(t('attached a file'))}`;
if (timeLabel) html += ` ${esc(t('on'))} ${esc(timeLabel)}`; if (timeLabel) html += ` ${esc(t('on'))} ${esc(timeLabel)}`;
html += `</span>`; html += `</span>`;
html += `<a href="${esc(fileUrl)}" target="_blank" rel="noopener noreferrer" class="helpdesk-chat-file-preview" aria-label="${esc(fileName)}"><img src="${esc(imgUrl)}" alt="${esc(fileName)}" loading="lazy" onerror="this.parentElement.hidden=true"></a>`; html += `<span class="helpdesk-chat-file-preview">`;
html += `<span class="helpdesk-chat-file-skeleton helpdesk-skeleton"></span>`;
html += `<a data-fslightbox="ticket-files" href="${esc(imgUrl)}" aria-label="${esc(fileName)}"><img src="${esc(imgUrl)}" alt="${esc(fileName)}" loading="lazy" onload="this.closest('.helpdesk-chat-file-preview').querySelector('.helpdesk-chat-file-skeleton').hidden=true" onerror="this.closest('.helpdesk-chat-file-preview').hidden=true"></a>`;
html += `</span>`;
html += `<a href="${esc(fileUrl)}" target="_blank" rel="noopener noreferrer" class="helpdesk-chat-file-link"><i class="bi bi-download" aria-hidden="true"></i> ${esc(fileName)}</a>`; html += `<a href="${esc(fileUrl)}" target="_blank" rel="noopener noreferrer" class="helpdesk-chat-file-link"><i class="bi bi-download" aria-hidden="true"></i> ${esc(fileName)}</a>`;
html += '</div>'; html += '</div>';
html += '</li>'; html += '</li>';