Skip to content

Commit 2c59cf0

Browse files
mckaragozmckaragoz
authored
Select Visual HotFixes (#225)
* Select Visual HotFixes * Combobox SelectAll and Editable Fix * Last SelectAll Editable Fix * Last
1 parent 62d240b commit 2c59cf0

File tree

11 files changed

+55
-44
lines changed

11 files changed

+55
-44
lines changed

‎CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -115,9 +115,10 @@
115115
@PopoverStartContent
116116
@if (MultiSelection)
117117
{
118-
if (Editable)
118+
<div Style="position: sticky; top: 0px; background-color: var(--mud-palette-background); z-index: 2" @onkeydown:stopPropagation>
119+
@if (Editable)
119120
{
120-
<div Class="pa-2" Style="position: sticky; top: 0px; background-color: var(--mud-palette-background); z-index: 2" @onkeydown:stopPropagation>
121+
<div class="pa-2">
121122
<MudTextFieldExtended @ref="_searchbox" T="string" Value="_searchString" ValueChanged="@HandleInternalValueChanged" Margin="Margin.Dense"
122123
Variant="Variant.Outlined" Immediate="true" OnKeyDown="SearchBoxHandleKeyDown" OnKeyUp="SearchBoxHandleKeyUp" Clearable="@SearchBoxClearable">
123124
<AdornmentEnd>
@@ -127,14 +128,15 @@
127128
</div>
128129
}
129130

130-
if (SelectAll)
131+
@if (SelectAll)
131132
{
132133
<div class="@($"mud-combobox-item mud-combobox-item-clickable mud-combobox-item-{Dense.ToDescriptionString()} mud-ripple d-flex")" @onclick="SelectAllItems" @onclick:stopPropagation="true">
133134
<MudCheckBox Class="mx-4" @bind-Checked="_allSelected" Color="@Color" @onclick="SelectAllItems" Dense="true" />
134135
<MudText Typo="GetTypo()">@SelectAllText</MudText>
135136
</div>
136137
<MudDivider />
137138
}
139+
</div>
138140
}
139141

140142
@ChildContent

‎CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor.cs‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1213,7 +1213,6 @@ protected async Task SelectAllItems()
12131213
}
12141214
await SelectedValuesChanged.InvokeAsync(SelectedValues);
12151215
await SetValueAsync(SelectedValues.LastOrDefault(), false);
1216-
_searchString = Converter.Set(SelectedValues.LastOrDefault());
12171216
_allSelected = true;
12181217
}
12191218
else

‎CodeBeam.MudBlazor.Extensions/Components/ListExtended/MudListExtended.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
{
2626
@if (SearchBox == true)
2727
{
28-
<MudListSubheaderExtended T="T" Style="position: sticky; top: 0px; padding-top: 8px; margin-top: -8px; background-color: var(--mud-palette-background); z-index: 10">
28+
<MudListSubheaderExtended T="T" Style="position: sticky; top: -8px; padding-top: 8px; margin-top: -8px; background-color: var(--mud-palette-background); z-index: 10">
2929

3030
<div @onkeydown:stopPropagation class="mud-list-item-extended">
3131
@if (MultiSelection && SelectAll && SelectAllPosition == SelectAllPosition.NextToSearchBox && ParentList == null)

‎CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor‎

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,51 +9,30 @@
99
<MudInputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@Classname" Style="@Style"
1010
Error="@Error" ErrorText="@ErrorText" ErrorId="@ErrorId" Disabled="@Disabled" @onclick="@ToggleMenu" Required="@Required" ForId="@FieldId">
1111
<InputContent>
12-
<MudInputExtended @ref="_elementReference" InputType="InputType.Hidden" MockInputStyle="@(ValuePresenter == ValuePresenter.Chip ? "width: 0px" : null)"
12+
<MudInputExtended @ref="_elementReference" InputType="InputType.Hidden"
1313
Class="@InputClassname" Style="@InputStyle" Margin="@Margin" Placeholder="@Placeholder"
1414
Variant="@Variant"
1515
TextUpdateSuppression="false"
1616
Value="@(Strict && !IsValueInList ? null : Text)" DisableUnderLine="@DisableUnderLine"
1717
Disabled="@Disabled" ReadOnly="true" Error="@Error" ErrorId="@ErrorId"
1818
Clearable="@Clearable" OnClearButtonClick="(async (e) => await SelectClearButtonClickHandlerAsync(e))"
19-
@attributes="UserAttributes" OnBlur="@OnLostFocus" ForceShrink="@ForceShrink">
19+
@attributes="UserAttributes" OnBlur="@OnLostFocus" ForceShrink="@ForceShrink"
20+
ShowVisualiser="true" DataVisualiserStyle="min-height: 1.1876em">
2021

2122
<AdornmentEnd>
2223
<MudIcon Icon="@_currentIcon" Color="@AdornmentColor" Size="@IconSize" @onclick="OnAdornmentClick" />
2324
</AdornmentEnd>
2425

2526
<DataVisualiser>
26-
@if (ValuePresenter == ValuePresenter.Chip)
27-
{
28-
<MudChipSet Class="d-flex flex-wrap mud-width-full" Style="row-gap: 4px" AllClosable="ChipCloseable" OnClose="ChipClosed">
29-
@if (ItemCollection != null)
30-
{
31-
foreach (var item in ItemCollection.Where(x => SelectedValues.Contains(x)))
32-
{
33-
<MudChip Class="@ChipClass" Value="@item" Text="@Converter.Set(item)" Color="@Color" Size="@ChipSize" Variant="@ChipVariant" />
34-
}
35-
}
36-
else
37-
{
38-
foreach (var item in Items?.Where(x => SelectedValues.Contains(x.Value)) ?? new List<MudSelectItemExtended<T>>())
39-
{
40-
<MudChip Class="@ChipClass" Value="item.Value" Text="@(string.IsNullOrEmpty(item.Text) ? Converter.Set(item.Value) : item.Text)" Color="@Color" Size="@ChipSize" Variant="@ChipVariant" />
41-
}
42-
}
43-
</MudChipSet>
44-
}
45-
</DataVisualiser>
46-
47-
<ChildContent>
4827
<div class="@TemplateClass">
4928
@if (Strict && !IsValueInList)
5029
{
5130
//Show nothing
5231
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
5332
}
54-
else if (ValuePresenter == ValuePresenter.Text)
33+
@if (ValuePresenter == ValuePresenter.Text)
5534
{
56-
@if (string.IsNullOrEmpty(Text))
35+
if (string.IsNullOrEmpty(Text))
5736
{
5837
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
5938
}
@@ -66,10 +45,22 @@
6645
{
6746
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
6847
}
69-
else
70-
{
71-
@*Chips show under DataVisualiser RenderFragment*@
72-
}
48+
<MudChipSet Class="d-flex flex-wrap mud-width-full" Style="row-gap: 4px" AllClosable="ChipCloseable" OnClose="ChipClosed">
49+
@if (ItemCollection != null)
50+
{
51+
foreach (var item in ItemCollection.Where(x => SelectedValues.Contains(x)))
52+
{
53+
<MudChip Class="@ChipClass" Value="@item" Text="@Converter.Set(item)" Color="@Color" Size="@ChipSize" Variant="@ChipVariant" />
54+
}
55+
}
56+
else
57+
{
58+
foreach (var item in Items?.Where(x => SelectedValues.Contains(x.Value)) ?? new List<MudSelectItemExtended<T>>())
59+
{
60+
<MudChip Class="@ChipClass" Value="item.Value" Text="@(string.IsNullOrEmpty(item.Text) ? Converter.Set(item.Value) : item.Text)" Color="@Color" Size="@ChipSize" Variant="@ChipVariant" />
61+
}
62+
}
63+
</MudChipSet>
7364
}
7465
else if (ValuePresenter == ValuePresenter.ItemContent)
7566
{
@@ -104,6 +95,11 @@
10495
}
10596
}
10697
</div>
98+
99+
</DataVisualiser>
100+
101+
<ChildContent>
102+
107103
</ChildContent>
108104
</MudInputExtended>
109105

‎CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor.cs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ public MudSelectExtended()
5252

5353
protected string InputClassname =>
5454
new CssBuilder("mud-select-input-extended")
55+
.AddClass("mud-select-extended-nowrap", NoWrap)
5556
.AddClass(InputClass)
5657
.Build();
5758

@@ -131,6 +132,13 @@ public MudSelectExtended()
131132
[Category(CategoryTypes.List.Selecting)]
132133
public bool SelectValueOnTab { get; set; } = true;
133134

135+
/// <summary>
136+
/// If false multiline text show. Default is false.
137+
/// </summary>
138+
[Parameter]
139+
[Category(CategoryTypes.List.Selecting)]
140+
public bool NoWrap { get; set; }
141+
134142
/// <summary>
135143
/// User class names for the popover, separated by space
136144
/// </summary>

‎CodeBeam.MudBlazor.Extensions/Styles/Components/_selectextended.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,12 @@
6060
.mud-select-input-extended {
6161
cursor: pointer;
6262

63+
& .mud-select-extended-nowrap {
64+
white-space: nowrap;
65+
}
66+
6367
& .mud-input-slot {
6468
overflow: hidden;
65-
white-space: nowrap;
6669
text-overflow: ellipsis;
6770
}
6871

‎CodeBeam.MudBlazor.Extensions/Styles/MudExtensions.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -799,9 +799,10 @@
799799
height: 2px; }
800800
.mud-select-extended .mud-select-input-extended {
801801
cursor: pointer; }
802+
.mud-select-extended .mud-select-input-extended .mud-select-extended-nowrap {
803+
white-space: nowrap; }
802804
.mud-select-extended .mud-select-input-extended .mud-input-slot {
803805
overflow: hidden;
804-
white-space: nowrap;
805806
text-overflow: ellipsis; }
806807
.mud-select-extended .mud-select-input-extended .mud-input-adornment-end {
807808
margin-left: 0; }

‎CodeBeam.MudBlazor.Extensions/Styles/MudExtensions.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎CodeBeam.MudBlazor.Extensions/wwwroot/MudExtensions.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ComponentViewer.Docs/Pages/Examples/SelectExtendedExample4.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</MudItem>
1111

1212
<MudItem xs="12" sm="6">
13-
<MudSelectExtended ItemCollection="_players" ValuePresenter="ValuePresenter.ItemContent" TemplateClass="d-flex align-center" Placeholder="Template & ItemContent" Label="Select Player" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
13+
<MudSelectExtended ItemCollection="_players" ValuePresenter="ValuePresenter.ItemContent" Placeholder="Template & ItemContent" Label="Select Player" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
1414
<ItemTemplate>
1515
<MudStack Class="mud-width-full" Justify="Justify.SpaceBetween">
1616
<MudText><b>@context.Value.Item1</b></MudText>
@@ -27,7 +27,7 @@
2727
</MudItem>
2828

2929
<MudItem xs="12" sm="6">
30-
<MudSelectExtended ItemCollection="_players" DisableSelectedBackground="true" ValuePresenter="ValuePresenter.Chip" MultiSelection="true" TemplateClass="d-flex align-center" Placeholder="Both Templates & MultiSelection" Label="Select Player" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
30+
<MudSelectExtended ItemCollection="_players" DisableSelectedBackground="true" ValuePresenter="ValuePresenter.Chip" MultiSelection="true" Placeholder="Both Templates & MultiSelection" Label="Select Player" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
3131
<ItemTemplate>
3232
<MudStack Class="mud-width-full" Justify="Justify.SpaceBetween">
3333
<MudText><b>@context.Value.Item1</b></MudText>

0 commit comments

Comments
 (0)