Rivista UI

Template.Maui/App.xaml

@@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             xmlns:local="clr-namespace:Template.Maui"
+             xmlns:android="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls"
+             android:Application.WindowSoftInputModeAdjust="Resize"
              x:Class="Template.Maui.App">
     <Application.Resources>
         <ResourceDictionary>

Template.Maui/MauiProgram.cs

@@ -3,6 +3,7 @@ using IntegryApiClient.MAUI;
 using Microsoft.AspNetCore.Components.Authorization;
 using Microsoft.Extensions.Logging;
 using MudBlazor.Services;
+using MudExtensions.Services;
 using Template.Maui.Core.Services;
 using Template.Shared;
 using Template.Shared.Core.Helpers;
@@ -32,6 +33,7 @@ namespace Template.Maui
 
             builder.Services.AddMauiBlazorWebView();
             builder.Services.AddMudServices();
+            builder.Services.AddMudExtensions();
 
             builder.Services.AddAutoMapper(typeof(MappingProfile));
 

Template.Maui/wwwroot/index.html

@@ -9,10 +9,11 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
-    
+
     <link href="_content/Template.Shared/css/bootstrap/bootstrap.min.css" rel="stylesheet">
     <link href="_content/Template.Shared/css/bootstrap/bootstrap-icons.min.css" rel="stylesheet" />
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
+    <link href="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" rel="stylesheet" />
 
     <link rel="stylesheet" href="_content/Template.Shared/css/remixicon/remixicon.css" />
     <link rel="stylesheet" href="_content/Template.Shared/css/app.css" />
@@ -42,6 +43,7 @@
     <!-- Add sortable.js reference if SortableList component is used in your application. -->
     <!--<script src="_content/Template.Shared/js/bootstrap/Sortable.min.js"></script>-->
     <script src="_content/MudBlazor/MudBlazor.min.js"></script>
+    <script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>
     <script src="_content/Template.Shared/js/main.js"></script>
     <script src="_content/Template.Shared/js/calendar.js"></script>
 

Template.Shared/Components/Layout/HeaderLayout.razor

@@ -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");
+        
     }
 
 }

Template.Shared/Components/Layout/MainLayout.razor

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

Template.Shared/Components/Layout/NavMenu.razor

@@ -1,14 +1,16 @@
+@inject IDialogService Dialog
+
 @if (IsVisible)
 {
     <nav class="navbar navbar-expand justify-content-center">
-        <div class="container-fluid">
+        <div class="container-navbar">
-            <ul class="navbar-nav nav-justified w-100 text-center">
+            <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>

Template.Shared/Components/Layout/NavMenu.razor.css

@@ -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;

Template.Shared/Components/Pages/ActivityForm.razor

@@ -1,102 +1,97 @@
-@page "/activity"
+@using Template.Shared.Core.Dto
-@page "/activity/{Id}"
-@using Template.Shared.Core.Dto
 @using Template.Shared.Components.Layout
 @using Template.Shared.Core.Interface
-@inject NavigationManager NavigationManager
 @inject IManageDataService manageData
 
-<HeaderLayout Cancel="true" LabelSave="@LabelSave" ShowNotifications="false" Title="@(IsNew ? "Nuova" : $"{ActivityModel.ActivityId}")"/>
+<MudDialog Class="customDialog-form">
+    <DialogContent>
+        <HeaderLayout Cancel="true" OnCancel="() => MudDialog.Cancel()" LabelSave="@LabelSave" ShowNotifications="false" Title="@(IsNew ? "Nuova" : $"{ActivityModel.ActivityId}")" />
 
-<div class="content">
+        <div class="content">
-    <div class="input-card">
+            <div class="input-card">
-        <MudTextField T="string?" Placeholder="Descrizione" Variant="Variant.Text" Lines="3" @bind-Value="ActivityModel.ActivityDescription" @bind-Value:after="OnAfterChangeValue"/>
+                <MudTextField T="string?" Placeholder="Descrizione" Variant="Variant.Text" Lines="3" @bind-Value="ActivityModel.ActivityDescription" @bind-Value:after="OnAfterChangeValue" />
-    </div>
+            </div>
 
-    <div class="input-card">
+            <div class="input-card">
-        <div class="form-container">
+                <div class="form-container">
-            <MudInput T="string?" Placeholder="Cliente" @bind-Value="ActivityModel.Cliente" @bind-Value:after="OnAfterChangeValue"/>
+                    <MudInput T="string?" Placeholder="Cliente" @bind-Value="ActivityModel.Cliente" @bind-Value:after="OnAfterChangeValue" />
+                </div>
+
+                <div class="divider"></div>
+
+                <div class="form-container">
+                    <MudInput T="string?" Placeholder="Commessa" @bind-Value="ActivityModel.Commessa" @bind-Value:after="OnAfterChangeValue" />
+                </div>
+            </div>
+
+            <div class="input-card">
+                <div class="form-container">
+                    <span>Inizio</span>
+
+                    <MudTextField T="DateTime?" Format="yyyy-MM-ddTHH:mm" InputType="InputType.DateTimeLocal" @bind-Value="ActivityModel.EstimatedTime" @bind-Value:after="OnAfterChangeValue" />
+                </div>
+
+                <div class="divider"></div>
+
+                <div class="form-container">
+                    <span>Fine</span>
+
+                    <MudTextField T="DateTime?" Format="yyyy-MM-ddTHH:mm" InputType="InputType.DateTimeLocal" @bind-Value="ActivityModel.EstimatedEndtime" @bind-Value:after="OnAfterChangeValue" />
+                </div>
+
+                <div class="divider"></div>
+
+                <div class="form-container">
+                    <span>Avviso</span>
+
+                    <MudSwitch T="bool" Disabled="true" Color="Color.Primary" />
+                </div>
+            </div>
+
+            <div class="input-card">
+                <div class="form-container text-align-end">
+                    <span>Assegnata a</span>
+
+                    <MudInput T="string" Placeholder="Nessuno" @bind-Value="ActivityModel.UserName" @bind-Value:after="OnAfterChangeValue" />
+                </div>
+
+                <div class="divider"></div>
+
+                <div class="form-container">
+                    <span>Tipo</span>
+
+                    <MudSelect T="string?" Variant="Variant.Text" @bind-Value="ActivityModel.ActivityTypeId" @bind-Value:after="OnAfterChangeValue" Class="customIcon-select" AdornmentIcon="@Icons.Material.Filled.Code">
+                        @foreach (var state in ActivityResult)
+                        {
+                            <MudSelectItem Value="@state">@state</MudSelectItem>
+                        }
+                    </MudSelect>
+                </div>
+
+                <div class="divider"></div>
+
+                <div class="form-container">
+                    <span>Esito</span>
+
+                    <MudSelect T="string?" Variant="Variant.Text" @bind-Value="ActivityModel.ActivityResultId" @bind-Value:after="OnAfterChangeValue" Class="customIcon-select" AdornmentIcon="@Icons.Material.Filled.Code">
+                        @foreach (var state in ActivityResult)
+                        {
+                            <MudSelectItem Value="@state">@state</MudSelectItem>
+                        }
+                    </MudSelect>
+                </div>
+            </div>
+
+            <div class="input-card">
+                <MudTextField T="string?" Placeholder="Note" Variant="Variant.Text" Lines="4" @bind-Value="ActivityModel.Note" @bind-Value:after="OnAfterChangeValue" />
+            </div>
         </div>
-
+    </DialogContent>
-        <div class="divider"></div>
+</MudDialog>
-
-        <div class="form-container">
-            <MudInput T="string?" Placeholder="Commessa" @bind-Value="ActivityModel.Commessa" @bind-Value:after="OnAfterChangeValue"/>
-        </div>
-    </div>
-
-    <div class="input-card">
-        <div class="form-container">
-            <span>Inizio</span>
-
-            <MudTextField T="DateTime?" Format="yyyy-MM-ddTHH:mm" InputType="InputType.DateTimeLocal" @bind-Value="ActivityModel.EstimatedTime" @bind-Value:after="OnAfterChangeValue"/>
-        </div>
-
-        <div class="divider"></div>
-
-        <div class="form-container">
-            <span>Fine</span>
-
-            <MudTextField T="DateTime?" Format="yyyy-MM-ddTHH:mm" InputType="InputType.DateTimeLocal" @bind-Value="ActivityModel.EstimatedEndtime" @bind-Value:after="OnAfterChangeValue"/>
-        </div>
-
-        <div class="divider"></div>
-
-        <div class="form-container">
-            <span>Avviso</span>
-
-            <MudSwitch T="bool" Disabled="true" Color="Color.Primary"/>
-        </div>
-    </div>
-
-    <div class="input-card">
-        <div class="form-container text-align-end">
-            <span>Assegnata a</span>
-
-            <MudInput T="string" Placeholder="Nessuno" @bind-Value="ActivityModel.UserName" @bind-Value:after="OnAfterChangeValue"/>
-        </div>
-
-        <div class="divider"></div>
-
-        <div class="form-container">
-            <span>Tipo</span>
-
-            <MudSelect T="string?" Variant="Variant.Text" @bind-Value="ActivityModel.ActivityTypeId" @bind-Value:after="OnAfterChangeValue" Class="customIcon-select" AdornmentIcon="@Icons.Material.Filled.Code">
-                @foreach (var state in ActivityResult)
-                {
-                    <MudSelectItem Value="@state">@state</MudSelectItem>
-                }
-            </MudSelect>
-        </div>
-
-        <div class="divider"></div>
-
-        <div class="form-container">
-            <span>Esito</span>
-
-            <MudSelect T="string?" Variant="Variant.Text" @bind-Value="ActivityModel.ActivityResultId" @bind-Value:after="OnAfterChangeValue" Class="customIcon-select" AdornmentIcon="@Icons.Material.Filled.Code">
-                @foreach (var state in ActivityResult)
-                {
-                    <MudSelectItem Value="@state">@state</MudSelectItem>
-                }
-            </MudSelect>
-        </div>
-    </div>
-    
-    <div class="input-card">
-        <MudTextField T="string?" Placeholder="Note" Variant="Variant.Text" Lines="4" @bind-Value="ActivityModel.Note" @bind-Value:after="OnAfterChangeValue" />
-    </div>
-
-    <MudOverlay @bind-Visible="_selectEstimatedTime" DarkBackground="true" AutoClose="true">
-        <MudDatePicker @bind-Date:after="CloseDatePicker" @bind-Date="ActivityModel.EstimatedTime" PickerVariant="PickerVariant.Static"/>
-    </MudOverlay>
-
-    <MudOverlay @bind-Visible="_selectEstimatedEndTime" DarkBackground="true" AutoClose="true">
-        <MudDatePicker @bind-Date:after="CloseDatePicker" @bind-Date="ActivityModel.EstimatedEndtime" PickerVariant="PickerVariant.Static"/>
-    </MudOverlay>
-</div>
 
 @code {
+    [CascadingParameter] private IMudDialogInstance MudDialog { get; set; }
+
     [Parameter] public string? Id { get; set; }
 
     private ActivityDTO OriginalModel { get; set; } = new();
@@ -125,18 +120,6 @@
         OriginalModel = ActivityModel.Clone();
     }
 
-    private async Task HandleValidSubmit()
-    {
-        // Salva su database (qui simulato)
-        await Task.Delay(200);
-        NavigationManager.NavigateTo("/attivita");
-    }
-
-    private void Annulla()
-    {
-        NavigationManager.NavigateTo("/attivita");
-    }
-
     private void OnAfterChangeValue()
     {
         if (OriginalModel.Equals(ActivityModel))
@@ -145,13 +128,4 @@
         StateHasChanged();
     }
 
-    private async Task CloseDatePicker()
-    {
-        await Task.Delay(150);
-
-        _selectEstimatedTime = false;
-        _selectEstimatedEndTime = false;
-        StateHasChanged();
-    }
-
 }

Template.Shared/Components/Pages/ActivityForm.razor.css

@@ -1,3 +1,14 @@
+.customDialog-form .content ::deep {
+    height: calc(100vh - (.6rem + 40px));
+    overflow: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.customDialog-form .content::-webkit-scrollbar {
+    display: none;
+}
+
 .input-card {
     width: 100%;
     background: var(--mud-palette-background-gray);

Template.Shared/Components/Pages/Calendar.razor

@@ -5,6 +5,7 @@
 @using Template.Shared.Components.SingleElements
 @using Template.Shared.Components.Layout.Spinner
 @inject IManageDataService manageData
+@inject IDialogService Dialog
 @inject IJSRuntime JS
 
 <HeaderLayout Title="@CurrentMonth.ToString("MMMM yyyy", new System.Globalization.CultureInfo("it-IT")).FirstCharToUpper()"
@@ -12,7 +13,7 @@
               ShowCalendarToggle="true"
               OnCalendarToggle="ToggleExpanded"/>
 
-<div @ref="weekSliderRef" class="week-slider @(Expanded ? "expanded" : "") @(SliderAnimation)">
+<div @ref="weekSliderRef" class="container week-slider @(Expanded ? "expanded" : "") @(SliderAnimation)">
     @if (Expanded)
     {
         <!-- Vista mensile -->
@@ -83,17 +84,16 @@
     }
 </div>
 
-<div class="appointments">
+<div class="container appointments">
     @if (IsLoading)
     {
         <SpinnerLayout FullScreen="false"/>
     }
     else if (FilteredActivities is { Count: > 0 })
     {
-        @foreach (var activity in FilteredActivities)
+        <Virtualize Items="FilteredActivities" Context="activity">
-        {
+            <ActivityCard Activity="activity" />
-            <ActivityCard Activity="activity"/>
+        </Virtualize>
-        }
     }
     else
     {
@@ -176,6 +176,20 @@
         }
     }
 
+    [JSInvokable]
+    public async Task OnSwipeDown()
+    {
+        if (!Expanded)
+            ToggleExpanded();
+    }
+
+    [JSInvokable]
+    public async Task OnSwipeUp()
+    {
+        if (Expanded)
+            ToggleExpanded();
+    }
+
     // Cambio periodo mese/settimana
     private async Task CambiaPeriodo(int direzione)
     {
@@ -292,5 +306,4 @@
     {
         dotNetHelper?.Dispose();
     }
-
 }

Template.Shared/Components/Pages/Calendar.razor.css

@@ -20,7 +20,8 @@
     justify-content: center;
     align-items: flex-start;
     gap: 0.6rem;
-    padding: 1rem 0.3rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
     overflow-x: hidden;
     overflow-y: visible;
 }
@@ -106,8 +107,8 @@
 }
 
 .day.selected {
-    background: var(--mud-palette-primary);
+    background: var(--mud-palette-secondary);
-    border: 1px solid var(--mud-palette-primary);
+    border: 1px solid var(--mud-palette-secondary);
     color: white;
 }
 
@@ -118,9 +119,10 @@
     gap: 1rem;
     overflow-y: auto;
     flex-direction: column;
-    height: 70vh;
+    height: 75vh;
     -ms-overflow-style: none;
     scrollbar-width: none;
+    padding-bottom: 45px;
 }
 
 .appointments::-webkit-scrollbar { display: none; }
@@ -141,10 +143,6 @@
     cursor: pointer;
 }
 
-.day.selected > .event-dot-container {
-    display: none;
-}
-
 .event-dot-container {
     display: flex;
     gap: 5px;

Template.Shared/Components/Pages/PersonalInfo.razor

@@ -4,91 +4,111 @@
 @using Template.Shared.Core.Authorization.Enum
 @using Template.Shared.Core.Interface
 @using Template.Shared.Core.Services
-@using Template.Shared.Core.Utility
 @inject AppAuthenticationStateProvider AuthenticationStateProvider
 @inject INetworkService NetworkService
 @inject IFormFactor FormFactor
 
-<HeaderLayout Title="Profilo" />
+<HeaderLayout Title="Profilo"/>
 
-<div class="content">
+<div class="container content">
-    <div class="section-primary-info">
+    <div class="container-primary-info">
-        <MudAvatar Style="height:85px; width:85px; font-size:2rem;">
+        <div class="section-primary-info">
-            <MudImage Src="@($"https://ui-avatars.com/api/?name={UserSession.User.Username}&size=80&background={UtilityColor.CalcHexColor(UserSession.User.Username)}&bold=true")"></MudImage>
+            <MudAvatar Style="height: 70px; width: 70px; font-size: 2rem; font-weight: bold" Color="Color.Secondary">
-        </MudAvatar>
+                @UtilityString.ExtractInitials(UserSession.User.Fullname)
-        
+            </MudAvatar>
-        <div class="personal-info">
+
-            <span class="info-nome">@UserSession.User.Fullname</span>
+            <div class="personal-info">
-            @if (UserSession.User.KeyGroup is not null)
+                <span class="info-nome">@UserSession.User.Fullname</span>
-            {
+                @if (UserSession.User.KeyGroup is not null)
-                <span class="info-section">@(((KeyGroupEnum)UserSession.User.KeyGroup).ConvertToHumanReadable())</span>
-            }
-        </div>
-    </div>
-    
-    <div class="section-info">
-        <div class="section-personal-info">
-            <div>
-                <span class="info-title">Telefono</span>
-                <span class="info-text">000 0000000</span> @*Todo: to implement*@
-            </div>
-            
-            <div>
-                <span class="info-title">Status</span>
-                @if (NetworkService.IsNetworkAvailable())
                 {
-                    <div class="status online">
+                    <span class="info-section">@(((KeyGroupEnum)UserSession.User.KeyGroup).ConvertToHumanReadable())</span>
-                        <i class="ri-wifi-line"></i>
-                        <span>Online</span>
-                    </div>
-                }
-                else
-                {
-                    <div class="status offline">
-                        <i class="ri-wifi-off-line"></i>
-                        <span>Offline</span>
-                    </div>
                 }
             </div>
         </div>
         
-        <div class="section-personal-info">
+        <div class="divider"></div>
-            <div>
+
-                <span class="info-title">E-mail</span>
+        <div class="section-info">
-                <span class="info-text">
+            <div class="section-personal-info">
-                    @if (string.IsNullOrEmpty(UserSession.User.Email))
+                <div>
+                    <span class="info-title">Telefono</span>
+                    <span class="info-text">000 0000000</span> @*Todo: to implement*@
+                </div>
+
+                <div>
+                    <span class="info-title">Status</span>
+                    @if (NetworkService.IsNetworkAvailable())
                     {
-                        @("Nessuna mail configurata")
+                        <div class="status online">
+                            <i class="ri-wifi-line"></i>
+                            <span>Online</span>
+                        </div>
                     }
                     else
                     {
-                        @UserSession.User.Email
+                        <div class="status offline">
+                            <i class="ri-wifi-off-line"></i>
+                            <span>Offline</span>
+                        </div>
                     }
-                </span>
+                </div>
             </div>
-            
+
-            <div>
+            <div class="section-personal-info">
-                <span class="info-title">Ultima sincronizzazione</span>
+                <div>
-                <span class="info-text">@LastSync.ToString("g")</span>
+                    <span class="info-title">E-mail</span>
+                    <span class="info-text">
+                        @if (string.IsNullOrEmpty(UserSession.User.Email))
+                        {
+                            @("Nessuna mail configurata")
+                        }
+                        else
+                        {
+                            @UserSession.User.Email
+                        }
+                    </span>
+                </div>
+
+                <div>
+                    <span class="info-title">Ultima sincronizzazione</span>
+                    <span class="info-text">@LastSync.ToString("g")</span>
+                </div>
             </div>
         </div>
     </div>
-    
+
-    <MudButton Class="user-button" 
+    <div class="container-button">
-               FullWidth="true" 
+        <MudButton Class="button-settings green-icon"
-               Size="Size.Medium"
+                   FullWidth="true"
-               StartIcon="@Icons.Material.Outlined.Settings"
+                   StartIcon="@Icons.Material.Outlined.Sync"
-               OnClick="OpenSettings"
+                   Size="Size.Medium"
-               Variant="Variant.Outlined">Impostazioni</MudButton>
+                   OnClick="() => UpdateDb(true)"
-    
+                   Variant="Variant.Outlined">
-    <div class="divider"></div>
+            Sincronizza
-    
+        </MudButton>
-    <MudButton FullWidth="true"
+
-               StartIcon="@Icons.Material.Outlined.Logout"
+        <div class="divider"></div>
-               Color="Color.Error"
+
-               Size="Size.Medium"
+        <MudButton Class="button-settings red-icon"
-               OnClick="Logout"
+                   FullWidth="true"
-               Variant="Variant.Outlined">Esci</MudButton>
+                   StartIcon="@Icons.Material.Outlined.Sync"
+                   Size="Size.Medium"
+                   OnClick="() => UpdateDb()"
+                   Variant="Variant.Outlined">
+            Ripristina dati
+        </MudButton>
+    </div>
+
+    <div class="container-button">
+        <MudButton Class="button-settings exit"
+                   FullWidth="true"
+                   Color="Color.Error"
+                   Size="Size.Medium"
+                   OnClick="Logout"
+                   Variant="Variant.Outlined">
+            Esci
+        </MudButton>
+    </div>
 </div>
 
 @code {
@@ -117,4 +137,19 @@
     private void Logout() =>
         AuthenticationStateProvider.SignOut();
 
+    private void UpdateDb(bool withData = false)
+    {
+        var absoluteUri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
+        var pathAndQuery = absoluteUri.Segments.Length > 1 ? absoluteUri.PathAndQuery : null;
+
+        string path;
+
+        if (withData)
+            path = pathAndQuery == null ? $"/sync/{DateTime.Today:yyyy-MM-dd}" : $"/sync/{DateTime.Today:yyyy-MM-dd}?path=" + System.Web.HttpUtility.UrlEncode(pathAndQuery);
+        else
+            path = pathAndQuery == null ? "/sync" : "/sync?path=" + System.Web.HttpUtility.UrlEncode(pathAndQuery);
+
+        NavigationManager.NavigateTo(path, replace: true);
+    }
+
 }

Template.Shared/Components/Pages/PersonalInfo.razor.css

@@ -1,15 +1,28 @@
+.container-primary-info {
+    box-shadow: var(--custom-box-shadow);
+    width: 100%;
+    margin-bottom: 2rem;
+    border-radius: 12px;
+}
+
+.container-primary-info .divider {
+    margin: 0 0 0 7rem;
+    width: unset;
+}
+
 .section-primary-info {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
+    gap: 1.5rem;
+    padding: .8rem 1.2rem .4rem;
 }
 
 .personal-info {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
     line-height: normal;
-    margin: .2rem 0 1rem 0;
 }
 
 .info-nome {
@@ -25,15 +38,10 @@
 }
 
 .section-info {
-    width: 100%;
-    margin-bottom: 1.5rem;
-    border-radius: 12px;
     display: flex;
     justify-content: space-between;
     flex-direction: row;
-    padding: .8rem 1.2rem;
+    padding: .4rem 1.2rem .8rem;
-    border: 1px solid var(--card-border-color);
-    box-shadow: var(--card-shadow);
 }
 
 .section-personal-info {
@@ -41,12 +49,12 @@
     flex-direction: column;
 }
 
-    .section-personal-info > div {
+.section-personal-info > div {
-        display: flex;
+    display: flex;
-        flex-direction: column;
+    flex-direction: column;
-        line-height: normal;
+    line-height: normal;
-        margin: .25rem 0;
+    margin: .25rem 0;
-    }
+}
 
 .info-title {
     color: var(--mud-palette-gray-darker);
@@ -59,9 +67,7 @@
     font-size: small;
 }
 
-.content ::deep .user-button {
+.content ::deep .user-button { border: 1px solid var(--card-border-color) !important; }
-    border: 1px solid var(--card-border-color) !important;
-}
 
 .user-button > i { font-size: large; }
 
@@ -70,14 +76,50 @@
     font-weight: 600;
 }
 
-.status {
+.status { font-weight: 700; }
-    font-weight: 700;
+
+.status.online { color: var(--mud-palette-success); }
+
+.status.offline { color: var(--mud-palette-error); }
+
+.container-button {
+    width: 100%;
+    box-shadow: var(--custom-box-shadow);
+    padding: .5rem 0;
+    border-radius: 12px;
+    margin-bottom: 2rem;
 }
 
-.status.online {
+.container-button .divider {
-    color: var(--mud-palette-success);
+    margin: .5rem 0 .5rem 3rem;
+    width: unset;
 }
 
-.status.offline {
+.container-button ::deep .button-settings { border: none !important; }
-    color: var(--mud-palette-error);
+
+.container-button ::deep .button-settings .mud-icon-root {
+    border: 1px solid var(--mud-palette-gray-light);
+    border-radius: 6px;
+    padding: 2px;
+    min-width: 25px;
+    min-height: 25px;
+    box-shadow: inset 0 3px 5px rgba(200, 200, 200, 0.5);
+}
+
+.container-button ::deep .button-settings.green-icon .mud-icon-root { color: var(--mud-palette-success-darken); }
+
+.container-button ::deep .button-settings.red-icon .mud-icon-root { color: var(--mud-palette-error); }
+
+.container-button ::deep .button-settings .mud-button-label {
+    justify-content: flex-start;
+    text-transform: capitalize;
+    font-size: 1rem;
+}
+
+.container-button ::deep .button-settings.exit { padding: 0; }
+
+.container-button ::deep .button-settings.exit .mud-button-label {
+    justify-content: center;
+    font-size: 1.1rem;
+    line-height: normal;
 }

Template.Shared/Components/Pages/Settings.razor

@@ -5,43 +5,12 @@
 <HeaderLayout BackTo="@BackTo" ShowNotifications="false" Back="true" Title="Impostazioni"/>
 
 <div class="content">
-    <MudButton Class="button-settings"
+    
-               FullWidth="true"
-               StartIcon="@Icons.Material.Outlined.Sync"
-               Size="Size.Medium"
-               OnClick="() => UpdateDb(true)"
-               Variant="Variant.Outlined">
-        Sincronizza
-    </MudButton>
-
-    <div class="divider"></div>
-
-    <MudButton Class="button-settings"
-               FullWidth="true"
-               StartIcon="@Icons.Material.Outlined.Sync"
-               Size="Size.Medium"
-               OnClick="() => UpdateDb()"
-               Variant="Variant.Outlined">
-        Ripristina dati
-    </MudButton>
 </div>
 
 @code {
     [Parameter] public string BackTo { get; set; } = "";
 
-    private void UpdateDb(bool withData = false)
+    
-    {
-        var absoluteUri = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
-        var pathAndQuery = absoluteUri.Segments.Length > 1 ? absoluteUri.PathAndQuery : null;
-
-        string path;
-
-        if (withData)
-            path = pathAndQuery == null ? $"/sync/{DateTime.Today:yyyy-MM-dd}" : $"/sync/{DateTime.Today:yyyy-MM-dd}?path=" + System.Web.HttpUtility.UrlEncode(pathAndQuery);
-        else
-            path = pathAndQuery == null ? "/sync" : "/sync?path=" + System.Web.HttpUtility.UrlEncode(pathAndQuery);
-
-        NavigationManager.NavigateTo(path, replace: true);
-    }
 
 }

Template.Shared/Components/SingleElements/Card/ActivityCard.razor

@@ -1,7 +1,8 @@
 @using Template.Shared.Core.Dto
 @using Template.Shared.Core.Helpers.Enum
+@inject IDialogService Dialog
 
-<div class="activity-card @Activity.Category.ConvertToHumanReadable()" @onclick="() => OpenActivityForm(Activity.ActivityId)">
+<div class="activity-card @Activity.Category.ConvertToHumanReadable()" @onclick="() => ModalHelpers.OpenActivityForm(Dialog, Activity.ActivityId)">
     <div class="activity-left-section">
         <div class="activity-body-section">
             <div class="title-section">
@@ -74,12 +75,4 @@
             _ => null
         };
     }
-
-    private void OpenActivityForm(string? activityId)
-    {
-        var url = "/activity";
-        url = !activityId.IsNullOrEmpty() ? $"{url}/{activityId}" : url;
-
-        NavigationManager.NavigateTo(url);
-    }
 }

Template.Shared/Components/SingleElements/Card/ActivityCard.razor.css

@@ -5,7 +5,7 @@
     padding: .5rem .5rem;
     border-radius: 12px;
     line-height: normal;
-    border: 1px solid var(--card-border-color);
+    box-shadow: var(--custom-box-shadow);
 }
 
 .activity-card.memo { border-left: 5px solid var(--mud-palette-info-darken); }

Template.Shared/Core/Helpers/ModalHelpers.cs

@@ -0,0 +1,22 @@
+using MudBlazor;
+using Template.Shared.Components.Pages;
+
+namespace Template.Shared.Core.Helpers;
+
+public class ModalHelpers
+{
+    public static Task OpenActivityForm(IDialogService dialog ,string? id = null) =>
+        dialog.ShowAsync<ActivityForm>(
+            "Activity form",
+            new DialogParameters<ActivityForm>
+            {
+                { x => x.Id, id}
+            },
+            new DialogOptions
+            {
+                FullScreen = true,
+                CloseButton = false,
+                NoHeader = true
+            }
+        );
+}

Template.Shared/Template.Shared.csproj

@@ -7,24 +7,25 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <SupportedPlatform Include="browser"/>
+        <SupportedPlatform Include="browser" />
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="AutoMapper" Version="14.0.0"/>
+        <PackageReference Include="AutoMapper" Version="14.0.0" />
-        <PackageReference Include="CommunityToolkit.Mvvm" Version="8.4.0"/>
+        <PackageReference Include="CodeBeam.MudBlazor.Extensions" Version="8.2.2" />
-        <PackageReference Include="IntegryApiClient.Core" Version="1.1.4"/>
+        <PackageReference Include="CommunityToolkit.Mvvm" Version="8.4.0" />
-        <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="9.0.5"/>
+        <PackageReference Include="IntegryApiClient.Core" Version="1.1.4" />
-        <PackageReference Include="sqlite-net-pcl" Version="1.9.172"/>
+        <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="9.0.5" />
-        <PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="8.11.0"/>
+        <PackageReference Include="sqlite-net-pcl" Version="1.9.172" />
-        <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0.5"/>
+        <PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="8.11.0" />
-        <PackageReference Include="MudBlazor" Version="8.6.0"/>
+        <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0.5" />
-        <PackageReference Include="MudBlazor.ThemeManager" Version="3.0.0"/>
+        <PackageReference Include="MudBlazor" Version="8.6.0" />
+        <PackageReference Include="MudBlazor.ThemeManager" Version="3.0.0" />
     </ItemGroup>
 
     <ItemGroup>
-        <Folder Include="wwwroot\css\lineicons\"/>
+        <Folder Include="wwwroot\css\lineicons\" />
-        <Folder Include="wwwroot\js\bootstrap\"/>
+        <Folder Include="wwwroot\js\bootstrap\" />
     </ItemGroup>
 
 </Project>

Template.Shared/_Imports.razor

@@ -9,6 +9,7 @@
 @using Microsoft.JSInterop
 @using Template.Shared.Components
 @using MudBlazor
+@using MudExtensions
 @using MudBlazor.ThemeManager
 @using Template.Shared.Core.Helpers
 @using Template.Shared.Components.SingleElements.Card

Template.Shared/wwwroot/css/app.css

@@ -140,4 +140,9 @@ h1:focus { outline: none; }
 .mud-button-group-horizontal:not(.mud-button-group-rtl) > .mud-button-root:not(:first-child), .mud-button-group-horizontal:not(.mud-button-group-rtl) > :not(:first-child) .mud-button-root {
     border-top-left-radius: 0 !important;
     border-bottom-left-radius: 0 !important;
+}
+
+.customDialog-form .mud-dialog-content {
+    padding: 0 .75rem;
+    margin: 0;
 }

Template.Shared/wwwroot/css/default-theme.css

@@ -4,4 +4,5 @@
     --gray-for-shadow: hsl(from var(--mud-palette-gray-light) h s 95%);
     /*Utility*/
     --card-shadow: 5px 5px 10px 0 var(--gray-for-shadow);
-}
+    --custom-box-shadow: 1px 2px 5px rgba(165, 165, 165, 0.5);
+}

Template.Shared/wwwroot/js/calendar.js

@@ -1,41 +1,56 @@
 window.calendarSwipe = {
     register: function (element, dotnetHelper) {
-        let startX = 0;
+        let startX = 0, startY = 0;
-        let endX = 0;
+        let endX = 0, endY = 0;
 
+        // Touch events
         element.addEventListener('touchstart', (e) => {
             if (e.touches.length === 1) {
                 startX = e.touches[0].clientX;
+                startY = e.touches[0].clientY;
             }
         });
 
         element.addEventListener('touchend', (e) => {
             if (e.changedTouches.length === 1) {
                 endX = e.changedTouches[0].clientX;
+                endY = e.changedTouches[0].clientY;
                 handle();
             }
         });
 
-        // Per desktop: mouse drag
+        // Mouse events
         let mouseDown = false;
         element.addEventListener('mousedown', (e) => {
-            if (e.button !== 0) return; // solo left mouse
+            if (e.button !== 0) return;
             mouseDown = true;
             startX = e.clientX;
+            startY = e.clientY;
         });
+
         element.addEventListener('mouseup', (e) => {
             if (!mouseDown) return;
             mouseDown = false;
             endX = e.clientX;
+            endY = e.clientY;
             handle();
         });
 
         function handle() {
-            let diff = endX - startX;
+            let diffX = endX - startX;
-            if (Math.abs(diff) > 40) {
+            let diffY = endY - startY;
-                if (diff < 0) dotnetHelper.invokeMethodAsync('OnSwipeLeft');
+
-                else dotnetHelper.invokeMethodAsync('OnSwipeRight');
+            if (Math.abs(diffX) > Math.abs(diffY)) {
+                if (Math.abs(diffX) > 40) {
+                    if (diffX < 0) dotnetHelper.invokeMethodAsync('OnSwipeLeft');
+                    else dotnetHelper.invokeMethodAsync('OnSwipeRight');
+                }
+            } else {
+                if (Math.abs(diffY) > 40) {
+                    if (diffY < 0) dotnetHelper.invokeMethodAsync('OnSwipeUp');
+                    else dotnetHelper.invokeMethodAsync('OnSwipeDown');
+                }
             }
         }
     }
-};
+};