openproject/frontend/app/components/wp-buttons/wp-timeline-toggle-button/wp-timeline-toggle-button.html

<ul id="work-packages-timeline-mode-selection"
    class="toolbar-button-group">

  <li *ngIf="isActive()">
    <button id="work-packages-timeline-zoom-auto-button"
            class="button timeline-toolbar--button toolbar-icon"
            [ngClass]="getAutoZoomToggleClass()"
            [attr.title]="text.zoomAuto"
            (click)="toggleAutoZoom()">
      <op-icon icon-classes="icon-zoom-auto button--icon"></op-icon>
    </button>
  </li>

  <li *ngIf="isActive()">
    <button id="work-packages-timeline-zoom-out-button"
            class="button timeline-toolbar--button toolbar-icon"
            [attr.title]="text.zoomOut"
            [disabled]="currentZoom == maxZoomLevel"
            (click)="updateZoomWithDelta(1)">
      <op-icon icon-classes="icon-zoom-out button--icon"></op-icon>
    </button>
  </li>

  <li *ngIf="isActive()">
    <button id="work-packages-timeline-zoom-in-button"
            class="button timeline-toolbar--button toolbar-icon"
            [attr.title]="text.zoomIn"
            [disabled]="currentZoom == minZoomLevel"
            (click)="updateZoomWithDelta(-1)">
      <op-icon icon-classes="icon-zoom-in button--icon"></op-icon>
    </button>
  </li>

  <li>
    <button class="button timeline-toolbar--button toolbar-icon"
            [ngClass]="{ '-active': isActive() }"
            [attr.id]="buttonId"
            [attr.title]="label"
            [disabled]="disabled || (!isToggle() && isActive())"
            (click)="toggleTimeline()">
      <op-icon icon-classes="{{ iconClass }} button--icon"></op-icon>
    </button>
  </li>

</ul>