gwusermanual:interface:style_and_icons:stili_ed_icone

Stili ed Icone

Questa pagina è ufficiosa, in quanto la definizione delle regole di styling del framework è ancora in fase di completamento

Stili

Esistono regole css predefinite in geoweb che, oltre ad essere utilizzate nel framework, possono essere utilizzate in vari ambiti di stilizzazione:

  • widget html, widget htmlTemplate
  • nodi dom creati tramite le js api
  • componenti custom in plugin di geoweb

Nelle Report Jasper al momento, pur essendo possibile scrivere del codice html, non è possibile utilizzare tag class=““, che vengono troncati, mentre si possono usare solo alcuni parametri del tag style=”“, come color e background.

Colori Font

Pattern dei selettori css per il colore del testo: 'gw'+[color_name]+'Color'

Elenco css class predefinite:

  • gwGreenColor #339933 #339933
  • gwGreenMapSelectionColor #B0C782 #B0C782
  • gwRedColor #CC3333 #CC3333
  • gwPinkColor #ffc0cb #ffc0cb
  • gwYellowColor #CCCC66 #CCCC66
  • gwYellowMapMeasureColor #FFAA32 #FFAA32
  • gwBlueColor #6699CC #6699CC
  • gwFolderColor #FFD800 #FFD800
  • gwGreenExcelColor #008000 #008000
  • gwGreenCSVColor #008000 #008000
  • gwRedPDFColor #CB0606 #CB0606
  • gwMainColor #007AC2 #007AC2
  • gwLightGrayColor #F6F6F6#F6F6F6
  • gwGrayColor #A9A9A9 #A9A9A9
  • gwDarkGrayColor #808080 #808080
  • gwUIBorderColor #EFEFEF #EFEFEF
  • gwUICommandColor #777777 #777777
  • gwUISelectedColor #CCDAE5 #CCDAE5
  • gwUINotSelectedColor #BBC9D4 #BBC9D4
  • gwWhiteColor #FAFAFA #FAFAFA
  • gwBlackColor #333333 #333333
  • gwWhiteHTMLColor #FFFFFF #FFFFFF
  • gwBlackHTMLColor #000000 #000000
  • gwLightGrayHTMLColor #D3D3D3 #D3D3D3
  • gwGrayHTMLColor #A9A9A9 #A9A9A9
  • gwDarkGrayHTMLColor #808080 #808080
  • gwPageHeaderInfoSectionColor #363636 #363636

Colori Background

Pattern dei selettori css per il colore dello sfondo dei nodi dom: 'gw'+[color_name]+'Background'

Elenco css class predefinite:

  • gwMainColorBackground #007AC2 #007AC2
  • gwWhiteBackground #FAFAFA #FAFAFA
  • gwWhiteHTMLBackground #FFFFFF #FFFFFF
  • gwBlackBackground #333333 #333333
  • gwBlackHTMLBackground #000000 #000000
  • gwLightGrayBackground #F6F6F6 #F6F6F6
  • gwLightGrayHTMLBackground #D3D3D3 #D3D3D3
  • gwGrayBackground #A9A9A9 #A9A9A9
  • gwGrayHTMLBackground #A9A9A9 #A9A9A9
  • gwDarkGrayBackground #808080 #808080
  • gwDarkGrayHTMLBackground #80808 #808080
  • gwPageHeaderInfoSectionBackground #363636 #363636

Icone

L'utente configuratore può impostare l'icona dei vari componenti UI generalmente nei seguenti punti:

  • attributi image nei vari tag dell'xml di progetto
  • value delle proprietà iconClass ove supportato nelle api js

Geoweb, nella versioni 4.5.X e successive utilizza per gli stili dojo flat, che si basa per la parte di icone su Fontawesome. Quindi nativamente i componenti dojo (come alberi, editor, ecc..) utilizzando css class specicifice, costruite su Fontawesome.

Per ragioni di uniformità è stato deciso di supportare anche direttamente il set di icone di Fontawesome (al momento solo le free).

L'utente configuratore quindi, non dovrebbe utilizzare i selettori css per le icone di dojo, che sono dichirati nel codice e non fruibili, ma quelli pubblicati da Fontawesome, comodamente indicizzati e filtrabili.

Esempio: non utilizzare dijitIconCut, ma fa-solid fa-scissors

Geoweb 4.5.X+ utilizza Fontawesome 5

Geoweb 4.6.X+ utilizza Fontawesome 6

Rispetto a Fontawesome 5, in Fontawesome 6 sono cambiati alcuni selettori css di stile:

  • il selettore di stile fas diventa fa-solid
  • il selettore di stile far diventa fa-regular
  • il selettore di stile fab diventa fa-brand

Ed alcuni selettori css di tipo:

  • per esempio la css class per l'icona dell'ingranaggio, fa-cog, ora è fa-gear

Esempi regole per versione: 

Fontawesome 5
'fas fa-house'
'far fa-house'
'far fa-cog'

Fontawesome 6
'fa-solid fa-house'
'fa-regular fa-house'
'fa-solid fa-gear'

Fontawesome ha comunque garantito il pieno supporto alle vecchie regole, e quindi inderettamente anche Geoweb 4.6.X+.

Icon type

Determina la tipologia d'immagine rappresentata nell'icona, senza considerare stile, dimensione, e colore.

Libreria icone Fontawesome:

Icon style

Stili icone FontAwesome 6:

  • fa-solid (free)
  • fa-regular (free)
  • fa-brands (free)
  • fa-light (a pagamento)
  • fa-thin (a pagamento)
  • fa-duotone (a pagamento)

Icon dimension

La dimensione di default è 16×16 px.

In alcuni contesti potrebbe essere forzata la dimensione di default (es: icon leafItem 32×32 px).

Sono predefiniti le seguenti classi css che, usate insieme agli altri selettori css, forzano le dimensioni (in px) dell'icona:

  • icon16x16
  • icon20x20
  • icon24x24
  • icon30x30
  • icon32x32
  • icon40x40
  • icon48x48

Icon color

Di default il color delle icone corrisponde al gwBlackColor (#333333). In alcuni contesti potrebbe essere utilizzato uno specifico colore. Si possono comunque sia forzare i colori, scegliendo fra quelli presenti nella sezione [gwusermanual:interface:style_and_icons:stili_ed_icone#Colori Font|Colori Font]].

Combinare i selettori css

Si possono combinare tutti i selettori di cui sopra, seguendo il pattern:

[style] + [type] + [dimension] + [color]

L'ordine non è mandatorio, ma solo suggerito.

Esempi: 

fa-regular fa-house

fa-solid fa-house icon32x32

fa-solid fa-house icon20x20 gwRedColor

Stacked Icon

Fontawesome mente a disposizione potenti strumenti la stilizzazione delle icone, tra cui la possibilità di rotazione, flip, sizing, stacking, ed altro ancora

In particolare lo stacking, coadiuvato dalle altre funzionalità permette di creare icone complesse a piacere, componendo in varia maniera il materiale delle varie librerie.

Nel Geowebadmin è disponibile, nel menu della gestione della icona di una qualsiasi gwAction, una UI per comporre in maniera arbitraria varie icone, scegliendone l'ordine di comparsa, il dimensionamento, il colore, la rotazione, e ottenere un codice html utilizzabile cosi come è in una qualsiasi struttura dom html.

Esempio di icona stacked (RadiusSelectionCommand nella scheda Layout2D): 

<span class="fa-stack fa-2x gwStacked16 " style="">
    <i class="fa-solid fa-circle fa-stack-2x gwDarkGrayHTMLColor" style="font-size: 18px; left: -1px; top: -1px;"></i>
    <i class="fa-solid fa-circle fa-stack-2x gwGreenMapSelectionColor" style="font-size: 16px; left: 0px; top: 0px;"></i>
    <i class="fa-solid fa-arrow-pointer fa-stack-2x gwDarkGrayHTMLColor" style="font-size: 13px; left: 6px; top: 7px;"></i>
    <i class="fa-solid fa-arrow-pointer fa-stack-2x gwLightGrayHTMLColor" style="font-size: 12px; left: 7px; top: 8px;"></i>
</span>

Nel codice delle icone stacked è supportato praticamente qualsiasi codice html, compleso a piacere, ma nella pratica i punti di intervento necessari sono quelli sotto descritti.

Da notare l'esistenza di class css di dimensionamento (in px), predefinite in geoweb, da usare nel tag più esterno.

  • gwStacked16
  • gwStacked20
  • gwStacked24
  • gwStacked32
  • gwStacked48

Queste determinano in maniera assoluta la dimensione dell'icona.

Nei tag interni si possono usare tutti i selettori descritti sopra.

Le classi css fa-2x, fa-stack-2x, fa-stack-1x, etc.. predefinite in Fontawesome, servono per gestire facilmente i dimensionamenti relativi fra le icone stacked: quelle che hanno fa-stack-1x saranno la meta di quelle con fa-stack-2x.

E' inoltre sempre supportata, con priorià rispetto al tag class, la possibilità di intervenire con regole puntuali sul tag style, che ha priorità sul resto. In particolare si può facilmente agire su dimensioname e posizione.

E' inoltre possibile, usando l'apposito button ('Copia negli appunti'), copiare nella console il codice base64 dell'elaborato, ed utilizzarlo in ogni punto di configurazione, tra cui l'attributo image nei tag dell'xml di progetto.

Esempio: 

...
<menuBarItem name="menu_access_control" label="Monitoraggio Accessi" image="eyJjc3NDbGFzcyI6ImZhLXNvbGlkIGZhLWNvZyIsImNvbG9yIjoiIzc3OTlBQSIsIndpZHRoIjoiMTZweCIsImhlaWdodCI6IjE2cHgifQ==">
...
</menuBarItem>
...

Nota: E' buona passi, pur funzionando sempre il codice in bae64, utilizzare dove possibile i selettori predefiniti standard in chiaro. In questa maniera se un domani si decidesse di cambiare la tonalità di un colore in maniera centralizzata, la modifica si propagherebbe in automatico.

Per esempio l'icona sottostante, non complessa, che ha come base64: 

eyJjc3NDbGFzcyI6ImZhLXNvbGlkIGZhLWdlYXIiLCJ3aWR0aCI6IjMycHgiLCJoZWlnaHQiOiIzMnB4IiwiY29sb3IiOiIjMDA3QUMyIn0=

dovrebbe essere scritta tramite le css predefinite 

fa-solid fa-gear icon32x32 gwMainColor

Cosi: 

...
<menuBarItem name="settings" label="Settings" image="fa-solid fa-gear icon32x32 gwMainColor">
...
</menuBarItem>
...
  • gwusermanual/interface/style_and_icons/stili_ed_icone.txt
  • Ultima modifica: 2023/01/27 16:43
  • da giorgio.scali