Skip to content

Commit a8ef681

Browse files
mckaragozmckaragoz
authored
MudSpeedDial (#6)
* MudSpeedDial * Fix top center and bottom center anchor
1 parent 3b32210 commit a8ef681

File tree

8 files changed

+433
-9
lines changed

8 files changed

+433
-9
lines changed

‎CodeBeam.MudExtensions/CodeBeam.MudExtensions.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
</ItemGroup>
4040

4141
<ItemGroup>
42-
<None Include="wwwroot\Mud_Secondary.png">
42+
<None Include="..\..\..\..\Desktop\Mud_Secondary.png">
4343
<Pack>True</Pack>
4444
<PackagePath>\</PackagePath>
4545
</None>

‎CodeBeam.MudExtensions/Components/SpeedDial/MudSpeedDial.razor‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@namespace MudExtensions
2+
@inherits MudComponentBase
3+
4+
<div class="absolute" style="@Stylename" @onmouseenter="RootMouseEnter" @onmouseleave="WaitToClose">
5+
<MudFab Color="@Color" OnClick="MainButtonClick" Icon="@GetIcon()" Size="@Size" />
6+
<MudPopover class="d-flex align-center justify-center" @onmouseenter="PopoverMouseEnter" @onmouseleave="PopoverMouseLeave" Open="@Open" Paper="false" AnchorOrigin="_anchorOrigin" TransformOrigin="_transformOrigin" RelativeWidth="true">
7+
<MudStack Class="@StackClassname" Row="_row">
8+
@ChildContent
9+
</MudStack>
10+
</MudPopover>
11+
12+
<MudAnimate Selector="@($".speedDial-{_animationGuid}")" AnimationType="Enums.AnimationType.Fade" Value="1" Duration="0.7" />
13+
</div>

‎CodeBeam.MudExtensions/Components/SpeedDial/MudSpeedDial.razor.cs‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
using Microsoft.AspNetCore.Components;
2+
using MudBlazor;
3+
using MudBlazor.Utilities;
4+
using System;
5+
using System.Collections.Generic;
6+
using System.Linq;
7+
using System.Runtime.InteropServices;
8+
using System.Text;
9+
using System.Threading.Tasks;
10+
11+
namespace MudExtensions
12+
{
13+
public partial class MudSpeedDial : MudComponentBase
14+
{
15+
Guid _animationGuid = Guid.NewGuid();
16+
17+
protected string StackClassname => new CssBuilder("ma-2")
18+
.AddClass($"speedDial-{_animationGuid}")
19+
.AddClass("flex-column-reverse", Origin == Origin.BottomCenter || Origin == Origin.BottomRight || Origin == Origin.BottomLeft)
20+
.Build();
21+
22+
protected string Stylename => new StyleBuilder()
23+
.AddStyle("bottom", $"{Padding}px", Origin == Origin.BottomCenter || Origin == Origin.BottomRight || Origin == Origin.BottomLeft)
24+
.AddStyle("top", $"{Padding}px", Origin == Origin.TopCenter || Origin == Origin.TopRight || Origin == Origin.TopLeft)
25+
.AddStyle("right", $"{Padding}px", !(Origin == Origin.BottomLeft || Origin == Origin.CenterLeft || Origin == Origin.TopLeft))
26+
.AddStyle("left", $"{Padding}px", Origin == Origin.BottomLeft || Origin == Origin.CenterLeft || Origin == Origin.TopLeft)
27+
.AddStyle("left", "50%", Origin == Origin.BottomCenter || Origin == Origin.TopCenter || Origin == Origin.CenterCenter)
28+
.AddStyle("width", "fit-content")
29+
.AddStyle(Style)
30+
.Build();
31+
32+
[Parameter]
33+
public bool Open { get; set; }
34+
35+
[Parameter]
36+
public bool OpenOnHover { get; set; } = true;
37+
38+
[Parameter]
39+
public bool OpenOnClick { get; set; } = true;
40+
41+
[Parameter]
42+
public int Padding { get; set; }
43+
44+
[Parameter]
45+
public EventCallback OnMainButtonClick { get; set; }
46+
47+
[Parameter]
48+
public string Icon { get; set; } = Icons.Filled.Add;
49+
50+
[Parameter]
51+
public string IconOnOpen { get; set; }
52+
53+
[Parameter]
54+
public Size Size { get; set; } = Size.Large;
55+
56+
[Parameter]
57+
public Color Color { get; set; }
58+
59+
[Parameter]
60+
public RenderFragment ChildContent { get; set; }
61+
62+
Origin _origin = Origin.BottomRight;
63+
[Parameter]
64+
public Origin Origin
65+
{
66+
get => _origin;
67+
set
68+
{
69+
if (_origin == value) return;
70+
_origin = value;
71+
UpdateOrigin();
72+
}
73+
}
74+
75+
protected string GetIcon()
76+
{
77+
if (Open == true && !string.IsNullOrEmpty(IconOnOpen))
78+
{
79+
return IconOnOpen;
80+
}
81+
return Icon;
82+
}
83+
84+
protected void ChangeMenu(bool open)
85+
{
86+
Open = open;
87+
StateHasChanged();
88+
}
89+
90+
public void ToggleMenu()
91+
{
92+
ChangeMenu(!Open);
93+
}
94+
95+
public void OpenMenu()
96+
{
97+
ChangeMenu(true);
98+
}
99+
100+
public void CloseMenu()
101+
{
102+
ChangeMenu(false);
103+
}
104+
105+
protected async Task MainButtonClick()
106+
{
107+
if (OpenOnClick)
108+
{
109+
ToggleMenu();
110+
}
111+
await OnMainButtonClick.InvokeAsync();
112+
}
113+
114+
bool _rootMouseEnter;
115+
bool _popoverMouseEnter;
116+
protected void RootMouseEnter()
117+
{
118+
if (OpenOnHover == false)
119+
{
120+
return;
121+
}
122+
_rootMouseEnter = true;
123+
OpenMenu();
124+
125+
}
126+
127+
protected void PopoverMouseEnter()
128+
{
129+
if (OpenOnHover == false)
130+
{
131+
return;
132+
}
133+
_popoverMouseEnter = true;
134+
}
135+
136+
protected async Task PopoverMouseLeave()
137+
{
138+
if (OpenOnHover == false)
139+
{
140+
return;
141+
}
142+
_popoverMouseEnter = false;
143+
await WaitToClose();
144+
}
145+
146+
protected async Task WaitToClose()
147+
{
148+
if (OpenOnHover == false)
149+
{
150+
return;
151+
}
152+
_rootMouseEnter = false;
153+
await Task.Delay(100);
154+
if (_popoverMouseEnter == false && _rootMouseEnter == false)
155+
{
156+
CloseMenu();
157+
}
158+
}
159+
160+
bool _row = false;
161+
Origin _anchorOrigin = Origin.TopCenter;
162+
Origin _transformOrigin = Origin.BottomCenter;
163+
protected void UpdateOrigin()
164+
{
165+
if (Origin == Origin.BottomRight || Origin == Origin.BottomCenter || Origin == Origin.BottomLeft)
166+
{
167+
_row = false;
168+
_anchorOrigin = Origin.TopCenter;
169+
_transformOrigin = Origin.BottomCenter;
170+
}
171+
else if (Origin == Origin.TopRight || Origin == Origin.TopCenter || Origin == Origin.TopLeft)
172+
{
173+
_row = false;
174+
_anchorOrigin = Origin.BottomCenter;
175+
_transformOrigin = Origin.TopCenter;
176+
}
177+
else if (Origin == Origin.CenterLeft || Origin == Origin.CenterCenter || Origin == Origin.CenterRight)
178+
{
179+
_row = true;
180+
_anchorOrigin = Origin.TopCenter;
181+
_transformOrigin = Origin.BottomCenter;
182+
}
183+
//else if (Origin == Origin.CenterRight)
184+
//{
185+
// _row = true;
186+
// _anchorOrigin = Origin.CenterRight;
187+
// _transformOrigin = Origin.CenterLeft;
188+
//}
189+
StateHasChanged();
190+
}
191+
}
192+
}

‎ComponentViewer/Components/ComponentCard.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<MudText Typo="Typo.h6" Color="Color.Inherit">@Title</MudText>
55
</MudCardHeader>
66
<MudCardContent>
7-
<div class="d-flex align-center" style="min-height: 120px">
7+
<div class="d-flex align-center" style="min-height: 100px">
88
<MudText>@Description</MudText>
99
</div>
1010

‎ComponentViewer/Components/ComponentCard.razor.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ public partial class ComponentCard
1717

1818
private void NavigateComponentPage()
1919
{
20-
NavigationManager.NavigateTo($"/{(string.IsNullOrEmpty(ComponentName) ? Title.ToLower() : ComponentName.ToLower())}");
20+
NavigationManager.NavigateTo($"/{(string.IsNullOrEmpty(ComponentName) ? Title.ToLowerInvariant() : ComponentName.ToLowerInvariant())}");
2121
}
2222
}
2323
}

‎ComponentViewer/Pages/Components/ApiPage.razor‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
@page "/api"
2+
@using MudBlazor.Extensions
3+
4+
<ExamplePage Title="API">
5+
<ExampleCard Title="Api - MudAnimate">
6+
<MudTable Items="@(typeof(MudAnimate).GetProperties().OrderBy(x => x.Name).ToList())">
7+
<HeaderContent>
8+
<MudTh>Name</MudTh>
9+
<MudTh>Type</MudTh>
10+
</HeaderContent>
11+
<RowTemplate>
12+
<MudTd>@context.Name</MudTd>
13+
<MudTd>@context.PropertyType.ToString()</MudTd>
14+
</RowTemplate>
15+
</MudTable>
16+
</ExampleCard>
17+
18+
<ExampleCard Title="Api - MudLoading">
19+
<MudTable Items="@(typeof(MudLoading).GetProperties().OrderBy(x => x.Name).ToList())">
20+
<HeaderContent>
21+
<MudTh>Name</MudTh>
22+
<MudTh>Type</MudTh>
23+
</HeaderContent>
24+
<RowTemplate>
25+
<MudTd>@context.Name</MudTd>
26+
<MudTd>@context.PropertyType.ToString()</MudTd>
27+
</RowTemplate>
28+
</MudTable>
29+
</ExampleCard>
30+
31+
<ExampleCard Title="Api - MudLoadingButton">
32+
<MudTable Items="@(typeof(MudLoadingButton).GetProperties().OrderBy(x => x.Name).ToList())">
33+
<HeaderContent>
34+
<MudTh>Name</MudTh>
35+
<MudTh>Type</MudTh>
36+
</HeaderContent>
37+
<RowTemplate>
38+
<MudTd>@context.Name</MudTd>
39+
<MudTd>@context.PropertyType.ToString()</MudTd>
40+
</RowTemplate>
41+
</MudTable>
42+
</ExampleCard>
43+
44+
<ExampleCard Title="Api - MudPage">
45+
<MudTable Items="@(typeof(MudPage).GetProperties().OrderBy(x => x.Name).ToList())">
46+
<HeaderContent>
47+
<MudTh>Name</MudTh>
48+
<MudTh>Type</MudTh>
49+
</HeaderContent>
50+
<RowTemplate>
51+
<MudTd>@context.Name</MudTd>
52+
<MudTd>@context.PropertyType.ToString()</MudTd>
53+
</RowTemplate>
54+
</MudTable>
55+
</ExampleCard>
56+
57+
<ExampleCard Title="Api - MudSection">
58+
<MudTable Items="@(typeof(MudSection).GetProperties().OrderBy(x => x.Name).ToList())">
59+
<HeaderContent>
60+
<MudTh>Name</MudTh>
61+
<MudTh>Type</MudTh>
62+
</HeaderContent>
63+
<RowTemplate>
64+
<MudTd>@context.Name</MudTd>
65+
<MudTd>@context.PropertyType.ToString()</MudTd>
66+
</RowTemplate>
67+
</MudTable>
68+
</ExampleCard>
69+
70+
<ExampleCard Title="Api - MudPasswordField">
71+
<MudTable Items="@(typeof(MudPasswordField<string>).GetProperties().OrderBy(x => x.Name).ToList())">
72+
<HeaderContent>
73+
<MudTh>Name</MudTh>
74+
<MudTh>Type</MudTh>
75+
</HeaderContent>
76+
<RowTemplate>
77+
<MudTd>@context.Name</MudTd>
78+
<MudTd>@context.PropertyType.ToString()</MudTd>
79+
</RowTemplate>
80+
</MudTable>
81+
</ExampleCard>
82+
83+
<ExampleCard Title="Api - MudScrollbar">
84+
<MudTable Items="@(typeof(MudScrollbar).GetProperties().OrderBy(x => x.Name).ToList())">
85+
<HeaderContent>
86+
<MudTh>Name</MudTh>
87+
<MudTh>Type</MudTh>
88+
</HeaderContent>
89+
<RowTemplate>
90+
<MudTd>@context.Name</MudTd>
91+
<MudTd>@context.PropertyType.ToString()</MudTd>
92+
</RowTemplate>
93+
</MudTable>
94+
</ExampleCard>
95+
96+
<ExampleCard Title="Api - MudSpeedDial">
97+
<MudTable Items="@(typeof(MudSpeedDial).GetProperties().OrderBy(x => x.Name).ToList())">
98+
<HeaderContent>
99+
<MudTh>Name</MudTh>
100+
<MudTh>Type</MudTh>
101+
</HeaderContent>
102+
<RowTemplate>
103+
<MudTd>@context.Name</MudTd>
104+
<MudTd>@context.PropertyType.ToString()</MudTd>
105+
</RowTemplate>
106+
</MudTable>
107+
</ExampleCard>
108+
</ExamplePage>

0 commit comments

Comments
 (0)