Organigramme: Boutons de zoom sur une entité

Organigramme: Boutons de zoom sur une entité

Sur une entité dans l'organigramme, vous devez charter 3 nouveaux boutons :

  • Quand l'organigramme affiche la racine, il y a un bouton de "zoom"
  • Quand l'organigramme est zommé sur une entité, il a un bouton de "dézoom d'un niveau" et "dézoom à la racine"

Voici par exemple, ce qui a été ajouté au fichier resources/css/services/organization-chart.scss de la charte de démontration

.organization-chart .orgUnit-focus {
 position: absolute;
 left: 4px;
 top: 8px;
}

.organization-chart .orgUnit-focus a:after{
 display: inline-block;
 border: 1px solid;
 border-style: solid;
 border-width: 1px;
 border-radius: 20px;
 width: 20px;
 height: 20px;
 text-align: center;
 line-height: 20px;
 border-color: #AAA;
 color: #AAA;
 background-color: #FFF;
}

.organization-chart .orgUnit-focus a.back-to-parent:after{
 content: '<';
}

.organization-chart .orgUnit-focus a.remove-focus:after{
 content: '<<';
}

.organization-chart .orgUnit-focus a.focus:after{
 content: '+';
}

.organization-chart .orgUnit-focus > a > span {
 position: absolute;
 left: -100000000px;
}

.organization-chart .orgUnit-focus > a {
 cursor: pointer;
 margin: 2px;
}

 

Retour en haut

User directory