ui updates for ticket layout
This commit is contained in:
Mark Gregory
@@ -251,7 +251,7 @@
|
||||
</article>
|
||||
|
||||
@if ($ticket->attachments->isNotEmpty())
|
||||
<details class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900" open>
|
||||
<details class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<summary class="flex cursor-pointer list-none items-center justify-between gap-5 bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-7 py-7 text-white marker:hidden sm:px-9">
|
||||
<div class="flex min-w-0 items-start gap-5">
|
||||
<span class="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-blue-500/25 text-white ring-1 ring-white/20 shadow-lg shadow-black/20">
|
||||
@@ -448,15 +448,35 @@
|
||||
@endif
|
||||
@endcan
|
||||
|
||||
<div class="mt-5 rounded-2xl border border-dashed border-blue-300 p-5 dark:border-blue-800">
|
||||
<label class="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-3 py-2 text-xs font-bold text-white shadow-sm hover:bg-blue-700">
|
||||
<i class="fa-solid fa-thumbtack" aria-hidden="true"></i>
|
||||
Pin attachments
|
||||
<input name="attachments[]" type="file" multiple class="sr-only" data-helpdesk-file-input>
|
||||
</label>
|
||||
<span class="ml-2 text-xs font-semibold text-zinc-500" data-helpdesk-file-label>No files pinned</span>
|
||||
@error('attachments.*') <div class="mt-2 text-sm text-red-600">{{ $message }}</div> @enderror
|
||||
</div>
|
||||
<details class="mt-5 overflow-hidden rounded-2xl border border-zinc-200 bg-zinc-50/80 shadow-sm dark:border-zinc-800 dark:bg-zinc-950/40">
|
||||
<summary class="group flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 transition hover:bg-zinc-100/80 dark:hover:bg-zinc-900/70 [&::-webkit-details-marker]:hidden">
|
||||
<span class="flex min-w-0 items-center gap-3">
|
||||
<span class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900/70 dark:bg-blue-950/50 dark:text-blue-300">
|
||||
<i class="fa-solid fa-paperclip text-sm" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="min-w-0">
|
||||
<span class="block text-xs font-black uppercase tracking-[0.22em] text-blue-700 dark:text-blue-300">Attachments</span>
|
||||
<span class="block truncate text-sm font-semibold text-zinc-600 dark:text-zinc-400">Pin screenshots, logs and supporting documents.</span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex shrink-0 items-center gap-3">
|
||||
<span class="rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs font-bold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200" data-helpdesk-file-count>0 files</span>
|
||||
<i class="fa-solid fa-chevron-down text-xs text-zinc-500 transition group-open:rotate-180" aria-hidden="true"></i>
|
||||
</span>
|
||||
</summary>
|
||||
|
||||
<div class="border-t border-zinc-200 px-5 py-4 dark:border-zinc-800">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<label class="inline-flex h-10 w-auto cursor-pointer items-center justify-center gap-2 rounded-xl border border-zinc-300 bg-white px-4 text-sm font-bold text-zinc-800 shadow-sm transition hover:border-blue-400 hover:text-blue-700 focus-within:ring-2 focus-within:ring-blue-400/70 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:border-blue-500 dark:hover:text-blue-300">
|
||||
<i class="fa-solid fa-paperclip text-xs" aria-hidden="true"></i>
|
||||
Choose files
|
||||
<input name="attachments[]" type="file" multiple class="sr-only" data-helpdesk-file-input>
|
||||
</label>
|
||||
<span class="text-sm font-semibold text-zinc-500 dark:text-zinc-400" data-helpdesk-file-label>No files attached</span>
|
||||
</div>
|
||||
@error('attachments.*') <div class="mt-2 text-sm text-red-600">{{ $message }}</div> @enderror
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="mt-6 flex justify-end">
|
||||
<button dusk="post-comment" type="submit" class="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-5 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400/70">
|
||||
@@ -589,10 +609,18 @@
|
||||
const fileInput = event.target.closest('[data-helpdesk-file-input]');
|
||||
|
||||
if (fileInput) {
|
||||
const label = fileInput.closest('div')?.querySelector('[data-helpdesk-file-label]');
|
||||
const panel = fileInput.closest('details') || fileInput.closest('div');
|
||||
const label = panel?.querySelector('[data-helpdesk-file-label]');
|
||||
const badge = panel?.querySelector('[data-helpdesk-file-count]');
|
||||
const count = fileInput.files?.length || 0;
|
||||
const text = count === 0 ? 'No files attached' : `${count} file${count === 1 ? '' : 's'} selected`;
|
||||
|
||||
if (label) {
|
||||
label.textContent = count === 0 ? 'No files pinned' : `${count} file${count === 1 ? '' : 's'} pinned`;
|
||||
label.textContent = text;
|
||||
}
|
||||
|
||||
if (badge) {
|
||||
badge.textContent = `${count} file${count === 1 ? '' : 's'}`;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -281,3 +281,18 @@ versions:
|
||||
- "Replaced the bright green-blue attachment banner with a consistent navy gradient, balanced icon sizing, document-style title, and professional file count badge."
|
||||
- "Improved attachment file rows with clearer spacing and a download affordance while preserving existing attachment download routes."
|
||||
- "Kept module.json version in sync with changelog.yaml."
|
||||
- version: 1.0.37
|
||||
date: 2026-06-17
|
||||
changes:
|
||||
- Collapsed ticket attachment details by default to match the document response panel behaviour.
|
||||
- Reduced the pinned attachment picker to a compact professional button with inline file status text.
|
||||
|
||||
- version: 1.0.38
|
||||
date: 2026-06-17
|
||||
changes:
|
||||
- Reworked the reply attachment picker into a compact professional collapsible attachments panel.
|
||||
- Removed the oversized blue pin attachments button and dashed drop-zone styling.
|
||||
- Added a neutral Choose files control, inline file status, and attachment count badge.
|
||||
- Kept the attachment panel collapsed by default while preserving multi-file uploads for replies and nested responses.
|
||||
- Kept module.json version in sync with changelog.yaml.
|
||||
|
||||
|
||||
@@ -22,5 +22,5 @@
|
||||
"Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
|
||||
],
|
||||
"files": [],
|
||||
"version": "1.7.4"
|
||||
"version": "1.0.38"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user