Differenze

Queste sono le differenze tra la revisione selezionata e la versione attuale della pagina.

--- gwusermanual:interface:style_and_icons:stili_ed_icone [2023/01/27 16:02]
giorgio.scali [Icone]
+++ gwusermanual:interface:style_and_icons:stili_ed_icone [2023/01/27 16:43] (versione attuale)
giorgio.scali
@@ Linea 1: / Linea 1: @@
 ===== 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 possono essere utilizzate in vari ambiti:
+Esistono regole css predefinite in geoweb che, oltre ad essere utilizzate nel framework,  possono essere utilizzate in vari ambiti di stilizzazione:
-  * valori widget html, widget htmlTemplate
+  * widget html, widget htmlTemplate
-  * valori nodi dom creati tramite le js api
+  * 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**.
@@ Linea 154: / Linea 165: @@
 </code>
-=== Custom Icon ===
+=== Stacked Icon ===
 Fontawesome mente a disposizione potenti strumenti la stilizzazione delle icone, tra cui la possibilità di //rotazione//, //flip//, //sizing//, //stacking//, ed altro ancora
@@ Linea 173: / Linea 184: @@
 </code>
-E' inoltre possibile, usando l'apposito button, 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**.
+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>