Skip to content

Commit e9da78b

Browse files
mckaragozmckaragoz
authored
MudPopup Initialize (#35)
1 parent 2f2575b commit e9da78b

File tree

11 files changed

+322
-2
lines changed

11 files changed

+322
-2
lines changed

‎CodeBeam.MudExtensions/Components/Popup/MudPopup.razor‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@namespace MudExtensions
2+
@inherits MudComponentBase
3+
@using MudBlazor.Events
4+
5+
@if (Open)
6+
{
7+
<MudBreakpointProvider OnBreakpointChanged="GetBreakpoint" />
8+
<div class="@Classname" style="@Stylename">
9+
@if (ChildContent != null)
10+
{
11+
@ChildContent
12+
}
13+
else
14+
{
15+
<MudStack Class="mud-width-full" Row="@((_breakpoint != Breakpoint.Xs && PopupPosition != PopupPosition.Center))"
16+
AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
17+
@if (!string.IsNullOrEmpty(Icon))
18+
{
19+
<MudIcon Icon="@Icon" Color="@Color" />
20+
}
21+
22+
<MudText Color="@Color" Typo="Typo.body2">@Text @(LinkContent ?? null)</MudText>
23+
@if (ActionContent != null)
24+
{
25+
@ActionContent
26+
}
27+
else
28+
{
29+
<MudIconButton Icon="@Icons.Filled.Close" Color="@Color" OnClick="@(() => Open = false)" />
30+
}
31+
</MudStack>
32+
}
33+
</div>
34+
}
35+
36+
@if (EnableAnimation == true)
37+
{
38+
<MudAnimate Selector="@($".popup-{_animationGuid}")" AnimationType="Enums.AnimationType.Fade" Value="1" Duration="0.5" />
39+
}

‎CodeBeam.MudExtensions/Components/Popup/MudPopup.razor.cs‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
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 MudPopup : MudComponentBase
14+
{
15+
Guid _animationGuid = Guid.NewGuid();
16+
17+
protected string Classname => new CssBuilder("mud-popup")
18+
.AddClass($"fixed mud-width-full gap-4 pa-4 popup-{_animationGuid}")
19+
.AddClass("mud-popup-center", PopupPosition == PopupPosition.Center)
20+
.AddClass("d-flex", (_breakpoint != Breakpoint.Xs && PopupPosition != PopupPosition.Center))
21+
.AddClass("align-center", PopupPosition == PopupPosition.Bottom || PopupPosition == PopupPosition.Top)
22+
.AddClass($"mud-elevation-{Elevation.ToString()}")
23+
.AddClass(Class)
24+
.Build();
25+
26+
protected string Stylename => new StyleBuilder()
27+
.AddStyle("bottom", $"{Padding}px", PopupPosition == PopupPosition.Bottom)
28+
.AddStyle("top", $"{Padding}px", PopupPosition == PopupPosition.Top)
29+
.AddStyle("left", $"{Padding}px", PopupPosition == PopupPosition.Bottom || PopupPosition == PopupPosition.Top)
30+
.AddStyle("width", $"calc(100% - {Padding * 2}px)", PopupPosition == PopupPosition.Bottom || PopupPosition == PopupPosition.Top)
31+
.AddStyle(Style)
32+
.Build();
33+
34+
[Parameter]
35+
public PopupPosition PopupPosition { get; set; } = PopupPosition.Bottom;
36+
37+
bool _open = false;
38+
/// <summary>
39+
/// The popup's visible state.
40+
/// </summary>
41+
[Parameter]
42+
public bool Open
43+
{
44+
get => _open;
45+
set
46+
{
47+
if (_open == value)
48+
{
49+
return;
50+
}
51+
_open = value;
52+
OpenChanged.InvokeAsync(_open).AndForget();
53+
}
54+
}
55+
56+
/// <summary>
57+
/// Popup's space between the borders. Has no effect on centered popups.
58+
/// </summary>
59+
[Parameter]
60+
public int Padding { get; set; }
61+
62+
/// <summary>
63+
/// If true, popup appears with a fade animation.
64+
/// </summary>
65+
[Parameter]
66+
public bool EnableAnimation { get; set; } = true;
67+
68+
/// <summary>
69+
/// The higher the number, the heavier the drop-shadow.
70+
/// </summary>
71+
[Parameter]
72+
[Category(CategoryTypes.Paper.Appearance)]
73+
public int Elevation { set; get; } = 4;
74+
75+
/// <summary>
76+
/// The icon at the start of the popup. Can be overridden with ChildContent.
77+
/// </summary>
78+
[Parameter]
79+
public string Icon { get; set; }
80+
81+
/// <summary>
82+
/// The text coming after the icon of the popup. Can be overridden with ChildContent.
83+
/// </summary>
84+
[Parameter]
85+
public string Text { get; set; }
86+
87+
/// <summary>
88+
/// Icon and text color.
89+
/// </summary>
90+
[Parameter]
91+
public Color Color { get; set; }
92+
93+
/// <summary>
94+
/// Custom content for override everything.
95+
/// </summary>
96+
[Parameter]
97+
public RenderFragment ChildContent { get; set; }
98+
99+
/// <summary>
100+
/// The action button section. If this renderfragment null, a close icon button will be appear.
101+
/// </summary>
102+
[Parameter]
103+
public RenderFragment ActionContent { get; set; }
104+
105+
/// <summary>
106+
/// The MudLink content continues after the text.
107+
/// </summary>
108+
[Parameter]
109+
public RenderFragment LinkContent { get; set; }
110+
111+
[Parameter]
112+
public EventCallback<bool> OpenChanged { get; set; }
113+
114+
Breakpoint _breakpoint;
115+
protected void GetBreakpoint(Breakpoint breakpoint)
116+
{
117+
_breakpoint = breakpoint;
118+
}
119+
120+
}
121+
}

‎CodeBeam.MudExtensions/Enums/PopupPosition.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
using System.ComponentModel;
2+
3+
namespace MudExtensions
4+
{
5+
public enum PopupPosition
6+
{
7+
[Description("bottom")]
8+
Bottom,
9+
[Description("center")]
10+
Center,
11+
[Description("top")]
12+
Top,
13+
}
14+
}

‎CodeBeam.MudExtensions/Styles/Components/_popup.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
.mud-popup {
3+
z-index: 2000;
4+
overflow: auto;
5+
background-color: var(--mud-palette-background);
6+
min-height: var(--mud-appbar-height);
7+
8+
&.mud-popup-center {
9+
height: 300px;
10+
left: 50%;
11+
top: 50%;
12+
transform: translate(-50%, -50%);
13+
width: 320px;
14+
aspect-ratio: 1 / 1;
15+
}
16+
}

‎CodeBeam.MudExtensions/Styles/MudExtensions.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,19 @@
162162
.mud-section.mud-section-row-end-12 {
163163
grid-row-end: 12; }
164164

165+
.mud-popup {
166+
z-index: 2000;
167+
overflow: auto;
168+
background-color: var(--mud-palette-background);
169+
min-height: var(--mud-appbar-height); }
170+
.mud-popup.mud-popup-center {
171+
height: 300px;
172+
left: 50%;
173+
top: 50%;
174+
transform: translate(-50%, -50%);
175+
width: 320px;
176+
aspect-ratio: 1 / 1; }
177+
165178
.mud-stepper-header {
166179
min-height: 62px;
167180
border-radius: var(--mud-default-borderradius); }

‎CodeBeam.MudExtensions/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.MudExtensions/Styles/MudExtensions.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import 'components/_gallery';
22
@import 'components/_page';
3+
@import 'components/_popup';
34
@import 'components/_stepper';
45
@import 'components/_wheel';

‎CodeBeam.MudExtensions/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/Pages/Components/ApiPage.razor‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,19 @@
119119
</MudTable>
120120
</ExampleCard>
121121

122+
<ExampleCard Title="Api - MudPopup" HasExpansionPanel="true">
123+
<MudTable Items="@(typeof(MudPopup).GetProperties().OrderBy(x => x.Name).ToList())">
124+
<HeaderContent>
125+
<MudTh>Name</MudTh>
126+
<MudTh>Type</MudTh>
127+
</HeaderContent>
128+
<RowTemplate>
129+
<MudTd>@context.Name</MudTd>
130+
<MudTd>@context.PropertyType.ToString()</MudTd>
131+
</RowTemplate>
132+
</MudTable>
133+
</ExampleCard>
134+
122135
<ExampleCard Title="Api - MudScrollbar" HasExpansionPanel="true">
123136
<MudTable Items="@(typeof(MudScrollbar).GetProperties().OrderBy(x => x.Name).ToList())">
124137
<HeaderContent>

‎ComponentViewer/Pages/Components/PopupPage.razor‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
@page "/mudpopup"
2+
@using MudBlazor.Extensions
3+
4+
@if (_childContent)
5+
{
6+
<MudPopup @ref="_popup" Open="_open" Color="Color.Secondary" Text="@_popupText" Icon="@_icon" PopupPosition="_popupPosition" Padding="_padding" EnableAnimation="_enableAnimation">
7+
<ChildContent>
8+
<MudStack Class="mud-width-full">
9+
<div class="d-flex align-center">
10+
<MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Primary" />
11+
<MudSpacer />
12+
<MudIconButton Icon="@Icons.Filled.Close" Color="Color.Primary" OnClick="@(() => _open = false)" />
13+
</div>
14+
<MudText Typo="Typo.h6" Color="Color.Primary">Follow Us</MudText>
15+
<MudText>And get the latest news.</MudText>
16+
<MudTextField T="string" Variant="Variant.Outlined" Label="Email" />
17+
<MudButton Variant="Variant.Filled" OnClick="@(() => _open = false)">Accept and Send</MudButton>
18+
</MudStack>
19+
</ChildContent>
20+
</MudPopup>
21+
}
22+
else
23+
{
24+
<MudPopup @ref="_popup" Open="_open" Color="Color.Secondary" Text="@_popupText" Icon="@_icon" PopupPosition="_popupPosition" Padding="_padding" EnableAnimation="_enableAnimation">
25+
<LinkContent>
26+
<MudLink Typo="Typo.body2">@_linkText</MudLink>
27+
</LinkContent>
28+
<ActionContent>
29+
<div>
30+
<MudButton Variant="Variant.Filled" OnClick="@(() => _open = false)">Accept</MudButton>
31+
</div>
32+
</ActionContent>
33+
</MudPopup>
34+
}
35+
36+
<ExamplePage Title="MudPopup">
37+
<ExampleCard Title="Usage" Description="Place MudPopup to the beginning or the end of the page.">
38+
<MudGrid>
39+
<MudItem xs="12" sm="8">
40+
<MudStack Spacing="4">
41+
<MudStack Row="true" Spacing="4">
42+
<MudButton Variant="Variant.Outlined" Color="Color.Primary" OnClick="SetGdprContent">GDPR Content</MudButton>
43+
<MudButton Variant="Variant.Outlined" Color="Color.Primary" OnClick="SetSubscribeContent">Subscribe Content</MudButton>
44+
</MudStack>
45+
<MudRadioGroup @bind-SelectedOption="_icon">
46+
<MudRadio Option="@Icons.Custom.Brands.MudBlazor"><MudIcon Icon="@Icons.Custom.Brands.MudBlazor" /></MudRadio>
47+
<MudRadio Option="@Icons.Filled.Info"><MudIcon Icon="@Icons.Filled.Info" /></MudRadio>
48+
</MudRadioGroup>
49+
<MudTextField @bind-Value="_popupText" Label="Text" />
50+
<MudTextField @bind-Value="_linkText" Label="Link Text" />
51+
</MudStack>
52+
</MudItem>
53+
54+
<MudItem xs="12" sm="4">
55+
<MudStack Spacing="4">
56+
<MudSelect @bind-Value="_popupPosition" Variant="Variant.Outlined" Label="Popup Position">
57+
@foreach (PopupPosition item in Enum.GetValues<PopupPosition>())
58+
{
59+
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
60+
}
61+
</MudSelect>
62+
<MudNumericField @bind-Value="_padding" Min="0" Max="300" Variant="Variant.Outlined" Label="Padding" />
63+
<MudSwitch @bind-Checked="_enableAnimation" Color="Color.Primary" Label="Enable Animation" />
64+
<MudButton OnClick="@(() => _open = true)">Show Popup</MudButton>
65+
</MudStack>
66+
</MudItem>
67+
</MudGrid>
68+
</ExampleCard>
69+
</ExamplePage>
70+
71+
@code{
72+
MudPopup _popup;
73+
PopupPosition _popupPosition;
74+
bool _open = true;
75+
int _padding;
76+
bool _childContent = false;
77+
bool _enableAnimation = true;
78+
79+
string _popupText = "This website using cookies to improve your experience and security.";
80+
string _linkText = "Privacy Policy";
81+
string _icon = @Icons.Custom.Brands.MudBlazor;
82+
83+
private void SetGdprContent()
84+
{
85+
_popupText = "This website using cookies to improve your experience and security.";
86+
_linkText = "Privacy Policy";
87+
_icon = @Icons.Custom.Brands.MudBlazor;
88+
_childContent = false;
89+
}
90+
91+
private void SetSubscribeContent()
92+
{
93+
_popupText = "This website using cookies to improve your experience and security.";
94+
_linkText = "Privacy Policy";
95+
_icon = @Icons.Custom.Brands.MudBlazor;
96+
_childContent = true;
97+
}
98+
}

0 commit comments

Comments
 (0)