AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve UI, fix signature placement, add documentation

Browse Source 
Enhanced `ReportViewer.razor` with new UI elements, including a detailed `receiver-info-header` and `receiver-action-bar` for better signature workflows. Refactored signature logic to ensure accurate placement using `report.AfterPrint` and `PrintingSystem.Pages`. Removed legacy methods and iText7-based workflows.

Added Turkish documentation (`COPILOT_CONTEXT_TR.md`) detailing project structure, workflows, and pending tasks. Updated `MainLayout.razor` to simplify layout. Improved styling in `app.css` for better visual hierarchy and readability.

Documented pending tasks such as adding signature backgrounds, improving checkbox styles, and automating signature workflows.
This commit is contained in:
tekh
2026-06-01 04:12:52 +02:00
parent 26e6aea6f7
commit 9cb29a0f1c
4 changed files with 450 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
EnvelopeGenerator.ReceiverUI/Pages/ReportViewer.razor
View File

@@ -26,6 +26,7 @@
@inject InMemoryReportStorageWebExtension ReportStorage
@inject EnvelopeGenerator.ReceiverUI.Services.DocumentService DocumentService
@inject EnvelopeGenerator.ReceiverUI.Services.AuthService AuthService
@inject EnvelopeGenerator.ReceiverUI.Services.EnvelopeReceiverService EnvelopeReceiverService
<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
<link href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.bs5.css" rel="stylesheet" />
@@ -33,75 +34,151 @@
<div class="receiver-page-layout">
<div class="receiver-signature-panel">
<div class="card m-3">
<div class="card-body">
<h5 class="card-title">Unterschrift</h5>
<p class="card-text text-muted mb-2">
@if(SignatureApplied) {
<span>Die Unterschrift wurde dem Bericht hinzugefuegt. Sie koennen die Unterschrift erneuern oder das signierte PDF exportieren.</span>
} else {
<span>Bitte fuegen Sie vor dem PDF-Export Ihre Unterschrift hinzu.</span>
}
</p>
@if(!string.IsNullOrWhiteSpace(SignatureValidationMessage)) {
<div class="text-danger mb-2">@SignatureValidationMessage</div>
}
<div class="d-flex gap-2 flex-wrap align-items-center">
<button class="btn @(_capturedSignature is not null ? "btn-outline-success" : "btn-primary")" @onclick="OpenSignaturePopupAsync">
@if (_capturedSignature is not null) {
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
</svg>
<span>Unterschrift gespeichert</span>
} else {
<span>Unterschrift &auml;ndern</span>
}
</button>
@if (_annotations.Count > 0 && !SignatureApplied) {
<div class="d-flex flex-column gap-1 align-self-center">
<span class="text-muted small">
<strong>@_annotations.Count</strong> @(_annotations.Count == 1 ? "Unterschriftsfeld" : "Unterschriftsfelder")
&nbsp;&middot;&nbsp;
Seite@(AnnotationPages.Count() == 1 ? "" : "n"): <strong>@string.Join(", ", AnnotationPages)</strong>
</span>
@if (_capturedSignature is not null) {
<div class="d-flex align-items-center gap-2">
<div class="progress flex-grow-1" style="height:6px; min-width:80px;">
<div class="progress-bar @(_checkedAnnotations.Count == _annotations.Count ? "bg-success" : "bg-primary")"
style="width:@(_annotations.Count > 0 ? (_checkedAnnotations.Count * 100 / _annotations.Count) : 0)%"
role="progressbar"></div>
</div>
<span class="text-muted small fst-italic">
@_checkedAnnotations.Count / @_annotations.Count @(_annotations.Count == 1 ? "Feld" : "Felder") markiert
</span>
</div>
@if (_checkedAnnotations.Count == _annotations.Count) {
<span class="text-success small fw-semibold">&#10003; Alle Felder markiert &ndash; Unterschriften werden angewendet&hellip;</span>
@* ?? Envelope info header ???????????????????????????????????????????????? *@
@if (_envelopeReceiver is not null) {
<div class="receiver-info-header">
<div class="receiver-info-header__gradient">
<div class="receiver-info-header__left">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="receiver-info-header__icon" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
</svg>
<div>
<div class="receiver-info-header__title">@(_envelopeReceiver.Envelope?.Title ?? "Dokument")</div>
@if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.FullName) || !string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.Email)) {
<div class="receiver-info-header__sender">
Von
@if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.FullName)) {
<strong>@_envelopeReceiver.Envelope!.User!.FullName</strong>
}
} else {
<span class="text-muted small fst-italic">
Bitte zuerst eine Unterschrift erstellen, dann die Felder im Dokument markieren.
</span>
}
</div>
@if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.User?.Email)) {
<span class="opacity-75">&lt;@_envelopeReceiver.Envelope!.User!.Email&gt;</span>
}
&nbsp;&middot;&nbsp; @_envelopeReceiver.Envelope?.AddedWhen.ToString("dd.MM.yyyy")
</div>
}
</div>
</div>
<div class="receiver-info-header__badges">
@if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Name)) {
<span class="receiver-info-badge">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Z"/>
</svg>
@_envelopeReceiver.Name
</span>
}
<button class="btn btn-success" disabled="@(!SignatureApplied)" @onclick="ExportSignedPdfAsync">Signiertes PDF exportieren</button>
@if (!string.IsNullOrWhiteSpace(_envelopeReceiver.CompanyName)) {
<span class="receiver-info-badge">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022Z"/>
</svg>
@_envelopeReceiver.CompanyName
</span>
}
@if (!string.IsNullOrWhiteSpace(_envelopeReceiver.JobTitle)) {
<span class="receiver-info-badge receiver-info-badge--muted">@_envelopeReceiver.JobTitle</span>
}
@{
var docElements = _envelopeReceiver.Envelope?.Documents?.FirstOrDefault()?.Elements;
int sigCount = docElements?.Count() ?? _annotations.Count;
}
@if (sigCount > 0) {
<span class="receiver-info-badge receiver-info-badge--accent">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
</svg>
@sigCount @(sigCount == 1 ? "Unterschriftsfeld" : "Unterschriftsfelder")
</span>
}
</div>
</div>
@if (!string.IsNullOrWhiteSpace(_envelopeReceiver.Envelope?.Message)) {
<div class="receiver-info-message">@_envelopeReceiver.Envelope!.Message</div>
}
@if (!string.IsNullOrWhiteSpace(_envelopeReceiver.PrivateMessage)) {
<div class="receiver-info-private-message">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="me-1 flex-shrink-0" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
</svg>
@_envelopeReceiver.PrivateMessage
</div>
}
</div>
}
@* ?? Signature action bar ???????????????????????????????????????????????? *@
<div class="receiver-action-bar">
<div class="receiver-action-bar__inner">
<button class="btn btn-sm @(_capturedSignature is not null ? "btn-outline-success" : "btn-primary")" @onclick="OpenSignaturePopupAsync">
@if (_capturedSignature is not null) {
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
</svg>
<span>Unterschrift gespeichert</span>
} else {
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
</svg>
<span>Unterschrift erstellen</span>
}
</button>
@if (_annotations.Count > 0 && !SignatureApplied) {
<div class="receiver-action-bar__progress">
<div class="progress" style="height:5px; min-width:70px; width:90px;">
<div class="progress-bar @(_checkedAnnotations.Count == _annotations.Count ? "bg-success" : "bg-primary")"
style="width:@(_annotations.Count > 0 ? (_checkedAnnotations.Count * 100 / _annotations.Count) : 0)%"
role="progressbar"></div>
</div>
<span class="text-muted" style="font-size:0.75rem;">
@_checkedAnnotations.Count&thinsp;/&thinsp;@_annotations.Count
Seite@(AnnotationPages.Count() == 1 ? "" : "n")&nbsp;@string.Join(",", AnnotationPages)
</span>
@if (_capturedSignature is null) {
<span class="text-muted fst-italic" style="font-size:0.72rem;">Zuerst Unterschrift erstellen</span>
} else if (_checkedAnnotations.Count == _annotations.Count) {
<span class="text-success fw-semibold" style="font-size:0.72rem;">&#10003; Wird angewendet&hellip;</span>
}
</div>
}
@if (!string.IsNullOrWhiteSpace(SignatureValidationMessage)) {
<span class="text-danger" style="font-size:0.78rem;">@SignatureValidationMessage</span>
}
@if (SignatureApplied) {
<span class="text-success" style="font-size:0.78rem;">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
Unterschrift angewendet
</span>
}
<div class="ms-auto d-flex align-items-center gap-2">
<button class="btn btn-sm btn-success" disabled="@(!SignatureApplied)" @onclick="ExportSignedPdfAsync">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
PDF exportieren
</button>
@if (!string.IsNullOrWhiteSpace(EnvelopeKey)) {
<button class="btn btn-outline-danger ms-auto" @onclick="LogoutAsync" disabled="@IsLoggingOut" title="Abmelden">
<button class="btn btn-sm btn-outline-danger" @onclick="LogoutAsync" disabled="@IsLoggingOut" title="Abmelden">
@if (IsLoggingOut) {
<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
} else {
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="me-1" viewBox="0 0 16 16">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
<path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
</svg>
}
Abmelden
</button>
}
</div>
</div>
</div>
</div>
<DxPopup @bind-Visible="SignaturePopupVisible"
@@ -225,6 +302,7 @@ Shown="OnPopupShownAsync">
IReadOnlyList<AnnotationDto> _annotations = [];
IEnumerable<int> AnnotationPages => _annotations.Select(a => a.Page).Distinct().OrderBy(p => p);
EnvelopeReceiverDto? _envelopeReceiver;
record SignatureCapture(string DataUrl, string FullName, string Position, string Place);
SignatureCapture? _capturedSignature;
byte[]? _basePdfBytes;
@@ -259,6 +337,7 @@ Shown="OnPopupShownAsync">
}
_annotations = await AnnotationService.GetAnnotationsAsync(EnvelopeKey ?? "fake");
_envelopeReceiver = await EnvelopeReceiverService.GetAsync(EnvelopeKey ?? "fake");
if (!AppOptions.Value.ForceToUseFakeDocument && !string.IsNullOrWhiteSpace(EnvelopeKey)) {
var (pdfBytes, _) = await DocumentService.GetDocumentAsync(EnvelopeKey);

4
EnvelopeGenerator.ReceiverUI/Shared/MainLayout.razor
View File

@@ -3,10 +3,6 @@
<div class="page">
<main>
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<article class="content">
@Body
</article>

117
EnvelopeGenerator.ReceiverUI/wwwroot/css/app.css
View File

@@ -125,4 +125,121 @@ article {
text-overflow: ellipsis;
pointer-events: none;
letter-spacing: 0.01em;
}
/* ── Envelope info header ────────────────────────────────────────────────── */
.receiver-info-header {
border-bottom: 1px solid rgba(0,0,0,.08);
}
.receiver-info-header__gradient {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
padding: 10px 16px 8px;
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
color: #fff;
}
.receiver-info-header__left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.receiver-info-header__icon {
flex-shrink: 0;
opacity: .85;
}
.receiver-info-header__title {
font-size: 0.92rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 340px;
}
.receiver-info-header__sender {
font-size: 0.72rem;
opacity: .8;
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 400px;
}
.receiver-info-header__badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: center;
}
.receiver-info-badge {
display: inline-flex;
align-items: center;
background: rgba(255,255,255,.18);
color: #fff;
border-radius: 20px;
padding: 2px 9px;
font-size: 0.70rem;
font-weight: 500;
white-space: nowrap;
}
.receiver-info-badge--muted {
background: rgba(255,255,255,.10);
opacity: .8;
}
.receiver-info-badge--accent {
background: rgba(39,174,96,.35);
border: 1px solid rgba(39,174,96,.5);
}
.receiver-info-message {
padding: 7px 16px;
font-size: 0.78rem;
color: #444;
border-bottom: 1px solid rgba(0,0,0,.05);
white-space: pre-wrap;
line-height: 1.45;
}
.receiver-info-private-message {
display: flex;
align-items: flex-start;
gap: 4px;
padding: 5px 16px 6px;
font-size: 0.75rem;
color: #5a5a72;
background: #f8f7ff;
border-top: 1px solid rgba(90,80,180,.12);
}
/* ── Signature action bar ────────────────────────────────────────────────── */
.receiver-action-bar {
border-bottom: 1px solid rgba(0,0,0,.08);
background: #fff;
}
.receiver-action-bar__inner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 7px 14px;
}
.receiver-action-bar__progress {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
}