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

ui updates for ticket layout

Browse Source
This commit is contained in:
Mark Gregory
2026-06-17 12:36:04 +01:00
parent a46ca53aee
commit 2828e617ed
4 changed files with 77 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Helpdesk/Resources/views/index.blade.php
+1 -9
View File
@@ -180,15 +180,7 @@
</div>
</div>
<div class="rounded-2xl border border-zinc-200 bg-white p-3 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<div class="flex flex-wrap gap-2">
<a href="{{ route('helpdesk.index') }}" wire:navigate class="hd-btn hd-btn-blue">Dashboard</a>
<a href="{{ route('helpdesk.tickets.index') }}" wire:navigate class="hd-btn hd-btn-blue">Tickets</a>
<a href="{{ route('helpdesk.tickets.create') }}" wire:navigate class="hd-btn hd-btn-green">+ New Ticket</a>
<a href="{{ route('helpdesk.kanban') }}" wire:navigate class="hd-btn hd-btn-amber">Kanban</a>
<a href="{{ route('helpdesk.settings') }}" wire:navigate class="hd-btn hd-btn-violet">Settings</a>
</div>
</div>
<livewire:helpdesk.dashboard-widget />
</div>
Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
+65 -9
View File
@@ -166,9 +166,66 @@
.hd-helpdesk-surface [data-helpdesk-attachment-shell] {
border-radius: 18px !important;
border: 1px dashed rgba(37, 99, 235, 0.85) !important;
padding: 16px !important;
background: rgba(15, 23, 42, 0.38) !important;
border: 1px solid rgba(59, 130, 246, 0.28) !important;
padding: 18px !important;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.74), rgba(24, 24, 27, 0.92)) !important;
}
.hd-helpdesk-surface [data-helpdesk-attachment-picker-row] {
display: flex !important;
min-height: 74px !important;
align-items: center !important;
justify-content: space-between !important;
gap: 18px !important;
}
.hd-helpdesk-surface [data-helpdesk-file-button] {
display: inline-flex !important;
width: auto !important;
min-width: 144px !important;
height: 42px !important;
align-items: center !important;
justify-content: center !important;
align-self: center !important;
gap: 9px !important;
border-radius: 12px !important;
border: 1px solid rgba(34, 197, 94, 0.55) !important;
background: linear-gradient(135deg, #16a34a, #22c55e) !important;
color: #ffffff !important;
box-shadow: 0 10px 22px rgba(22, 163, 74, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
font-size: 0.88rem !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0.005em !important;
padding: 0 16px !important;
white-space: nowrap !important;
vertical-align: middle !important;
transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
}
.hd-helpdesk-surface [data-helpdesk-file-button]:hover {
transform: translateY(-1px) !important;
border-color: rgba(134, 239, 172, 0.85) !important;
background: linear-gradient(135deg, #15803d, #16a34a) !important;
color: #ffffff !important;
box-shadow: 0 12px 26px rgba(22, 163, 74, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}
.hd-helpdesk-surface [data-helpdesk-file-button] i,
.hd-helpdesk-surface [data-helpdesk-file-button] span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
.hd-helpdesk-surface [data-helpdesk-file-button] i {
height: 18px !important;
width: 18px !important;
border-radius: 6px !important;
background: rgba(255, 255, 255, 0.16) !important;
color: #ffffff !important;
font-size: 0.74rem !important;
}
.hd-helpdesk-surface .hd-select {
@@ -467,7 +524,7 @@
<div class="border-t border-zinc-200 px-5 py-5 text-sm dark:border-zinc-800">
<div class="rounded-2xl border border-zinc-200 bg-white/70 p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-950/45">
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div data-helpdesk-attachment-picker-row>
<div class="flex min-w-0 items-center gap-3">
<span class="inline-flex h-11 w-11 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/55 dark:text-blue-300">
<i class="fa-solid fa-paperclip text-sm" aria-hidden="true"></i>
@@ -480,12 +537,11 @@
</div>
<label
class="inline-flex h-11 min-w-[10rem] cursor-pointer select-none items-center justify-center gap-2.5 rounded-full border border-blue-400/70 bg-gradient-to-r from-blue-600 to-blue-500 px-5 text-sm font-extrabold leading-none text-white shadow-sm shadow-blue-950/30 transition hover:from-blue-500 hover:to-blue-400 focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-300/80 dark:border-blue-300/40 dark:shadow-black/30"
data-helpdesk-file-button
class="cursor-pointer"
>
<span class="inline-flex h-5 w-5 items-center justify-center leading-none">
<i class="fa-solid fa-paperclip text-[0.8rem] leading-none" aria-hidden="true"></i>
</span>
<span class="leading-none">Choose files</span>
<i class="fa-solid fa-paperclip" aria-hidden="true"></i>
<span>Attach files</span>
<input name="attachments[]" type="file" multiple class="sr-only" data-helpdesk-file-input>
</label>
</div>
Modules/Helpdesk/changelog.yaml
+10
View File
@@ -323,3 +323,13 @@ versions:
- Refined the reply attachment Choose files button with a centred rounded action style.
- Centred the upload icon and label vertically and horizontally to improve the professional attachment picker layout.
- Kept module.json version in sync with changelog.yaml.
- version: 1.0.31
date: 2026-06-17
changes:
- Refined the Helpdesk attachment picker button into a compact, centred, professional blue action control.
- version: 1.9.18
date: 2026-06-17
changes:
- Centred the attachment chooser content vertically and changed the attachment action to a professional green button treatment.
Modules/Helpdesk/module.json
+1 -1
View File
@@ -22,5 +22,5 @@
"Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
],
"files": [],
"version": "1.0.41"
"version": "1.9.18"
}