Added a compact form to the text switch

This commit is contained in:
Thorsten Sommer 2026-09-14 15:15:34 +02:00
parent b739e1a946
commit 1e4a5b4459
Signed by untrusted user who does not match committer: tsommer
GPG Key ID: 371BBA77A02C0108
3 changed files with 18 additions and 5 deletions

View File

@ -7,11 +7,11 @@
<MudTooltip Text="@T("Select the data you want to use here.")" Placement="Placement.Top">
@if (this.PopoverTriggerMode is PopoverTriggerMode.ICON)
{
<MudIconButton Icon="@AppIcons.DATABASE" Class="@this.PopoverButtonClasses" OnClick="@(() => this.ToggleDataSourceSelection())"/>
<MudIconButton Icon="@AppIcons.DATABASE" Class="@this.PopoverButtonClasses" OnClick="@this.ToggleDataSourceSelection"/>
}
else
{
<MudButton Variant="Variant.Filled" StartIcon="@AppIcons.DATABASE" Class="@this.PopoverButtonClasses" OnClick="@(() => this.ToggleDataSourceSelection())">
<MudButton Variant="Variant.Filled" StartIcon="@AppIcons.DATABASE" Class="@this.PopoverButtonClasses" OnClick="@this.ToggleDataSourceSelection">
@T("Select data")
</MudButton>
}
@ -89,7 +89,7 @@
case false:
<MudField Label="@T("Available Data Sources")" Variant="Variant.Outlined" Class="mb-2" Disabled="@this.aiBasedSourceSelection">
<MudList T="IDataSource" Dense="@true" Class="data-source-rows" SelectionMode="@this.GetListSelectionMode()" @bind-SelectedValues:get="@this.selectedDataSources" @bind-SelectedValues:set="@(x => this.SelectionChanged(x))" Style="max-height: 14em;">
<MudList T="IDataSource" Dense="@true" Class="data-source-rows" SelectionMode="@this.GetListSelectionMode()" @bind-SelectedValues:get="@this.selectedDataSources" @bind-SelectedValues:set="@this.SelectionChanged" Style="max-height: 14em;">
@foreach (var source in this.availableDataSources)
{
<MudListItem Value="@source">
@ -200,7 +200,7 @@ else if (this.SelectionMode is DataSourceSelectionMode.CONFIGURATION_MODE)
@if (!string.IsNullOrWhiteSpace(this.ConfigurationHeaderMessage))
{
<MudText Typo="Typo.body1">
<MudText Typo="Typo.body2">
@this.ConfigurationHeaderMessage
</MudText>
}

View File

@ -39,7 +39,7 @@ public partial class MudTextSwitch : ComponentBase
[Parameter]
public bool Dense { get; set; }
private string FieldClasses => this.Dense ? "mb-2" : "mb-3";
private string FieldClasses => this.Dense ? "mb-2 text-switch-dense" : "mb-3";
private Size SwitchSize => this.Dense ? Size.Small : Size.Medium;
}

View File

@ -512,3 +512,16 @@ tr:has(> .provider-group-header) .mud-icon-button {
background-color: var(--mud-palette-background-gray);
border-radius: var(--mud-default-borderradius);
}
/*
* The frame around a text switch in its compact form. MudBlazor pads the slot of an outlined field
* with 18.5px above and below, which is the right amount for the line of text such a field usually
* holds -- a switch of 24px is left swimming in the middle of it. Size.Small already took the switch
* down; this brings the frame with it, and it has to name the MudBlazor classes to outweigh their
* specificity. Only the two vertical values of that shorthand are replaced, so the 14px to the left
* and right stay as they are.
*/
.text-switch-dense .mud-input-slot.mud-input-root-outlined {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}