Improve download/print state handling and toolbar UI
Added `IsDownloading` and `IsPrinting` properties to manage state during download and print operations in `SenderPdfImageEditor.razor` and `SenderPdfImageEditorToolbar.razor`. Updated `OnDownloadPdfAsync` and `OnPrintPdfAsync` to ensure state cleanup with `finally` blocks. Enhanced toolbar buttons to reflect busy states with dynamic titles, disabled states, and a spinning animation. Updated CSS in `envelope-viewer.css` to improve layout, spacing, and responsiveness. Added hover, active, and focus-visible styles for better interactivity. Styled a new zoom slider with custom thumb and focus states. Increased maximum width of key elements to 1040px and adjusted padding/margin for better alignment. Improved focus styles for input fields and aligned actions to the right in specific scenarios.
This commit is contained in:
@@ -82,26 +82,26 @@
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100% - 2rem);
|
||||
max-width: 980px;
|
||||
max-width: 1040px;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
|
||||
gap: 0.6rem;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sender-image-toolbar__group {
|
||||
min-height: 3.8rem;
|
||||
min-height: 3.35rem;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d6deef;
|
||||
border-radius: 0.45rem;
|
||||
padding: 0.38rem 0.48rem;
|
||||
border-radius: 0.55rem;
|
||||
padding: 0.38rem 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.2rem;
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
|
||||
gap: 0.28rem;
|
||||
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.09);
|
||||
}
|
||||
|
||||
.sender-image-toolbar__group--nav {
|
||||
@@ -110,25 +110,40 @@
|
||||
|
||||
.sender-image-toolbar__group--zoom {
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.sender-image-toolbar__group--actions {
|
||||
justify-content: center;
|
||||
gap: 0.32rem;
|
||||
padding-inline: 0.55rem;
|
||||
gap: 0.4rem;
|
||||
padding-inline: 0.6rem;
|
||||
}
|
||||
|
||||
.sender-image-toolbar__icon-btn {
|
||||
width: 2.1rem;
|
||||
height: 2.1rem;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
border: 0;
|
||||
border-radius: 0.4rem;
|
||||
border-radius: 0.45rem;
|
||||
background: transparent;
|
||||
color: #1f2a44;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.2s ease;
|
||||
transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
.sender-image-toolbar__icon-btn:hover:not(:disabled) {
|
||||
background: #eef3ff;
|
||||
color: #0f3f99;
|
||||
}
|
||||
|
||||
.sender-image-toolbar__icon-btn:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.sender-image-toolbar__icon-btn:focus-visible {
|
||||
outline: 2px solid #3468d6;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.sender-image-toolbar__icon-btn:disabled {
|
||||
@@ -137,18 +152,22 @@
|
||||
}
|
||||
|
||||
.sender-image-toolbar__icon-btn--caret {
|
||||
width: 1.85rem;
|
||||
width: 1.95rem;
|
||||
}
|
||||
|
||||
.sender-image-toolbar__icon-btn svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.sender-image-toolbar__icon-btn--busy svg {
|
||||
animation: sender-toolbar-spin 0.95s linear infinite;
|
||||
}
|
||||
|
||||
.sender-image-toolbar__select-wrap {
|
||||
position: relative;
|
||||
width: 1.85rem;
|
||||
height: 2.1rem;
|
||||
width: 1.95rem;
|
||||
height: 2.25rem;
|
||||
}
|
||||
|
||||
.sender-image-toolbar__page-select {
|
||||
@@ -164,10 +183,10 @@
|
||||
}
|
||||
|
||||
.sender-image-toolbar__value-box {
|
||||
min-width: 8.15rem;
|
||||
height: 2.1rem;
|
||||
min-width: 7.8rem;
|
||||
height: 2.25rem;
|
||||
border: 1px solid #d5dceb;
|
||||
border-radius: 0.4rem;
|
||||
border-radius: 0.45rem;
|
||||
background: #f8fafc;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -180,6 +199,11 @@
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.sender-image-toolbar__value-box:focus-within {
|
||||
border-color: #7ea2ee;
|
||||
box-shadow: 0 0 0 2px rgba(126, 162, 238, 0.2);
|
||||
}
|
||||
|
||||
.sender-image-toolbar__page-input {
|
||||
width: 2.3rem;
|
||||
border: 0;
|
||||
@@ -204,8 +228,53 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sender-image-toolbar__zoom-slider {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: clamp(130px, 20vw, 190px);
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #d7e2ff 0%, #84a9ff 100%);
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sender-image-toolbar__zoom-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background: #2f5fc9;
|
||||
box-shadow: 0 1px 4px rgba(47, 95, 201, 0.35);
|
||||
}
|
||||
|
||||
.sender-image-toolbar__zoom-slider::-moz-range-thumb {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: #2f5fc9;
|
||||
box-shadow: 0 1px 4px rgba(47, 95, 201, 0.35);
|
||||
}
|
||||
|
||||
.sender-image-toolbar__zoom-slider:focus-visible {
|
||||
outline: 2px solid #3468d6;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@keyframes sender-toolbar-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.sender-image-editor__pages {
|
||||
max-width: 980px;
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -214,7 +283,7 @@
|
||||
}
|
||||
|
||||
.sender-image-editor__native-preview {
|
||||
max-width: 980px;
|
||||
max-width: 1040px;
|
||||
margin: 5.15rem auto 1rem;
|
||||
background: #ffffff;
|
||||
border: 1px solid #cbd5e1;
|
||||
@@ -1322,25 +1391,35 @@ body.resizing {
|
||||
grid-template-columns: 1fr;
|
||||
width: calc(100% - 1rem);
|
||||
top: 0.5rem;
|
||||
gap: 0.4rem;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.sender-image-toolbar__group {
|
||||
min-height: 3.4rem;
|
||||
min-height: 3.15rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sender-image-editor__pages {
|
||||
padding-top: 10.5rem;
|
||||
padding-top: 11.25rem;
|
||||
}
|
||||
|
||||
.sender-image-editor__native-preview {
|
||||
margin-top: 10.5rem;
|
||||
margin-top: 11.25rem;
|
||||
}
|
||||
|
||||
.sender-image-toolbar__value-box {
|
||||
min-width: 6.9rem;
|
||||
height: 1.95rem;
|
||||
font-size: 0.68rem;
|
||||
min-width: 6.7rem;
|
||||
height: 2rem;
|
||||
font-size: 0.69rem;
|
||||
}
|
||||
|
||||
.sender-image-toolbar__zoom-slider {
|
||||
width: min(44vw, 220px);
|
||||
}
|
||||
|
||||
.sender-image-toolbar__group--actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.pdf-thumbnails {
|
||||
|
||||
Reference in New Issue
Block a user