Merge pull request #2 from neozhu/dev

Dev

Author: neozhu

doc/2022-02-11_19-34-31.png

@@ -29,10 +29,12 @@
         <MudIconButton Class="mx-1"
                        Color="Color.Default"
                        Icon="@Icons.Custom.Brands.GitHub"
-                       Link="https://github.com/neozhu/MudDemo"
+                       Link="https://github.com/neozhu/CleanArchitectureWithBlazorServer"
                        Target="_blank" />
     </MudTooltip>
     <LanguageSelector />
+
+
     <NotificationMenu Class="mx-1"
                       Notifications="_activeNotifications" />
     <MudTooltip Text="@(RightToLeft?"Toggle right-to-left":"Toggle left-to-right")">

doc/2022-02-11_19-44-40.png

@@ -1,88 +1,30 @@
 @inherits MudComponentBase
 @inject IStringLocalizer<NotificationMenu> L
-<MudElement @attributes="@UserAttributes"
-            Class="@Classname"
-            Style="@Style">
-    <MudMenu AnchorOrigin="Origin.BottomRight"
-             LockScroll="true"
-             TransformOrigin="Origin.TopRight">
-        <ActivatorContent>
-            <MudTooltip Arrow="true"
-                        Text="Notifications">
-                @if (Notifications != null)
-                {
-                    <MudBadge BadgeClass="notification-badge"
-                              Color="Color.Error"
-                              Content="Notifications.Count()"
-                              Overlap="true"
-                              Visible="Notifications.Any()">
-                        <MudIconButton Color="Color.Default"
-                                       Icon="@Icons.Material.Filled.Notifications" />
-                    </MudBadge>
-                }
-            </MudTooltip>
-        </ActivatorContent>
-        <ChildContent>
-            <div class="pb-2 pt-4"
-                 style="min-width: 330px">
-                <MudText Class="pb-2 px-6"
-                         Typo="Typo.body2">
-                    <b>@(L["Notifications"])</b>
-                </MudText>
-                <MudDivider Class="my-2" />
-                @if (Notifications != null && Notifications.Any())
-                {
-                    @foreach (var notification in Notifications)
-                    {
-                        <MudMenuItem>
-                            <div class="d-flex">
-                                <div class="mr-4">
-                                    <MudAvatar Color="Color.Inherit"
-                                               Variant="Variant.Filled">
-                                        <MudIcon Icon="@notification.NotificationIcon" />
-                                    </MudAvatar>
-                                </div>
-                                <div>
-                                    <MudText Typo="Typo.body2">@notification.Message</MudText>
-                                    <div class="align-center d-flex">
-                                        <MudIcon Class="mr-1"
-                                                 Color="Color.Default"
-                                                 Icon="@Icons.Material.Filled.AccessTime"
-                                                 Style="font-size: 13px" />
-                                        <MudText Typo="Typo.caption">@notification.TimeSinceEventFormatted</MudText>
-                                    </div>
-                                </div>
-                            </div>
-                        </MudMenuItem>
-                    }
-                }
-                else
-                {
-                    <MudText Class="px-6 py-3"
-                             Typo="Typo.body2">
-                        @(L["You have no unread notifications."])
-                    </MudText>
-                }
-                <MudDivider Class="my-2" />
-                <div class="mt-4 mx-4">
-                    <MudButton Color="Color.Primary"
-                               FullWidth="true"
-                               OnClick="OnClickViewAll"
-                               Style="text-transform:none"
-                               Variant="Variant.Text">
-                        @(L["View All"])
-                    </MudButton>
-                </div>
+ 
+<MudBadge Color="Color.Secondary" Dot="true" Overlap="true" Visible="_newNotificationsAvailable">
+    <MudMenu Icon="@Icons.Outlined.Notifications" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopCenter" PopoverClass="docs-layout-menu-shadow" ListClass="pa-2 docs-menu-list" LockScroll="true">
+        <div class="d-flex justify-space-between align-center px-2">
+            <MudText Typo="Typo.subtitle2">Notifications</MudText>
+            <MudButton Disabled="@(_newNotificationsAvailable == false)" OnClick="MarkNotificationAsRead" StartIcon="@Icons.Filled.DoneAll" Variant="Variant.Text" Color="Color.Primary" Class="ml-16 mr-n2">Mark as read</MudButton>
+        </div>
+        @if (Notifications != null && _newNotificationsAvailable)
+        {
+            @foreach (var notification in Notifications.Take(5))
+            {
+                <MudMenuItem Class="px-2 py-0 rounded">
+                    <MudText Typo="Typo.subtitle2">@notification.Message</MudText>
+                    <MudText Typo="Typo.body2">@($"{notification.TimeSinceEventFormatted}")</MudText>
+                </MudMenuItem>
+                <MudDivider Class="my-2"/>
+            }
+        }
+        else
+        {
+            <div class="d-flex justify-center align-center px-2 py-8 relative">
+                <MudText Class="mud-text-secondary my-12">Nothing new :(</MudText>
+                <MudBlazorLogo Class="docs-logo-filter mx-16 absolute"/>
             </div>
-        </ChildContent>
+        }
     </MudMenu>
-</MudElement>
+</MudBadge>
 
-<style>
-
-    .notification-badge{
-        margin-left: -10px;
-        margin-bottom: -8px;
-    }
-    
-</style>

doc/2022-02-11_19-44-59.png

@@ -13,7 +13,11 @@ public partial class NotificationMenu : MudComponentBase
         new CssBuilder()
             .AddClass(Class)
             .Build();
-    
+
     [Parameter] public IEnumerable<NotificationModel>? Notifications { get; set; }
     [Parameter] public EventCallback<MouseEventArgs> OnClickViewAll { get; set; }
+
+    private bool _newNotificationsAvailable => Notifications != null && Notifications.Any();
+
+    private void MarkNotificationAsRead() => Notifications = null;
 }

doc/2022-02-11_19-45-22.png

@@ -222,7 +222,7 @@
             };
         var parameters = new DialogParameters { ["model"] = model };
         var options = new DialogOptions { CloseOnEscapeKey = true, MaxWidth = MaxWidth.Small, FullWidth = true };
-        var dialog = DialogService.Show<_RoleFormDialog>(L["Create a new role"], parameters, options);
+        var dialog = DialogService.Show<_RoleFormDialog>(L["Edit the role"], parameters, options);
         var result = await dialog.Result;
         if (!result.Cancelled)
         {

src/Blazor.Server.UI/Components/Shared/NavMenu.razor

@@ -39,10 +39,8 @@ public partial class MainLayout : IDisposable
     {
             Primary = "#2d4275",
             Black = "#0A0E19",
-            //Tertiary = "#00B5E2",
             Success = "#64A70B",
-            Secondary = "#728BC9",
-            //Info = "#2879A8"
+            Secondary = "#ff4081ff",
     };
     private readonly MudTheme _theme = new()
     {
@@ -114,49 +112,52 @@ public partial class MainLayout : IDisposable
             {
                 FontSize = "3rem",
                 FontWeight = 600,
-                LineHeight = 1.8,
+                LineHeight = 1.167,
                 LetterSpacing = "0"
             },
             H4 = new H4
             {
                 FontSize = "1.8rem",
-                FontWeight = 700,
+                FontWeight = 400,
                 LineHeight = 1.235,
-                LetterSpacing = ".007em"
+                LetterSpacing = ".00735em"
             },
             H5 = new H5
             {
-                FontSize = "1.8rem",
-                FontWeight = 700,
-                LineHeight = 2,
+                FontSize = "1.5rem",
+                FontWeight = 400,
+                LineHeight = 1.334,
                 LetterSpacing = "0"
             },
             H6 = new H6
             {
                 FontSize = "1.125rem",
-                FontWeight = 700,
-                LineHeight = 2,
+                FontWeight = 600,
+                LineHeight =1.6,
                 LetterSpacing = ".0075em"
             },
             Button = new Button
             {
                 FontSize = ".875rem",
                 FontWeight = 500,
                 LineHeight = 1.75,
-                LetterSpacing = ".02857em"
+                LetterSpacing = ".02857em",
+                TextTransform = "none"
+
+
             },
             Subtitle1 = new Subtitle1
             {
-                FontSize = "1.1rem",
-                FontWeight = 500,
+                FontSize = "1rem",
+                FontWeight = 400,
                 LineHeight = 1.75,
                 LetterSpacing = ".00938em"
             },
             Subtitle2 = new Subtitle2
             {
-                FontSize = "1rem",
-                FontWeight = 600,
-                LineHeight = 1.8,
+                FontSize = ".875rem",
+                FontWeight = 500,
+                LineHeight = 1.57,
                 LetterSpacing = ".00714em"
             },
             Body1 = new Body1

src/Blazor.Server.UI/Components/Shared/NotificationMenu.razor

@@ -0,0 +1,18 @@
+@namespace Blazor.Server.UI.Shared
+
+<svg viewBox="0 0 1653 1049" xmlns="http://www.w3.org/2000/svg" class="@Class" style="@Style">
+    <path fill="#7467EF" d="M0.15,572.58V0.16L495.9,286.37v190.81L165.4,286.37v381.62L0.15,572.58z" />
+    <path fill="#594AE2" d="M495.9,286.37L991.65,0.16v572.43l-330.5,190.81l-165.25-95.4l330.5-190.81V286.37L495.9,477.18V286.37z" />
+    <path fill="#7467EF" d="M495.9,667.99V858.8l330.5,190.81V858.8L495.9,667.99z" />
+    <path fill="#594AE2" d="M826.4,1049.6l495.75-286.21V0.37l-165.25,95.4v572.21L826.4,858.8V1049.6z" />
+    <path fill="#7467ef" d="M1495,467.85l-165.25,95.41,157.47,91.52,165.25-95.38Z" />
+    <path fill="#7467EF" d="M1322.15,763.39l-165.25,95.4l330.5,190.81V858.8L1322.15,763.39z" />
+    <path fill="#7467EF" d="M1322.13,0.38l-165.25,95.4l330.29,190.83l165.25-95.38L1322.13,0.38z" />
+    <path fill="#594AE2" d="M1652.43,191.21l-165.25,95.41v762.99l165.25-95.4L1652.43,191.21z" />
+</svg>
+
+
+@code {
+    [Parameter] public string Style { get; set; }
+    [Parameter] public string Class { get; set; }
+}