openproject/public/templates/timelines/toolbar.html

<div class="tl-toolbar" ng-show="!warning">
  <div class="tl-toolbar-container">
    <a href="javascript://" ng-if='timeline.USE_MODALS' ng-click="timeline.addPlanningElement()" title="{{I18n.t('js.timelines.new_work_package')}}" class="icon icon-add">
      <span class="hidden-for-sighted">{{ I18n.t('js.timelines.new_work_package') }}</span>
    </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 icon-zoom-out" 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 icon-zoom-in" ng-click="increaseZoom()"></a>
  </div>


  <div class="tl-toolbar-container">
    <form>
      <label for="tl-toolbar-zooms" class="hidden-for-sighted">{{ I18n.t('js.tl_toolbar.zooms') }}</label>
      <select id="tl-toolbar-zooms" 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 icon-outline" ng-click="resetOutline()"></a>
  </div>

  <div class="tl-toolbar-container">
    <form>
      <label for="tl-toolbar-outlines" class="hidden-for-sighted">{{ I18n.t('js.tl_toolbar.outlines') }}</label>
      <select id="tl-toolbar-outlines" 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>