Refactor file selection UI to use a status badge

This commit is contained in:
Thorsten Sommer 2026-07-21 09:14:08 +02:00
parent 1f2f429602
commit 0ab293c473
Signed by untrusted user who does not match committer: tsommer
GPG Key ID: 371BBA77A02C0108

View File

@ -4,10 +4,24 @@
{ {
<div @onmouseenter="@this.OnMouseEnter" @onmouseleave="@this.OnMouseLeave"> <div @onmouseenter="@this.OnMouseEnter" @onmouseleave="@this.OnMouseLeave">
<MudPaper Outlined="true" Class="@this.dragClass"> <MudPaper Outlined="true" Class="@this.dragClass">
<MudStack Row="true" AlignItems="AlignItems.Start" StretchItems="StretchItems.None" Wrap="Wrap.Wrap"> <MudStack Row="true" AlignItems="AlignItems.Center" StretchItems="StretchItems.None" Wrap="Wrap.Wrap">
<MudButton StartIcon="@Icons.Material.Filled.Description" OnClick="@(async () => await this.SelectFile())" Variant="Variant.Filled" Disabled="@this.IsUnavailable"> @if (this.ShowAttachedDocumentState && this.hasLoadedFileContent)
@this.ButtonText {
</MudButton> <MudTooltip Text="@this.FileLoadedTooltip()">
<MudBadge Icon="@Icons.Material.Filled.Check" Color="Color.Success" Overlap="true">
<MudButton StartIcon="@Icons.Material.Filled.Description" OnClick="@(async () => await this.SelectFile())" Variant="Variant.Filled" Disabled="@this.IsUnavailable">
@this.ButtonText
</MudButton>
</MudBadge>
</MudTooltip>
}
else
{
<MudButton StartIcon="@Icons.Material.Filled.Description" OnClick="@(async () => await this.SelectFile())" Variant="Variant.Filled" Disabled="@this.IsUnavailable">
@this.ButtonText
</MudButton>
}
@if (this.IsCurrentTargetBusy) @if (this.IsCurrentTargetBusy)
{ {
<MediaTranscriptionStatus Owner="@this.EffectiveImportOwner" TargetId="@this.EffectiveMediaImportTarget.TargetId" Compact="true"/> <MediaTranscriptionStatus Owner="@this.EffectiveImportOwner" TargetId="@this.EffectiveMediaImportTarget.TargetId" Compact="true"/>
@ -18,15 +32,6 @@
@T("Drop one file here to load its content.") @T("Drop one file here to load its content.")
</MudText> </MudText>
} }
<MudSpacer/>
@if (this.ShowAttachedDocumentState && this.hasLoadedFileContent)
{
<MudTooltip Text="@this.FileLoadedTooltip()">
<MudIcon Icon="@Icons.Material.Filled.AttachFile" Color="Color.Success"/>
</MudTooltip>
}
</MudStack> </MudStack>
</MudPaper> </MudPaper>
</div> </div>
@ -34,15 +39,23 @@
else else
{ {
<MudStack Row="true" AlignItems="AlignItems.Center" StretchItems="StretchItems.None" Wrap="Wrap.Wrap" Class="mb-3"> <MudStack Row="true" AlignItems="AlignItems.Center" StretchItems="StretchItems.None" Wrap="Wrap.Wrap" Class="mb-3">
<MudButton StartIcon="@Icons.Material.Filled.Description" OnClick="@(async () => await this.SelectFile())" Variant="Variant.Filled" Disabled="@this.IsUnavailable">
@this.ButtonText
</MudButton>
<MediaTranscriptionStatus Owner="@this.EffectiveImportOwner" TargetId="@this.EffectiveMediaImportTarget.TargetId" Compact="true"/>
@if (this.ShowAttachedDocumentState && this.hasLoadedFileContent) @if (this.ShowAttachedDocumentState && this.hasLoadedFileContent)
{ {
<MudTooltip Text="@this.FileLoadedTooltip()"> <MudTooltip Text="@this.FileLoadedTooltip()">
<MudIcon Icon="@Icons.Material.Filled.AttachFile" Color="Color.Success" /> <MudBadge Icon="@Icons.Material.Filled.Check" Color="Color.Success" Overlap="true">
<MudButton StartIcon="@Icons.Material.Filled.Description" OnClick="@(async () => await this.SelectFile())" Variant="Variant.Filled" Disabled="@this.IsUnavailable">
@this.ButtonText
</MudButton>
</MudBadge>
</MudTooltip> </MudTooltip>
} }
else
{
<MudButton StartIcon="@Icons.Material.Filled.Description" OnClick="@(async () => await this.SelectFile())" Variant="Variant.Filled" Disabled="@this.IsUnavailable">
@this.ButtonText
</MudButton>
}
<MediaTranscriptionStatus Owner="@this.EffectiveImportOwner" TargetId="@this.EffectiveMediaImportTarget.TargetId" Compact="true"/>
</MudStack> </MudStack>
} }