POC for interactive selection mode

app/assets/stylesheets/content/work_packages/timelines/elements/_bar.sass

@@ -49,6 +49,13 @@
     font-size: 10px
 
 .active-selection-mode
+  .timeline-element.bar.selection-start
+    background: orange !important
+    cursor: not-allowed !important
+
+  .timeline-element.bar:hover
+    background: #ffd975 !important
+
   .timeline-element.bar
     border: 1px solid orange !important
     outline: 1px solid orange !important
@@ -56,9 +63,9 @@
     background: linear-gradient(270deg, #eeeeee, #bbbbbb)
     background-size: 400% 400%
 
-    -webkit-animation: AnimationName 2s ease infinite
-    -moz-animation: AnimationName 2s ease infinite
-    animation: AnimationName 2s ease infinite
+    -webkit-animation: AnimationName 4s ease infinite
+    -moz-animation: AnimationName 4s ease infinite
+    animation: AnimationName 4s ease infinite
 
     .leftHandle
       cursor: pointer !important

frontend/app/components/wp-table/timeline/cell-renderer/timeline-cell-renderer.ts

@@ -233,6 +233,12 @@ export class TimelineCellRenderer {
     // check for active selection mode
     if (renderInfo.viewParams.activeSelectionMode) {
       bar.style.backgroundImage = null; // required! unable to disable "fade out bar" with css
+
+      if (renderInfo.viewParams.selectionModeStart === "" + renderInfo.workPackage.id) {
+        jQuery(bar).addClass("selection-start");
+        // bar.style.cursor = "not-allowed !important";
+        bar.style.background = null;
+      }
     }
 
     return true;

frontend/app/components/wp-table/timeline/wp-timeline-container.directive.ts

@@ -93,7 +93,7 @@ export class WorkPackageTimelineTableController {
 
     // TODO //////////////////////////////////////
     (window as any).tt = () => {
-      this.activateSelectionMode(endWorkPackage => {
+      this.activateSelectionMode("61", endWorkPackage => {
         console.log("done", endWorkPackage.id);
       });
     };
@@ -165,13 +165,18 @@ export class WorkPackageTimelineTableController {
       );
   }
 
-  activateSelectionMode(callback: (wp: WorkPackageResource) => any) {
+  activateSelectionMode(start: string, callback: (wp: WorkPackageResource) => any) {
     this._viewParameters.activeSelectionMode = (wp: WorkPackageResource) => {
       callback(wp);
+
       this._viewParameters.activeSelectionMode = null;
+      this._viewParameters.selectionModeStart = null;
+
       this.$element.removeClass("active-selection-mode");
       this.refreshView();
     };
+    this._viewParameters.selectionModeStart = start;
+
     this.$element.addClass("active-selection-mode");
     console.log(this.$element);
     this.refreshView();

frontend/app/components/wp-table/timeline/wp-timeline.ts

@@ -70,6 +70,8 @@ export class TimelineViewParameters {
 
   activeSelectionMode: null|((wp: WorkPackageResource) => any) = null;
 
+  selectionModeStart: null|string = null;
+
   get pixelPerDay() {
     switch (this.settings.zoomLevel) {
       case ZoomLevel.DAYS: