Skip to content

Commit c63fc22

Browse files
mckaragozmckaragoz
committed
ToolBar Implementations
1 parent 722c959 commit c63fc22

9 files changed

Lines changed: 220 additions & 25 deletions

File tree

‎docs/CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/Examples/DateTimePickerExample1.razor‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33

44
<MudGrid>
55
<MudItem xs="12" sm="8">
6-
<MudDateTimePicker @bind-Value="_date" Editable="_editable" Label="Date" Clearable="_clearable"
6+
<MudDateTimePicker @bind-Value="_date" Editable="_editable" Label="Date" Clearable="_clearable" AmPm="_amPm"
77
ShowToolbar="_showToolbar" Variant="_variant" Color="_color"
88
Format="@_dateFormat"
99
TransformOrigin="Origin.TopCenter" AnchorOrigin="Origin.BottomCenter" />
1010
</MudItem>
1111

1212
<MudItem xs="12" sm="4">
13-
<MudStack Spacing="4">
13+
<MudStack Spacing="2">
1414
<MudSelect @bind-Value="_dateView" Variant="Variant.Outlined" Label="Date View">
1515
@foreach (DateView item in Enum.GetValues<DateView>())
1616
{
@@ -24,10 +24,10 @@
2424
}
2525
</MudSelect>
2626
<MudSwitchM3 @bind-Value="_editable" Color="Color.Secondary" Label="Editable" />
27+
<MudSwitchM3 @bind-Value="_clearable" Color="Color.Secondary" Label="Clearable" />
2728
<MudSwitchM3 @bind-Value="_showToolbar" Color="Color.Secondary" Label="Show Toolbar" />
2829
<MudSwitchM3 @bind-Value="_showHeader" Color="Color.Secondary" Label="Show Header" />
29-
<MudSwitchM3 @bind-Value="_submitOnClose" Color="Color.Secondary" Label="Submit On Close" />
30-
<MudSwitchM3 @bind-Value="_isAdornmentEnd" Label="Adornment End" Color="Color.Secondary" />
30+
<MudSwitchM3 @bind-Value="_amPm" Label="AmPm" Color="Color.Secondary" />
3131
<MudSelect @bind-Value="_color" Variant="Variant.Outlined" Label="Color">
3232
@foreach (Color item in Enum.GetValues<Color>())
3333
{
@@ -46,10 +46,9 @@
4646
private bool _editable = false;
4747
private bool _showToolbar = true;
4848
private bool _showHeader = true;
49-
private bool _submitOnClose = true;
5049
private Color _color = Color.Primary;
5150
private string? _dateFormat;
52-
private bool _isAdornmentEnd = true;
5351
private bool _clearable = false;
5452
private Variant _variant = Variant.Outlined;
53+
private bool _amPm = false;
5554
}

‎docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/Examples/DateTimePickerExample2.razor‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
@namespace MudExtensions.Docs.Examples
2+
@using MudBlazor.Extensions
3+
4+
<MudGrid>
5+
<MudItem xs="12" sm="8">
6+
<MudDateTimePicker @ref="_picker" @bind-Value="_date" Editable="_editable" Label="Date" Clearable="_clearable"
7+
ShowToolbar="_showToolbar" Variant="_variant" Color="_color"
8+
Format="@_dateFormat"
9+
TransformOrigin="Origin.TopCenter" AnchorOrigin="Origin.BottomCenter">
10+
<PickerActions>
11+
<MudButton Class="mr-auto align-self-start" OnClick="@(() => _picker.ClearAsync())">Clear</MudButton>
12+
<MudButton OnClick="@(() => _picker.CloseAsync(false))">Cancel</MudButton>
13+
<MudButton Color="Color.Primary" OnClick="@(() => _picker.CloseAsync())">OK</MudButton>
14+
</PickerActions>
15+
</MudDateTimePicker>
16+
</MudItem>
17+
18+
<MudItem xs="12" sm="4">
19+
<MudStack Spacing="4">
20+
<MudSelect @bind-Value="_dateView" Variant="Variant.Outlined" Label="Date View">
21+
@foreach (DateView item in Enum.GetValues<DateView>())
22+
{
23+
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
24+
}
25+
</MudSelect>
26+
<MudSelect @bind-Value="_variant" Variant="Variant.Outlined" Label="Variant">
27+
@foreach (Variant item in Enum.GetValues<Variant>())
28+
{
29+
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
30+
}
31+
</MudSelect>
32+
<MudSwitchM3 @bind-Value="_editable" Color="Color.Secondary" Label="Editable" />
33+
<MudSwitchM3 @bind-Value="_showToolbar" Color="Color.Secondary" Label="Show Toolbar" />
34+
<MudSwitchM3 @bind-Value="_showHeader" Color="Color.Secondary" Label="Show Header" />
35+
<MudSwitchM3 @bind-Value="_submitOnClose" Color="Color.Secondary" Label="Submit On Close" />
36+
<MudSwitchM3 @bind-Value="_isAdornmentEnd" Label="Adornment End" Color="Color.Secondary" />
37+
<MudSelect @bind-Value="_color" Variant="Variant.Outlined" Label="Color">
38+
@foreach (Color item in Enum.GetValues<Color>())
39+
{
40+
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
41+
}
42+
</MudSelect>
43+
<MudTextField @bind-Value="_dateFormat" Variant="Variant.Outlined" Label="Date Format" />
44+
<MudButton OnClick="@(() => _date = DateTime.Now)">Set Today</MudButton>
45+
</MudStack>
46+
</MudItem>
47+
</MudGrid>
48+
49+
@code {
50+
private MudDateTimePicker<DateTime?> _picker;
51+
52+
private DateTime? _date = DateTime.Now;
53+
private DateView _dateView = DateView.Date;
54+
private bool _editable = false;
55+
private bool _showToolbar = true;
56+
private bool _showHeader = true;
57+
private bool _submitOnClose = true;
58+
private Color _color = Color.Primary;
59+
private string? _dateFormat;
60+
private bool _isAdornmentEnd = true;
61+
private bool _clearable = false;
62+
private Variant _variant = Variant.Outlined;
63+
}

‎src/CodeBeam.MudBlazor.Extensions/CodeBeam.MudBlazor.Extensions.csproj‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@
3535

3636
<!--Uncomment it and build again when you change the CSS/SASS files, currently it fails the CI process-->
3737
<ItemGroup Condition="'$(Configuration)' == 'Debug'">
38-
<!--<PackageReference Include="MudBlazor.SassCompiler" Version="2.0.7">
38+
<PackageReference Include="MudBlazor.SassCompiler" Version="2.0.7">
3939
<PrivateAssets>all</PrivateAssets>
40-
</PackageReference>-->
40+
</PackageReference>
4141
</ItemGroup>
4242

4343
<ItemGroup>

‎src/CodeBeam.MudBlazor.Extensions/Components/DateTimePicker/MudDateTimePicker.razor‎

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,48 @@
99
protected override RenderFragment PickerContent =>
1010
@<CascadingValue Value="@this" IsFixed="true">
1111
<MudPickerToolbar Class="mud-picker-datepicker-toolbar" ShowToolbar="@ShowToolbar" Orientation="@Orientation" PickerVariant="@PickerVariant" Color="@Color" @onmousedown:preventDefault="true">
12-
<MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mud-button-year" OnClick="GoToSelectedYear">@GetFormattedYearString()</MudButton>
13-
<MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mud-button-date">@GetTitleDateString()</MudButton>
14-
<MudToggleIconButton ToggledChanged="@ToggleMode" Icon="@Icons.Material.Filled.AccessTime" ToggledIcon="@Icons.Material.Filled.DateRange" Color="Color.Inherit" />
15-
12+
<MudStack Class="mud-width-full" Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
13+
<MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mud-button-year" OnClick="GoToSelectedYear">@GetFormattedYearString()</MudButton>
14+
15+
@if (_mode == PickerMode.Time)
16+
{
17+
<MudText>@GetTitleDateString()</MudText>
18+
}
19+
20+
<MudToggleGroup T="PickerMode" @bind-Value="_mode" Class="mud-date-time-toggle" SelectedClass="mud-date-time-mode-selected" Size="Size.Small">
21+
<MudToggleItem Value="PickerMode.Date" Class="mud-date-time-toggle-item">
22+
<MudIcon Icon="@Icons.Material.Filled.DateRange" Size="Size.Small" />
23+
</MudToggleItem>
24+
<MudToggleItem Value="PickerMode.Time" Class="mud-date-time-toggle-item">
25+
<MudIcon Icon="@Icons.Material.Filled.AccessTime" Size="Size.Small" />
26+
</MudToggleItem>
27+
</MudToggleGroup>
28+
</MudStack>
29+
30+
<MudStack Class="mud-width-full" Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
31+
@if (_mode == PickerMode.Date)
32+
{
33+
<MudButton Variant="Variant.Text" Color="Color.Inherit" Class="mud-button-date">@GetTitleDateString()</MudButton>
34+
}
35+
else
36+
{
37+
<div class="d-flex align-center mud-ltr">
38+
<MudButton Size="Size.Small" Variant="@Variant.Text" Color="@Color.Inherit" Class="mud-button-date" OnClick="@OnHourClickAsync">@GetHourString()</MudButton>
39+
<MudText Typo="@Typo.h2" Class="mud-button-date" Style="font-size: 2.125rem">:</MudText>
40+
<MudButton Size="Size.Small" Variant="@Variant.Text" Color="@Color.Inherit" Class="mud-button-date" OnClick="@OnMinutesClick">@GetMinuteString()</MudButton>
41+
</div>
42+
43+
@if (AmPm)
44+
{
45+
<MudToggleGroup @bind-Value="_timeHourFormat" @bind-Value:after="@(() => HourFormatChanged(_timeHourFormat))" Class="mud-date-time-toggle" SelectedClass="mud-date-time-mode-selected" Size="Size.Small">
46+
<MudToggleItem Value="@("am")" Text="AM" Class="mud-date-time-toggle-item">
47+
</MudToggleItem>
48+
<MudToggleItem Value="@("pm")" Text="PM" Class="mud-date-time-toggle-item">
49+
</MudToggleItem>
50+
</MudToggleGroup>
51+
}
52+
}
53+
</MudStack>
1654
</MudPickerToolbar>
1755

1856
<MudPickerContent>
@@ -203,14 +241,13 @@
203241
{
204242
var selectedDay = !firstMonthFirstYear ? day : day.AddDays(-1);
205243

206-
// onpointerover = "@(async () => await HandleMouseoverOnPickerCalendarDayButton(tempId))"
244+
// onpointerover = "@(async () => await HandleMouseoverOnPickerCalendarDayButton(tempId))"
207245
<button @key="@selectedDay"
208246
type="button"
209247
style="--day-id:@tempId"
210248
class="mud-button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day @GetDayClasses(tempMonth, selectedDay)"
211249
@onclick="@(async () => await OnDayClickedAsync(selectedDay))"
212250
@onclick:stopPropagation="true"
213-
214251
disabled="@IsDayDisabled(selectedDay)">
215252

216253
<p class="mud-typography mud-typography-body2 mud-inherit-text">
@@ -257,17 +294,14 @@
257294
@for (int i = 1; i <= 12; i++)
258295
{
259296
var _i = i;
260-
var angle = (6 - i) * 30;
261-
<MudText Class="@GetNumberColor(i)" Style="@GetTransform(angle, 109, 0, 5)">
262-
@_i
263-
</MudText>
297+
var angle = (6 - _i) * 30;
298+
<MudText Class="@GetNumberColor(_i)" Style="@GetTransform(angle, 109, 0, 5)">@_i</MudText>
264299
}
265300

266301
@for (int i = 1; i <= 12; i++)
267302
{
268303
var _i = i;
269-
<div class="mud-picker-stick mud-hour" style="@($"transform: rotateZ({_i * 30}deg);")" data-stick-value="@_i">
270-
</div>
304+
<div class="mud-picker-stick mud-hour" style="@($"transform: rotateZ({_i * 30}deg);")" data-stick-value="@_i"></div>
271305
}
272306
}
273307
else

‎src/CodeBeam.MudBlazor.Extensions/Components/DateTimePicker/MudDateTimePicker.razor.cs‎

Lines changed: 76 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ public MudDateTimePicker()
2727
private DotNetObjectReference<MudDateTimePicker<T>> CreateDotNetObjectReference() => DotNetObjectReference.Create(this);
2828

2929
private DateTime? _workingValue;
30-
3130
private readonly SetTime _timeSet = new();
31+
private string _timeHourFormat;
3232

3333
private record SetTime
3434
{
@@ -176,16 +176,19 @@ private async Task OnAmClickedAsync()
176176
{
177177
_timeSet.Hour %= 12;
178178
await UpdateTimeAsync();
179+
await FocusAsync();
179180
}
180181

181182
private async Task OnPmClickedAsync()
182183
{
183-
if (_timeSet.Hour < 12)
184+
if (_timeSet.Hour <= 12)
185+
{
184186
_timeSet.Hour += 12;
187+
}
185188

186189
_timeSet.Hour %= 24;
187-
188190
await UpdateTimeAsync();
191+
await FocusAsync();
189192
}
190193

191194
private DateTimeOffset _lastSetTime = DateTimeOffset.MinValue;
@@ -265,8 +268,8 @@ private async Task UpdateTimeAsync()
265268
//}
266269

267270
_value = FromDateTime(_workingValue);
268-
269271
await SetTextAsync(ConvertSet(_value), false);
272+
await ValueChanged.InvokeAsync(_value);
270273
}
271274

272275
private void SetDatePart(DateTime date)
@@ -564,6 +567,16 @@ private string GetCalendarHeaderClasses(int month)
564567
.AddClass("mud-time-picker-dial-hidden", _timeView != TimeView.Minutes)
565568
.Build();
566569

570+
protected string HoursButtonClassname =>
571+
new CssBuilder("mud-timepicker-button")
572+
.AddClass("mud-timepicker-toolbar-text", _timeView == TimeView.Minutes)
573+
.Build();
574+
575+
protected string MinuteButtonClassname =>
576+
new CssBuilder("mud-timepicker-button")
577+
.AddClass("mud-timepicker-toolbar-text", _timeView == TimeView.Hours)
578+
.Build();
579+
567580
private string GetPointerRotation()
568581
{
569582
return $"rotateZ({GetDeg()}deg);";
@@ -747,6 +760,65 @@ protected async Task SubmitAndCloseAsync()
747760
}
748761
}
749762

763+
/// <summary>
764+
/// Gets the hour portion of the selected time.
765+
/// </summary>
766+
/// <returns>A two-character string depending on whether <see cref="AmPm"/> is set, or <c>--</c> if no value is set.</returns>
767+
private string GetHourString()
768+
{
769+
if (_workingValue?.Hour == null)
770+
{
771+
return "--";
772+
}
773+
774+
return _workingValue.Value.Hour.ToString("D2");
775+
}
776+
777+
/// <summary>
778+
/// Gets the minute portion of the selected time.
779+
/// </summary>
780+
/// <returns>A two-digit string for minutes, or <c>--</c> if no value is set.</returns>
781+
private string GetMinuteString()
782+
{
783+
if (_workingValue?.Minute == null)
784+
{
785+
return "--";
786+
}
787+
788+
return _workingValue.Value.Minute.ToString("D2");
789+
}
790+
791+
private async Task OnHourClickAsync()
792+
{
793+
_timeView = TimeView.Hours;
794+
await FocusAsync();
795+
}
796+
797+
private async Task OnMinutesClick()
798+
{
799+
_timeView = TimeView.Minutes;
800+
await FocusAsync();
801+
}
802+
803+
private async Task HourFormatChanged(string value)
804+
{
805+
if (value == "am")
806+
{
807+
AmPm = true;
808+
await OnAmClickedAsync();
809+
}
810+
else if (value == "pm")
811+
{
812+
AmPm = true;
813+
await OnPmClickedAsync();
814+
}
815+
else if(value == "24")
816+
{
817+
AmPm = false;
818+
}
819+
StateHasChanged();
820+
}
821+
750822
protected override async ValueTask DisposeAsyncCore()
751823
{
752824
await base.DisposeAsyncCore();

‎src/CodeBeam.MudBlazor.Extensions/Styles/Components/_datetimepicker.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.mud-date-time-mode-selected {
2+
background: rgba(0, 0, 0, 0.25) !important;
3+
color: var(--mud-palette-primary-contrast-text);
4+
}
5+
6+
.mud-date-time-toggle {
7+
color: inherit !important;
8+
border-color: inherit !important;
9+
}
10+
11+
.mud-date-time-toggle-item {
12+
color: inherit !important;
13+
border-color: inherit !important;
14+
}

‎src/CodeBeam.MudBlazor.Extensions/Styles/MudExtensions.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
@import 'components/_typographym3';
1212
@import 'components/_transferlist';
1313
@import 'components/_codeinput';
14+
@import 'components/_datetimepicker';
1415

1516
@import 'components/_listextended';
1617
@import 'components/_selectextended';

‎src/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.

0 commit comments

Comments
 (0)