Sketch toolbar template (WIP)

TODO remove jQuery from directives etc.

app/assets/javascripts/angular/controllers/timelines_controller.js

@@ -4,28 +4,41 @@ timelinesApp.controller('TimelinesController', ['$scope', '$window', 'TimelineSe
     $window.location.href = $scope.timelines[$scope.currentTimelineId].path;
   };
 
-  // setup
-
+  // Setup
   $scope.timelineContainerNo = 1; // formerly rand(10**75), TODO increment after each timeline startup
+  $scope.currentOutlineLevel = 'level3';
+  $scope.currentScale = 'monthly';
 
-  $scope.timelines = gon.timelines;
+  // Get server-side stuff into scope
   $scope.currentTimelineId = gon.current_timeline_id;
+  $scope.timelines = gon.timelines;
   $scope.timelineOptions = angular.extend(gon.timeline_options, { i18n: gon.timeline_translations });
+
+  // Get timelines stuff into scope
   $scope.Timeline = Timeline;
 
-  // $scope.timeline = TimelineService.loadTimeline($scope.timelineOptions);
+  // Load timeline
+  $scope.timeline = TimelineService.loadTimeline($scope.timelineOptions);
 
+  // Slider
+  // TODO integrate angular-ui-slider
+  $scope.getCurrentScaleLevel = function() {
+    return jQuery('#zoom-slider').slider('value');
+  };
+  $scope.setCurrentScaleLevel = function(value) {
+    jQuery('#zoom-slider').slider('value', value);
+  };
+
+  // Container for timeline rendering
   $scope.getTimelineContainerElementId = function() {
     return 'timeline-container-' + $scope.timelineContainerNo;
   };
-
   $scope.getTimelineContainer = function() {
     return angular.element(document.querySelector('#' + $scope.getTimelineContainerElementId()));
   };
 
   angular.element(document).ready(function() {
     // start timeline
-    // $scope.timeline = TimelineService.startTimeline($scope.timelineOptions, $scope.getTimelineContainer());
-    $scope.timeline = TimelineService.loadTimeline($scope.timelineOptions);
+    TimelineService.startTimeline($scope.timelineOptions, $scope.getTimelineContainer());
   });
 }]);

app/assets/javascripts/angular/directives/timelines/zoom_slider_directive.js

@@ -0,0 +1,24 @@
+timelinesApp.directive('zoomSlider', function() {
+  return {
+    restrict: 'A',
+    link: function(scope, element, attributes) {
+      zooms = jQuery('select[name="zooms"]');
+      element.slider({
+        min: 1,
+        max: Timeline.ZOOM_SCALES.length,
+        range: 'min',
+        value: zooms[0].selectedIndex + 1,
+        slide: function(event, ui) {
+          zooms[0].selectedIndex = ui.value - 1;
+        },
+        change: function(event, ui) {
+          zooms[0].selectedIndex = ui.value - 1;
+          timeline.zoom(ui.value - 1);
+        }
+      }).css({
+        // top right bottom left
+        'margin': '4px 6px 3px'
+      });
+    }
+  };
+});

app/views/timelines/_timeline.html.erb

@@ -27,7 +27,9 @@ See doc/COPYRIGHT.rdoc for more details.
 
 ++#%>
 
-<div id='{{getTimelineContainerElementId()}}'></div>
+<div id="{{getTimelineContainerElementId()}}"></div>
+
+<%= render 'toolbar' %>
 
 <% unless User.current.impaired? %>
   <%# TODO: Require autocompleter inside select_boxes.js

app/views/timelines/_toolbar.html.erb

@@ -0,0 +1,42 @@
+<div id="soon-to-become-{{getTimelineContainerElementId()}}">
+  <div class="tl-toolbar">
+    <div class="tl-toolbar-container">
+      <a ng-if='timeline.USE_MODALS' ng-click="timeline.addPlanningElement()" title="{{timeline.i18n('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="setCurrentScaleLevel(getCurrentScaleLevel() - 1)"></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="setCurrentScaleLevel(getCurrentScaleLevel() + 1)"></a>
+    </div>
+
+
+    <div class="tl-toolbar-container">
+      <form>
+        <select name="zooms" ng-model="currentScale" ng-options="timeline.i18n(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="timeline.i18n(Timeline.OUTLINE_CONFIGURATIONS[level].name) for level in Timeline.OUTLINE_LEVELS">
+        </select>
+      </form>
+    </div>
+  </div>
+</div>