Interfaccia del Theme Editor¶
Il Theme Editor permette di personalizzare l'aspetto visivo del Navigator senza modificare codice. Ogni modifica si riflette immediatamente in un'anteprima, permettendo di vedere il risultato finale mentre si lavora. Il tema viene salvato in un file JSON.
Layout generale¶
L'interfaccia è divisa in due aree principali affiancate.
Colonna di sinistra¶
Nella colonna di sinistra, in cima ci sono i tasti per le azioni generali:
- Open: per aprire il file di un tema.
- Save: per salvare il tema in un file.
- RESET: per riportare il tema ai valori di default.
Sotto i tasti ci sono i pannelli di controllo organizzati in sezioni espandibili, ogni sezione raggruppa impostazioni correlate. Le sezioni sono:
- Brand: raccoglie gli elementi di branding aziendale.
- Typography: definisce il font da usare.
- Colori: definisce i colori dei vari elementi grafici, è suddivisa in blocchi per tipologia di elementi.
Sezione brand¶
La sezione brand controlla gli elementi di identità aziendale che appaiono nel Navigator nell'angolo destro in alto.
- Company Name: il campo per il nome dell'azienda permette di inserire un testo che appare accanto o sotto il logo. Se non si vuole mostrare il nome, basta lasciare il campo vuoto.
- Logo URL: il campo logo accetta un URL che punta all'immagine del logo. Può essere un URL esterno o un percorso relativo a un file nella cartella del progetto o, meglio, ad una sottocartella. Le dimensioni vengono adattate automaticamente per non interferire con il contenuto.
- Website URL: l'URL del sito web rende cliccabile il logo e il nome azienda (se presente). L'utente può cliccare per visitare il sito in una nuova scheda.
Sezione typography¶
La sezione tipografia controlla il font usato in tutta l'interfaccia.
Un menu a tendina presenta le opzioni disponibili. La prima opzione è "System Default", che usa il font di sistema del dispositivo dell'utente senza caricare font esterni.
Le altre opzioni sono font Google Fonts: - Inter - Roboto - Open Sans - Lato - Montserrat - Poppins - Source Sans 3 - Nunito
Selezionando uno di questi, il font viene caricato automaticamente da Google e applicato all'interfaccia.
L'anteprima mostra immediatamente l'effetto del cambio di font su titoli, testo e pulsanti.
Sezione colori¶
La sezione colori è la più articolata, con controlli per ogni elemento dell'interfaccia.
- Base Colors: i colori generali definiscono lo sfondo della pagina, il colore del testo principale, il colore del testo secondario (usato per informazioni meno importanti), il colore accent (usato per evidenziare elementi interattivi). Ogni controllo è un selettore colore che apre un pannello per scegliere la tonalità desiderata. Il valore esadecimale è visibile e modificabile direttamente per chi preferisce inserire codici colore precisi.
- Buttons: i pulsanti di scelta hanno controlli separati per ogni stato: colore di sfondo e colore del testo per le scelte non ancora esplorate, per le scelte già fatte, per le scelte esplorate ma non nel percorso corrente. Questa distinzione cromatica aiuta l'utente a capire cosa ha già visto quando torna indietro per esplorare percorsi alternativi. Il pulsante di restart ha colori propri, tipicamente diversi dai pulsanti di scelta per distinguerlo visivamente.
- Map: il blocco mappa controlla i colori della visualizzazione ad albero: il nodo corrente, i nodi visitati, i nodi non ancora raggiunti, le linee di collegamento. Questi colori dovrebbero essere coerenti con i colori dei pulsanti per mantenere un linguaggio visivo consistente.
Anteprima live¶
L'area di anteprima sulla destra mostra un Navigator funzionante con uno scenario ed una mappa di esempio. Ogni modifica ai controlli si riflette istantaneamente nell'anteprima.
L'anteprima usa uno scenario semplice predefinito. Per vedere come il tema funziona con lo scenario reale, è necessario salvare il tema e caricarlo nel Navigator vero.
Flusso di lavoro tipico¶
Il flusso tipico prevede di partire da un tema esistente o dai valori predefiniti, modificare le impostazioni verificando l'effetto nell'anteprima, salvare il risultato come file JSON.
Il file tema salvato va poi indicato nel file di configurazione config.json del progetto, associandolo allo scenario desiderato.
È possibile creare più temi diversi per lo stesso scenario, ad esempio una versione chiara e una scura, o temi personalizzati per diversi clienti.