admin/HawkeyeVision
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better image preview window

Browse Source
This commit is contained in:
EugeneTes
2026-03-19 09:26:05 +01:00
parent b686343811
commit 7173248532
3 changed files with 71 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
VisionBuilder.UI.Blazor/Dialogs/ImagePreviewDialog.razor
View File

@@ -1,40 +1,47 @@
@using MudBlazor
@implements IDisposable
<MudDialog>
<MudDialog Class="image-preview-dlg" DefaultFocus="DefaultFocus.None">
<DialogContent>
@if (ViewModel != null)
{
<div class="image-preview-dialog">
<div class="imgpreview-label">@ViewModel.ImageName</div>
<div class="imgpreview-toolbar">
<div class="imgpreview-toolbar-left">
@if (ViewModel.IsPreviousImageEnabled)
{
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Class="imgpreview-btn"
OnClick="OnPrevious">Previous image</MudButton>
}
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Class="imgpreview-btn"
OnClick="OnSwitchView">@(ViewModel.OriginalView ? "Show Analysis" : "Show Original")</MudButton>
</div>
<div class="imgpreview-toolbar-right">
@if (ViewModel.LearnButtonVisible)
{
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Class="imgpreview-btn"
OnClick="OnLearn">Learn this</MudButton>
}
@if (ViewModel.IsNextImageEnabled)
{
<MudButton Variant="Variant.Outlined" Color="Color.Primary" Class="imgpreview-btn"
OnClick="OnNext">Next image</MudButton>
}
<MudButton Variant="Variant.Filled" Color="Color.Primary" Class="imgpreview-btn"
OnClick="Close">Close</MudButton>
</div>
</div>
<div class="imgpreview-image-area">
@{
var imageUri = ViewModel.ImageAnalysis?.ToBase64DataUri();
}
@if (!string.IsNullOrEmpty(imageUri))
{
<img src="@imageUri" alt="@ViewModel.ImageName" class="image-preview-img" />
<img src="@imageUri" alt="@ViewModel.ImageName" class="imgpreview-image" />
}
<div class="image-preview-info">
<MudText Typo="Typo.subtitle1">@ViewModel.ImageName</MudText>
</div>
<div class="image-preview-actions">
<MudButton Variant="Variant.Outlined" Disabled="@(!ViewModel.IsPreviousImageEnabled)"
OnClick="OnPrevious">Previous</MudButton>
<MudButton Variant="Variant.Outlined"
OnClick="OnSwitchView">@(ViewModel.OriginalView ? "Analysis" : "Original")</MudButton>
<MudButton Variant="Variant.Outlined" Disabled="@(!ViewModel.IsNextImageEnabled)"
OnClick="OnNext">Next</MudButton>
@if (ViewModel.LearnButtonVisible)
{
<MudButton Variant="Variant.Filled" Color="Color.Primary"
OnClick="OnLearn">Learn</MudButton>
}
</div>
</div>
}
</DialogContent>
<DialogActions>
<MudButton OnClick="Close">Close</MudButton>
</DialogActions>
</MudDialog>
@code {

6
VisionBuilder.UI.Blazor/Services/BlazorImagePreviewService.cs
View File

@@ -25,8 +25,10 @@ public class BlazorImagePreviewService : IImagePreviewService
};
var options = new DialogOptions
{
MaxWidth = MaxWidth.Large,
FullWidth = true
MaxWidth = MaxWidth.False,
FullWidth = true,
FullScreen = true,
NoHeader = true
};
var dialog = await _dialogService.ShowAsync<ImagePreviewDialog>("Image Preview", parameters, options);
await dialog.Result;

52
VisionBuilder.UI.Blazor/wwwroot/css/visionbuilder.css
View File

@@ -244,28 +244,52 @@
}
/* Image Preview Dialog */
.image-preview-dialog {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
.image-preview-dlg .mud-dialog-content {
padding: 0 !important;
}
.image-preview-img {
max-width: 100%;
max-height: 60vh;
object-fit: contain;
}
.image-preview-info {
.imgpreview-label {
text-align: center;
font-size: 1rem;
padding: 4px 16px;
background: #fff;
}
.image-preview-actions {
.imgpreview-toolbar {
display: flex;
justify-content: space-between;
padding: 8px 16px;
gap: 8px;
}
.imgpreview-toolbar-left,
.imgpreview-toolbar-right {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.imgpreview-btn {
min-width: 140px !important;
height: 52px !important;
font-weight: 600 !important;
font-size: 0.8rem !important;
font-family: 'Verdana', sans-serif !important;
}
.imgpreview-image-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
min-height: 0;
padding: 8px 16px 16px;
}
.imgpreview-image {
max-width: 100%;
max-height: calc(100vh - 200px);
object-fit: contain;
}
/* Settings Dialog */