Miglioramenti UI

2025-06-17 12:58:12 +02:00
parent d6c7742501
commit 6600660315
15 changed files with 148 additions and 78 deletions
--- a/Template.Shared/Components/Layout/HeaderLayout.razor
+++ b/Template.Shared/Components/Layout/HeaderLayout.razor
@@ -1,6 +1,6 @@
@inject IJSRuntime JS

-<div class="container header">
+<div class="@(Back ? "" : "container") header">
    <div class="header-content @(Back ? "with-back" : "no-back")">
        @if (Back)
        {
@@ -22,11 +22,17 @@
            {
                @if (ShowFilter)
                {
-                    <MudIconButton OnClick="OnFilterToggle" Icon="@Icons.Material.Outlined.FilterAlt" Color="Color.Dark" />
+                    <MudIconButton OnClick="OnFilterToggle" Icon="@Icons.Material.Outlined.FilterAlt" Color="Color.Dark"/>
                }
-                @if (ShowCalendarToggle)
+
+                @* @if (ShowCalendarToggle)
                {
                    <MudIconButton OnClick="OnCalendarToggle" Icon="@Icons.Material.Filled.CalendarMonth" Color="Color.Dark"/>
+                } *@
+
+                @if (ShowProfile)
+                {
+                    <MudIconButton Class="user" OnClick="OpenPersonalInfo" Icon="@Icons.Material.Filled.Person" Color="Color.Dark"/>
                }
            }
            else
@@ -45,8 +51,9 @@
@code{
    [Parameter] public string? Title { get; set; }
    [Parameter] public bool ShowFilter { get; set; }
-    [Parameter] public bool ShowNotifications { get; set; } = true;
+    [Parameter] public bool ShowProfile { get; set; } = true;
    [Parameter] public bool Back { get; set; }
+    [Parameter] public bool BackOnTop { get; set; }
    [Parameter] public string BackTo { get; set; } = "";

    [Parameter] public EventCallback OnFilterToggle { get; set; }
@@ -74,7 +81,9 @@
        }

        await JS.InvokeVoidAsync("goBack");
-
    }

+    private void OpenPersonalInfo() =>
+        NavigationManager.NavigateTo("/PersonalInfo");
+
 }
--- a/Template.Shared/Components/Layout/HeaderLayout.razor.css
+++ b/Template.Shared/Components/Layout/HeaderLayout.razor.css
@@ -6,8 +6,6 @@
    position: relative;
 }

-.header-content.with-back { margin: .6rem 0 0 0; }
-
 .header-content.with-back .page-title {
    position: absolute;
    left: 50%;
@@ -16,14 +14,10 @@
    font-size: larger;
 }

-.left-section ::deep button, .right-section ::deep button {
-    font-size: 1.1rem;
-}
+.right-section { min-height: 45px; }

-.left-section ::deep .mud-button-icon-start {
-    margin-right: 3px !important;
-}
+.left-section ::deep button, .right-section ::deep button { font-size: 1.1rem; }

-.header-content.no-back .page-title {
-    margin: 0;
-}
+.left-section ::deep .mud-button-icon-start { margin-right: 3px !important; }
+
+.header-content.no-back .page-title { margin: 0; }
--- a/Template.Shared/Components/Layout/NavMenu.razor
+++ b/Template.Shared/Components/Layout/NavMenu.razor
@@ -1,16 +1,14 @@
@inject IDialogService Dialog

-@if (IsVisible)
-{
-    <nav class="navbar navbar-expand justify-content-center">
+<div class="container animated-navbar @(IsVisible ? "show-nav" : "hide-nav") @(IsVisible? PlusVisible ? "with-plus" : "without-plus" : "with-plus")">
+    <nav class="navbar @(IsVisible? PlusVisible ? "with-plus" : "without-plus" : "with-plus")">
        <div class="container-navbar">
-            <ul class="navbar-nav nav-justified align-items-center w-100 text-center">
-
+            <ul class="navbar-nav flex-row nav-justified align-items-center w-100 text-center">
                <li class="nav-item">
                    <NavLink class="nav-link" href="Users" Match="NavLinkMatch.All">
                        <div class="d-flex flex-column">
                            <i class="ri-group-line"></i>
-                            @* <span>Contatti</span> *@
+                            <span>Contatti</span>
                        </div>
                    </NavLink>
                </li>
@@ -18,47 +16,40 @@
                    <NavLink class="nav-link" href="Calendar" Match="NavLinkMatch.All">
                        <div class="d-flex flex-column">
                            <i class="ri-calendar-todo-line"></i>
-                            @* <span>Agenda</span> *@
+                            <span>Agenda</span>
                        </div>
                    </NavLink>
                </li>
-
-
-                <li class="nav-item plus-button">
-                    <MudMenu PopoverClass="custom_popover" AnchorOrigin="Origin.TopCenter" TransformOrigin="Origin.BottomCenter">
-                        <ActivatorContent>
-                            <MudFab Class="custom-plus-button" Color="Color.Primary" Size="Size.Medium" IconSize="Size.Medium" StartIcon="@Icons.Material.Filled.Add"/>
-                        </ActivatorContent>
-                        <ChildContent>
-                            <MudMenuItem Disabled="true">Nuovo contatto</MudMenuItem>
-                            <MudMenuItem OnClick="() => ModalHelpers.OpenActivityForm(Dialog)">Nuova attivit<69></MudMenuItem>
-                        </ChildContent>
-                    </MudMenu>
-                </li>
-
                <li class="nav-item">
                    <NavLink class="nav-link" href="Notifications" Match="NavLinkMatch.All">
                        <div class="d-flex flex-column">
                            <i class="ri-notification-4-line"></i>
-                        </div>
-                    </NavLink>
-                </li>
-                <li class="nav-item">
-                    <NavLink class="nav-link" href="PersonalInfo" Match="NavLinkMatch.All">
-                        <div class="d-flex flex-column">
-                            <i class="ri-user-line"></i>
-                            @* <span>Profilo</span> *@
+                            <span>Notifiche</span>
                        </div>
                    </NavLink>
                </li>
            </ul>
        </div>
+
+        @if (PlusVisible)
+        {
+            <MudMenu PopoverClass="custom_popover" AnchorOrigin="Origin.TopLeft" TransformOrigin="Origin.BottomRight">
+                <ActivatorContent>
+                    <MudFab Class="custom-plus-button" Color="Color.Surface" Size="Size.Medium" IconSize="Size.Medium" IconColor="Color.Primary" StartIcon="@Icons.Material.Filled.Add" />
+                </ActivatorContent>
+                <ChildContent>
+                    <MudMenuItem Disabled="true">Nuovo contatto</MudMenuItem>
+                    <MudMenuItem OnClick="() => ModalHelpers.OpenActivityForm(Dialog)">Nuova attivit<69></MudMenuItem>
+                </ChildContent>
+            </MudMenu>
+        }
    </nav>
-}
+</div>

@code
 {
    private bool IsVisible { get; set; } = true;
+    private bool PlusVisible { get; set; } = true;

    protected override Task OnInitializedAsync()
    {
@@ -66,10 +57,19 @@
        {
            var location = args.Location.Remove(0, NavigationManager.BaseUri.Length);

-            IsVisible = new List<string> { "Calendar", "Users", "PersonalInfo", "Notifications" }
+            var newIsVisible = new List<string> { "Calendar", "Users", "Notifications" }
                .Contains(location);
+
+            var newPlusVisible = new List<string> { "Calendar", "Users" }
+                .Contains(location);
+
+            if (IsVisible == newIsVisible && PlusVisible == newPlusVisible) return;
+
+            IsVisible = newIsVisible;
+            PlusVisible = newPlusVisible;
            StateHasChanged();
        };
        return Task.CompletedTask;
    }
-}
+}
+
--- a/Template.Shared/Components/Layout/NavMenu.razor.css
+++ b/Template.Shared/Components/Layout/NavMenu.razor.css
@@ -1,17 +1,41 @@
-.navbar {
+.animated-navbar {
    background: transparent;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1001;
+    transition: all 0.3s ease-in-out;
+}
+
+.animated-navbar.show-nav { transform: translateY(0); }
+
+.animated-navbar.hide-nav { transform: translateY(100%); }
+
+.animated-navbar.with-plus { margin-left: 30px; }
+
+.navbar {
    padding-bottom: 1rem;
    padding-top: 0 !important;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: end;
+    transition: all 0.3s ease-in-out;
+}
+
+.navbar.with-plus { transform: translateX(-30px); }
+
+.navbar.without-plus {
+    transform: translateX(0);
+    justify-content: center;
 }

 .container-navbar {
    background: var(--mud-palette-surface);
-    border-radius: 15px;
+    border-radius: 50px;
+    padding: 0 10px;
    box-shadow: var(--custom-box-shadow);
+    transition: all 0.3s ease-in-out;
 }

 .nav-item { font-size: 0.9rem; }
@@ -27,23 +51,27 @@
    font-size: 2rem;
 }

-    .nav-item ::deep .custom-plus-button:focus .mud-icon-root {
-    transform: rotate(225deg);
+.navbar ::deep .custom-plus-button {
+    background: var(--mud-palette-surface);
+    box-shadow: var(--custom-box-shadow);
+    transition: all 0.3s ease-in-out;
 }

+.nav-item ::deep .custom-plus-button:focus .mud-icon-root { transform: rotate(225deg); }
+
 .nav-item ::deep a {
    display: flex;
    align-items: center;
    line-height: 1.2;
    justify-content: center;
-    padding-top: .5rem !important;
-    padding-bottom: .5rem !important;
+    padding-top: .25rem !important;
+    padding-bottom: .25rem !important;
 }

 .nav-item ::deep a > div {
    -webkit-transition: all .1s ease-out;
    transition: all .1s ease-out;
-    min-width: 60px;
+    min-width: 75px;
 }

 .nav-item ::deep a.active > div { color: var(--mud-palette-primary); }