La testata mostrava il solo nome del punto vendita, con il codice
relegato a sottotitolo e l'indirizzo da nessuna parte. Torna com'era:
"01 - D11-PRIMO PREZZO - TERLIZZI LILLIUM" e sotto la via. Il codice sta
davanti al nome perche' e' quello che si confronta con il documento
cartaceo; il nome serve a riconoscere il negozio, l'indirizzo a essere
sicuri di stare in quello giusto.
Il titolo cosi' e' lungo, quindi la testata passa alla misura compatta e
puo' andare a capo fino a tre righe invece di troncare: un nome tagliato
a meta' non aiuta nessuno.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Il marchio e' corallo (#ec4c41), rosso profondo e bianco sporco: azzurro
non ce n'e'. Nell'app invece era il colore piu' diffuso — lo stato "in
corso", la voce attiva della barra, l'avatar, le righe scelte, il
pannello di riepilogo — e non stava per niente: era solo il tono che si
usa quando un colore serve e non si sa quale.
Il ruolo "info" passa alla famiglia dell'ancora navy, cioe' allo stesso
colore del testo forte: lo stato informativo smette di portarsi un colore
proprio e i colori restano ai toni che significano qualcosa (verde
inviato, ambra da completare, rosso da inviare) e all'accento.
Il pannello di riepilogo dell'ispezione era l'unico blocco tinto dell'app
e diventa bianco come ogni altro pannello: dentro, l'unico colore e'
adesso la barra di avanzamento.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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>
Il "+" non galleggia piu' sopra la barra e non sta piu' nella testata: e'
la casella centrale della barra, alla stessa altezza delle altre due e
sotto il pollice. La barra guadagna un margine interno, cosi' le voci non
toccano il bordo stondato e la pastiglia d'accento e' concentrica al
guscio invece che incollata sopra.
L'azione vale la stessa cosa in ogni schermata, e senza rete resta al suo
posto spenta: una casella che scompare sposterebbe le altre due sotto il
dito.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
"Accedi" era navy come l'ancora della struttura. E' l'unica azione della
schermata: porta l'accento come ogni azione primaria dell'app, e il navy resta
al testo e alla cornice.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Sul fuoco si vedevano due bordi: quello del campo piu' l'anello globale che
l'input riceve per conto suo, con raggio e colore diversi. Dove e' il
contenitore a segnare il fuoco — accesso, ricerca, barcode, gruppi del form —
l'anello sull'input non serve: il fuoco resta visibile dal bordo del campo.
Campi da 74 a 56 punti: padding piu' stretto, riga del valore alta quanto il
testo che contiene. Il bottone che mostra la password sborda nel padding invece
di alzare la riga, cosi' il campo password non e' piu' alto degli altri due e
il bersaglio resta da 44.
"Accedi" disabilitato era navy pieno con testo bianco: sembrava pronto, e il
tocco a vuoto sembrava un guasto. Ora e' chiaramente inerte.
Con la tastiera aperta il marchio finiva tagliato sopra e non si poteva
risalire: il pannello si centra con i margini automatici invece che con
align-items, cosi' lo scroll arriva anche in cima. Via anche la barra di
scorrimento, come nel resto delle schermate.
Verificata sul terminale, a riposo e col campo attivo.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Il pannello unico diviso da linee e' la forma di un elenco da consultare. Qui
si compilano tre dati diversi uno dopo l'altro, e lo stacco fra un campo e
l'altro serve a dire dove finisce quello che stai scrivendo.
Ogni campo torna a essere una superficie sua, con il bordo che si accende su
quello attivo. Le etichette restano ferme sopra il campo: e' il salto
dell'etichetta al primo tocco che faceva sembrare la schermata un modulo web,
non il fatto che i campi fossero separati.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Ogni campo era un riquadro dentro il riquadro, con l'etichetta che saltava
sopra il testo al primo tocco: un modulo web, non una schermata. Ora i tre
campi stanno in un pannello solo diviso da una linea, come le liste del resto
dell'app, e l'etichetta sta ferma sopra il campo.
Lo sfondo passa alla superficie di lavoro, la stessa dello splash e della prima
schermata: l'avvio non cambia colore tre volte. L'errore di accesso usa il
riquadro di avviso gia' in uso dentro l'app invece di uno stile suo.
Non verificata sul terminale: la sessione sul dispositivo e' aperta e non l'ho
chiusa per non far perdere l'accesso.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
La schermata era dichiarata a tutto schermo ma usciva dentro un riquadro con lo
sfondo visibile ai lati: la misura da dialog di conferma si applicava anche ai
dialog FullScreen, perche' nulla la escludeva. Ora le schermate a tutto schermo
riempiono il display.
Ogni punto vendita era un <div> con role="button": adesso e' un bottone vero,
raggiungibile da tastiera e annunciato per quello che e', con il chevron che
dice che porta altrove. L'indirizzo si ferma a due righe: serve a distinguere
due negozi con lo stesso nome, non a essere letto per intero, e teneva l'elenco
lungo da scorrere.
I punti vendita su cui c'e' gia' un'ispezione aperta oggi lo dichiarano: quel
tocco riapre l'ispezione esistente invece di crearne una nuova, ed e' meglio
saperlo prima.
(Il CSS della riga e' entrato nel commit precedente, adiacente a quello delle
azioni di testata.)
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Il "+" stava incastrato a destra nella barra di navigazione, che per il resto
contiene destinazioni. Cambiava significato da una schermata all'altra senza
mai dichiararlo, e su Ispezioni apriva un menu per far scegliere fra una cosa
sola. Il documento di stile esclude esplicitamente il FAB di serie, e la barra
torna a contenere solo le due destinazioni.
Su Ispezioni l'azione e' un bottone con il suo nome nella testata, e porta
dritta alla scelta del punto vendita senza passaggi intermedi. Lo stato vuoto
offre lo stesso comando invece di spiegare dove trovarlo.
Su Ispezione le azioni sono tre e con pesi diversi: restano in un bottom sheet,
aperto dalla testata. Eliminare un'ispezione ora chiede conferma — prima un
tocco cancellava ispezione e schede senza appello.
Le azioni vivono nella pagina che le esegue, quindi i messaggi che le
rimbalzavano dalla barra (NewSchedaService, CompleteInspectionService) non
hanno piu' mittente e se ne vanno.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
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>
La regola valeva per qualunque elemento, e la WebView sposta il fuoco anche su
contenitori non interattivi: dopo la chiusura di un dialog restava un anello
azzurro intorno al titolo della testata, che indicava un bersaglio inesistente.
Ora lo prendono link, bottoni, campi e gli elementi dichiaratamente tappabili.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Quasi tutto il testo dell'app stava fra 600 e 800: etichette, valori, indirizzi,
conteggi, voci di elenco. Un grassetto ovunque non segnala niente, e la pagina
Profilo era il caso peggiore — ogni riga gridava come un titolo.
La scala ora ha quattro gradini, documentati nei token:
400 corpo, metadati, valori descrittivi
500 etichette di campo, voci di lista, testo dei controlli
600 stati brevi (badge, voce attiva), nomi in una riga di elenco
700 titoli, uno solo per blocco
Sopra il 700 non si sale: l'800 dei titoli di card e dell'avatar e' sceso a 700.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
MudDialogProvider aveva NoHeader="true" come valore predefinito di tutti i
dialog. MudMessageBox rende il proprio titolo nella testata, quindi quel
valore lo sopprimeva ovunque: davanti a "Elimina" si leggeva solo il testo
delle conseguenze, senza la domanda.
Le schermate a tutto schermo (form scheda, scelta punto vendita, scelta
articoli) chiedono gia' NoHeader per conto loro nelle DialogOptions, quindi
toglierlo dal provider non le tocca.
I titoli ora dicono cosa sta per succedere invece del generico "Attenzione!":
"Eliminare la scheda?", "Uscire dall'account?", "Inviare le schede del
reparto?".
Le scelte in fondo al dialog si dispongono a destra e, sotto i 380 punti,
diventano una colonna a piena larghezza: con etichette lunghe come "Salva come
bozza" i bersagli non si comprimono.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Prime correzioni fatte guardando l'app su un Honeywell EDA52 (720x1440
@320dpi, cioe' 360 punti logici di larghezza) invece che a occhio.
- Barra di stato: era tinta di corallo da colorPrimaryDark, cioe' l'accento
usato come decorazione della cornice di sistema. Ora si fonde con lo
sfondo dell'app, con icone scure (WindowInsetsController).
- Gradino compatto sotto i 380px: la scala di STILE_UI e' tarata su telefoni
piu' larghi, e a misura piena i titoli si troncavano e in una schermata
entrava pochissimo lavoro. Le proporzioni restano, cambia la taglia.
Sui telefoni normali non cambia nulla.
- Icone delle azioni costruttive: usavano il fondo del tono danger, quindi
"Nuova scheda" e "Aggiungi una foto" erano identiche a "Elimina
ispezione". Ora usano il tono info. Un --primary-surface non risolveva:
il primario di SteUP e' gia' un rosso, quindi un suo fondo tenue resta
indistinguibile da quello danger.
- Testata: il titolo puo' andare su due righe prima di troncare. Il nome del
punto vendita e' l'ancora del compito, "D11-PRIMO PREZ..." non aiuta.
- Schermata ispezione: il nome del punto vendita non e' piu' ripetuto nel
pannello di riepilogo, dove era gia' in testata.
- Padding dei gruppi di form e della barra azioni ridotti su schermo stretto.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Adotta lo stile condiviso delle app Integry: superfici piatte, raggi ampi,
spaziature a scala fissa, gerarchia data dallo spazio prima che dalla
decorazione. La palette storica di SteUP resta intatta; sono stati aggiunti
solo i ruoli che mancavano (workspace, surfaceMuted, divider, inkMuted e le
triplette dei toni semantici).
Fondamenta
- tokens.css: ruoli colore, scale di spazio/raggi/tipografia, curve di
movimento e scala z-index semantica. Unica fonte di verita': pilotano
anche le variabili CSS di MudBlazor.
- Inter variabile ospitata in locale (133KB) al posto di Nunito da Google
Fonts: l'app lavora offline, un font che arriva dalla rete in campo non
arriva.
- base.css: shell applicativa e comportamenti da app nativa — niente
selezione testo, niente menu al tocco lungo, niente lampo grigio sul tap,
niente rimbalzo elastico, niente zoom a doppio tocco, scroll con inerzia.
- mudblazor-overrides.css: MudBlazor appiattito (elevation 0, nessun tint,
target 44/48, etichette in caso naturale).
- Rimossi Bootstrap (CSS, icone e JS) e i 996 righe di CSS con ambito per
componente del vecchio sistema: erano tutti inutilizzati.
Struttura
- Navigazione flottante in basso con icona piena sulla voce attiva; da 720px
diventa colonna laterale. Il MudFabMenu e' sostituito da un bottom sheet:
stessa funzione, bersagli molto piu' grandi.
- Testata alta col titolo a sinistra, fusa con la pagina.
- Nel form scheda il salvataggio sta in una barra ancorata in fondo, non in
coda a uno scroll lungo.
- Scelta di punto vendita e articoli a schermo intero con ricerca; la
selezione multipla usa righe da 56px invece di un menu a tendina.
- Urgenza scelta a pillole invece che da una select.
Stato e riscontro
- StatusBadgeHelper: tono, icona ed etichetta di ogni stato in un punto solo,
cosi' lo stesso stato si presenta identico ovunque.
- Scheletri al posto degli spinner; l'overlay bloccante dice sempre cosa sta
facendo; gli stati vuoti suggeriscono la mossa successiva.
- Rimosso il ritardo artificiale di 250ms in InspectionCard, che non
attendeva nulla.
DESIGN.md riscritto sul nuovo sistema.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Ispezione:
- Stato sync visibile: badge per-scheda (Da inviare/Inviato) e contatore
"N da inviare" per reparto (nuovo SchedaSyncHelper)
- Completamento: progresso reale nell'overlay + spunta di successo;
NON completa se una scheda fallisce (resta editabile, schede "Da inviare")
- Export reparto/completamento blindati: conferma + guardia anti doppio-tap,
try/finally che libera sempre l'overlay
- Accento corallo unico per l'azione "invia"; target di tocco >=44px;
empty state; solo il primo pannello espanso di default
- Tasto "Invia" nascosto sulle schede gia inviate
- Messaggio d'errore comprensibile in campo (dettaglio tecnico nei log)
- Fix OnSchedaModified (index >= 0)
Aspetto card:
- SchedaCard e InspectionCard: superficie Carta + hairline border + ombra
morbida (nuovo token --card-box-shadow); pagina con tinta Grigio Campo
- SchedaCard compattata
Form scheda (ModalFormScheda):
- Tasto Salva/Aggiorna full-width
- Fix "Suggerisci note descrittive": la nota selezionata ora viene inserita
nel campo (metodo async sul thread UI + OnAfterChangeValue)
StatusEnum: etichette in sentence-case
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
MarcoE