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

Il comando della barra si adatta alla schermata

Browse Source 
Il tasto al centro perde l'etichetta: non ne ha una sola, perche' quello
che fa lo decide la schermata sotto. Dentro un'ispezione apre le sue
azioni (nuova scheda, concludi, elimina); altrove apre una nuova
ispezione. Il glifo resta lo stesso e resta nello stesso punto: quello
che cambia e' cosa c'e' dietro, non dove mettere il dito.

Le azioni dell'ispezione lasciano quindi la testata, dove stavano dietro
un menu a tre punti, e tornano sotto il pollice.

Il collegamento passa da PageActionsService: la pagina si registra
finche' e' a video e si sfila uscendo, cosi' la barra non tiene in vita
schermate che non ci sono piu'. Chi non registra niente lascia al
comando il suo significato di default — un'ispezione conclusa non
registra, e il tasto non resta li' a non fare nulla.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Elefante
2026-09-17 15:44:55 +02:00
parent 9703fca306
commit 13d5400104
5 changed files with 108 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SteUp.Shared/Components/Layout/NavMenu.razor
+24 -10
View File
@@ -1,5 +1,7 @@
@implements IDisposable
@inject IDialogService Dialog
@inject PageActionsService PageActions
@using SteUp.Shared.Core.Messages.System
@*
Navigazione flottante in basso (STILE_UI §6.15): il contenuto le scorre
@@ -7,11 +9,11 @@
riposo, piena da selezionata, etichetta sempre visibile in entrambe.
Da 720px diventa una colonna laterale (vedi components.css).
In mezzo alle due destinazioni sta l'unica azione dell'app: aprire una
nuova ispezione. Non e' un pulsante che galleggia sopra la barra e ne
copre il centro, e' la terza casella della barra, alla stessa altezza
delle altre due. Vale una cosa sola dappertutto: se cambiasse significato
da una pagina all'altra sarebbe un tasto da indovinare.
In mezzo alle due destinazioni sta il comando. Non e' un pulsante che
galleggia sopra la barra e ne copre il centro: e' la casella centrale,
alla stessa altezza delle altre due. Sta sempre nello stesso punto, ma
quello che fa lo decide la schermata sotto (vedi PageActionsService):
dentro un'ispezione apre le sue azioni, altrove apre una nuova ispezione.
*@
<nav class="navbar @(IsVisible ? "" : "navbar--hidden")" aria-label="Navigazione principale">
@@ -22,12 +24,11 @@
<span class="navbar__label">Ispezioni</span>
</NavLink>
<button type="button" class="navbar__action" @onclick="NewInspection"
<button type="button" class="navbar__action" @onclick="RunAction"
disabled="@(!NetworkService.IsNetworkAvailable())"
aria-label="Nuova ispezione"
title="@(NetworkService.IsNetworkAvailable() ? null : "Serve la connessione per aprire una nuova ispezione")">
aria-label="@ActionLabel"
title="@(NetworkService.IsNetworkAvailable() ? ActionLabel : "Serve la connessione")">
<i class="ri-add-line" aria-hidden="true"></i>
<span class="navbar__action-label">Nuova</span>
</button>
<NavLink class="navbar__item pressable" href="user" Match="NavLinkMatch.All">
@@ -49,12 +50,17 @@
private bool IsOn(string route) => CurrentRoute.EqualsIgnoreCase(route);
private string ActionLabel => PageActions.HasActions ? "Azioni" : "Nuova ispezione";
protected override void OnInitialized()
{
NavigationManager.LocationChanged += OnLocationChanged;
PageActions.Changed += OnPageActionsChanged;
Refresh();
}
private void OnPageActionsChanged() => InvokeAsync(StateHasChanged);
private void OnLocationChanged(object? sender, LocationChangedEventArgs args) => Refresh();
private void Refresh()
@@ -63,6 +69,10 @@
StateHasChanged();
}
/// Il comando vale quello che la schermata gli ha dato; se non gliel'ha
/// dato nessuno, vale la cosa che l'app fa piu' spesso.
private Task RunAction() => PageActions.HasActions ? PageActions.Invoke() : NewInspection();
private async Task NewInspection()
{
if (!await SteupDataService.CanOpenNewInspection())
@@ -77,5 +87,9 @@
await Dialog.OpenSelectShop();
}
public void Dispose() => NavigationManager.LocationChanged -= OnLocationChanged;
public void Dispose()
{
NavigationManager.LocationChanged -= OnLocationChanged;
PageActions.Changed -= OnPageActionsChanged;
}
}
SteUp.Shared/Components/Pages/IspezionePage.razor
+28 -16
View File
@@ -13,27 +13,20 @@
@using SteUp.Shared.Core.Interface.IntegryApi
@using SteUp.Shared.Core.Interface.LocalDb
@using SteUp.Shared.Core.Interface.System
@using SteUp.Shared.Core.Messages.System
@inject IIspezioniService IspezioniService
@inject IDialogService Dialog
@inject IIntegrySteupService IntegrySteupService
@inject IFileManager FileManager
@inject ILogger<IspezionePage> Logger
@inject PageActionsService PageActions
@implements IDisposable
<HeaderLayout Title="@Titolo" Subtitle="@Sottotitolo" Back="true">
<Actions>
@* Su un'ispezione conclusa resta solo la consultazione: niente azioni. *@
@if (!IsCompleted)
{
@* Qui le azioni sono piu' d'una e non hanno lo stesso peso: lo
sheet le mostra con nome, icona e tono, invece di nasconderle
tutte dietro lo stesso glifo. *@
<button type="button" class="appbar__icon-action" @onclick="@(() => _actionsOpen = true)"
aria-label="Azioni sull'ispezione" title="Azioni">
<i class="ri-more-2-fill" aria-hidden="true"></i>
</button>
}
</Actions>
</HeaderLayout>
@* Le azioni non stanno nella testata: le apre il comando al centro della
barra in basso, che finche' questa schermata e' a video significa "azioni
di questa ispezione" (vedi PageActionsService). Su un'ispezione conclusa
non si registra nulla e resta solo la consultazione. *@
<HeaderLayout Title="@Titolo" Subtitle="@Sottotitolo" Back="true"/>
<ActionSheet @bind-Open="_actionsOpen" Title="Azioni ispezione" Subtitle="@Ispezione.CodMdep">
<div class="stack stack-xs">
@@ -253,7 +246,26 @@
private string Sottotitolo => Ispezione.CodMdep;
protected override void OnInitialized() => LoadSchede();
private IDisposable? _actionsRegistration;
protected override void OnInitialized()
{
LoadSchede();
// Su un'ispezione conclusa non c'e' niente da fare: il comando della
// barra si tiene il suo significato di default invece di aprire uno
// sheet di azioni tutte spente.
if (!IsCompleted)
_actionsRegistration = PageActions.Register(() => InvokeAsync(OpenActions));
}
private void OpenActions()
{
_actionsOpen = true;
StateHasChanged();
}
public void Dispose() => _actionsRegistration?.Dispose();
private void LoadSchede()
{
SteUp.Shared/Core/Messages/System/PageActionsService.cs
+46
View File
@@ -0,0 +1,46 @@
namespace SteUp.Shared.Core.Messages.System;
/// <summary>
/// Ponte fra il comando al centro della barra di navigazione e la schermata
/// che sta sotto. Il comando sta sempre nello stesso punto — sotto il pollice,
/// dove il rilevatore lo cerca — ma quello che fa appartiene alla schermata:
/// dentro un'ispezione apre le azioni di quell'ispezione, altrove apre una
/// nuova ispezione.
///
/// La pagina si registra finché è a video e si sfila uscendo, così la barra
/// non tiene in vita un riferimento a schermate che non ci sono più. Chi non
/// registra niente lascia al comando il suo significato di default: la barra
/// non resta mai con un tasto che non fa nulla.
/// </summary>
public class PageActionsService
{
private Func<Task>? _handler;
/// Avvisa la barra che il significato del comando è cambiato, così si ridisegna.
public event Action? Changed;
public bool HasActions => _handler is not null;
public IDisposable Register(Func<Task> handler)
{
_handler = handler;
Changed?.Invoke();
return new Registration(this, handler);
}
public Task Invoke() => _handler?.Invoke() ?? Task.CompletedTask;
private sealed class Registration(PageActionsService owner, Func<Task> handler) : IDisposable
{
public void Dispose()
{
// Solo chi ha registrato per ultimo può sfilare: se una schermata
// nuova si è già registrata, la vecchia uscendo non deve spegnerla.
if (owner._handler != handler) return;
owner._handler = null;
owner.Changed?.Invoke();
}
}
}
SteUp.Shared/wwwroot/css/components.css
+9 -11
View File
@@ -568,30 +568,28 @@
transition: background-color var(--duration-base) var(--ease-out);
}
/* L'azione al centro: e' una casella della barra come le altre, alla stessa
altezza, solo piena d'accento. L'unico accento della schermata sta sul solo
comando che crea qualcosa. */
/* Il comando al centro: una casella della barra come le altre, alla stessa
altezza, solo piena d'accento. Senza etichetta, perche' non ne ha una sola:
quello che fa lo decide la schermata sotto. L'unico accento della schermata
sta sull'unico comando. */
.navbar__action {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-6);
aspect-ratio: 1;
min-width: var(--touch-min);
padding-inline: var(--space-md);
padding: 0;
border: none;
border-radius: 20px;
background-color: var(--primary);
color: var(--on-primary);
font-family: inherit;
font-size: var(--label-lg-size);
font-weight: 600;
white-space: nowrap;
transition: transform var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.navbar__action i { font-size: 22px; }
.navbar__action i { font-size: 26px; }
.navbar__action:active { transform: scale(0.96); background-color: var(--primary-pressed); }
@@ -644,8 +642,8 @@
qualcosa incastrato fra due destinazioni. */
.navbar__action {
order: -1;
align-self: stretch;
height: 48px;
align-self: center;
height: 52px;
margin-bottom: var(--space-xs);
}