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

structure updates

Browse Source
This commit is contained in:
Mark Gregory
2026-08-26 12:38:12 +01:00
parent 66fd8b0e8a
commit 138a028537
14 changed files with 819 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Helpdesk/Livewire/SettingsManager.php
+7 -2
View File
@@ -11,6 +11,7 @@ use Illuminate\Database\QueryException;
use Illuminate\Support\Facades\Schema;
use Illuminate\Support\Str;
use Illuminate\Validation\ValidationException;
use Livewire\Attributes\Layout;
use Livewire\Component;
use Livewire\WithPagination;
use Modules\Helpdesk\Models\AutomationRule;
@@ -1034,9 +1035,12 @@ final class SettingsManager extends Component
$this->checklistTemplateForm = ['id' => null, 'category_id' => null, 'project_id' => null, 'name' => '', 'slug' => '', 'items_text' => '', 'is_active' => true];
}
#[Layout('layouts.app')]
public function render(): View
{
return view('modules.helpdesk.livewire.settings-manager', [
return view()->file(
resource_path('themes/backend/views/modules/helpdesk/livewire/settings-manager.blade.php'),
[
'statuses' => $this->orderedStatuses(),
'priorities' => $this->orderedPriorities(),
'categories' => $this->orderedCategories(),
@@ -1088,7 +1092,8 @@ final class SettingsManager extends Component
->orderBy('name')
->paginate(10, ['*'], 'checksPage'),
'colourOptions' => Color::options(),
])->layout('layouts.app');
]
);
}
private function orderedStatuses(): mixed
Modules/Helpdesk/Resources/assets/css/app.css
+375
View File
@@ -1017,3 +1017,378 @@ span.flatpickr-weekday {
padding-inline: 0.25rem;
}
}
/* Professional coloured headers for Helpdesk settings modals */
.hd-settings-modal-header {
position: relative;
overflow: hidden;
margin-bottom: 1.35rem;
padding: 1.05rem 1.2rem;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 0.9rem;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 12px 30px rgba(0, 0, 0, 0.14);
}
.hd-settings-modal-header::after {
content: "";
position: absolute;
top: -3.5rem;
right: -2rem;
width: 11rem;
height: 11rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.08);
filter: blur(1px);
pointer-events: none;
}
.hd-settings-modal-header [data-flux-heading],
.hd-settings-modal-header h1,
.hd-settings-modal-header h2,
.hd-settings-modal-header h3 {
position: relative;
z-index: 1;
color: #fff !important;
font-weight: 700;
letter-spacing: -0.015em;
}
.hd-settings-modal-header [data-flux-subheading],
.hd-settings-modal-header p {
position: relative;
z-index: 1;
color: rgba(255, 255, 255, 0.74) !important;
}
.hd-settings-modal-header--status {
background: linear-gradient(135deg, #075985 0%, #0369a1 48%, #0e7490 100%);
}
.hd-settings-modal-header--priority {
background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 48%, #c2410c 100%);
}
.hd-settings-modal-header--category {
background: linear-gradient(135deg, #3730a3 0%, #4f46e5 48%, #7c3aed 100%);
}
.hd-settings-modal-header--team {
background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 48%, #0369a1 100%);
}
.hd-settings-modal-header--project {
background: linear-gradient(135deg, #155e75 0%, #0e7490 48%, #0f766e 100%);
}
.hd-settings-modal-header--board {
background: linear-gradient(135deg, #78350f 0%, #b45309 48%, #d97706 100%);
}
.hd-settings-modal-header--git {
background: linear-gradient(135deg, #1f2937 0%, #374151 52%, #475569 100%);
}
.hd-settings-modal-header--workflow {
background: linear-gradient(135deg, #115e59 0%, #0f766e 48%, #047857 100%);
}
.hd-settings-modal-header--canned {
background: linear-gradient(135deg, #164e63 0%, #0891b2 48%, #0284c7 100%);
}
.hd-settings-modal-header--sla {
background: linear-gradient(135deg, #7c2d12 0%, #c2410c 48%, #ea580c 100%);
}
.hd-settings-modal-header--automation {
background: linear-gradient(135deg, #581c87 0%, #7e22ce 48%, #9333ea 100%);
}
.hd-settings-modal-header--checklist {
background: linear-gradient(135deg, #365314 0%, #4d7c0f 48%, #65a30d 100%);
}
.hd-settings-modal-header--tag {
background: linear-gradient(135deg, #831843 0%, #be185d 48%, #db2777 100%);
}
.hd-settings-modal-header--product {
background: linear-gradient(135deg, #312e81 0%, #4338ca 48%, #6366f1 100%);
}
@media (max-width: 640px) {
.hd-settings-modal-header {
padding: 0.95rem 1rem;
border-radius: 0.8rem;
}
}
/* Settings modal shell alignment + typography */
.hd-settings-modal,
.hd-settings-modal * {
font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.hd-settings-modal {
text-align: left;
}
/*
* Flux supplies the modal body padding. Pull the coloured banner back over
* that padding so it visually becomes the modal's own top header rather than
* looking like a card floating inside the dialog.
*/
.hd-settings-modal .hd-settings-modal-header {
margin-top: -1.5rem;
margin-right: -1.5rem;
margin-bottom: 1.5rem;
margin-left: -1.5rem;
padding: 1.35rem 1.5rem 1.3rem;
border-top: 0;
border-right: 0;
border-left: 0;
border-radius: 1rem 1rem 0 0;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 10px 26px rgba(0, 0, 0, 0.16);
}
.hd-settings-modal .hd-settings-modal-header [data-flux-heading],
.hd-settings-modal .hd-settings-modal-header h1,
.hd-settings-modal .hd-settings-modal-header h2,
.hd-settings-modal .hd-settings-modal-header h3 {
margin: 0;
font-family: inherit !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
line-height: 1.35 !important;
letter-spacing: -0.02em !important;
}
.hd-settings-modal .hd-settings-modal-header [data-flux-subheading],
.hd-settings-modal .hd-settings-modal-header p {
margin-top: 0.45rem !important;
margin-bottom: 0 !important;
font-family: inherit !important;
font-size: 0.95rem !important;
font-weight: 400 !important;
line-height: 1.5 !important;
letter-spacing: 0 !important;
}
.hd-settings-modal input,
.hd-settings-modal select,
.hd-settings-modal textarea,
.hd-settings-modal button {
font-family: inherit !important;
}
@media (max-width: 640px) {
.hd-settings-modal .hd-settings-modal-header {
margin-top: -1rem;
margin-right: -1rem;
margin-left: -1rem;
padding: 1.1rem 1rem;
border-radius: 0.85rem 0.85rem 0 0;
}
}
/* Kanban-style settings form rhythm */
.hd-settings-modal {
color: rgb(244 244 245);
}
.hd-settings-modal :is(label, [data-flux-label]) {
font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
line-height: 1.35 !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
}
.hd-settings-modal :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea) {
min-height: 3rem;
font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif !important;
font-size: 1rem !important;
font-weight: 500 !important;
line-height: 1.4 !important;
letter-spacing: -0.01em !important;
color: rgb(244 244 245) !important;
background: rgb(39 39 42) !important;
border-color: rgb(82 82 91) !important;
border-radius: 0.75rem !important;
}
.hd-settings-modal :is(input, select, textarea):focus {
border-color: rgb(59 130 246) !important;
box-shadow: 0 0 0 3px rgb(59 130 246 / 0.16) !important;
}
.hd-settings-modal textarea {
min-height: 7.5rem;
padding-top: 0.85rem !important;
padding-bottom: 0.85rem !important;
}
.hd-settings-modal button,
.hd-settings-modal [role="button"] {
font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 650 !important;
letter-spacing: -0.01em !important;
}
/* Shared horizontal colour control for Status, Priority, Category, Team, Project and Tag editors. */
.hd-colour-control {
width: 100%;
padding: 1rem 1.1rem;
border: 1px solid rgb(63 63 70);
border-radius: 0.9rem;
background: rgb(24 24 27 / 0.78);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.025);
}
.hd-colour-control__label {
margin-bottom: 0.65rem;
font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
font-size: 0.95rem;
font-weight: 650;
line-height: 1.35;
letter-spacing: -0.01em;
color: rgb(228 228 231);
text-transform: none;
}
.hd-colour-control__row {
display: grid;
grid-template-columns: minmax(18rem, 1fr) minmax(7.5rem, auto) auto 3.25rem minmax(8rem, 10rem);
align-items: center;
gap: 0.8rem;
}
.hd-colour-control__select,
.hd-colour-control__value {
height: 3rem;
min-width: 0;
border: 1px solid rgb(82 82 91);
border-radius: 0.75rem;
background: rgb(39 39 42);
color: rgb(244 244 245);
font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
font-size: 1rem;
font-weight: 600;
outline: none;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.hd-colour-control__select {
width: 100%;
padding: 0 0.95rem;
}
.hd-colour-control__value {
width: 100%;
padding: 0 0.9rem;
}
.hd-colour-control__select:focus,
.hd-colour-control__value:focus {
border-color: rgb(59 130 246);
box-shadow: 0 0 0 3px rgb(59 130 246 / 0.16);
}
.hd-colour-control__badge {
display: inline-flex;
height: 3rem;
min-width: 7.5rem;
align-items: center;
justify-content: center;
padding: 0 1rem;
border-radius: 0.75rem;
font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
font-size: 0.95rem;
font-weight: 700;
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}
.hd-colour-control__swatches {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.45rem;
}
.hd-colour-control__swatch {
width: 1.75rem;
height: 1.75rem;
flex: 0 0 auto;
border: 2px solid rgb(228 228 231 / 0.86);
border-radius: 9999px;
box-shadow: 0 0 0 1px rgb(0 0 0 / 0.28);
transition: transform 120ms ease, box-shadow 120ms ease;
}
.hd-colour-control__swatch:hover {
transform: translateY(-1px) scale(1.06);
box-shadow: 0 0 0 3px rgb(59 130 246 / 0.14);
}
.hd-colour-control__picker {
width: 3.25rem;
height: 3rem;
padding: 0.35rem;
cursor: pointer;
border: 1px solid rgb(82 82 91);
border-radius: 0.75rem;
background: rgb(39 39 42);
}
@media (max-width: 1180px) {
.hd-colour-control__row {
grid-template-columns: minmax(16rem, 1fr) minmax(7rem, auto) auto;
}
.hd-colour-control__picker,
.hd-colour-control__value {
grid-row: 2;
}
.hd-colour-control__value {
grid-column: 2 / 4;
max-width: 13rem;
}
}
@media (max-width: 720px) {
.hd-colour-control {
padding: 0.9rem;
}
.hd-colour-control__row {
display: flex;
flex-wrap: wrap;
}
.hd-colour-control__select {
flex: 1 1 100%;
}
.hd-colour-control__badge {
flex: 1 1 8rem;
}
.hd-colour-control__swatches {
order: 5;
width: 100%;
overflow-x: auto;
padding-top: 0.15rem;
}
.hd-colour-control__value {
flex: 1 1 8rem;
}
}