Add zoom buttons

app/assets/stylesheets/content/work_packages/timelines/_timelines.sass

@@ -8,9 +8,17 @@
   justify-content: flex-end
   align-items: center
 
-  label:
+  label
     margin-right: 1rem
 
+  button
+    margin: 0
+    padding: 8px
+
+.timeline-controls--zoom-buttons
+  margin-left: 1rem
+
+
 .wp-timeline-header-container.generic-table--sort-header-outer
   padding: 0
   z-index: 100

frontend/app/components/wp-table/timeline/controls/wp-timeline.dummy-control.directive.ts

@@ -37,15 +37,21 @@ class WorkPackageTimelineControlController {
   private wpTimeline: WorkPackageTimelineTableController;
 
   hscroll: number;
-  currentZoom: string;
-  localizedZoomLevels = {};
+  currentZoom: number;
+  localizedZoomLevels:{[idx: number]: string} = {};
+
+  minZoomLevel = ZoomLevel.DAYS;
+  maxZoomLevel = ZoomLevel.YEARS;
+
   text:any;
 
   static $inject = ['I18n'];
 
   constructor(private I18n:op.I18n) {
     this.text = {
-      zoomLabel: 'Zoom'
+      zoomLabel: I18n.t('js.timelines.zoom.slider'),
+      zoomIn: I18n.t('js.timelines.zoom.in'),
+      zoomOut: I18n.t('js.timelines.zoom.out'),
     }
   }
 
@@ -55,10 +61,10 @@ class WorkPackageTimelineControlController {
 
     sortedZoomLevels.forEach((value) => {
       let valueString = ZoomLevel[value];
-      this.localizedZoomLevels[value] = this.I18n.t('timeline.zoomlevel.' + valueString);
+      this.localizedZoomLevels[value] = this.I18n.t('js.timelines.zoom.' + valueString.toLowerCase());
     })
 
-    this.currentZoom = ZoomLevel.DAYS.toString();
+    this.currentZoom = ZoomLevel.DAYS;
   }
 
   get zoomLevels():number[] {
@@ -70,8 +76,13 @@ class WorkPackageTimelineControlController {
     this.wpTimeline.refreshScrollOnly();
   }
 
-  updateZoom() {
-    this.wpTimeline.viewParameterSettings.zoomLevel = parseInt(this.currentZoom);
+  updateZoom(delta?:number) {
+
+    if (delta !== undefined) {
+      this.currentZoom += delta;
+    }
+
+    this.wpTimeline.viewParameterSettings.zoomLevel = this.currentZoom;
     this.wpTimeline.refreshView();
   }
 

frontend/app/components/wp-table/timeline/controls/wp-timeline.dummy-controls.directive.html

@@ -4,7 +4,19 @@
           name="timeline-zoom-level"
           ng-model="$ctrl.currentZoom"
           ng-change="$ctrl.updateZoom()"
-          ng-options="key as label for (key, label) in $ctrl.localizedZoomLevels"
+          ng-options="+key as label for (key, label) in $ctrl.localizedZoomLevels"
           style="display: inline-block; width: 200px">
   </select>
+  <div class="timeline-controls--zoom-buttons">
+    <button class="button -transparent"
+            ng-disabled="$ctrl.currentZoom == $ctrl.minZoomLevel"
+            ng-click="$ctrl.updateZoom(-1)">
+      <i class="button--icon icon-zoom-out"></i>
+    </button>
+    <button class="button -transparent"
+            ng-disabled="$ctrl.currentZoom == $ctrl.maxZoomLevel"
+            ng-click="$ctrl.updateZoom(1)">
+      <i class="button--icon icon-zoom-in"></i>
+    </button>
+   </div>
 </div