Organization chart: Zoom buttons on an entity

Organization chart: Zoom buttons on an entity

On an entity in the organization chart, you need to charter 3 new buttons:

  • When the flowchart displays the root, there's a "zoom" button.
  • When the flowchart is zoomed in on an entity, it has a button for "zoom out one level" and "zoom out at root".

For example, here is what has been added to the resources/css/services/organization-chart.scss file in the demonstration chart

.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;
}

 

Back to top

User directory