Add interactive signature buttons to PDF viewer
Introduced functionality to render interactive signature buttons on the PDF viewer. Added support for fetching and displaying signature data (`SignatureDto`) dynamically based on the current page. - Added `@using` directives in `EnvelopeViewer.razor` for required namespaces. - Introduced `_signatures` field to store signature data. - Updated `OnInitializedAsync` to fetch and process signatures. - Implemented `RenderSignatureButtonsAsync` to dynamically render buttons. - Added `[JSInvokable]` method `OnSignatureButtonClick` for button events. - Updated CSS to style `pdf-signature-layer` and `signature-button`. - Enhanced `pdf-viewer.js` with methods to render and clear buttons. - Ensured buttons respond to zoom and page navigation changes. - Added error handling and logging for signature rendering. These changes improve user interaction by enabling signing functionality directly on the PDF viewer.
This commit is contained in:
@@ -480,6 +480,34 @@ body.resizing {
|
||||
background: rgba(126, 34, 206, 0.3);
|
||||
}
|
||||
|
||||
.pdf-signature-layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.pdf-signature-layer .signature-button {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.signature-button {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.signature-button:focus {
|
||||
outline: 2px solid #7e22ce;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.signature-button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.error-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user