MarcoE/TaskHybrid
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rivista UI

Browse Source
This commit is contained in:
Marco Elefante
2025-06-12 12:57:34 +02:00
parent 79fb383961
commit 0032648e76
22 changed files with 437 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
Template.Shared/Components/Layout/HeaderLayout.razor
View File

@@ -1,6 +1,6 @@
@inject IJSRuntime JS
<div class="header">
<div class="container header">
<div class="header-content @(Back ? "with-back" : "no-back")">
@if (Back)
{
@@ -26,7 +26,7 @@
}
@if (ShowNotifications)
{
<MudIconButton Icon="@Icons.Material.Filled.Notifications" Color="Color.Dark"/>
@* <MudIconButton Icon="@Icons.Material.Filled.Notifications" Color="Color.Dark"/> *@
}
@if (ShowCalendarToggle)
{
@@ -54,6 +54,7 @@
[Parameter] public string BackTo { get; set; } = "";
[Parameter] public bool Cancel { get; set; }
[Parameter] public EventCallback OnCancel { get; set; }
[Parameter] public string? LabelSave { get; set; }
[Parameter] public EventCallback OnSave { get; set; }
@@ -68,7 +69,14 @@
private async Task GoBack()
{
if (Cancel)
{
await OnCancel.InvokeAsync();
return;
}
await JS.InvokeVoidAsync("goBack");
}
}

2
Template.Shared/Components/Layout/MainLayout.razor
View File

@@ -12,7 +12,7 @@
<NavMenu />
<main>
<article class="container">
<article>
@Body
</article>
</main>

33
Template.Shared/Components/Layout/NavMenu.razor
View File

@@ -1,14 +1,16 @@
@inject IDialogService Dialog
@if (IsVisible)
{
<nav class="navbar navbar-expand justify-content-center">
<div class="container-fluid">
<ul class="navbar-nav nav-justified w-100 text-center">
<div class="container-navbar">
<ul class="navbar-nav 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>
@@ -16,7 +18,28 @@
<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="Notification" Match="NavLinkMatch.All">
<div class="d-flex flex-column">
<i class="ri-notification-4-line"></i>
</div>
</NavLink>
</li>
@@ -24,7 +47,7 @@
<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>Profilo</span> *@
</div>
</NavLink>
</li>

36
Template.Shared/Components/Layout/NavMenu.razor.css
View File

@@ -1,21 +1,43 @@
.navbar {
background: var(--mud-palette-surface);
background: transparent;
position: fixed;
bottom: 0;
width: 100%;
z-index: 1001;
border-top: 1px solid var(--card-border-color);
padding-bottom: 1rem;
padding-top: 0 !important;
}
.navbar-expand { padding: 0 !important; }
.container-navbar {
background: var(--mud-palette-surface);
border-radius: 15px;
box-shadow: var(--custom-box-shadow);
}
.nav-item { font-size: 0.9rem; }
.nav-item.plus-button {
position: relative;
bottom: 15px;
}
.nav-item ::deep .custom-plus-button .mud-icon-root {
transition: .513s;
transform: rotate(0);
font-size: 2rem;
}
.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;
}
.nav-item ::deep a > div {
@@ -24,7 +46,7 @@
min-width: 60px;
}
.nav-item ::deep a.active > div { color: var(--mud-palette-secondary-darken); }
.nav-item ::deep a.active > div { color: var(--mud-palette-primary); }
.nav-item ::deep a.active > div > i {
/*background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);*/
@@ -33,9 +55,11 @@
.nav-item ::deep a.active > div > span { font-weight: 800; }
.nav-item ::deep a:not(.active) > div { color: var(--mud-palette-drawer-icon); }
.nav-item ::deep a:not(.active) > div {
color: var(--mud-palette-text-primary);
}
.nav-item ::deep a i { font-size: 1.5rem; }
.nav-item ::deep a i { font-size: 1.65rem; }
.nav-item ::deep a span {
font-size: 0.8rem;