mag/WMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed ticket cards for a common look and feel

Browse Source
This commit is contained in:
Mark Gregory
2026-06-24 17:37:31 +01:00
parent 489473e112
commit 5b4b81eb4d
3 changed files with 123 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
+59 -96
View File
@@ -23,48 +23,21 @@
@endphp
<div data-dusk="helpdesk-ticket-show" dusk="helpdesk-ticket-show" class="hd-helpdesk-surface space-y-4">
<style>
[data-helpdesk-sidebar-cards] > div > :first-child {
cursor: pointer;
margin-bottom: 0 !important;
border-radius: .75rem !important;
transition: filter .15s ease, transform .15s ease;
}
[data-helpdesk-sidebar-cards] > div > :first-child:hover {
filter: brightness(1.08);
}
[data-helpdesk-sidebar-cards] > div > :first-child::after {
content: "\f078";
float: right;
margin-top: -2.15rem;
font-family: "Font Awesome 6 Free";
font-size: .85rem;
font-weight: 900;
opacity: .9;
transition: transform .15s ease;
}
[data-helpdesk-sidebar-cards] > div[data-open="true"] > :first-child {
margin-bottom: 1rem !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
[data-helpdesk-sidebar-cards] > div[data-open="true"] > :first-child::after {
transform: rotate(180deg);
}
[data-helpdesk-sidebar-cards] > div > :not(:first-child) {
[data-helpdesk-sidebar-cards] details > summary::-webkit-details-marker {
display: none;
}
[data-helpdesk-sidebar-cards] > div[data-open="true"] > :not(:first-child) {
display: block;
[data-helpdesk-sidebar-cards] details > summary {
transition: filter .15s ease, transform .15s ease;
}
[data-helpdesk-sidebar-cards] details > summary:hover {
filter: brightness(1.08);
}
</style>
<div data-dusk="helpdesk-ticket-show" dusk="helpdesk-ticket-show" class="hd-helpdesk-surface space-y-4">
<div
class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-5 py-4 text-white">
@@ -903,26 +876,28 @@
return span.innerHTML;
}
initialiseHelpdeskTicketShowInteractions();
document.addEventListener('DOMContentLoaded', initialiseHelpdeskTicketShowInteractions);
document.addEventListener('livewire:navigated', initialiseHelpdeskTicketShowInteractions);
document.addEventListener('livewire:init', initialiseHelpdeskTicketShowInteractions);
function initialiseHelpdeskTicketShowInteractions() {
document.querySelectorAll('[data-helpdesk-rich-editor]').forEach((editor) => syncRichEditor(editor));
updateCommentToggleButtons();
initialiseHelpdeskSidebarCards();
}
document.addEventListener('DOMContentLoaded', initialiseHelpdeskTicketShowInteractions);
document.addEventListener('livewire:navigated', initialiseHelpdeskTicketShowInteractions);
function initialiseHelpdeskSidebarCards() {
const sidebar = document.querySelector('[data-helpdesk-sidebar-cards]');
if (!sidebar) {
if (!sidebar || sidebar.dataset.helpdeskSidebarInitialised === 'true') {
return;
}
sidebar.dataset.helpdeskSidebarInitialised = 'true';
Array.from(sidebar.children).forEach((card) => {
if (!(card instanceof HTMLElement)) {
if (!(card instanceof HTMLElement) || card.tagName.toLowerCase() === 'details') {
return;
}
@@ -932,60 +907,48 @@
return;
}
card.dataset.helpdeskSidebarCard = 'true';
card.dataset.open = card.dataset.open || 'false';
header.dataset.helpdeskSidebarCardHeader = 'true';
header.setAttribute('role', 'button');
header.setAttribute('tabindex', '0');
header.setAttribute('aria-expanded', card.dataset.open === 'true' ? 'true' : 'false');
const details = document.createElement('details');
const classNames = new Set(card.className.split(/\s+/).filter(Boolean));
classNames.add('group');
details.className = Array.from(classNames).join(' ');
details.dataset.helpdeskSidebarCard = 'true';
details.open = false;
const summary = document.createElement('summary');
summary.className = header.className;
summary.classList.add(
'flex',
'cursor-pointer',
'list-none',
'items-center',
'justify-between',
'gap-3',
'marker:hidden'
);
summary.classList.remove('mb-4');
while (header.firstChild) {
summary.appendChild(header.firstChild);
}
const chevron = document.createElement('span');
chevron.className = 'inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white/15 text-white ring-1 ring-white/20';
chevron.innerHTML = '<i class="fa-solid fa-chevron-right text-xs transition group-open:rotate-90" aria-hidden="true"></i>';
summary.appendChild(chevron);
card.removeChild(header);
const body = document.createElement('div');
body.className = 'pt-4';
while (card.firstChild) {
body.appendChild(card.firstChild);
}
details.appendChild(summary);
details.appendChild(body);
card.replaceWith(details);
});
if (sidebar.dataset.helpdeskSidebarInitialised === 'true') {
return;
}
sidebar.dataset.helpdeskSidebarInitialised = 'true';
sidebar.addEventListener('click', function (event) {
const header = event.target.closest('[data-helpdesk-sidebar-card-header]');
if (!header || !sidebar.contains(header)) {
return;
}
if (event.target.closest('a, button, input, select, textarea, label, dialog')) {
return;
}
toggleHelpdeskSidebarCard(header);
});
sidebar.addEventListener('keydown', function (event) {
if (!['Enter', ' '].includes(event.key)) {
return;
}
const header = event.target.closest('[data-helpdesk-sidebar-card-header]');
if (!header || !sidebar.contains(header)) {
return;
}
event.preventDefault();
toggleHelpdeskSidebarCard(header);
});
}
function toggleHelpdeskSidebarCard(header) {
const card = header.closest('[data-helpdesk-sidebar-card]');
if (!card) {
return;
}
const isOpen = card.dataset.open === 'true';
card.dataset.open = isOpen ? 'false' : 'true';
header.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
}
function wrapSelection(textarea, before, after) {