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:
@@ -219,6 +219,20 @@
|
||||
<div class="pdf-toolbar__divider"></div>
|
||||
|
||||
@if (_totalSignatures > 0) {
|
||||
<div class="pdf-toolbar__section">
|
||||
<button class="pdf-toolbar__btn pdf-toolbar__btn--signature-change @(_capturedSignature is not null ? "pdf-toolbar__btn--signature-change-active" : "")"
|
||||
disabled="@(_signedSignatures > 0)"
|
||||
@onclick="HandleSignatureChangeClick"
|
||||
title="@GetSignatureButtonTitle()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" 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__btn-text">Unterschrift</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="pdf-toolbar__divider"></div>
|
||||
|
||||
<div class="pdf-toolbar__section pdf-toolbar__signature-nav">
|
||||
<button class="pdf-toolbar__btn pdf-toolbar__btn--signature-nav"
|
||||
@onclick="GoToPreviousSignature"
|
||||
@@ -825,15 +839,52 @@ const int MaxThumbnailWidth = 400;
|
||||
|
||||
record SignatureNavState(int Total, int Signed, int Unsigned, int CurrentIndex, bool CanGoPrev, bool CanGoNext);
|
||||
|
||||
string GetSignatureButtonTitle()
|
||||
{
|
||||
if (_signedSignatures > 0)
|
||||
return "Unterschrift ist gesperrt – bitte Seite neu laden, um zu ändern";
|
||||
|
||||
return _capturedSignature is not null
|
||||
? "Unterschrift ändern"
|
||||
: "Unterschrift erstellen";
|
||||
}
|
||||
|
||||
void HandleSignatureChangeClick()
|
||||
{
|
||||
// If any signature is applied, button is disabled - this won't be called
|
||||
// But just in case, do nothing
|
||||
if (_signedSignatures > 0)
|
||||
return;
|
||||
|
||||
// No signatures applied - open popup normally
|
||||
OpenSignaturePopup();
|
||||
}
|
||||
|
||||
// Signature popup methods
|
||||
void OpenSignaturePopup() {
|
||||
// Popup'ı mevcut imza ile aç (değiştirme modu)
|
||||
_activeSignatureTab = SignatureTabDraw;
|
||||
_signaturePopupVisible = true;
|
||||
_popupValidationMessage = null;
|
||||
|
||||
// Mevcut imza bilgilerini form field'larına yükle
|
||||
if (_capturedSignature is not null)
|
||||
{
|
||||
_signerFullName = _capturedSignature.FullName;
|
||||
_signerPosition = _capturedSignature.Position;
|
||||
_signaturePlace = _capturedSignature.Place;
|
||||
}
|
||||
}
|
||||
|
||||
async Task OnPopupShownAsync() {
|
||||
await InitializeActiveSignatureTabAsync();
|
||||
|
||||
// Eğer mevcut imza varsa ve draw tab'deyse, imzayı canvas'a yükle
|
||||
if (_capturedSignature is not null && _activeSignatureTab == SignatureTabDraw)
|
||||
{
|
||||
await Task.Delay(100); // Canvas'ın hazır olmasını bekle
|
||||
await JSRuntime.InvokeVoidAsync("receiverSignature.loadExistingSignature", DrawCanvasId, _capturedSignature.DataUrl);
|
||||
}
|
||||
}
|
||||
|
||||
async Task SetSignatureTabAsync(string tab) {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user