AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add PDF editor toolbar with navigation and zoom controls

Browse Source 
Introduced a `SenderPdfImageEditorToolbar` component to enhance the PDF editor with navigation, zoom, and action controls. Updated `SenderPdfImageEditor.razor` to display the toolbar when `PageCount > 0`.

Added parameters (`CurrentPage`, `TotalPages`, `ZoomPercent`) and computed properties to manage and display toolbar state dynamically.

Styled the toolbar in `envelope-viewer.css` with grid-based layout, responsive design, and hover/disabled states for buttons. Adjusted styles for smaller screens to improve usability.
This commit is contained in:
tekh
2026-09-30 15:25:29 +02:00
parent 7a126050cf
commit db613358d5
3 changed files with 192 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/css/envelope-viewer.css
View File

@@ -61,6 +61,80 @@
padding: 1rem;
}
.sender-image-toolbar {
max-width: 980px;
margin: 0 auto 1rem;
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
gap: 0.75rem;
align-items: center;
}
.sender-image-toolbar__group {
min-height: 4.8rem;
background: #ffffff;
border: 1px solid #d6deef;
border-radius: 0.5rem;
padding: 0.6rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.sender-image-toolbar__group--nav {
justify-content: flex-start;
}
.sender-image-toolbar__group--zoom {
justify-content: center;
}
.sender-image-toolbar__group--actions {
justify-content: center;
gap: 0.45rem;
padding-inline: 0.75rem;
}
.sender-image-toolbar__icon-btn {
width: 2.5rem;
height: 2.5rem;
border: 0;
border-radius: 0.45rem;
background: transparent;
color: #1f2a44;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease;
}
.sender-image-toolbar__icon-btn:disabled {
opacity: 0.42;
cursor: not-allowed;
}
.sender-image-toolbar__icon-btn--caret {
width: 2.1rem;
}
.sender-image-toolbar__value-box {
min-width: 9rem;
height: 2.5rem;
border: 1px solid #d5dceb;
border-radius: 0.45rem;
background: #f8fafc;
display: inline-flex;
align-items: center;
justify-content: flex-start;
padding: 0 0.8rem;
color: #233252;
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.01em;
}
.sender-image-editor__pages {
max-width: 980px;
margin: 0 auto;
@@ -1174,6 +1248,19 @@ body.resizing {
padding: 0.75rem;
}
.sender-image-toolbar {
grid-template-columns: 1fr;
}
.sender-image-toolbar__group {
min-height: 3.9rem;
}
.sender-image-toolbar__value-box {
min-width: 7.5rem;
font-size: 1rem;
}
.pdf-thumbnails {
width: 180px;
border-radius: 0 0 0 16px;