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

Sostituisci la tendina di reparto e motivo con un bottom sheet

Browse Source 
La MudSelect apriva un riquadro bianco che galleggiava sopra le card bianche,
senza titolo, senza sfondo oscurato, con la barra di scorrimento del desktop e
le righe alte quanto una riga di testo. Era la cosa che piu' di tutte faceva
sembrare l'app una pagina web.

Ora il campo e' una riga tappabile che mostra il valore, e la scelta arriva da
un bottom sheet con il titolo del campo e righe da 56 px con il segno tondo
della scelta singola: la stessa forma degli altri selettori dell'app, usabile
in piedi e con i guanti.

Il confronto per capire quale opzione e' quella corrente passa per l'etichetta:
Scheda.Reparto ricostruisce l'oggetto al volo da codice e descrizione, quindi
non e' mai lo stesso oggetto di quelli in elenco e il confronto di riferimento
non avrebbe segnato mai nulla.

Reparto e motivo non passano piu' dalla validazione di MudForm, perche' non
sono piu' input: il controllo degli obbligatori e' esplicito e l'errore si vede
sul gruppo interessato, non solo nel messaggio in cima. Si accende dopo il primo
tentativo di salvataggio, non prima: un form rosso all'apertura accusa l'utente
di un errore che non ha ancora commesso.

La scelta fatta si segna col tono informativo: un bordo corallo intorno a un
riempimento azzurro si leggeva come un errore.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Elefante
2026-09-17 12:46:48 +02:00
parent ac501dc261
commit 101b68123c
4 changed files with 204 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SteUp.Shared/wwwroot/css/forms.css
+50 -4
View File
@@ -99,10 +99,14 @@
.option:active { transform: scale(0.97); }
/* La scelta fatta si segna col tono informativo, non con laccento: un bordo
corallo intorno a un riempimento azzurro si legge come un errore, non come
"questa e la risposta". Laccento resta del solo pulsante primario. */
.option[aria-pressed="true"] {
font-weight: 600;
background-color: var(--info-surface);
border-color: var(--primary);
color: var(--primary-dark);
border-color: var(--info-solid);
color: var(--info-ink);
}
@media (prefers-reduced-motion: reduce) {
@@ -389,14 +393,56 @@
.select-row__title {
font-size: var(--body-lg-size);
line-height: 1.3;
font-weight: 600;
font-weight: 500;
color: var(--ink);
}
.select-row__meta {
margin-top: var(--space-2);
font-size: var(--label-md-size);
font-weight: 600;
font-weight: 400;
color: var(--ink-muted);
font-variant-numeric: tabular-nums;
}
/* -----------------------------------------------------------------------------
Campo a scelta singola — la riga che apre il bottom sheet
Ha l'aspetto di un valore, non di un controllo: il chevron basta a dire
che si tocca.
-------------------------------------------------------------------------- */
.select-field {
display: flex;
align-items: center;
gap: var(--space-xs);
width: 100%;
min-height: var(--touch-min);
padding: var(--space-xs) 0;
border: none;
background: none;
font-family: inherit;
text-align: left;
transition: opacity var(--duration-fast) var(--ease-out);
}
.select-field:active { opacity: 0.6; }
.select-field:disabled { opacity: 1; }
.select-field__value {
flex: 1 1 auto;
min-width: 0;
font-size: var(--body-lg-size);
line-height: 1.3;
font-weight: 500;
color: var(--ink);
}
/* Il segnaposto e' testo secondario, non un valore: si distingue a colpo
d'occhio da un campo gia' compilato. */
.select-field__value--empty { font-weight: 400; color: var(--ink-muted); }
.select-field__icon { flex: 0 0 auto; font-size: 22px; color: var(--ink-muted); }
/* Scelta singola: il segno e' tondo come un radio, non quadrato come una
casella. La forma dice gia' che si sceglie una cosa sola. */
.select-row--single .select-row__check { border-radius: var(--radius-pill); }