feat(docs, demo, toast-Class)- add doc, demo and some custom class for message toast

docs/_tables/fr/config/message.csv

@@ -2,9 +2,10 @@ Propriétés,Type,Description,Valeurs possibles,Valeur défaut
 format ,String,"| Le format du message html ou text. Selon le choix, une deuxième configuration devra
 | être définie soit html ou text. ","'text', 'html' ",
 html ,String,Le html du message sur une seule ligne. Cette configuration est obligatoire si le format = 'html. ,,
-icon ,String,Icone à ajouter au message. ,,
+showIcon , Boolean, Indique si l'icone est présent dans l'affichage du message , true/false, true
 options.* ,Notification ,"| Voir les options Notifications dans le projet 
 | `ngx-toastr options. <https://github.com/scttcper/ngx-toastr#individual-options>`_ ",,
+options.disableTimeOut , Boolean, Enlève le délais de temps ou est affiché le message, true/false, false
 options.template ,String ,En construction ,,
 options.from ,Date | String ,"| Date de début de l'application du message.
 | Peut être une date OU un string interprétable
@@ -14,7 +15,7 @@ options.to,Date | String ,"| Date de fin de l'application du message.
 | en javascript. `https://developer.mozilla.org/fr/docs... <https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/parse>`_ ",,
 text ,String,"| Le text du message à afficher. Cette configuration remplace la configuration html.
 | NB.: pour un message qui sera traduction en fonction du navigateur simplement
-| créer une clef de traduction indiquer ici et de mettre sont équivalent dans les
+| créer une clef de traduction indiquée ici et mettre son équivalent dans les
 | fichiers de traduction local en.json, fr.json. Exemple:
 | ""text"": ""messageContextXyz"",
 | fr.json = ""messageContextXyz"": <h3>mon super message</h3>
@@ -23,5 +24,5 @@ title ,String,"| Le titre du message à afficher. Cette configuration s'
 | configuration text et ne sera pas pris en compte avec la configuration html. ",,
 type ,String,"| Le type du message à afficher. Avertissement, erreur ou information.
 | Selon le type choisi une couleur spécifiée sera appliquée selon la
-| thématique de couleur de l'application. ","| 'alert', 'error',
-| 'info', 'success'",
+| thématique de couleur de l'application. ","| 'warning', 'error',
+| 'info', 'success', 'show'",

docs/config_json.rst

@@ -1372,7 +1372,7 @@ Message
 
         Message affiché à l'ouverture du contexte ou à l'ouverture de la couche.
         - Une librairie tierce est utilisée pour l'affichage de message : `NGX-TOASTR  <https://www.npmjs.com/package/ngx-toastr>`_
-        NB.: Les classes connues de l'application peuvent être utilisées. Des classes personalisées spécifiques aux messages peuvent être ajoutés.
+        NB.: Les classes connues de l'application peuvent être utilisées. Des classes personalisées spécifiques aux messages peuvent être ajoutées dedans:.
          `IGO2 styles.scss <https://github.com/infra-geo-ouverte/igo2/blob/master/src/styles.scss#L13>`_
 
 Exemples
@@ -1381,8 +1381,9 @@ Exemples
 
             "message": {
                   "format": "html",
-                  "html": "<div class='class-custom-rouge'> Bienvenue sur <b>IGO</b></div>",
+                  "html": "<div class='toast-title-red'> Bienvenue sur <b>IGO</b></div>",
                   "type": "info",
+                  "showIcon": false,
                   "options": {
                         "timeOut": 30000
                   }

docs/properties.rst

@@ -2467,7 +2467,7 @@ importExport
           - Les shapeFiles doivent être dans un .zip
 
         Export:
-          - Seulement les couches en WFS peuvent être exportées.
+          - Seulement les couches en WFS peuvent être exportées, les couches WMS ne sont pas exportable.
 
 
 Exemples
@@ -2501,8 +2501,11 @@ Exemples
 
     .. line-block::
 
-        Outil permettant d'exporter certaines couches d'informations.
-        Noter que les couches WMS ne sont pas exportable.
+        Noter que des précisions peuvent etre ajoutées dans l'interface pour guider l'utilisateur. Ceci à l'aide des traductions disponibles:
+        Import: liste= importTabTitle, importClarifications, importSizeMax, importFormatAuthorized, importShpZip, importHtmlClarifications
+                ou plutot que la liste, vous pouvez définir du html personnalisé avec la balise importHtmlClarifications
+        Export: Définir du html personnalisé avec la balise exportHtmlClarifications.
+         - `Fichier traduction en.json <https://github.com/infra-geo-ouverte/igo2-lib/blob/master/packages/geo/src/locale/en.geo.json#L135>`__
 
 Propriétés
 

src/contexts/messages.json

@@ -7,11 +7,21 @@
         "title": "messages.title",
         "text": "messages.message",
         "type": "success",
+        "showIcon": true,
         "options": {
           "timeOut": 30000,
           "titleClass": "toast-title-red",
           "messageClass": "toast-message-gray"
         }
+    },
+    {
+        "title": "Warning with noTimeout",
+        "text": "Warning xxxxxx<br>Click on message to indicate you have read the warning",
+        "type": "warning",
+        "format": "html",
+        "options": {
+            "disableTimeOut": true
+        }
     }
     ],
     "layers": [
@@ -40,13 +50,24 @@
                     }
                 },
                 {
-                    "title": "Info",
+                    "title": "Info no icon",
                     "text": "Second message at layer level",
                     "type": "info",
+                    "showIcon": false,
+                    "options": {
+                        "timeOut": 20000
+                    }
+                },
+                {
+                    "title": "Show message type",
+                    "text": "3e message at layer level",
+                    "type": "show",
+                    "showIcon": false,
                     "options": {
                         "timeOut": 20000
                     }
                 }
+
             ]
         }
     ]

src/locale/en.json

@@ -245,6 +245,6 @@
   },
   "messages": {
     "title": "Title from a translation",
-    "message": "Message from a translation - <div class='toast-message-green-div'>Message at the context level </div>Open the layer 'MSP Tel. Urgence' to see messages at the layer level."
+    "message": "Message from a translation - no icon - <div class='toast-message-green-div'>Message at the context level </div>Open the layer 'MSP Tel. Urgence' to see messages at the layer level."
   }
 }

src/locale/fr.json

@@ -244,6 +244,6 @@
   },
   "messages": {
     "title": "Titre provenant d'une traduction",
-    "message": "Message provenant d'une traduction - <div class='toast-message-green-div'>Message provenant du contexte</div>Ouvrez la couche 'MSP Tel. Urgence' pour voir les messages liés."
+    "message": "Message provenant d'une traduction - **Config sans icône- <div class='toast-message-green-div'>Message provenant du contexte</div>Ouvrez lea couche 'MSP Tel. Urgence' pour voir les messages liés."
   }
 }

src/styles.scss

@@ -22,4 +22,18 @@
 }
 .toast-message-green-div {
   color:rgb(35, 85, 20);
+}
+
+.toast-message-ul-pad-inline-start-9prc {
+  padding-inline-start: 9%;
+}
+
+.toast-message-a-blue {
+  color: blue !important;
+  text-decoration: none;
+}
+
+.toast-message-a-blue:hover {
+  text-decoration: underline !important;
+
 }