feat(helpdesk): add handover revision history with timeline, diff, and restore
Every save creates an immutable revision snapshot. The aside shows a commit-graph-style timeline (newest first) with vertical line, circle nodes, version numbers, change type, user, and date. Clicking a past revision renders it readonly with inline git-diff-style highlights (changed/added/removed with tinted backgrounds). Compare mode allows diffing any two arbitrary revisions. MANAGE users can restore old versions, which creates a new revision preserving full history. New: HandoverRevisionService, HandoverRevisionRepository, migration 006, 14 PHPUnit tests, DE/EN translations. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -2738,6 +2738,17 @@
|
||||
border-top: 1px solid var(--app-card-border-color, #e5e7eb);
|
||||
}
|
||||
|
||||
/* Handover aside — subtle links in hgroup */
|
||||
.app-details-aside-section hgroup a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app-details-aside-section hgroup a:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.15em;
|
||||
}
|
||||
|
||||
/* Handover form — shared styles */
|
||||
.handover-form-heading {
|
||||
margin-top: calc(var(--app-spacing) * 1.25);
|
||||
@@ -2775,4 +2786,217 @@
|
||||
padding: var(--app-spacing);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Revision timeline (commit graph) ────────────────────────────── */
|
||||
|
||||
.handover-revision-timeline {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
/* Vertical line */
|
||||
.handover-revision-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0.4375rem;
|
||||
top: 0.5rem;
|
||||
bottom: 0.5rem;
|
||||
width: 2px;
|
||||
background: var(--app-border);
|
||||
}
|
||||
|
||||
.handover-revision-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
padding: calc(var(--app-spacing) * 0.4) 0;
|
||||
}
|
||||
|
||||
/* Circle node */
|
||||
.handover-revision-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -1.25rem;
|
||||
top: calc(var(--app-spacing) * 0.4 + 0.35rem);
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--app-border);
|
||||
background: var(--app-background-color);
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.handover-revision-item.is-active::before {
|
||||
border-color: var(--app-primary);
|
||||
background: var(--app-primary);
|
||||
}
|
||||
|
||||
.handover-revision-item:first-child::before {
|
||||
border-color: var(--app-primary);
|
||||
background: var(--app-primary);
|
||||
}
|
||||
|
||||
.handover-revision-link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: calc(var(--app-spacing) * 0.25) calc(var(--app-spacing) * 0.4);
|
||||
border-radius: var(--app-border-radius);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.handover-revision-link:hover {
|
||||
background: color-mix(in srgb, var(--app-primary) 6%, transparent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.handover-revision-item.is-active .handover-revision-link {
|
||||
background: color-mix(in srgb, var(--app-primary) 10%, transparent);
|
||||
}
|
||||
|
||||
.handover-revision-compare {
|
||||
flex-shrink: 0;
|
||||
padding: 0.2rem;
|
||||
margin-top: calc(var(--app-spacing) * 0.25);
|
||||
color: var(--app-muted-color);
|
||||
text-decoration: none;
|
||||
border-radius: var(--app-border-radius);
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.handover-revision-item:hover .handover-revision-compare {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.handover-revision-compare:hover {
|
||||
color: var(--app-primary);
|
||||
}
|
||||
|
||||
.handover-revision-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-weight: var(--font-semibold, 600);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.handover-revision-number .badge {
|
||||
font-size: var(--text-xs);
|
||||
padding: 0.05em 0.4em;
|
||||
}
|
||||
|
||||
.handover-revision-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--app-muted-color);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.handover-revision-change {
|
||||
color: var(--app-contrast, #1f2937);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.handover-revision-restore {
|
||||
margin-top: calc(var(--app-spacing) * 0.75);
|
||||
}
|
||||
|
||||
.handover-revision-restore button {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ── Revision banner ───────────────────────────────────────────────── */
|
||||
|
||||
.handover-revision-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--app-spacing);
|
||||
padding: calc(var(--app-spacing) * 0.6) calc(var(--app-spacing) * 1);
|
||||
margin: 0 calc(var(--app-spacing) * 2) calc(var(--app-spacing) * 0.5);
|
||||
background: color-mix(in srgb, var(--app-primary) 8%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--app-primary) 20%, transparent);
|
||||
border-radius: var(--app-border-radius);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.handover-revision-banner p {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.handover-revision-banner a {
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ── Diff highlighting (git-diff style) ──────────────────────────── */
|
||||
|
||||
.handover-diff-field {
|
||||
position: relative;
|
||||
border-radius: var(--app-border-radius);
|
||||
padding: calc(var(--app-spacing) * 0.5) calc(var(--app-spacing) * 0.75);
|
||||
margin-left: calc(var(--app-spacing) * -0.75);
|
||||
margin-right: calc(var(--app-spacing) * -0.75);
|
||||
}
|
||||
|
||||
.handover-diff-changed {
|
||||
background: color-mix(in srgb, hsl(40 90% 50%) 8%, transparent);
|
||||
border-left: 3px solid hsl(40 90% 50%);
|
||||
}
|
||||
|
||||
.handover-diff-added {
|
||||
background: color-mix(in srgb, hsl(145 60% 42%) 8%, transparent);
|
||||
border-left: 3px solid hsl(145 60% 42%);
|
||||
}
|
||||
|
||||
.handover-diff-removed {
|
||||
background: color-mix(in srgb, hsl(0 70% 55%) 8%, transparent);
|
||||
border-left: 3px solid hsl(0 70% 55%);
|
||||
}
|
||||
|
||||
.handover-diff-removed input,
|
||||
.handover-diff-removed select,
|
||||
.handover-diff-removed textarea {
|
||||
text-decoration: line-through;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.handover-diff-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
margin-top: calc(var(--app-spacing) * 0.15);
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.handover-diff-indicator::before {
|
||||
content: '±';
|
||||
font-weight: var(--font-semibold, 600);
|
||||
color: hsl(40 70% 45%);
|
||||
}
|
||||
|
||||
.handover-diff-added .handover-diff-indicator::before {
|
||||
content: '+';
|
||||
color: hsl(145 60% 38%);
|
||||
}
|
||||
|
||||
.handover-diff-removed .handover-diff-indicator::before {
|
||||
content: '−';
|
||||
color: hsl(0 70% 50%);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user