gwusermanual:interface:style_and_icons:stili_ed_icone [GeowebFramework]

Questa pagina è in sola lettura. Puoi visualizzare il sorgente, ma non puoi modificarlo. Contatta l'amministratore se pensi che ci sia un errore.
===== Stili ed Icone =====
**<color #ed1c24>Questa pagina è ufficiosa, in quanto la definizione delle regole di styling del framework è ancora in fase di completamento</color>**

  * [[gwusermanual:interface:style_and_icons:stili_ed_icone#Stili]]
    * [[gwusermanual:interface:style_and_icons:stili_ed_icone#Colori Font]]
    * [[gwusermanual:interface:style_and_icons:stili_ed_icone#Colori Background]]
  * [[gwusermanual:interface:style_and_icons:stili_ed_icone#Icone]] 
    * [[gwusermanual:interface:style_and_icons:stili_ed_icone#Icon type]]
    * [[gwusermanual:interface:style_and_icons:stili_ed_icone#Icon style]]
    * [[gwusermanual:interface:style_and_icons:stili_ed_icone#Icon colo]]
    * [[gwusermanual:interface:style_and_icons:stili_ed_icone#Combinare i selettori css]]
    * [[gwusermanual:interface:style_and_icons:stili_ed_icone#Stacked Icon]]

==== 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 **<color #339933>#339933</color>**
  * **gwGreenMapSelectionColor** #B0C782 **<color #B0C782>#B0C782</color>**
  * **gwRedColor** #CC3333 **<color #CC3333>#CC3333</color>**
  * **gwPinkColor** #ffc0cb **<color #ffc0cb>#ffc0cb</color>**
  * **gwYellowColor** #CCCC66 **<color #CCCC66>#CCCC66</color>**
  * **gwYellowMapMeasureColor** #FFAA32 **<color #FFAA32>#FFAA32</color>**
  * **gwBlueColor** #6699CC **<color #6699CC>#6699CC</color>**
  * **gwFolderColor** #FFD800 **<color #FFD800>#FFD800</color>**
  * **gwGreenExcelColor** #008000 **<color #008000>#008000</color>**
  * **gwGreenCSVColor** #008000 **<color #008000>#008000</color>**
  * **gwRedPDFColor** #CB0606 **<color #CB0606>#CB0606</color>**
  * **gwMainColor** #007AC2 **<color #007AC2>#007AC2</color>**
  * **gwLightGrayColor** #F6F6F6**<color #F6F6F6>#F6F6F6</color>**
  * **gwGrayColor** #A9A9A9 **<color #A9A9A9>#A9A9A9</color>**
  * **gwDarkGrayColor** #808080 **<color #808080>#808080</color>**
  * **gwUIBorderColor** #EFEFEF **<color #EFEFEF>#EFEFEF</color>**
  * **gwUICommandColor** #777777 **<color #777777>#777777</color>**
  * **gwUISelectedColor** #CCDAE5 **<color #CCDAE5>#CCDAE5</color>**
  * **gwUINotSelectedColor** #BBC9D4 **<color #BBC9D4>#BBC9D4</color>**
  * **gwWhiteColor** #FAFAFA **<color #FAFAFA>#FAFAFA</color>**
  * **gwBlackColor** #333333 **<color #333333>#333333</color>**
  * **gwWhiteHTMLColor** #FFFFFF **<color #FFFFFF>#FFFFFF</color>**
  * **gwBlackHTMLColor** #000000 **<color #000000>#000000</color>**
  * **gwLightGrayHTMLColor** #D3D3D3 **<color #D3D3D3>#D3D3D3</color>**
  * **gwGrayHTMLColor** #A9A9A9 **<color #A9A9A9>#A9A9A9</color>**
  * **gwDarkGrayHTMLColor** #808080 **<color #808080>#808080</color>**
  * **gwPageHeaderInfoSectionColor** #363636 **<color #363636>#363636</color>**


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

Elenco css class predefinite:
  * **gwMainColorBackground** #007AC2 **<color #007AC2>#007AC2</color>**
  * **gwWhiteBackground** #FAFAFA **<color #FAFAFA>#FAFAFA</color>**
  * **gwWhiteHTMLBackground** #FFFFFF **<color #FFFFFF>#FFFFFF</color>**
  * **gwBlackBackground** #333333 **<color #333333>#333333</color>**
  * **gwBlackHTMLBackground** #000000 **<color #000000>#000000</color>**
  * **gwLightGrayBackground** #F6F6F6 **<color #F6F6F6>#F6F6F6</color>**
  * **gwLightGrayHTMLBackground** #D3D3D3 **<color #D3D3D3>#D3D3D3</color>**
  * **gwGrayBackground** #A9A9A9 **<color #A9A9A9>#A9A9A9</color>**
  * **gwGrayHTMLBackground** #A9A9A9 **<color #A9A9A9>#A9A9A9</color>**
  * **gwDarkGrayBackground** #808080 **<color #808080>#808080</color>**
  * **gwDarkGrayHTMLBackground** #80808 **<color #808080>#808080</color>**
  * **gwPageHeaderInfoSectionBackground** #363636 **<color #363636>#363636</color>**



==== 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:
<code>
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'
</code>

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:
  * [[https://fontawesome.com/search]] (Fontawesome 6, compatibile con geoweb 4.6.X+)
  * [[https://fontawesome.com/v5/search]] (Fontawesome 5, compatibile con geoweb 4.5.X+)

=== 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 è 16x16 px.

In alcuni contesti potrebbe essere forzata la dimensione di default (es: icon leafItem 32x32 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// (<color #333333>#333333</color>).
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:
<code>
fa-regular fa-house

fa-solid fa-house icon32x32

fa-solid fa-house icon20x20 gwRedColor
</code>

=== 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 [[https://fontawesome.com/docs/web/style/stack|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.

{{ :custom:webadmin_stacked_icon_editor.jpg?1000 |}}

Esempio di icona //stacked// (//RadiusSelectionCommand// nella scheda //Layout2D//):
<code html>
<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>
</code>

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:
<code html>
...
<menuBarItem name="menu_access_control" label="Monitoraggio Accessi" image="eyJjc3NDbGFzcyI6ImZhLXNvbGlkIGZhLWNvZyIsImNvbG9yIjoiIzc3OTlBQSIsIndpZHRoIjoiMTZweCIsImhlaWdodCI6IjE2cHgifQ==">
...
</menuBarItem>
...
</code>

**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: <code>eyJjc3NDbGFzcyI6ImZhLXNvbGlkIGZhLWdlYXIiLCJ3aWR0aCI6IjMycHgiLCJoZWlnaHQiOiIzMnB4IiwiY29sb3IiOiIjMDA3QUMyIn0=</code>

{{ :custom:webadmin_icon_editor.jpg?1000 |}}

dovrebbe essere scritta tramite le css predefinite <code>fa-solid fa-gear icon32x32 gwMainColor</code>

Cosi:
<code html>
...
<menuBarItem name="settings" label="Settings" image="fa-solid fa-gear icon32x32 gwMainColor">
...
</menuBarItem>
...
</code>