Aspetto pagine
Elenco dei nomi dei campi della tabella «POS UI Setup», che contengono la definizione dei colori in esadecimale, e il loro corrispondente utilizzato nella APP:
Campo in Tabella | Corrispondente nella APP |
Primary Color | PRIMARY |
Primary Color Variant | PRIMARYVARIANT |
On Primary Color | ONPRIMARY |
Secondary Color | SECONDARY |
Secondary Color Variant | SECONDARYVARIANT |
On Secondary Color | ONSECONDARY |
Surface Color | SURFACE |
On Surface Color | ONSURFACE |
Background Color | BACKGROUND |
On Background Color | ONBACKGROUND |
Error Color | ERROR |
On Error Color | ONERROR |
Di seguito vengono presentate, come esempio, alcune immagini delle pagine di POSible, configurate in modo da utilizzare la UI standard di POSible, la “UI di default”, con l'impostazione “LIGHT mode” oppure una UI personalizzata, la “Cliente1 UI” con l'impostazione “DARK mode”.
SETTINGS
La pagina SETTINGS compare in automatico dopo aver installato e aperto, per la prima volta, la APP POSible; in seguito la si può visualizzare scegliendo la voce “Impostazioni” nel menu FLYOUT.
Nel primo caso la sua configurazione di colori è definita nel codice di POSible e non può essere modificata dall’utente.
Nel passo 3 di questa pagina è presente la lista a discesa per la scelta del setup di POSible.
LOGIN
La pagina LOGIN appare dalla seconda volta che si attiva la APP POSible.
LIGHT mode (UI di default)
Come si può vedere nell’immagine qui sopra, “Primary Color” configurato in tabella è utilizzato per impostare il colore del font delle etichette (label) attive che identificano i campi di input e per il font dei pulsanti, mentre “On Surface Color“ è utilizzato per il font dei campi di input e per tutte le altre etichette nella pagina.
DARK mode (Cliente1 UI)
In questa configurazione invece il campo “Secondary Color Variant” imposta il colore del font dei pulsanti.
HOMEPAGE
In questa pagina il colore dell’icona dell’indicatore di stato in basso a destra è definito nel codice.
LIGHT mode (UI di default)
Nell’immagine qui sopra “Primary Color” viene utilizzato per colorare la barra del titolo della pagina, mentre “On Primary Color“ è utilizzato per il colore del font del titolo della pagina. Il colore delle barre di stato invece è configurato nel campo “Primary Color Variant”. Per lo sfondo del pulsante che attiva la scansione viene utilizzato il colore definito nel campo “Secondary Color” e “On Secondary Color” per il simbolo in primo piano.
DARK mode (Cliente1 UI)
FLYOUT
In questo menu il colore degli indicatori di stato a fianco alle icone “batteria”, “memoria”, “sincronizzazione tabelle”, “websocket” e dell’icona vicino alla voce «Disconnetti» è definito nel codice.
LIGHT mode (UI di default)
DARK mode (Cliente1 UI)
RICERCA
LIGHT mode (UI di default)
DARK mode (Cliente1 UI)
PRODOTTO
In questa pagina il colore delle icone che indicano la disponibilità e la giacenza è definito nel codice.
LIGHT mode (UI di default)
Nell’immagine qui sopra “Primary Color” viene utilizzato per colorare anche lo sfondo del pulsante “AGGIUNGI AL CARRELLO”, mentre per il colore del font viene utilizzato “On Primary Color“.
DARK mode (Cliente1 UI)
In questa configurazione, per lo sfondo del pulsante “AGGIUNGI AL CARRELLO” viene usato il colore definito in “Secondary Color Variant”, mentre per il colore del font viene utilizzato “On Secondary Color“.
CARRELLO
LIGHT mode (UI di default)
> CARRELLO Scontato (LIGHT mode)
DARK mode (Cliente1 UI)
> CARRELLO Scontato (DARK mode)
SCONTI
LIGHT mode (UI di default)
DARK mode (Cliente1 UI)
FINALIZZA ACQUISTO
LIGHT mode (UI di default)
DARK mode (Cliente1 UI)