Skip to content

Commit 444e182

Browse files
sjefvanleeuwensjefvanleeuwen
committed
toaster
1 parent 4d207fd commit 444e182

File tree

27 files changed

+1425
-10
lines changed

27 files changed

+1425
-10
lines changed

‎src/Blazor.AdminLte.Content/wwwroot/plugins/toast.css

+172
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
.blazor-adminlte-toast-container {
2+
display: flex;
3+
flex-direction: column;
4+
position: fixed;
5+
z-index: 99999;
6+
}
7+
8+
.position-topleft,
9+
.position-topright,
10+
.position-topcenter {
11+
top: 0;
12+
}
13+
14+
.position-bottomleft,
15+
.position-bottomright,
16+
.position-bottomcenter {
17+
bottom: 0;
18+
}
19+
20+
.blazor-adminlte-toast {
21+
display: flex;
22+
position: relative;
23+
flex-direction: row;
24+
animation: fadein 1.5s;
25+
margin-bottom: 1rem;
26+
padding: 1rem 1.25rem;
27+
color: #fff;
28+
width: 100vw;
29+
box-shadow: rgba(0,0,0,0.25) 0px 10px 40px;
30+
}
31+
32+
.blazor-adminlte-toast-component {
33+
display: initial;
34+
padding: 0 0 0 0;
35+
}
36+
37+
.blazor-adminlte-toast-info {
38+
background-color: #34a9ad;
39+
}
40+
41+
.blazor-adminlte-toast-success {
42+
background-color: #5fba7d;
43+
}
44+
45+
.blazor-adminlte-toast-warning {
46+
background-color: #c1c13e;
47+
}
48+
49+
.blazor-adminlte-toast-error {
50+
background-color: #ba5e5e;
51+
}
52+
53+
.blazor-adminlte-toast-icon {
54+
display: flex;
55+
flex-direction: column;
56+
justify-content: center;
57+
padding: 0 1rem 0 0;
58+
font-size: 2.5rem;
59+
}
60+
61+
.blazor-adminlte-toast-body {
62+
display: flex;
63+
flex-direction: column;
64+
flex: 1;
65+
}
66+
67+
.blazor-adminlte-toast-body .blazor-adminlte-toast-header {
68+
display: flex;
69+
align-items: flex-start;
70+
justify-content: space-between;
71+
}
72+
73+
.blazor-adminlte-toast-body .blazor-adminlte-toast-header h5 {
74+
font-weight: bold;
75+
text-transform: uppercase;
76+
font-size: 1.5rem;
77+
margin-bottom: 0;
78+
line-height: 32px;
79+
}
80+
81+
.blazor-adminlte-toast-body .blazor-adminlte-toast-header .blazor-adminlte-toast-close {
82+
background-color: transparent;
83+
border: 0;
84+
-webkit-appearance: none;
85+
color: inherit;
86+
font-size: 1.25rem;
87+
}
88+
89+
.blazor-adminlte-toast-body p {
90+
margin-bottom: 0;
91+
font-size: 1rem;
92+
overflow-wrap: break-word;
93+
word-wrap: break-word;
94+
word-break: break-word;
95+
-ms-hyphens: auto;
96+
-moz-hyphens: auto;
97+
-webkit-hyphens: auto;
98+
hyphens: auto;
99+
}
100+
101+
.blazor-adminlte-toast-progressbar {
102+
position: absolute;
103+
bottom: 0;
104+
left: 0;
105+
right: 0;
106+
height: 8px;
107+
border-bottom-left-radius: .25rem;
108+
border-bottom-right-radius: .25rem;
109+
}
110+
111+
.blazor-adminlte-toast-progressbar > span {
112+
position: absolute;
113+
filter: brightness(75%);
114+
height: 8px;
115+
border-bottom-left-radius: .25rem;
116+
background-image: linear-gradient(rgba(0, 0, 0, 0.2) 0 0);
117+
transition: all .5s linear;
118+
}
119+
120+
.blazor-adminlte-toast-action {
121+
cursor: pointer;
122+
}
123+
124+
@keyframes fadein {
125+
from {
126+
opacity: 0;
127+
}
128+
129+
to {
130+
opacity: 1;
131+
}
132+
}
133+
134+
@media (min-width: 576px) {
135+
136+
.position-topleft {
137+
top: 2rem;
138+
left: 2rem;
139+
}
140+
141+
.position-topright {
142+
top: 2rem;
143+
right: 2rem;
144+
}
145+
146+
.position-topcenter {
147+
top: 2rem;
148+
left: 50%;
149+
margin-left: -15rem;
150+
}
151+
152+
.position-bottomleft {
153+
bottom: 2rem;
154+
left: 2rem;
155+
}
156+
157+
.position-bottomright {
158+
bottom: 2rem;
159+
right: 2rem;
160+
}
161+
162+
.position-bottomcenter {
163+
bottom: 2rem;
164+
left: 50%;
165+
margin-left: -15rem;
166+
}
167+
168+
.blazor-adminlte-toast {
169+
width: 30rem;
170+
border-radius: .25rem;
171+
}
172+
}

‎src/Blazor.AdminLte.Site.Shared/Blazor.AdminLte.Site.Shared.csproj

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616

1717
<ItemGroup>
18-
<ProjectReference Include="..\Blazor.AdminLte.UserApi.Client\Blazor.AdminLte.UserApiClient.csproj" />
18+
<ProjectReference Include="..\Blazor.AdminLte.UserApiClient.Abstractions\Blazor.AdminLte.UserApiClient.Abstractions.csproj" />
1919
<ProjectReference Include="..\Blazor.AdminLte\Blazor.AdminLte.csproj" />
2020
</ItemGroup>
2121
<ItemGroup>

‎src/Blazor.AdminLte.Site.Shared/Pages/Forms/Advanced.razor

+63
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
@page "/forms/advanced"
2+
@using Blazor.AdminLte.Alerts.Toaster.Configuration
3+
@using Blazor.AdminLte.Alerts.Toaster.Services
4+
@inject NavigationManager NavigationManager
5+
@inject IToastService toastService
6+
27
<ContentHeader>
38
<Header>
49
<Blazor.AdminLte.PageTitle Title="Advanced Forms" />
@@ -41,6 +46,64 @@
4146
</FormGroup>
4247
</Body>
4348
</Card>
49+
<Card>
50+
<Title><CardTitle>Date Range Picker (MVP)</CardTitle></Title>
51+
<Body>
52+
<button class="btn btn-info" @onclick="@(() => toastService.ShowInfo("I'm an INFO message"))">Info Toast</button>
53+
<button class="btn btn-success" @onclick="@(() => toastService.ShowSuccess("I'm a SUCCESS message with a custom heading", "Congratulations!"))">Success Toast</button>
54+
<button class="btn btn-warning" @onclick="@(() => toastService.ShowWarning("I'm a WARNING message"))">Warning Toast</button>
55+
<button class="btn btn-danger" @onclick="@(() => toastService.ShowError("I'm an ERROR message"))">Error Toast</button>
56+
<button class="btn btn-info" @onclick="@OnShowHtml">Info Toast with HTML</button>
57+
@* <button class="btn btn-info" @onclick="@(() => toastService.ShowInfo("Click to refresh the page", "Click me!", () => { NavigationManager.NavigateTo("/", true); }))">
58+
Info Toast with custom action on click
59+
</button>
60+
*@ <hr />
61+
62+
<h1>Blazored Toasts - Custom Component</h1>
63+
64+
<button class="btn btn-primary" @onclick="@(() => toastService.ShowToast<MyToastComponent>(new ToastInstanceSettings(5, true)))">Custom Toast</button>
65+
<button class="btn btn-secondary" @onclick="@(() => toastService.ShowToast<MyToastComponent>(_toastParameters, new ToastInstanceSettings(5, true)))">Custom Toast with parameters</button>
66+
<hr />
67+
68+
<h1>Blazored Toasts - Remove Toasts</h1>
69+
70+
<button class="btn btn-primary" @onclick="ClearAll">Clear All Toasts</button>
71+
<button class="btn btn-warning" @onclick="ClearWarnings">Clear Warning Toasts</button>
72+
<button class="btn btn-info" @onclick="ClearInfos">Clear Info Toasts</button>
73+
<button class="btn btn-secondary" @onclick="ClearCustom">Clear Custom Toasts</button>
74+
75+
@code
76+
{
77+
private ToastParameters _toastParameters;
78+
79+
protected override void OnInitialized()
80+
{
81+
_toastParameters = new ToastParameters();
82+
_toastParameters.Add(nameof(MyToastComponent.Title), "I'm a custom toast component with parameters");
83+
_toastParameters.Add(nameof(MyToastComponent.ToastParam), "I'm a parameter");
84+
}
85+
86+
private void OnShowHtml()
87+
{
88+
RenderFragment message =@<text>I'm an <em>INFO</em> message with some <strong>bold</strong> text</text>
89+
;
90+
toastService.ShowToast(ToastLevel.Info, message);
91+
}
92+
93+
private void ClearAll()
94+
=> toastService.ClearAll();
95+
96+
private void ClearWarnings()
97+
=> toastService.ClearToasts(ToastLevel.Warning);
98+
99+
private void ClearInfos()
100+
=> toastService.ClearInfoToasts();
101+
102+
private void ClearCustom()
103+
=> toastService.ClearCustomToasts();
104+
}
105+
</Body>
106+
</Card>
44107
</ContentMain>
45108

46109

‎src/Blazor.AdminLte.Site.Shared/Pages/Forms/MyToastComponent.razor

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@if (string.IsNullOrWhiteSpace(Title))
2+
{
3+
<div class="text-white p-4 bg-primary rounded">
4+
<h3 class="mb-0">I'm a custom toast component</h3>
5+
</div>
6+
}
7+
else
8+
{
9+
<div class="text-white p-4 bg-secondary rounded">
10+
<h3>@Title</h3>
11+
<h5 class="mb-0">@ToastParam</h5>
12+
</div>
13+
}
14+
15+
@code{
16+
[Parameter] public string Title { get; set; }
17+
[Parameter] public string ToastParam { get; set; }
18+
}

‎src/Blazor.AdminLte.Site.Shared/Pages/User/Register.razor

+24-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@page "/register"
2+
@using Security.Abstractions.Models.Accounts;
23
@inject NavigationManager NavigationManager
4+
@inject IUserApiClient UserApiClient
35
<!-- note: using styles, not css, we will target Isolated CSS for this component when we upgrade to .NET5 -->
46
<Overlay>
57
<div style=" margin: 0 auto; margin-top: 10%; max-width: 400px;">
@@ -54,8 +56,27 @@
5456
{
5557
Identifier = "isAgreeTos",
5658
Value = "true",
57-
Label = "I agree to the <a href='#'>terms</a>" };
58-
void OnRegister() {
59-
NavigationManager.NavigateTo("thanks-for-registering");
59+
Label = "I agree to the <a href='#'>terms</a>"
60+
};
61+
62+
async void OnRegister() {
63+
try
64+
{
65+
await UserApiClient.RegisterAsync(new RegisterRequest()
66+
{
67+
AcceptTerms = true,
68+
Email = email.Value,
69+
FirstName = fullName.Value,
70+
LastName = "bla",
71+
Title = "",
72+
Password = password.Value,
73+
ConfirmPassword = passwordVerify.Value
74+
});
75+
NavigationManager.NavigateTo("thanks-for-registering");
76+
}
77+
catch (ApiException ex)
78+
{
79+
80+
}
6081
}
6182
}

‎src/Blazor.AdminLte.Site/Blazor.AdminLte.Site.csproj

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
<ItemGroup>
1212
<ProjectReference Include="..\Blazor.AdminLte.Site.Shared\Blazor.AdminLte.Site.Shared.csproj" />
13+
<ProjectReference Include="..\Blazor.AdminLte.UserApi.Client\Blazor.AdminLte.UserApiClient.csproj" />
1314
<ProjectReference Include="..\Blazor.AdminLte\Blazor.AdminLte.csproj" />
1415
</ItemGroup>
1516
<ItemGroup>

‎src/Blazor.AdminLte.Site/Pages/_Host.cshtml

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
1616
<!-- Font Awesome Icons -->
1717
<link rel="stylesheet" href="_content/Blazorized.AdminLte.Content/plugins/fontawesome-free/css/all.min.css">
18+
<link rel="stylesheet" href="toast.css">
1819
<!-- Theme style -->
1920
<link rel="stylesheet" href="_content/Blazorized.AdminLte.Content/dist/css/adminlte.min.css">
2021
<link href="_content/Blazor.AdminLte.Site.Shared/css/site.css" rel="stylesheet" />

‎src/Blazor.AdminLte.Site/Startup.cs

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
using Microsoft.Extensions.Configuration;
44
using Microsoft.Extensions.DependencyInjection;
55
using Microsoft.Extensions.Hosting;
6-
using Blazor.AdminLte;
76
using System;
87

98
namespace Blazor.AdminLte.Site
@@ -27,8 +26,9 @@ public void ConfigureServices(IServiceCollection services)
2726
services.AddServerSideBlazor();
2827
services.AddScoped<IFilesManager, FilesController>();
2928
services.AddAdminLte();
30-
services.AddHttpClient<IUserApiClient, UserApiClient>(client =>
31-
client.BaseAddress = new Uri("https://localhost:4000"));
29+
services.AddScoped<IUserApiClient>(_ => new UserApiClient("https://localhost:4000", new System.Net.Http.HttpClient()));
30+
//// services.AddHttpClient<IUserApiClient, UserApiClient>(client =>
31+
//client.BaseAddress = new Uri("https://localhost:4000"));
3232
}
3333

3434
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

0 commit comments

Comments
 (0)