Refactor SenderPdfImageEditor layout and styles

Refactored `SenderPdfImageEditor.razor` to improve readability and maintainability by introducing a new wrapper element (`sender-image-editor-shell`) and reorganizing the toolbar into a sticky container (`sender-image-editor__toolbar-host`). Updated conditional rendering logic to handle `PageCount` cases more effectively.

Enhanced styles in `envelope-viewer.css`:
- Added `.sender-image-editor-shell` for layout structure.
- Made toolbar sticky with `.sender-image-editor__toolbar-host`.
- Improved alignment, spacing, and responsiveness of elements.
- Adjusted padding and margins for better layout consistency.

These changes improve user experience and maintainability.
This commit is contained in:
2026-09-30 15:52:46 +02:00
parent db613358d5
commit 95961a296f
2 changed files with 56 additions and 20 deletions

View File

@@ -5,25 +5,28 @@
@inject IStringLocalizer<Resource> UiLocalizer
@inject IJSRuntime JSRuntime
@if (PageCount > 0)
{
<SenderPdfImageEditorToolbar CurrentPage="1"
TotalPages="@PageCount"
ZoomPercent="112" />
}
<div class="pdf-editor-wrapper sender-image-editor sender-editor-pdf-viewer"
style="cursor: @(IsPlacementMode ? "crosshair" : (_isDragging ? "grabbing" : "default"));"
@onclick="HandleClickAsync"
@onmousemove="OnEditorMouseMoveAsync"
@onmouseup="OnEditorMouseUp"
@onmouseleave="OnEditorMouseUp">
@if (PageCount <= 0)
<div class="sender-image-editor-shell">
@if (PageCount > 0)
{
<div class="sender-image-editor__empty">@L("SenderEditor_NoPagesToDisplay", "Keine Seiten zur Anzeige verfügbar.")</div>
<div class="sender-image-editor__toolbar-host">
<SenderPdfImageEditorToolbar CurrentPage="1"
TotalPages="@PageCount"
ZoomPercent="112" />
</div>
}
else
{
<div class="pdf-editor-wrapper sender-image-editor sender-editor-pdf-viewer"
style="cursor: @(IsPlacementMode ? "crosshair" : (_isDragging ? "grabbing" : "default"));"
@onclick="HandleClickAsync"
@onmousemove="OnEditorMouseMoveAsync"
@onmouseup="OnEditorMouseUp"
@onmouseleave="OnEditorMouseUp">
@if (PageCount <= 0)
{
<div class="sender-image-editor__empty">@L("SenderEditor_NoPagesToDisplay", "Keine Seiten zur Anzeige verfügbar.")</div>
}
else
{
@if (Pages.Count == 0 && !string.IsNullOrWhiteSpace(PdfDataUrl))
{
<div class="sender-image-editor__native-preview">
@@ -85,7 +88,8 @@
</div>
}
</div>
}
}
</div>
</div>
@code {