chart-org

Cette action permet, par exemple, de réaliser l'organigramme en pyramide d'une société.
Son utilisation peut être étendue à toutes les structures arborescentes.

le principe

un organigramme

Pour réaliser cet organigramme, il suffit de créer une structure de liste UL ou OL sur 6 niveaux maximum.

Il est important que toutes les données pour une personne soient dans la même balise LI.
Avec un éditeur wysiwyg, utiliser la combinaison de touches MAJ+ENTER pour créer un saut de ligne simple.

{up chart-org}
<ol>
  <li>
      <img src="/images/actions-demo/chart-org/jean-morel.jpg">
      <br><strong>Jean MOREL</strong>
      <br>Président Directeur Général
  <ol>
      <li>
          <img src="/images/actions-demo/chart-org/gregoire-langlois.jpg">
          <br><strong>Grégoire LANGLOIS</strong>
          <br>Directeur technique
      </li>
...
{/up chart-org

Note : les photos des personnes "imaginaires" ont été générées à l'aide du site thispersondoesnotexist.com

Personnalisations

Nous utilisons la représentation de l'arborescence des fichiers de UP pour montrer les différentes méthodes pour adapter l'organigramme à ses besoins.
Une explication détaillée est fournie après l'exemple.

Les explications

1 / Le style général est défini par les options du shortcode

{up chart-org
 | line-color=peru | border=2px peru solid | radius=0
 | color-bg=white | color-text=#333
 | color-text-1=peru
 | border-2=3px sienna solid 
 | class=bg-grisPale p1
 | css-head=#id .titre > div[background:none;outline:none;color:#333] #id .folder > div[background:#FFE896]
}

1. l'option principale sans aucun argument
2. line-color & border colorent les liaisons et bordures  en peru. radius supprime l'arrondi qui est incompatible avec une bordure outline
3. on définit la couleur de fond et du texte de tous les pavés
4. le bloc de niveau 1 aura son texte dans la couleur peru
5. tous les blocs de niveau 2 auront une bordure plus marquée
6. ajoute un fond gris pale et un padding pour l'ensemble du diagramme
7. la définition de classes spécifiques à cet organigramme (voir "les cas particuliers"). Petit rappel: UP remplace #id par l'id réelle de l'action.

Les options permettent de jouer globalement sur les lignes de liaison (line-color) le fond (color-bg), le texte (color-text) et les bordures (border). Pour agir sur un niveau spécifique, on ajoute le niveau au options color-text-, color-bg- et border-

Attention : les bordures n'utilisent pas l'attribut CCS border, mais outline qui présente l'avantage d'être inclus dans la largeur du bloc. C'est pour cette raison qu'il n'est pas possible d'avoir des angles arrondis sur les pavés.

2 / Les cas particuliers

J'utilise les classes créées par l'option css-head de chart-org

Les pavés représentant des dossiers sont sur fond jaune par l'ajout de la classe folder dans la balise li

Les blocs de niveau 2 sont toujours affichés horizontalement. Pour avoir la liste des fichiers en racine dans la première colonne, je crée un pseudo-niveau 2 que je transforme en titre en ajoutant la classe titre à sa balise li

Astuce !

Pour conserver les noms de fichiers sur la même ligne, j'utilise l'action span comme ceci :

{up span=nowrap}xx-XX.actions-list.html{/up span}

Cette façon de procéder permet avec un éditeur wysiwyg de mettre en évidence l'utilisation de la classe nowrap.

Fichier SCSS

Pour adapter les règles CSS de base, faites une copie du dossier chat_org.scss dans le sous dossier custom.

Modifier les variables en tête de ce fichier devrait suffire.

La seule méthode pour modifier la largeur des lignes de liaison est de passer par ce fichier qui va recalculer toutes les règles CSS. Ne pas modifier le fichier CSS directement.