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

Enhance signature management functionality

Browse Source 
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:
tekh
2026-06-09 11:55:56 +02:00
parent f4681f85e7
commit a22ec7a7d3
4 changed files with 356 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
EnvelopeGenerator.ReceiverUI/wwwroot/css/envelope-viewer.css
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;

21
EnvelopeGenerator.ReceiverUI/wwwroot/js/receiver-signature.js
View File

@@ -316,6 +316,23 @@ window.receiverSignature = (() => {
function getTypedDataUrl(id) { const c = document.getElementById(id); const s = typedSignatures.get(id); return (c && s && s.hasSignature) ? c.toDataURL('image/png') : null; }
function getImageDataUrl(id) { const c = document.getElementById(id); const s = imageSignatures.get(id); return (c && s && s.hasSignature) ? c.toDataURL('image/png') : null; }
function loadExistingSignature(canvasId, dataUrl) {
const canvas = document.getElementById(canvasId);
const state = pads.get(canvasId);
if (!canvas || !state || !dataUrl) return;
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
_clear(canvas);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
state.hasSignature = true;
};
img.src = dataUrl;
}
// ?? Public API ??????????????????????????????????????????????????????????
return {
startTyped: startTyped,
@@ -329,6 +346,8 @@ window.receiverSignature = (() => {
renderTypedSignature: renderTypedSignature,
getDataUrl: getDataUrl,
getTypedDataUrl: getTypedDataUrl,
getImageDataUrl: getImageDataUrl
getImageDataUrl: getImageDataUrl,
loadExistingSignature: loadExistingSignature
};
})();