===================== Interface utilisateur ===================== Icônes ====== Insérer une icône ----------------- L'élément que vous souhaitez imager (un bouton, un lien de la barre latérale, etc.) avec les classes indiquées dans la liste ci-dessous vous permettront d'avoir une icône. Toutes les icônes nécessitent la présence de la classe ``ico-after``. Elle sera mise en place de façon différente selon l'endroit où vous l'insérez. .. sourcecode:: html+django Ou : .. sourcecode:: html+django Boutons ======= Base ---- Les boutons peuvent être construits à partir de la balise `` Couleurs -------- Les couleurs disponibles sont : - gris : ``btn-grey`` - rouge : ``btn-cancel`` - les boutons de type ``submit`` n'ont besoin d'aucune classe (pas même ``btn``) et seront verts ; si une couleur est appliquée, elle sera prioritaire sur le vert - les boutons ``disabled`` ont un fond et un texte plus clair. .. figure:: ../images/design/boutons.png :align: center Icône ----- Ajoutez une icône sur un bouton comme sur n'importe quel autre élément : .. figure:: ../images/design/boutons_icones.png :align: center .. sourcecode:: html+django Le style général du site se veut épuré, on évitera les icônes sur les boutons de soumission de formulaire. On les utilisera pour illustrer les boutons d'action : déplacer, supprimer, renommer, éditer, etc. Icône d'aide ------------ Il existe une classe, ``help-question-mark``, à appliquer sur un lien, affichant un petit cercle coloré autour du texte du lien. Avec ``?`` comme texte de lien, cela permet d'afficher un petit point d'interrogation cerclé, idéal pour une petite icône ouvrant une aide. N'oubliez pas d'ajouter un attribut ``title`` (ou si l'infobulle gêne, ``aria-label``), pour l'accessibilité du lien. .. sourcecode:: html+django ? Bouton de modification ---------------------- Pour afficher un petit bouton permettant de modifier un élément, et *seulement si l'élément modifié est clairement identifié pour l'utilisateur*, il existe une classe ``edit-button`` à ajouter à un lien. Le texte de ce lien doit être masqué afin de ne pas briser son affichage. Le rendu sera un crayon bleu, virant au blanc sur fond bleu circulaire lorsque survolé. Il est important de tout de même spécifier *et* un texte dans le bouton (masqué), *et* une infobulle, afin d'être très clair sur le rôle du bouton tant pour un utilisateur normal (le bouton n'ayant pas de nom visuel, l'infobulle permet de confirmer ce qu'il fait) que pour un utilisateur usant d'un lecteur d'écran (le texte alternatif étant alors indispensable, l'icône crayon ne pouvant être vue). Aussi, si le lien ouvre une boîte modale, celle-ci sera sans titre si le lien est vide. Voici un exemple. .. sourcecode:: html+django {% trans "Modifier la licence" %} Pour s'assurer que le bouton de modification et ce qu'il permet de modifier soient correctement alignés verticalement et espacés, il existe une seconde classe à appliquer à un conteneur des deux éléments : ``editable-element``. Cet élément doit avoir deux enfants : l'un d'entre eux sera l'élément visuellement modifié, et l'autre le bouton de modification, avec la classe ``edit-button``. S'il a plus de deux enfants, le bouton de modification prendra toujours le moins d'espace possible, et les autres se partageront équitablement la place disponible, tout en restant alignés verticalement. Le bouton peut être placé avant ou après l'élément : l'alignement et l'espacement seront correctement gérés. Si on prend l'exemple d'une licence d'un contenu à côté de laquelle on place un bouton de modification, l'on pourrait utiliser le code HTML suivant. .. sourcecode:: html+django

{{ content.licence }}

Modifier la licence
Formulaires =========== Assistant d'édition Markdown ---------------------------- Sur n'importe quel ``textarea``, ajoutez la classe ``md-editor`` et il se passera alors : - transformation du champ en éditeur riche (boutons d'assistance à l'édition, ...) ; - ajout de l'aide Markdown en dessous du formulaire. Démonstration : .. figure:: ../images/design/assistant.png :align: center Boites modales ============== Les bases --------- Les boîtes modales sont à utiliser pour les confirmations (formulaire), informations complémentaires (lecture seule) ou encore pour des actions secondaires (pagination, etc.). Un lien, généralement sous la forme d'un bouton, ayant comme ``href`` l'``id`` de la modale associée. Le titre et l'icône de la modale sont issues du lien qui ouvre la modale, la dernière partie de cette page détail comment en changer. Une boite modale et son lien associés peuvent être n'importe où dans la page, le système se base sur un ``id`` qui est par définition unique. .. sourcecode:: html+django Ce lien ouvre une boite modale Tailles des modales ------------------- Par défaut, la modale prendra toute la page. Il y a 3 classes pour 3 dimensions qui changent la hauteur de celle-ci : - Sans rien, par défaut - ``modal-small`` - ``modal-medium`` - ``modal-big`` Informations supplémentatires ----------------------------- Si le lien a une icône, la modale la rajoutera automatiquement. .. sourcecode:: html+django Exemple avec icône Lecture seule ------------- Dans certains cas, les modales ne sont pas des formulaires mais simplement des boites d'affichage en lecture seule. Il est alors possible de préciser le texte du bouton de fermeture au travers de l'attribut ``data-modal-close``. .. sourcecode:: html+django Ce lien ouvre une boite modale Messages flash ============== Un message dit "flash" est un message d'information ou d'alerte qui est masquable selon la volonté de l'utilisateur et qui disparaîtra généralement à la page suivante (comportement selon le back-end). Utilisation de base ------------------- Le texte placé dans le bouton de fermeture est présent pour des raisons d'accessibilité. Il n'est pas visible par défaut. Il y a trois couleurs : - rouge, pour les erreurs ``alert-box error`` - orange, pour les alertes/avertissements ``alert-box warning`` - vert, pour les succès/confirmations ``alert-box success`` .. sourcecode:: html+django
Votre message ici.
Modulation ---------- Il est possible de forcer l'affichage du texte à la place ou en plus de la croix en rajoutant la classe ``close-alert-box-text`` au bouton de fermeture. .. sourcecode:: html+django
Pas d'icône, juste du texte.
Vous pouvez combiner icône et texte comme ceci : .. sourcecode:: html+django
Croix + texte.