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:
@@ -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%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user