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