From 4fdbbc832f804198fb47f8820812ef14cc741c72 Mon Sep 17 00:00:00 2001 From: TekH Date: Mon, 8 Jun 2026 09:28:17 +0200 Subject: [PATCH] Refactor EnvelopeViewer layout and improve UI details The `
` layout was updated to use a column-based structure for better alignment and spacing. Title and sender details now include additional information such as the sender's full name, email, and the envelope's added date. Badges for receiver name, signature count, access code, and 2FA were visually refined with smaller padding, font sizes, and resized SVG icons. A new section was added to display public and private messages with distinct styles and icons. The logout button's placement was adjusted to fit the new layout. Minor spacing, padding, and alignment adjustments were made throughout the component for a cleaner and more consistent design. --- .../Pages/EnvelopeViewer.razor | 107 ++++++++++++------ 1 file changed, 71 insertions(+), 36 deletions(-) diff --git a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor index 2a445fd8..6ffb64b4 100644 --- a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor +++ b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeViewer.razor @@ -25,26 +25,41 @@
-
- @* Left: Document Title *@ -
- @if (_envelopeReceiver is not null) { -
- @(_envelopeReceiver.Envelope?.Title ?? "Dokument") -
- } else { -
Dokumentenansicht
- } -
+
+ @* Row 1: Title + Sender + Badges + Logout *@ +
+ @* Left: Title + Sender *@ +
+ @if (_envelopeReceiver is not null) { +
+ @(_envelopeReceiver.Envelope?.Title ?? "Dokument") +
+ @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.FullName) || !string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.Email)) { + + Von + @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.FullName)) { + @_envelopeReceiver.Envelope.User.FullName + } + @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.Email)) { + <@_envelopeReceiver.Envelope.User.Email> + } + @if (_envelopeReceiver.Envelope?.AddedWhen != null) { +  ยท @_envelopeReceiver.Envelope.AddedWhen.ToString("dd.MM.yyyy") + } + + } + } else { +
Dokumentenansicht
+ } +
- @* Right: Compact Info + Logout *@ -
+ @* Right: Badges + Logout *@ +
@if (_envelopeReceiver is not null) { - @* Compact badges row *@ -
+
@if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Name)) { - - + + @_envelopeReceiver.Name @@ -59,24 +74,24 @@ int sigCount = _signatures.Count; } @if (sigCount > 0) { - - + + @sigCount } @if (_envelopeReceiver.Envelope?.UseAccessCode == true) { - - + + Code } @if (_envelopeReceiver.Envelope?.TFAEnabled == true) { - - + + @@ -84,22 +99,42 @@ }
+ } - @* Logout button *@ - @if (!string.IsNullOrWhiteSpace(EnvelopeKey)) { - - } + @* Logout button *@ + @if (!string.IsNullOrWhiteSpace(EnvelopeKey)) { + + } +
+ + @* Row 2: Messages (visible text) *@ + @if (_envelopeReceiver is not null && (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.Message) || !string.IsNullOrWhiteSpace(_envelopeReceiver.PrivateMessage))) { +
+ @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.Message)) { +
+ ๐Ÿ“ง + @_envelopeReceiver.Envelope.Message +
+ } + @if (!string.IsNullOrWhiteSpace(_envelopeReceiver.PrivateMessage)) { +
+ ๐Ÿ”’ + @_envelopeReceiver.PrivateMessage +
+ } +
+ }