structure updates
This commit is contained in:
Mark Gregory
@@ -0,0 +1,624 @@
|
||||
:root {
|
||||
--doc-ink: #18181b;
|
||||
--doc-muted: #71717a;
|
||||
--doc-line: #e4e4e7;
|
||||
--doc-panel: #ffffff;
|
||||
--doc-soft: #f4f4f5;
|
||||
--doc-brand: #2563eb;
|
||||
--doc-brand-dark: #1d4ed8;
|
||||
--doc-accent: #059669;
|
||||
--doc-danger: #dc2626;
|
||||
--doc-warning: #d97706;
|
||||
--doc-radius: 22px;
|
||||
--doc-shadow: 0 18px 55px rgba(15, 23, 42, .10);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--doc-ink: #f4f4f5;
|
||||
--doc-muted: #a1a1aa;
|
||||
--doc-line: #3f3f46;
|
||||
--doc-panel: #18181b;
|
||||
--doc-soft: #09090b;
|
||||
--doc-shadow: 0 18px 55px rgba(0, 0, 0, .28);
|
||||
}
|
||||
|
||||
body.documentation-module {
|
||||
margin: 0;
|
||||
background: #ffffff;
|
||||
color: var(--doc-ink);
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
html.dark body.documentation-module {
|
||||
background: #09090b;
|
||||
}
|
||||
|
||||
.doc-shell {
|
||||
max-width: 1800px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.doc-page {
|
||||
margin: 0 auto;
|
||||
max-width: 1800px;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.doc-hero-wrap {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--doc-line);
|
||||
border-radius: 1.5rem;
|
||||
background: var(--doc-panel);
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
|
||||
}
|
||||
|
||||
.doc-hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 1.75rem 1.5rem;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #020617 0%, #0f172a 48%, #172554 100%);
|
||||
}
|
||||
|
||||
.doc-hero-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.doc-hero h1 {
|
||||
margin: .5rem 0 0;
|
||||
font-size: clamp(1.875rem, 4vw, 3rem);
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
letter-spacing: -.04em;
|
||||
}
|
||||
|
||||
.doc-eyebrow {
|
||||
margin: 0;
|
||||
color: #bfdbfe;
|
||||
text-transform: uppercase;
|
||||
font-size: .75rem;
|
||||
letter-spacing: .28em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.doc-hero p {
|
||||
max-width: 48rem;
|
||||
margin: .5rem 0 0;
|
||||
color: rgba(219, 234, 254, .9);
|
||||
font-size: .875rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.doc-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.doc-button {
|
||||
border: 1px solid transparent;
|
||||
border-radius: .75rem;
|
||||
padding: .625rem .875rem;
|
||||
font-weight: 700;
|
||||
font-size: .875rem;
|
||||
line-height: 1.25rem;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: .5rem;
|
||||
cursor: pointer;
|
||||
transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
|
||||
.doc-button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.doc-button.primary,
|
||||
.doc-button.register,
|
||||
.doc-button.dark {
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
|
||||
}
|
||||
|
||||
.doc-button.primary:hover,
|
||||
.doc-button.register:hover,
|
||||
.doc-button.dark:hover {
|
||||
background: #1d4ed8;
|
||||
border-color: #1d4ed8;
|
||||
}
|
||||
|
||||
.doc-button.secondary,
|
||||
.doc-button.category,
|
||||
.doc-button.settings {
|
||||
background: #7c3aed;
|
||||
color: #ffffff;
|
||||
border-color: #7c3aed;
|
||||
box-shadow: 0 8px 18px rgba(124, 58, 237, .22);
|
||||
}
|
||||
|
||||
.doc-button.secondary:hover,
|
||||
.doc-button.category:hover,
|
||||
.doc-button.settings:hover {
|
||||
background: #6d28d9;
|
||||
border-color: #6d28d9;
|
||||
}
|
||||
|
||||
.doc-button.light,
|
||||
.doc-button.cancel,
|
||||
.doc-button.warning {
|
||||
background: #f59e0b;
|
||||
color: #ffffff;
|
||||
border-color: #f59e0b;
|
||||
box-shadow: 0 8px 18px rgba(245, 158, 11, .22);
|
||||
}
|
||||
|
||||
.doc-button.light:hover,
|
||||
.doc-button.cancel:hover,
|
||||
.doc-button.warning:hover {
|
||||
background: #d97706;
|
||||
border-color: #d97706;
|
||||
}
|
||||
|
||||
.doc-button.success {
|
||||
background: #059669;
|
||||
color: #ffffff;
|
||||
border-color: #059669;
|
||||
box-shadow: 0 8px 18px rgba(5, 150, 105, .22);
|
||||
}
|
||||
|
||||
.doc-button.success:hover {
|
||||
background: #047857;
|
||||
border-color: #047857;
|
||||
}
|
||||
|
||||
.doc-button.danger {
|
||||
background: #dc2626;
|
||||
color: #ffffff;
|
||||
border-color: #dc2626;
|
||||
box-shadow: 0 8px 18px rgba(220, 38, 38, .22);
|
||||
}
|
||||
|
||||
.doc-button.danger:hover {
|
||||
background: #b91c1c;
|
||||
border-color: #b91c1c;
|
||||
}
|
||||
|
||||
.doc-card {
|
||||
background: var(--doc-panel);
|
||||
border: 1px solid var(--doc-line);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.doc-card-header {
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 1px solid var(--doc-line);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.doc-card-body {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.doc-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.doc-grid.stats {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.doc-stat {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.doc-stat strong {
|
||||
display: block;
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
letter-spacing: -.04em;
|
||||
color: var(--doc-ink);
|
||||
}
|
||||
|
||||
.doc-stat span {
|
||||
color: var(--doc-muted);
|
||||
font-size: .75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
|
||||
.doc-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.doc-table th {
|
||||
text-align: left;
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
color: var(--doc-muted);
|
||||
padding: .75rem;
|
||||
border-bottom: 1px solid var(--doc-line);
|
||||
}
|
||||
|
||||
.doc-table td {
|
||||
padding: .875rem .75rem;
|
||||
border-bottom: 1px solid var(--doc-line);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.doc-table a,
|
||||
.doc-link {
|
||||
color: #1d4ed8;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html.dark .doc-table a,
|
||||
html.dark .doc-link {
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.doc-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
padding: .25rem .625rem;
|
||||
font-size: .75rem;
|
||||
font-weight: 800;
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
border: 1px solid #bfdbfe;
|
||||
}
|
||||
|
||||
.doc-badge.published {
|
||||
background: #ecfdf5;
|
||||
color: #065f46;
|
||||
border-color: #a7f3d0;
|
||||
}
|
||||
|
||||
.doc-badge.draft {
|
||||
background: #f4f4f5;
|
||||
color: #52525b;
|
||||
border-color: #d4d4d8;
|
||||
}
|
||||
|
||||
.doc-badge.archived {
|
||||
background: #fef2f2;
|
||||
color: #991b1b;
|
||||
border-color: #fecaca;
|
||||
}
|
||||
|
||||
html.dark .doc-badge {
|
||||
background: rgba(37, 99, 235, .18);
|
||||
color: #bfdbfe;
|
||||
border-color: rgba(59, 130, 246, .35);
|
||||
}
|
||||
|
||||
html.dark .doc-badge.published {
|
||||
background: rgba(5, 150, 105, .18);
|
||||
color: #a7f3d0;
|
||||
border-color: rgba(16, 185, 129, .35);
|
||||
}
|
||||
|
||||
html.dark .doc-badge.draft {
|
||||
background: rgba(113, 113, 122, .18);
|
||||
color: #d4d4d8;
|
||||
border-color: rgba(161, 161, 170, .30);
|
||||
}
|
||||
|
||||
html.dark .doc-badge.archived {
|
||||
background: rgba(220, 38, 38, .16);
|
||||
color: #fecaca;
|
||||
border-color: rgba(248, 113, 113, .32);
|
||||
}
|
||||
|
||||
.doc-form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.doc-field.full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.doc-label {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
margin-bottom: .5rem;
|
||||
font-size: .875rem;
|
||||
color: var(--doc-ink);
|
||||
}
|
||||
|
||||
.doc-input,
|
||||
.doc-select,
|
||||
.doc-textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #d4d4d8;
|
||||
border-radius: .75rem;
|
||||
padding: .75rem .875rem;
|
||||
background: #ffffff;
|
||||
color: #18181b;
|
||||
font: inherit;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
|
||||
}
|
||||
|
||||
.doc-input:focus,
|
||||
.doc-select:focus,
|
||||
.doc-textarea:focus {
|
||||
outline: 2px solid rgba(37, 99, 235, .24);
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
html.dark .doc-input,
|
||||
html.dark .doc-select,
|
||||
html.dark .doc-textarea {
|
||||
background: #09090b;
|
||||
color: #f4f4f5;
|
||||
border-color: #3f3f46;
|
||||
}
|
||||
|
||||
.doc-textarea {
|
||||
min-height: 360px;
|
||||
line-height: 1.6;
|
||||
resize: vertical;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
.doc-editor {
|
||||
border: 1px solid #d4d4d8;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
html.dark .doc-editor {
|
||||
background: #09090b;
|
||||
border-color: #3f3f46;
|
||||
}
|
||||
|
||||
.doc-editor .doc-textarea {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.doc-editor-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .375rem;
|
||||
padding: .625rem;
|
||||
background: #f4f4f5;
|
||||
border-bottom: 1px solid var(--doc-line);
|
||||
}
|
||||
|
||||
html.dark .doc-editor-toolbar {
|
||||
background: #18181b;
|
||||
}
|
||||
|
||||
.doc-editor-toolbar button {
|
||||
border: 1px solid #d4d4d8;
|
||||
background: #ffffff;
|
||||
color: #18181b;
|
||||
border-radius: .625rem;
|
||||
padding: .45rem .625rem;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
html.dark .doc-editor-toolbar button {
|
||||
border-color: #3f3f46;
|
||||
background: #09090b;
|
||||
color: #f4f4f5;
|
||||
}
|
||||
|
||||
.doc-editor-toolbar button:hover,
|
||||
.doc-editor-toolbar button:focus {
|
||||
border-color: #2563eb;
|
||||
outline: 2px solid rgba(37, 99, 235, .20);
|
||||
}
|
||||
|
||||
.editor-help {
|
||||
padding: 0 .875rem .75rem;
|
||||
margin: -.25rem 0 0;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
.doc-error {
|
||||
color: #dc2626;
|
||||
font-size: .8125rem;
|
||||
margin-top: .375rem;
|
||||
}
|
||||
|
||||
.doc-alert {
|
||||
border-radius: 1rem;
|
||||
padding: .875rem 1rem;
|
||||
background: #ecfdf5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
font-size: .875rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
html.dark .doc-alert {
|
||||
background: #022c22;
|
||||
color: #a7f3d0;
|
||||
border-color: #065f46;
|
||||
}
|
||||
|
||||
.doc-warning {
|
||||
border-radius: 1rem;
|
||||
padding: .875rem 1rem;
|
||||
background: #fffbeb;
|
||||
color: #92400e;
|
||||
border: 1px solid #fcd34d;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
html.dark .doc-warning {
|
||||
background: #451a03;
|
||||
color: #fef3c7;
|
||||
border-color: #92400e;
|
||||
}
|
||||
|
||||
.doc-filter {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 180px 220px auto;
|
||||
gap: .75rem;
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
.doc-content {
|
||||
line-height: 1.75;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.doc-content h1,
|
||||
.doc-content h2,
|
||||
.doc-content h3 {
|
||||
line-height: 1.2;
|
||||
letter-spacing: -.025em;
|
||||
margin: 1.4em 0 .55em;
|
||||
}
|
||||
|
||||
.doc-content h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.doc-content h2 {
|
||||
font-size: 1.55rem;
|
||||
border-bottom: 1px solid var(--doc-line);
|
||||
padding-bottom: .35rem;
|
||||
}
|
||||
|
||||
.doc-content h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.doc-content p,
|
||||
.doc-content ul,
|
||||
.doc-content ol,
|
||||
.doc-content blockquote,
|
||||
.doc-content pre {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.doc-content code {
|
||||
background: #f1f5f9;
|
||||
border-radius: .4375rem;
|
||||
padding: .14rem .32rem;
|
||||
font-size: .92em;
|
||||
}
|
||||
|
||||
html.dark .doc-content code {
|
||||
background: #1e293b;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.doc-content pre {
|
||||
overflow-x: auto;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.doc-content pre code {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.doc-content blockquote {
|
||||
border-left: 4px solid #2563eb;
|
||||
padding-left: 1rem;
|
||||
color: var(--doc-muted);
|
||||
}
|
||||
|
||||
.doc-content table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.doc-content th,
|
||||
.doc-content td {
|
||||
border: 1px solid var(--doc-line);
|
||||
padding: .625rem .75rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.doc-muted {
|
||||
color: var(--doc-muted);
|
||||
}
|
||||
|
||||
.doc-attachment-list {
|
||||
display: grid;
|
||||
gap: .625rem;
|
||||
}
|
||||
|
||||
.doc-attachment-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: .875rem;
|
||||
border: 1px solid var(--doc-line);
|
||||
border-radius: .875rem;
|
||||
padding: .75rem .875rem;
|
||||
background: var(--doc-panel);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.doc-hero-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.doc-grid.stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.doc-filter,
|
||||
.doc-form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.doc-table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.doc-grid.stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.doc-hero {
|
||||
padding: 1.375rem;
|
||||
border-radius: 1.375rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
document.addEventListener('click', function(event) {
|
||||
const button = event.target.closest('[data-md-before]');
|
||||
|
||||
if (!button) {
|
||||
return;
|
||||
}
|
||||
|
||||
const editor = button.closest('[data-documentation-editor]');
|
||||
const textarea = editor ? editor.querySelector('[data-markdown-textarea]') : null;
|
||||
|
||||
if (!textarea) {
|
||||
return;
|
||||
}
|
||||
|
||||
const before = button.getAttribute('data-md-before') || '';
|
||||
const after = button.getAttribute('data-md-after') || '';
|
||||
const start = textarea.selectionStart || 0;
|
||||
const end = textarea.selectionEnd || 0;
|
||||
const selected = textarea.value.substring(start, end);
|
||||
const replacement = before + selected + after;
|
||||
|
||||
textarea.setRangeText(replacement, start, end, 'end');
|
||||
textarea.focus();
|
||||
});
|
||||
@@ -1,659 +1,8 @@
|
||||
<x-layouts.app>
|
||||
<style>
|
||||
:root {
|
||||
--doc-ink: #18181b;
|
||||
--doc-muted: #71717a;
|
||||
--doc-line: #e4e4e7;
|
||||
--doc-panel: #ffffff;
|
||||
--doc-soft: #f4f4f5;
|
||||
--doc-brand: #2563eb;
|
||||
--doc-brand-dark: #1d4ed8;
|
||||
--doc-accent: #059669;
|
||||
--doc-danger: #dc2626;
|
||||
--doc-warning: #d97706;
|
||||
--doc-radius: 22px;
|
||||
--doc-shadow: 0 18px 55px rgba(15, 23, 42, .10);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--doc-ink: #f4f4f5;
|
||||
--doc-muted: #a1a1aa;
|
||||
--doc-line: #3f3f46;
|
||||
--doc-panel: #18181b;
|
||||
--doc-soft: #09090b;
|
||||
--doc-shadow: 0 18px 55px rgba(0, 0, 0, .28);
|
||||
}
|
||||
|
||||
body.documentation-module {
|
||||
margin: 0;
|
||||
background: #ffffff;
|
||||
color: var(--doc-ink);
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
html.dark body.documentation-module {
|
||||
background: #09090b;
|
||||
}
|
||||
|
||||
.doc-shell {
|
||||
max-width: 1800px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.doc-page {
|
||||
margin: 0 auto;
|
||||
max-width: 1800px;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.doc-hero-wrap {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--doc-line);
|
||||
border-radius: 1.5rem;
|
||||
background: var(--doc-panel);
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
|
||||
}
|
||||
|
||||
.doc-hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 1.75rem 1.5rem;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(135deg, #020617 0%, #0f172a 48%, #172554 100%);
|
||||
}
|
||||
|
||||
.doc-hero-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.doc-hero h1 {
|
||||
margin: .5rem 0 0;
|
||||
font-size: clamp(1.875rem, 4vw, 3rem);
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
letter-spacing: -.04em;
|
||||
}
|
||||
|
||||
.doc-eyebrow {
|
||||
margin: 0;
|
||||
color: #bfdbfe;
|
||||
text-transform: uppercase;
|
||||
font-size: .75rem;
|
||||
letter-spacing: .28em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.doc-hero p {
|
||||
max-width: 48rem;
|
||||
margin: .5rem 0 0;
|
||||
color: rgba(219, 234, 254, .9);
|
||||
font-size: .875rem;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.doc-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.doc-button {
|
||||
border: 1px solid transparent;
|
||||
border-radius: .75rem;
|
||||
padding: .625rem .875rem;
|
||||
font-weight: 700;
|
||||
font-size: .875rem;
|
||||
line-height: 1.25rem;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: .5rem;
|
||||
cursor: pointer;
|
||||
transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
|
||||
.doc-button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.doc-button.primary,
|
||||
.doc-button.register,
|
||||
.doc-button.dark {
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
|
||||
}
|
||||
|
||||
.doc-button.primary:hover,
|
||||
.doc-button.register:hover,
|
||||
.doc-button.dark:hover {
|
||||
background: #1d4ed8;
|
||||
border-color: #1d4ed8;
|
||||
}
|
||||
|
||||
.doc-button.secondary,
|
||||
.doc-button.category,
|
||||
.doc-button.settings {
|
||||
background: #7c3aed;
|
||||
color: #ffffff;
|
||||
border-color: #7c3aed;
|
||||
box-shadow: 0 8px 18px rgba(124, 58, 237, .22);
|
||||
}
|
||||
|
||||
.doc-button.secondary:hover,
|
||||
.doc-button.category:hover,
|
||||
.doc-button.settings:hover {
|
||||
background: #6d28d9;
|
||||
border-color: #6d28d9;
|
||||
}
|
||||
|
||||
.doc-button.light,
|
||||
.doc-button.cancel,
|
||||
.doc-button.warning {
|
||||
background: #f59e0b;
|
||||
color: #ffffff;
|
||||
border-color: #f59e0b;
|
||||
box-shadow: 0 8px 18px rgba(245, 158, 11, .22);
|
||||
}
|
||||
|
||||
.doc-button.light:hover,
|
||||
.doc-button.cancel:hover,
|
||||
.doc-button.warning:hover {
|
||||
background: #d97706;
|
||||
border-color: #d97706;
|
||||
}
|
||||
|
||||
.doc-button.success {
|
||||
background: #059669;
|
||||
color: #ffffff;
|
||||
border-color: #059669;
|
||||
box-shadow: 0 8px 18px rgba(5, 150, 105, .22);
|
||||
}
|
||||
|
||||
.doc-button.success:hover {
|
||||
background: #047857;
|
||||
border-color: #047857;
|
||||
}
|
||||
|
||||
.doc-button.danger {
|
||||
background: #dc2626;
|
||||
color: #ffffff;
|
||||
border-color: #dc2626;
|
||||
box-shadow: 0 8px 18px rgba(220, 38, 38, .22);
|
||||
}
|
||||
|
||||
.doc-button.danger:hover {
|
||||
background: #b91c1c;
|
||||
border-color: #b91c1c;
|
||||
}
|
||||
|
||||
.doc-card {
|
||||
background: var(--doc-panel);
|
||||
border: 1px solid var(--doc-line);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.doc-card-header {
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 1px solid var(--doc-line);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.doc-card-body {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.doc-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.doc-grid.stats {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.doc-stat {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.doc-stat strong {
|
||||
display: block;
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
letter-spacing: -.04em;
|
||||
color: var(--doc-ink);
|
||||
}
|
||||
|
||||
.doc-stat span {
|
||||
color: var(--doc-muted);
|
||||
font-size: .75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
}
|
||||
|
||||
.doc-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.doc-table th {
|
||||
text-align: left;
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
color: var(--doc-muted);
|
||||
padding: .75rem;
|
||||
border-bottom: 1px solid var(--doc-line);
|
||||
}
|
||||
|
||||
.doc-table td {
|
||||
padding: .875rem .75rem;
|
||||
border-bottom: 1px solid var(--doc-line);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.doc-table a,
|
||||
.doc-link {
|
||||
color: #1d4ed8;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
html.dark .doc-table a,
|
||||
html.dark .doc-link {
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.doc-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: 999px;
|
||||
padding: .25rem .625rem;
|
||||
font-size: .75rem;
|
||||
font-weight: 800;
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
border: 1px solid #bfdbfe;
|
||||
}
|
||||
|
||||
.doc-badge.published {
|
||||
background: #ecfdf5;
|
||||
color: #065f46;
|
||||
border-color: #a7f3d0;
|
||||
}
|
||||
|
||||
.doc-badge.draft {
|
||||
background: #f4f4f5;
|
||||
color: #52525b;
|
||||
border-color: #d4d4d8;
|
||||
}
|
||||
|
||||
.doc-badge.archived {
|
||||
background: #fef2f2;
|
||||
color: #991b1b;
|
||||
border-color: #fecaca;
|
||||
}
|
||||
|
||||
html.dark .doc-badge {
|
||||
background: rgba(37, 99, 235, .18);
|
||||
color: #bfdbfe;
|
||||
border-color: rgba(59, 130, 246, .35);
|
||||
}
|
||||
|
||||
html.dark .doc-badge.published {
|
||||
background: rgba(5, 150, 105, .18);
|
||||
color: #a7f3d0;
|
||||
border-color: rgba(16, 185, 129, .35);
|
||||
}
|
||||
|
||||
html.dark .doc-badge.draft {
|
||||
background: rgba(113, 113, 122, .18);
|
||||
color: #d4d4d8;
|
||||
border-color: rgba(161, 161, 170, .30);
|
||||
}
|
||||
|
||||
html.dark .doc-badge.archived {
|
||||
background: rgba(220, 38, 38, .16);
|
||||
color: #fecaca;
|
||||
border-color: rgba(248, 113, 113, .32);
|
||||
}
|
||||
|
||||
.doc-form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.doc-field.full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.doc-label {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
margin-bottom: .5rem;
|
||||
font-size: .875rem;
|
||||
color: var(--doc-ink);
|
||||
}
|
||||
|
||||
.doc-input,
|
||||
.doc-select,
|
||||
.doc-textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #d4d4d8;
|
||||
border-radius: .75rem;
|
||||
padding: .75rem .875rem;
|
||||
background: #ffffff;
|
||||
color: #18181b;
|
||||
font: inherit;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
|
||||
}
|
||||
|
||||
.doc-input:focus,
|
||||
.doc-select:focus,
|
||||
.doc-textarea:focus {
|
||||
outline: 2px solid rgba(37, 99, 235, .24);
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
html.dark .doc-input,
|
||||
html.dark .doc-select,
|
||||
html.dark .doc-textarea {
|
||||
background: #09090b;
|
||||
color: #f4f4f5;
|
||||
border-color: #3f3f46;
|
||||
}
|
||||
|
||||
.doc-textarea {
|
||||
min-height: 360px;
|
||||
line-height: 1.6;
|
||||
resize: vertical;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
.doc-editor {
|
||||
border: 1px solid #d4d4d8;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
html.dark .doc-editor {
|
||||
background: #09090b;
|
||||
border-color: #3f3f46;
|
||||
}
|
||||
|
||||
.doc-editor .doc-textarea {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
min-height: 420px;
|
||||
}
|
||||
|
||||
.doc-editor-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .375rem;
|
||||
padding: .625rem;
|
||||
background: #f4f4f5;
|
||||
border-bottom: 1px solid var(--doc-line);
|
||||
}
|
||||
|
||||
html.dark .doc-editor-toolbar {
|
||||
background: #18181b;
|
||||
}
|
||||
|
||||
.doc-editor-toolbar button {
|
||||
border: 1px solid #d4d4d8;
|
||||
background: #ffffff;
|
||||
color: #18181b;
|
||||
border-radius: .625rem;
|
||||
padding: .45rem .625rem;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
html.dark .doc-editor-toolbar button {
|
||||
border-color: #3f3f46;
|
||||
background: #09090b;
|
||||
color: #f4f4f5;
|
||||
}
|
||||
|
||||
.doc-editor-toolbar button:hover,
|
||||
.doc-editor-toolbar button:focus {
|
||||
border-color: #2563eb;
|
||||
outline: 2px solid rgba(37, 99, 235, .20);
|
||||
}
|
||||
|
||||
.editor-help {
|
||||
padding: 0 .875rem .75rem;
|
||||
margin: -.25rem 0 0;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
.doc-error {
|
||||
color: #dc2626;
|
||||
font-size: .8125rem;
|
||||
margin-top: .375rem;
|
||||
}
|
||||
|
||||
.doc-alert {
|
||||
border-radius: 1rem;
|
||||
padding: .875rem 1rem;
|
||||
background: #ecfdf5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
font-size: .875rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
html.dark .doc-alert {
|
||||
background: #022c22;
|
||||
color: #a7f3d0;
|
||||
border-color: #065f46;
|
||||
}
|
||||
|
||||
.doc-warning {
|
||||
border-radius: 1rem;
|
||||
padding: .875rem 1rem;
|
||||
background: #fffbeb;
|
||||
color: #92400e;
|
||||
border: 1px solid #fcd34d;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
html.dark .doc-warning {
|
||||
background: #451a03;
|
||||
color: #fef3c7;
|
||||
border-color: #92400e;
|
||||
}
|
||||
|
||||
.doc-filter {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 180px 220px auto;
|
||||
gap: .75rem;
|
||||
margin-bottom: 1.125rem;
|
||||
}
|
||||
|
||||
.doc-content {
|
||||
line-height: 1.75;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.doc-content h1,
|
||||
.doc-content h2,
|
||||
.doc-content h3 {
|
||||
line-height: 1.2;
|
||||
letter-spacing: -.025em;
|
||||
margin: 1.4em 0 .55em;
|
||||
}
|
||||
|
||||
.doc-content h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.doc-content h2 {
|
||||
font-size: 1.55rem;
|
||||
border-bottom: 1px solid var(--doc-line);
|
||||
padding-bottom: .35rem;
|
||||
}
|
||||
|
||||
.doc-content h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.doc-content p,
|
||||
.doc-content ul,
|
||||
.doc-content ol,
|
||||
.doc-content blockquote,
|
||||
.doc-content pre {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.doc-content code {
|
||||
background: #f1f5f9;
|
||||
border-radius: .4375rem;
|
||||
padding: .14rem .32rem;
|
||||
font-size: .92em;
|
||||
}
|
||||
|
||||
html.dark .doc-content code {
|
||||
background: #1e293b;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.doc-content pre {
|
||||
overflow-x: auto;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
border-radius: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.doc-content pre code {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.doc-content blockquote {
|
||||
border-left: 4px solid #2563eb;
|
||||
padding-left: 1rem;
|
||||
color: var(--doc-muted);
|
||||
}
|
||||
|
||||
.doc-content table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.doc-content th,
|
||||
.doc-content td {
|
||||
border: 1px solid var(--doc-line);
|
||||
padding: .625rem .75rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.doc-muted {
|
||||
color: var(--doc-muted);
|
||||
}
|
||||
|
||||
.doc-attachment-list {
|
||||
display: grid;
|
||||
gap: .625rem;
|
||||
}
|
||||
|
||||
.doc-attachment-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: .875rem;
|
||||
border: 1px solid var(--doc-line);
|
||||
border-radius: .875rem;
|
||||
padding: .75rem .875rem;
|
||||
background: var(--doc-panel);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.doc-hero-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.doc-grid.stats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.doc-filter,
|
||||
.doc-form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.doc-table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.doc-grid.stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.doc-hero {
|
||||
padding: 1.375rem;
|
||||
border-radius: 1.375rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="mx-auto max-w-[1800px] space-y-6" dusk="documentation-module">
|
||||
@yield('content')
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('click', function(event) {
|
||||
const button = event.target.closest('[data-md-before]');
|
||||
|
||||
if (!button) {
|
||||
return;
|
||||
}
|
||||
|
||||
const editor = button.closest('[data-documentation-editor]');
|
||||
const textarea = editor ? editor.querySelector('[data-markdown-textarea]') : null;
|
||||
|
||||
if (!textarea) {
|
||||
return;
|
||||
}
|
||||
|
||||
const before = button.getAttribute('data-md-before') || '';
|
||||
const after = button.getAttribute('data-md-after') || '';
|
||||
const start = textarea.selectionStart || 0;
|
||||
const end = textarea.selectionEnd || 0;
|
||||
const selected = textarea.value.substring(start, end);
|
||||
const replacement = before + selected + after;
|
||||
|
||||
textarea.setRangeText(replacement, start, end, 'end');
|
||||
textarea.focus();
|
||||
});
|
||||
</script>
|
||||
</x-layouts.app>
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"private": true,
|
||||
"type": "module"
|
||||
}
|
||||
@@ -32,6 +32,8 @@ final class SettingsManager extends Component
|
||||
{
|
||||
public string $section = 'statuses';
|
||||
|
||||
public bool $teamModalOpen = false;
|
||||
|
||||
/** @var array<string, mixed> */
|
||||
public array $statusForm = ['id' => null, 'name' => '', 'slug' => '', 'color' => 'gray', 'sort_order' => 0, 'is_closed' => false, 'is_default' => false];
|
||||
|
||||
@@ -321,6 +323,7 @@ final class SettingsManager extends Component
|
||||
}
|
||||
|
||||
$this->resetTeamForm();
|
||||
$this->teamModalOpen = false;
|
||||
$this->section = 'teams';
|
||||
|
||||
session()->flash('success', 'Team saved successfully.');
|
||||
@@ -333,6 +336,22 @@ final class SettingsManager extends Component
|
||||
$this->teamForm['user_ids'] = $team->users->pluck('id')->map(static fn ($id): int => (int) $id)->all();
|
||||
$this->teamForm['color'] = Color::normalise($this->teamForm['color'] ?? 'indigo');
|
||||
$this->section = 'teams';
|
||||
$this->teamModalOpen = true;
|
||||
}
|
||||
|
||||
public function openCreateTeamModal(): void
|
||||
{
|
||||
$this->resetValidation();
|
||||
$this->resetTeamForm();
|
||||
$this->section = 'teams';
|
||||
$this->teamModalOpen = true;
|
||||
}
|
||||
|
||||
public function closeTeamModal(): void
|
||||
{
|
||||
$this->resetValidation();
|
||||
$this->resetTeamForm();
|
||||
$this->teamModalOpen = false;
|
||||
}
|
||||
|
||||
public function deleteTeam(int $id): void
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@source "../../../../../resources/themes/backend/views/modules/user-management/**/*.blade.php";
|
||||
@source "../../../Http/**/*.php";
|
||||
@@ -0,0 +1 @@
|
||||
// User Management module JavaScript entry point.
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"private": true,
|
||||
"type": "module"
|
||||
}
|
||||
+4
-1
@@ -4,7 +4,10 @@
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "vite build --config ./vite.config.js",
|
||||
"dev": "vite --config ./vite.config.js"
|
||||
"dev": "vite --config ./vite.config.js",
|
||||
"modules:install": "node scripts/install-module-dependencies.mjs",
|
||||
"prebuild": "npm run modules:install",
|
||||
"predev": "npm run modules:install"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^7.0.0",
|
||||
|
||||
@@ -15,17 +15,24 @@
|
||||
<p class="mt-1 max-w-3xl text-xs font-medium leading-5 text-blue-100/90 sm:text-sm">{{ $description }}</p>
|
||||
</div>
|
||||
|
||||
<span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-white/10 text-blue-100 shadow-inner">
|
||||
<i class="fa-solid fa-sliders text-xs" aria-hidden="true"></i>
|
||||
</span>
|
||||
<div class="flex shrink-0 items-center gap-2">
|
||||
@isset($actions)
|
||||
{{ $actions }}
|
||||
@endisset
|
||||
<span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-white/10 text-blue-100 shadow-inner">
|
||||
<i class="fa-solid fa-sliders text-xs" aria-hidden="true"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-b border-zinc-200 bg-zinc-50 px-3 py-3 dark:border-zinc-800 dark:bg-zinc-950/45 sm:px-4">
|
||||
<div class="mx-auto max-w-7xl rounded-xl border border-zinc-200 bg-white p-3 shadow-sm dark:border-zinc-700 dark:bg-zinc-900/90 sm:p-4 [&_input:not([type='checkbox']):not([type='radio']):not([type='color'])]:min-h-9 [&_textarea]:min-h-20 [&_textarea]:leading-6">
|
||||
{{ $form }}
|
||||
@isset($form)
|
||||
<div class="border-b border-zinc-200 bg-zinc-50 px-3 py-3 dark:border-zinc-800 dark:bg-zinc-950/45 sm:px-4">
|
||||
<div class="mx-auto max-w-7xl rounded-xl border border-zinc-200 bg-white p-3 shadow-sm dark:border-zinc-700 dark:bg-zinc-900/90 sm:p-4 [&_input:not([type='checkbox']):not([type='radio']):not([type='color'])]:min-h-9 [&_textarea]:min-h-20 [&_textarea]:leading-6">
|
||||
{{ $form }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endisset
|
||||
|
||||
<div class="bg-white dark:bg-zinc-900">
|
||||
{{ $slot }}
|
||||
|
||||
+97
-56
@@ -223,73 +223,114 @@
|
||||
@if ($section === 'teams')
|
||||
<x-helpdesk.settings-section title="Teams"
|
||||
description="Create support teams, assign users and organise projects.">
|
||||
<x-slot:form>
|
||||
<form wire:submit.prevent="saveTeam" class="grid gap-3 xl:grid-cols-12">
|
||||
<div class="xl:col-span-3">
|
||||
</div>
|
||||
<div class="xl:col-span-3">
|
||||
<flux:input wire:model="teamForm.name" label="Name" />
|
||||
</div>
|
||||
<div class="xl:col-span-3">
|
||||
<flux:input wire:model="teamForm.slug" label="Slug" placeholder="auto-generated" />
|
||||
</div>
|
||||
<x-helpdesk.colour-select class="xl:col-span-12" model="teamForm.color" label="Badge colour" :options="$colourOptions" />
|
||||
<div class="xl:col-span-12">
|
||||
<flux:textarea wire:model="teamForm.description" label="Description" rows="3" />
|
||||
</div>
|
||||
<div class="xl:col-span-12">
|
||||
<div class="rounded-xl border border-zinc-700/80 bg-zinc-950/35 p-4">
|
||||
<div class="mb-3 flex flex-wrap items-center justify-between gap-2">
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-zinc-100">Team members</div>
|
||||
<div class="mt-0.5 text-xs text-zinc-500">Select one or more users to assign to this team.</div>
|
||||
</div>
|
||||
<div class="rounded-full bg-blue-500/10 px-2.5 py-1 text-xs font-semibold text-blue-300">
|
||||
{{ count($teamForm['user_ids'] ?? []) }} selected
|
||||
</div>
|
||||
</div>
|
||||
<x-slot:actions>
|
||||
<flux:button
|
||||
size="sm"
|
||||
type="button"
|
||||
wire:click="openCreateTeamModal"
|
||||
variant="primary"
|
||||
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60"
|
||||
>
|
||||
<i class="fa-solid fa-plus mr-1" aria-hidden="true"></i>
|
||||
Create team
|
||||
</flux:button>
|
||||
</x-slot:actions>
|
||||
|
||||
<div class="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
|
||||
@forelse ($teamUsers as $teamUser)
|
||||
<label class="flex cursor-pointer items-center gap-3 rounded-lg border border-zinc-700 bg-zinc-900/60 p-3 transition hover:border-blue-500/60 hover:bg-zinc-900">
|
||||
<input
|
||||
type="checkbox"
|
||||
wire:model="teamForm.user_ids"
|
||||
value="{{ $teamUser->id }}"
|
||||
class="h-4 w-4 rounded border-zinc-600 bg-zinc-950 text-blue-600 focus:ring-blue-500"
|
||||
>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="truncate text-sm font-semibold text-zinc-100">{{ $teamUser->name }}</div>
|
||||
<div class="truncate text-xs text-zinc-500">{{ $teamUser->email }}</div>
|
||||
</div>
|
||||
@if ($teamUser->helpdesk_admin)
|
||||
<span class="rounded-full bg-purple-500/10 px-2 py-0.5 text-[10px] font-bold uppercase text-purple-300">Admin</span>
|
||||
@elseif ($teamUser->helpdesk_agent)
|
||||
<span class="rounded-full bg-blue-500/10 px-2 py-0.5 text-[10px] font-bold uppercase text-blue-300">Agent</span>
|
||||
@endif
|
||||
</label>
|
||||
@empty
|
||||
<div class="text-sm text-zinc-500">No users are available.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
<x-helpdesk.team-table :items="$teams" />
|
||||
|
||||
<flux:modal
|
||||
name="helpdesk-team-editor"
|
||||
wire:model="teamModalOpen"
|
||||
class="w-full max-w-5xl"
|
||||
@close="closeTeamModal"
|
||||
>
|
||||
<form wire:submit="saveTeam" class="space-y-5">
|
||||
<div class="flex items-start justify-between gap-4 border-b border-zinc-200 pb-4 dark:border-zinc-700">
|
||||
<div>
|
||||
<flux:heading size="lg">
|
||||
{{ filled($teamForm['id'] ?? null) ? 'Edit team' : 'Create team' }}
|
||||
</flux:heading>
|
||||
<flux:subheading class="mt-1">
|
||||
Configure team details and choose the users who belong to it.
|
||||
</flux:subheading>
|
||||
</div>
|
||||
</div>
|
||||
<label class="flex min-h-9 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200 xl:col-span-4">
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<flux:input wire:model="teamForm.name" label="Name" />
|
||||
<flux:input wire:model="teamForm.slug" label="Slug" placeholder="auto-generated" />
|
||||
</div>
|
||||
|
||||
<x-helpdesk.colour-select model="teamForm.color" label="Badge colour" :options="$colourOptions" />
|
||||
|
||||
<flux:textarea wire:model="teamForm.description" label="Description" rows="3" />
|
||||
|
||||
<div class="rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-700 dark:bg-zinc-950/55">
|
||||
<div class="mb-3 flex flex-wrap items-center justify-between gap-2">
|
||||
<div>
|
||||
<div class="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Team members</div>
|
||||
<div class="mt-0.5 text-xs text-zinc-500">Select one or more users to assign to this team.</div>
|
||||
</div>
|
||||
<div class="rounded-full bg-blue-500/10 px-2.5 py-1 text-xs font-semibold text-blue-600 dark:text-blue-300">
|
||||
{{ count($teamForm['user_ids'] ?? []) }} selected
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid max-h-72 gap-2 overflow-y-auto pr-1 sm:grid-cols-2 xl:grid-cols-3">
|
||||
@forelse ($teamUsers as $teamUser)
|
||||
<label class="flex cursor-pointer items-center gap-3 rounded-lg border border-zinc-200 bg-white p-3 transition hover:border-blue-500/60 dark:border-zinc-700 dark:bg-zinc-900/70 dark:hover:border-blue-500/60">
|
||||
<input
|
||||
type="checkbox"
|
||||
wire:model="teamForm.user_ids"
|
||||
value="{{ $teamUser->id }}"
|
||||
class="h-4 w-4 rounded border-zinc-600 bg-zinc-950 text-blue-600 focus:ring-blue-500"
|
||||
>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100">{{ $teamUser->name }}</div>
|
||||
<div class="truncate text-xs text-zinc-500">{{ $teamUser->email }}</div>
|
||||
</div>
|
||||
@if ($teamUser->helpdesk_admin)
|
||||
<span class="rounded-full bg-purple-500/10 px-2 py-0.5 text-[10px] font-bold uppercase text-purple-600 dark:text-purple-300">Admin</span>
|
||||
@elseif ($teamUser->helpdesk_agent)
|
||||
<span class="rounded-full bg-blue-500/10 px-2 py-0.5 text-[10px] font-bold uppercase text-blue-600 dark:text-blue-300">Agent</span>
|
||||
@endif
|
||||
</label>
|
||||
@empty
|
||||
<div class="text-sm text-zinc-500">No users are available.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="flex min-h-10 items-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm font-semibold text-zinc-700 shadow-sm dark:border-zinc-700 dark:bg-zinc-950/60 dark:text-zinc-200">
|
||||
<input type="checkbox" wire:model="teamForm.is_default"
|
||||
class="rounded border-zinc-300 bg-zinc-950 text-blue-600 focus:ring-blue-500">
|
||||
Default team for new tickets
|
||||
</label>
|
||||
<div class="flex flex-wrap items-center gap-2 xl:col-span-12">
|
||||
<flux:button size="sm" type="submit" variant="primary"
|
||||
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-green-600 !text-white hover:!bg-green-700 focus:!ring-green-400/60">Save team
|
||||
|
||||
@error('teamForm.name')
|
||||
<div class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-300">{{ $message }}</div>
|
||||
@enderror
|
||||
@error('teamForm.slug')
|
||||
<div class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-300">{{ $message }}</div>
|
||||
@enderror
|
||||
@error('teamForm.color')
|
||||
<div class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-300">{{ $message }}</div>
|
||||
@enderror
|
||||
@error('teamForm.user_ids.*')
|
||||
<div class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-600 dark:text-red-300">{{ $message }}</div>
|
||||
@enderror
|
||||
|
||||
<div class="flex flex-wrap justify-end gap-2 border-t border-zinc-200 pt-4 dark:border-zinc-700">
|
||||
<flux:button type="button" variant="ghost" wire:click="closeTeamModal">
|
||||
Cancel
|
||||
</flux:button>
|
||||
<flux:button size="sm" type="button" wire:click="resetTeamForm" variant="ghost"
|
||||
class="!h-9 !rounded-lg !px-3 !text-xs !font-semibold !bg-amber-500 !text-white hover:!bg-amber-600 focus:!ring-amber-300/60">Reset
|
||||
<flux:button type="submit" variant="primary"
|
||||
class="!bg-green-600 !text-white hover:!bg-green-700">
|
||||
{{ filled($teamForm['id'] ?? null) ? 'Save changes' : 'Create team' }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
</x-slot:form>
|
||||
<x-helpdesk.team-table :items="$teams" />
|
||||
</flux:modal>
|
||||
</x-helpdesk.settings-section>
|
||||
@endif
|
||||
|
||||
|
||||
@@ -3,9 +3,37 @@
|
||||
<title>{{ filled($title ?? null) ? $title.' - '.config('app.name', 'Laravel') : config('app.name', 'Laravel') }}</title>
|
||||
<link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" href="/favicon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
@fonts
|
||||
@vite([
|
||||
'resources/themes/backend/assets/css/app.css',
|
||||
'resources/themes/backend/assets/js/passkeys.js',
|
||||
'resources/themes/backend/assets/js/layout.js',
|
||||
])
|
||||
@php
|
||||
$viteAssets = [
|
||||
'resources/themes/backend/assets/css/app.css',
|
||||
'resources/themes/backend/assets/js/passkeys.js',
|
||||
'resources/themes/backend/assets/js/layout.js',
|
||||
];
|
||||
|
||||
$moduleStatuses = [];
|
||||
$moduleStatusFile = base_path('modules_statuses.json');
|
||||
|
||||
if (is_file($moduleStatusFile)) {
|
||||
$moduleStatuses = json_decode((string) file_get_contents($moduleStatusFile), true) ?: [];
|
||||
}
|
||||
|
||||
foreach (glob(base_path('Modules/*'), GLOB_ONLYDIR) ?: [] as $moduleDirectory) {
|
||||
$moduleName = basename($moduleDirectory);
|
||||
|
||||
if (array_key_exists($moduleName, $moduleStatuses) && ! $moduleStatuses[$moduleName]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
foreach (['Resources/assets/css/app.css', 'Resources/assets/js/app.js'] as $entry) {
|
||||
$absoluteEntry = $moduleDirectory.DIRECTORY_SEPARATOR.str_replace('/', DIRECTORY_SEPARATOR, $entry);
|
||||
|
||||
if (is_file($absoluteEntry)) {
|
||||
$viteAssets[] = str_replace('\\', '/', substr($absoluteEntry, strlen(base_path()) + 1));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$viteAssets = array_values(array_unique($viteAssets));
|
||||
@endphp
|
||||
@vite($viteAssets)
|
||||
@fluxAppearance
|
||||
|
||||
@@ -1,54 +1,31 @@
|
||||
import {
|
||||
existsSync,
|
||||
readdirSync,
|
||||
realpathSync,
|
||||
statSync,
|
||||
} from 'node:fs';
|
||||
import { existsSync, readdirSync, statSync } from 'node:fs';
|
||||
import { join } from 'node:path';
|
||||
import { spawnSync } from 'node:child_process';
|
||||
import { execFileSync } from 'node:child_process';
|
||||
|
||||
const modulesPath = join(process.cwd(), 'Modules');
|
||||
const modulesDirectory = join(process.cwd(), 'Modules');
|
||||
|
||||
if (!existsSync(modulesPath)) {
|
||||
if (!existsSync(modulesDirectory)) {
|
||||
process.exit(0);
|
||||
}
|
||||
|
||||
const installed = new Set();
|
||||
for (const moduleName of readdirSync(modulesDirectory).sort()) {
|
||||
const moduleDirectory = join(modulesDirectory, moduleName);
|
||||
|
||||
for (const moduleName of readdirSync(modulesPath)) {
|
||||
const modulePath = join(modulesPath, moduleName);
|
||||
|
||||
if (!statSync(modulePath).isDirectory()) {
|
||||
if (!statSync(moduleDirectory).isDirectory()) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const packageJson = join(modulePath, 'package.json');
|
||||
const packageLock = join(modulePath, 'package-lock.json');
|
||||
const lockFile = join(moduleDirectory, 'package-lock.json');
|
||||
const packageFile = join(moduleDirectory, 'package.json');
|
||||
|
||||
if (!existsSync(packageJson) || !existsSync(packageLock)) {
|
||||
if (!existsSync(lockFile) || !existsSync(packageFile)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const physicalModulePath = realpathSync(modulePath);
|
||||
console.log(`[modules] Installing ${moduleName} dependencies`);
|
||||
|
||||
if (installed.has(physicalModulePath)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
installed.add(physicalModulePath);
|
||||
|
||||
console.log(`[Modules] Installing npm dependencies for ${moduleName}...`);
|
||||
|
||||
const result = spawnSync(
|
||||
'npm',
|
||||
['ci', '--no-audit', '--no-fund'],
|
||||
{
|
||||
cwd: modulePath,
|
||||
stdio: 'inherit',
|
||||
},
|
||||
);
|
||||
|
||||
if (result.status !== 0) {
|
||||
process.exit(result.status ?? 1);
|
||||
}
|
||||
execFileSync('npm', ['ci', '--no-audit', '--no-fund'], {
|
||||
cwd: moduleDirectory,
|
||||
stdio: 'inherit',
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user