feat(helpdesk): polish handover schema editor UI/UX
Auto-generate field keys and option values from labels via slugify, add live preview panel with hover-highlight, insert-between-fields dividers, and various spacing/styling improvements. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2336,7 +2336,140 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Handover protocol schema editor */
|
||||
/* Handover protocol schema editor — split layout */
|
||||
.handover-schema-split {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--app-spacing);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.handover-schema-split {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.handover-schema-split-preview {
|
||||
border: 1px solid var(--app-card-border-color);
|
||||
border-radius: var(--app-border-radius);
|
||||
background: var(--app-card-background-color);
|
||||
position: sticky;
|
||||
top: calc(var(--app-topbar-height) + var(--app-spacing) * 5);
|
||||
}
|
||||
|
||||
.handover-schema-preview-header {
|
||||
font-weight: 600;
|
||||
padding: calc(var(--app-spacing) * 0.6) calc(var(--app-spacing) * 0.75);
|
||||
border-bottom: 1px solid var(--app-card-border-color);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.handover-schema-preview {
|
||||
padding: calc(var(--app-spacing) * 0.75);
|
||||
}
|
||||
|
||||
.handover-schema-preview-empty {
|
||||
color: var(--app-muted-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.handover-schema-preview-form {
|
||||
display: grid;
|
||||
gap: calc(var(--app-spacing) * 0.6);
|
||||
}
|
||||
|
||||
.handover-schema-preview-form h3 {
|
||||
margin: calc(var(--app-spacing) * 0.25) 0 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.handover-schema-preview-form p {
|
||||
margin: 0;
|
||||
color: var(--app-muted-color);
|
||||
}
|
||||
|
||||
.handover-schema-preview-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(var(--app-spacing) * 0.15);
|
||||
}
|
||||
|
||||
.handover-schema-preview-field label {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.handover-schema-preview-field input:not([type="checkbox"]),
|
||||
.handover-schema-preview-field textarea,
|
||||
.handover-schema-preview-field select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.handover-schema-preview-field:has(> input[type="checkbox"]) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.handover-schema-preview-field > input[type="checkbox"] {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.handover-schema-preview-form [data-field-index] {
|
||||
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
||||
border-radius: var(--app-border-radius);
|
||||
padding: calc(var(--app-spacing) * 0.3);
|
||||
margin: calc(var(--app-spacing) * -0.3);
|
||||
}
|
||||
|
||||
.handover-schema-preview-highlight {
|
||||
background-color: var(--app-secondary-focus);
|
||||
box-shadow: inset 0 0 0 1px var(--app-card-border-color);
|
||||
}
|
||||
|
||||
.handover-schema-preview-required {
|
||||
color: var(--app-danger-color, hsl(0 70% 55%));
|
||||
}
|
||||
|
||||
/* Handover protocol schema editor — reset core margin on buttons/inputs/selects */
|
||||
.handover-schema-split-editor button[type="button"],
|
||||
.handover-schema-row select,
|
||||
.handover-schema-row input,
|
||||
.handover-schema-row textarea,
|
||||
.handover-schema-row label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Handover protocol schema editor — insert divider */
|
||||
.handover-schema-insert-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: calc(var(--app-spacing) * 0.5);
|
||||
padding: calc(var(--app-spacing) * 0.25) 0;
|
||||
}
|
||||
|
||||
.handover-schema-insert-divider::before,
|
||||
.handover-schema-insert-divider::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: var(--app-card-border-color);
|
||||
}
|
||||
|
||||
.handover-schema-insert-button {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
font-size: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Handover protocol schema editor — field cards */
|
||||
.handover-schema-empty {
|
||||
color: var(--app-muted-color);
|
||||
font-style: italic;
|
||||
@@ -2345,31 +2478,41 @@
|
||||
|
||||
.handover-schema-list {
|
||||
display: grid;
|
||||
gap: calc(var(--app-spacing) * 0.5);
|
||||
margin-bottom: calc(var(--app-spacing) * 0.75);
|
||||
gap: calc(var(--app-spacing) * 0.75);
|
||||
margin-bottom: var(--app-spacing);
|
||||
}
|
||||
|
||||
.handover-schema-row {
|
||||
border: 1px solid var(--app-card-border-color);
|
||||
border-radius: var(--app-border-radius);
|
||||
padding: calc(var(--app-spacing) * 0.5);
|
||||
padding: calc(var(--app-spacing) * 0.75);
|
||||
background: var(--app-card-background-color);
|
||||
}
|
||||
|
||||
.handover-schema-row-header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: calc(var(--app-spacing) * 0.5);
|
||||
margin-bottom: calc(var(--app-spacing) * 0.5);
|
||||
}
|
||||
|
||||
.handover-schema-row-title {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: var(--app-muted-color);
|
||||
}
|
||||
|
||||
.handover-schema-row-actions {
|
||||
display: flex;
|
||||
gap: calc(var(--app-spacing) * 0.25);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.handover-schema-row > .handover-schema-field-group {
|
||||
margin-bottom: calc(var(--app-spacing) * 0.5);
|
||||
}
|
||||
|
||||
.handover-schema-row-body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
@@ -2377,10 +2520,14 @@
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.handover-schema-row-required {
|
||||
margin-top: calc(var(--app-spacing) * 0.4);
|
||||
}
|
||||
|
||||
.handover-schema-field-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(var(--app-spacing) * 0.15);
|
||||
gap: calc(var(--app-spacing) * 0.2);
|
||||
}
|
||||
|
||||
.handover-schema-field-label {
|
||||
@@ -2400,26 +2547,30 @@
|
||||
align-items: center;
|
||||
gap: calc(var(--app-spacing) * 0.25);
|
||||
cursor: pointer;
|
||||
padding-top: calc(var(--app-spacing) * 0.25);
|
||||
}
|
||||
|
||||
.handover-schema-options {
|
||||
margin-top: calc(var(--app-spacing) * 0.5);
|
||||
padding-top: calc(var(--app-spacing) * 0.5);
|
||||
margin-top: calc(var(--app-spacing) * 0.65);
|
||||
padding-top: calc(var(--app-spacing) * 0.65);
|
||||
border-top: 1px solid var(--app-card-border-color);
|
||||
}
|
||||
|
||||
.handover-schema-options > strong {
|
||||
display: block;
|
||||
.handover-schema-options-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: calc(var(--app-spacing) * 0.4);
|
||||
}
|
||||
|
||||
.handover-schema-options-header > strong {
|
||||
font-size: 0.8125rem;
|
||||
margin-bottom: calc(var(--app-spacing) * 0.25);
|
||||
}
|
||||
|
||||
.handover-schema-option-row {
|
||||
display: flex;
|
||||
gap: calc(var(--app-spacing) * 0.25);
|
||||
gap: calc(var(--app-spacing) * 0.35);
|
||||
align-items: center;
|
||||
margin-bottom: calc(var(--app-spacing) * 0.25);
|
||||
margin-bottom: calc(var(--app-spacing) * 0.35);
|
||||
}
|
||||
|
||||
.handover-schema-option-row input[type="text"] {
|
||||
@@ -2427,22 +2578,4 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.handover-schema-add-button,
|
||||
.handover-schema-add-option-button {
|
||||
margin-top: calc(var(--app-spacing) * 0.25);
|
||||
}
|
||||
|
||||
.handover-schema-button-move,
|
||||
.handover-schema-button-remove,
|
||||
.handover-schema-button-remove-option {
|
||||
padding: calc(var(--app-spacing) * 0.15) calc(var(--app-spacing) * 0.35);
|
||||
font-size: 0.8125rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.handover-schema-button-remove,
|
||||
.handover-schema-button-remove-option {
|
||||
color: var(--app-del-color, #c62828);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user