Enhance signature management functionality

Added a new button in `EnvelopeViewer.razor` for creating or modifying signatures, with dynamic styling and tooltips based on the signature state. Enhanced `OpenSignaturePopup` and `OnPopupShownAsync` methods to preload and display existing signatures in the popup and canvas.

Introduced new "success" button styles in `envelope-viewer.css` for better visual feedback. Added `loadExistingSignature` function in `receiver-signature.js` to render existing signatures on the canvas and updated the public API to expose this functionality.
This commit is contained in:
2026-06-09 11:55:56 +02:00
parent f4681f85e7
commit a22ec7a7d3
4 changed files with 356 additions and 1 deletions

View File

@@ -484,6 +484,68 @@ body.resizing {
color: white;
}
/* Success Button Styles (Signature Created) */
.pdf-toolbar__btn--success {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
border-color: rgba(16, 185, 129, 0.3);
color: #059669;
}
.pdf-toolbar__btn--success:hover:not(:disabled) {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
border-color: transparent;
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.pdf-toolbar__btn--success svg {
transition: color 0.2s ease;
}
.pdf-toolbar__btn--success:hover:not(:disabled) svg {
color: white;
}
/* Signature Change Button */
.pdf-toolbar__btn--signature-change {
display: flex;
align-items: center;
gap: 0.375rem;
min-width: auto;
padding: 0.5rem 0.75rem;
background: linear-gradient(135deg, rgba(126, 34, 206, 0.05) 0%, rgba(42, 82, 152, 0.05) 100%);
border: 1px solid rgba(126, 34, 206, 0.2);
color: #7e22ce;
}
.pdf-toolbar__btn--signature-change:hover:not(:disabled) {
background: linear-gradient(135deg, rgba(126, 34, 206, 0.1) 0%, rgba(42, 82, 152, 0.1) 100%);
border-color: rgba(126, 34, 206, 0.4);
}
.pdf-toolbar__btn--signature-change-active {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.08) 100%);
border-color: rgba(16, 185, 129, 0.25);
color: #059669;
}
.pdf-toolbar__btn--signature-change-active:hover:not(:disabled) {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.12) 100%);
border-color: rgba(16, 185, 129, 0.35);
}
.pdf-toolbar__btn--signature-change:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pdf-toolbar__btn-text {
font-size: 0.813rem;
font-weight: 600;
white-space: nowrap;
}
.pdf-frame {
background: white;
border-radius: 16px;