Add signature navigation to PDF viewer toolbar
This commit introduces a signature navigation feature in the PDF viewer: - Removed zoom preset buttons to make space for the new toolbar. - Added "Previous" and "Next" buttons for navigating signatures. - Displayed a signature counter with signed/total signatures and a badge for unsigned signatures or completion status. - Introduced state variables (`_totalSignatures`, `_signedSignatures`, `_unsignedSignatures`) to track signature progress. - Implemented methods for navigating signatures (`GoToPreviousSignature`, `GoToNextSignature`, `UpdateSignatureCounterAsync`). - Enhanced JavaScript with `getSignatureNavState`, `goToNextSignature`, and `goToPreviousSignature` for navigation logic. - Updated CSS for the toolbar and signature navigation, including responsive adjustments and hover effects. - Improved error handling during signature counter updates. - Updated `RenderSignatureButtonsAsync` to refresh the signature counter after rendering. These changes improve the user experience by enabling efficient navigation and tracking of signatures in the PDF viewer.
This commit is contained in:
@@ -115,22 +115,43 @@
|
||||
|
||||
<div class="pdf-toolbar__divider"></div>
|
||||
|
||||
<div class="pdf-toolbar__section">
|
||||
<button class="pdf-toolbar__btn pdf-toolbar__btn--preset" @onclick="() => SetZoom(100)" title="Tatsächliche Größe">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" class="me-1">
|
||||
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
|
||||
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319z"/>
|
||||
</svg>
|
||||
100%
|
||||
</button>
|
||||
<button class="pdf-toolbar__btn pdf-toolbar__btn--preset" @onclick="FitToWidth" title="An Breite anpassen">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" class="me-1">
|
||||
<path d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zM7.5 7a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z"/>
|
||||
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm1 0v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1z"/>
|
||||
</svg>
|
||||
Breite
|
||||
</button>
|
||||
</div>
|
||||
@if (_totalSignatures > 0) {
|
||||
<div class="pdf-toolbar__section pdf-toolbar__signature-nav">
|
||||
<button class="pdf-toolbar__btn pdf-toolbar__btn--signature-nav"
|
||||
@onclick="GoToPreviousSignature"
|
||||
disabled="@(_signedSignatures == 0)"
|
||||
title="Vorherige Unterschrift">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="pdf-toolbar__signature-counter">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" 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 class="pdf-toolbar__signature-counter-text">
|
||||
<strong style="color: @(_unsignedSignatures > 0 ? "#4F46E5" : "#10b981");">@_signedSignatures</strong>
|
||||
<span style="opacity: 0.6;"> / </span>
|
||||
<span>@_totalSignatures</span>
|
||||
</span>
|
||||
@if (_unsignedSignatures > 0) {
|
||||
<span class="pdf-toolbar__signature-badge">@_unsignedSignatures offen</span>
|
||||
} else {
|
||||
<span class="pdf-toolbar__signature-badge pdf-toolbar__signature-badge--complete">✓ Komplett</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<button class="pdf-toolbar__btn pdf-toolbar__btn--signature-nav"
|
||||
@onclick="GoToNextSignature"
|
||||
disabled="@(_unsignedSignatures == 0)"
|
||||
title="Nächste Unterschrift">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<div class="pdf-frame">
|
||||
@@ -355,6 +376,11 @@ bool _showThumbnails = true;
|
||||
DotNetObjectReference<EnvelopeViewer>? _dotNetRef;
|
||||
IReadOnlyList<SignatureDto> _signatures = [];
|
||||
|
||||
// Signature navigation state
|
||||
int _totalSignatures = 0;
|
||||
int _signedSignatures = 0;
|
||||
int _unsignedSignatures = 0;
|
||||
|
||||
// Signature state
|
||||
record SignatureCapture(string DataUrl, string FullName, string Position, string Place);
|
||||
SignatureCapture? _capturedSignature;
|
||||
@@ -560,6 +586,7 @@ const int MaxThumbnailWidth = 400;
|
||||
|
||||
try {
|
||||
await JSRuntime.InvokeVoidAsync("pdfViewer.renderSignatureButtons", _signatures, _currentPage, _dotNetRef);
|
||||
await UpdateSignatureCounterAsync();
|
||||
} catch (Exception ex) {
|
||||
System.Diagnostics.Debug.WriteLine($"Signature button rendering error: {ex.Message}");
|
||||
}
|
||||
@@ -579,8 +606,38 @@ const int MaxThumbnailWidth = 400;
|
||||
_capturedSignature.FullName,
|
||||
_capturedSignature.Position,
|
||||
_capturedSignature.Place);
|
||||
|
||||
// Update counter
|
||||
await UpdateSignatureCounterAsync();
|
||||
}
|
||||
|
||||
[JSInvokable]
|
||||
public async Task OnSignatureNavChanged() {
|
||||
await UpdateSignatureCounterAsync();
|
||||
}
|
||||
|
||||
async Task UpdateSignatureCounterAsync() {
|
||||
try {
|
||||
var state = await JSRuntime.InvokeAsync<SignatureNavState>("pdfViewer.getSignatureNavState");
|
||||
_totalSignatures = state.Total;
|
||||
_signedSignatures = state.Signed;
|
||||
_unsignedSignatures = state.Unsigned;
|
||||
await InvokeAsync(StateHasChanged);
|
||||
} catch {
|
||||
// Ignore errors during counter update
|
||||
}
|
||||
}
|
||||
|
||||
async Task GoToPreviousSignature() {
|
||||
await JSRuntime.InvokeVoidAsync("pdfViewer.goToPreviousSignature", _dotNetRef);
|
||||
}
|
||||
|
||||
async Task GoToNextSignature() {
|
||||
await JSRuntime.InvokeVoidAsync("pdfViewer.goToNextSignature", _dotNetRef);
|
||||
}
|
||||
|
||||
record SignatureNavState(int Total, int Signed, int Unsigned, int CurrentIndex, bool CanGoPrev, bool CanGoNext);
|
||||
|
||||
// Signature popup methods
|
||||
void OpenSignaturePopup() {
|
||||
_activeSignatureTab = SignatureTabDraw;
|
||||
|
||||
Reference in New Issue
Block a user