Add PdfFileDropZone for interactive PDF uploads

Replaced static upload message in `CreateEnvelopeWizardPopup.razor` with a new `PdfFileDropZone` component to enhance user experience. The component supports drag-and-drop functionality, file selection, and dynamic states (e.g., disabled, drag-active).

Introduced `PdfFileDropZone.razor` with customizable parameters such as `Disabled`, `HasDocument`, `UploadText`, and `DragDropHintText`. Added event handling for drag-and-drop interactions and file selection.

Updated `sender-page.css` to include styles for the new component, ensuring seamless integration with the existing layout. Adjusted styles for hover effects, drag-active state, and disabled state.

These changes improve usability and make PDF uploads more intuitive.
This commit is contained in:
2026-10-06 10:31:43 +02:00
parent 60241c9c6d
commit 47f48ba12a
3 changed files with 173 additions and 3 deletions

View File

@@ -1466,6 +1466,66 @@
display: none;
}
.sender-pdf-dropzone {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 92px;
border: 1px dashed rgba(100, 116, 139, 0.5);
border-radius: 8px;
background: rgba(248, 250, 252, 0.9);
color: #334155;
cursor: pointer;
transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.sender-pdf-dropzone:hover {
border-color: rgba(126, 34, 206, 0.45);
background: rgba(241, 245, 249, 0.95);
}
.sender-pdf-dropzone--drag-active {
border-color: rgba(16, 185, 129, 0.75);
background: linear-gradient(180deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.08));
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
}
.sender-pdf-dropzone--disabled {
opacity: 0.55;
cursor: not-allowed;
}
.sender-pdf-dropzone__content {
text-align: center;
display: grid;
gap: 0.2rem;
padding: 0.75rem 0.9rem;
}
.sender-pdf-dropzone__title {
font-size: 0.86rem;
font-weight: 700;
}
.sender-pdf-dropzone__hint {
font-size: 0.78rem;
color: #64748b;
}
.sender-pdf-dropzone__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.sender-pdf-dropzone--disabled .sender-pdf-dropzone__input {
cursor: not-allowed;
}
.sender-create-wizard__document-meta {
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 8px;
@@ -1524,6 +1584,10 @@
width: 100%;
}
.sender-pdf-dropzone {
width: 100%;
}
.sender-create-wizard__upload-btn {
width: 100%;
}