openproject/app/views/timelines/_toolbar.html

<div class="tl-toolbar">
  <div class="tl-toolbar-container">
    <a ng-if='timeline.USE_MODALS' ng-click="timeline.addPlanningElement()" title="{{I18n.t('js.timelines.new_work_package')}}" class="icon icon-add"></a>
  </div>

  <div class="tl-toolbar-container" style="width: 1px; height: 20px; background-color: rgb(0, 0, 0);"></div>

  <div class="tl-toolbar-container">
    <a href="javascript://" title="Zoom out" class="icon tl-icon-zoomout" ng-click="decreaseZoom()"></a>
  </div>

  <div class="tl-toolbar-container" style="width: 100px; height: 20px;">
    <div id="zoom-slider" zoom-slider></div>
  </div>

  <div class="tl-toolbar-container">
    <a href="javascript://" title="Zoom in" class="icon tl-icon-zoomin" ng-click="increaseZoom()"></a>
  </div>


  <div class="tl-toolbar-container">
    <form>
      <select name="zooms" ng-model="currentScaleName" ng-options="I18n.t('js.' + timeline.ZOOM_CONFIGURATIONS[scale].name) for scale in timeline.ZOOM_SCALES">
      </select>
    </form>
  </div>

  <div class="tl-toolbar-container" style="width: 1px; height: 20px; background-color: rgb(0, 0, 0);"></div>

  <div class="tl-toolbar-container">
    <a href="javascript://" title="Reset Outline" class="icon tl-icon-outline"></a>
  </div>

  <div class="tl-toolbar-container">
    <form>
      <select name="outlines" ng-model="currentOutlineLevel" ng-options="I18n.t('js.' + timeline.OUTLINE_CONFIGURATIONS[level].name) for level in timeline.OUTLINE_LEVELS">
      </select>
    </form>
  </div>
</div>