From 54d16eb3b8106f2eab91a796909eb3feee862594 Mon Sep 17 00:00:00 2001 From: TekH Date: Fri, 2 Oct 2026 14:59:43 +0200 Subject: [PATCH] Refactor SenderEditorPage for modernized UI design Replaced inline styles with reusable CSS classes to improve maintainability, readability, and scalability. Updated the layout and styling of key components, including the action bar, title and message inputs, PDF metadata display, and buttons. Introduced a `DxAccordion` for envelope settings and redesigned the empty state and save result dialog. Added dynamic styling using CSS variables and centralized styles in `envelope-viewer.css`. Removed redundant inline styles and improved overall UI consistency. --- .../Pages/SenderEditorPage.razor | 317 +++++++-------- .../wwwroot/css/envelope-viewer.css | 367 ++++++++++++++++++ 2 files changed, 511 insertions(+), 173 deletions(-) diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/SenderEditorPage.razor b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/SenderEditorPage.razor index 74e21b5d..52dc3e45 100644 --- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/SenderEditorPage.razor +++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Pages/SenderEditorPage.razor @@ -34,64 +34,52 @@ @* ── Action Bar ── *@
-
+
@* Left: Title + meta inputs + receivers *@ -
+
@* ── Title & Message inputs ── *@ -
+
@* Titel *@ -
-
@@ -228,8 +219,7 @@
@foreach (var receiver in _receivers) { -
+
@receiver.FullName
@@ -239,11 +229,11 @@ }
-
@* Right: Buttons *@ -
+
@@ -371,30 +354,25 @@
@* ── Content ── *@ -
+
@if (!_pdfLoaded) { @* Empty state *@
-
-
+
+
@L("SenderEditor_NoDocumentLoaded", "Kein Dokument geladen")
-

+

@L("SenderEditor_UploadPdfToPlaceFields", "Laden Sie eine PDF-Datei hoch, um Signaturfelder zu platzieren.")

-
@@ -546,18 +524,17 @@ @if (_saveErrorMessage is null) { -
-
+
+
-

+

@_saveSuccessTitle

-

+

@_saveSuccessBody

@@ -565,19 +542,18 @@ } else { -
-
+
+
-

+

@L("SenderEditor_ErrorCreatingEnvelope", "Fehler beim Erstellen des Umschlags")

-

+

@_saveErrorMessage

@@ -585,30 +561,25 @@ } -
+
@if (_saveErrorMessage is null) { - @if (_saveNavigateToDashboard) { - } } else { - } diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css index 3b88d560..0f72230c 100644 --- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css +++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css @@ -1002,6 +1002,107 @@ body.resizing { border: 1px solid rgba(126, 34, 206, 0.12); } +.sender-settings-shell { + border-radius: 12px; + overflow: hidden; +} + +.sender-settings-accordion { + border: 1px solid #dbe5ef; + border-radius: 12px; + background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%); +} + +.sender-settings-accordion .dxbl-accordion-item { + border: none; +} + +.sender-settings-accordion .dxbl-accordion-item-header { + text-transform: uppercase; + letter-spacing: 0.04em; + font-size: 0.74rem; + font-weight: 700; + color: #1f2937; + padding: 0.55rem 0.7rem; + background: rgba(124, 58, 237, 0.04); +} + +.sender-settings-body { + display: flex; + flex-direction: column; + gap: 0.65rem; + padding: 0.25rem 0.7rem 0.7rem; +} + +.sender-settings-chip { + align-self: flex-start; + font-size: 0.66rem; + font-weight: 700; + color: #5b21b6; + background: rgba(126, 34, 206, 0.1); + border: 1px solid rgba(126, 34, 206, 0.15); + border-radius: 999px; + padding: 0.12rem 0.5rem; +} + +.sender-settings-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 0.5rem; +} + +.sender-settings-field { + display: flex; + flex-direction: column; + gap: 0.2rem; +} + +.sender-settings-label { + font-size: 0.65rem; + font-weight: 700; + color: #64748b; + letter-spacing: 0.01em; +} + +.sender-settings-select, +.sender-settings-number { + font-size: 0.78rem; + border: 1px solid #d1d5db; + border-radius: 6px; + padding: 0.3rem 0.45rem; + background: #fff; + min-height: 32px; + color: #1f2937; +} + +.sender-settings-number:focus, +.sender-settings-select:focus { + border-color: rgba(126, 34, 206, 0.45); + box-shadow: 0 0 0 2px rgba(126, 34, 206, 0.12); + outline: none; +} + +.sender-settings-toggles { + display: flex; + flex-direction: column; + justify-content: flex-end; + gap: 0.3rem; + padding-bottom: 0.1rem; +} + +.sender-settings-toggle { + display: inline-flex; + align-items: center; + gap: 0.45rem; + font-size: 0.74rem; + color: #1f2937; + min-height: 32px; +} + +.sender-settings-toggles--single { + justify-content: center; +} + .sender-receivers-panel__header { display: flex; align-items: center; @@ -1119,9 +1220,275 @@ body.resizing { border-radius: 12px; background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(126, 34, 206, 0.12); + border-left: 3px solid var(--receiver-color, #7c3aed); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06); } +.sender-receiver-chip__place-btn--idle { + color: var(--receiver-color, #7c3aed); + border-color: var(--receiver-color, #7c3aed); +} + +.sender-receiver-chip__place-btn--active { + background: var(--receiver-color, #7c3aed); + color: #ffffff; + border-color: var(--receiver-color, #7c3aed); +} + +.sender-editor-action-inner { + flex-direction: row; + align-items: center; + padding: 0.35rem 1.5rem; + gap: 0.75rem; +} + +.sender-editor-main-column { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + align-items: stretch; + gap: 0.5rem; +} + +.sender-editor-meta-row { + display: flex; + align-items: flex-start; + gap: 0.5rem; + flex-wrap: wrap; +} + +.sender-editor-input-field { + display: flex; + flex-direction: column; + gap: 0.2rem; +} + +.sender-editor-input-field--title { + flex: 1 1 180px; + min-width: 140px; +} + +.sender-editor-input-field--message { + flex: 2 1 260px; + min-width: 180px; +} + +.sender-editor-label { + font-size: 0.65rem; + font-weight: 600; + color: #6b7280; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.sender-editor-required-asterisk { + color: #dc2626; +} + +.sender-editor-optional { + color: #6b7280; + font-weight: 400; +} + +.sender-editor-text-input { + font-size: 0.78rem; + color: #1f2937; + border: 1px solid #d1d5db; + border-radius: 5px; + padding: 0.3rem 0.55rem; + outline: none; + width: 100%; + background: #fff; +} + +.sender-editor-text-input--invalid { + border-color: #dc2626; +} + +.sender-editor-required-text { + font-size: 0.6rem; + color: #dc2626; +} + +.sender-editor-file-meta { + display: flex; + align-items: flex-end; + gap: 0.4rem; + padding-bottom: 0.05rem; + flex-shrink: 0; +} + +.sender-editor-file-name { + font-size: 0.7rem; + color: #6b7280; +} + +.sender-editor-signature-count { + display: inline-flex; + align-items: center; + padding: 0.125rem 0.4rem; + background: #ede9fe; + border-radius: 0.25rem; + color: #6d28d9; + font-weight: 500; + font-size: 0.7rem; + white-space: nowrap; +} + +.sender-editor-actions { + display: flex; + align-items: center; + gap: 0.5rem; + flex-shrink: 0; +} + +.sender-editor-upload-btn { + display: inline-flex; + align-items: center; + gap: 0.3rem; + padding: 0.3rem 0.75rem; + font-size: 0.75rem; + font-weight: 500; + cursor: pointer; +} + +.sender-editor-upload-btn--disabled { + cursor: not-allowed; + opacity: 0.6; +} + +.sender-editor-hidden-input { + display: none; +} + +.sender-editor-spinner { + width: 0.8rem; + height: 0.8rem; + border-width: 2px; +} + +.sender-editor-placement-hint { + background: var(--placement-color, #7c3aed); + color: #ffffff; + font-size: 0.75rem; + font-weight: 500; + padding: 0.3rem 1.5rem; + text-align: center; + letter-spacing: 0.01em; +} + +.sender-editor-placement-cancel { + background: none; + border: none; + color: #ffffff; + cursor: pointer; + font-size: 0.75rem; + text-decoration: underline; + padding: 0; +} + +.sender-editor-content { + padding: 0; + overflow: hidden; +} + +.sender-editor-empty-state { + max-width: 420px; +} + +.sender-editor-empty-state__icon-wrap { + width: 72px; + height: 72px; + background: rgba(255, 255, 255, 0.15); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.25rem; +} + +.sender-editor-empty-state__description { + opacity: 0.75; + font-size: 0.85rem; +} + +.sender-editor-empty-state__upload { + font-weight: 500; + cursor: pointer; +} + +.sender-editor-empty-state__upload--disabled { + cursor: not-allowed; + opacity: 0.8; +} + +.sender-editor-save-result { + display: flex; + align-items: flex-start; + gap: 1rem; + padding: 0.5rem 0; +} + +.sender-editor-save-result__icon { + flex-shrink: 0; + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.sender-editor-save-result__icon--success { + background: #d1fae5; +} + +.sender-editor-save-result__icon--error { + background: #fee2e2; +} + +.sender-editor-save-result__title { + margin: 0 0 0.4rem; + font-weight: 600; + color: #1f2937; + font-size: 0.95rem; +} + +.sender-editor-save-result__message { + margin: 0; + color: #6b7280; + font-size: 0.85rem; + line-height: 1.5; +} + +.sender-editor-save-result__message--break { + word-break: break-word; +} + +.sender-editor-save-actions { + display: flex; + gap: 0.5rem; + justify-content: flex-end; + width: 100%; + padding: 0.5rem 0; +} + +.sender-editor-save-actions__secondary { + border-radius: 6px; + padding: 0.5rem 1.25rem; + font-weight: 500; +} + +.sender-editor-save-actions__primary { + background: linear-gradient(135deg, #059669, #047857); + border: none; + border-radius: 6px; + padding: 0.5rem 1.5rem; + font-weight: 600; + color: #fff; +} + .sender-receiver-chip__body { min-width: 0; flex: 1;