26011 timeline invalid cursor interaction on labels and subject (#5830)

* Timeline view: Start/due dates can not be changed anymore while the mouse cursor hovers labels

* timeline bar: highlight left and right handle on hover

* timeline bar: highlight left and right handle on hover

[ci skip]

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

@@ -5,6 +5,10 @@
   float: left
   z-index: 0
 
+  &:hover
+    .leftHandle, .rightHandle
+      background-color: rgba(1, 1, 1, 0.2)
+
   .bar-label
     overflow: hidden
     padding: 0 0 0 5px
@@ -27,8 +31,9 @@
     height: 100%
 
   .labelLeft
-    display: none
+    pointer-events: none
     //display: inline-block
+    display: none
     padding: 2px 5px
     top: 0
     white-space: nowrap
@@ -42,6 +47,7 @@
     font-size: 12px
 
   .containerRight
+    pointer-events: none
     display: inline-block
     position: absolute
     margin: 0 0 0 0
@@ -52,8 +58,9 @@
     height: 16px
 
   .labelRight.not-empty
-    display: none
+    pointer-events: none
     //display: inline-block
+    display: none
     background-color: white
     border: 1px solid #d4d4d4
     border-radius: 5px
@@ -63,6 +70,7 @@
     height: 16px
 
   .labelFarRight
+    pointer-events: none
     height: 16px
     display: inline-block
     white-space: nowrap

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

@@ -8,6 +8,7 @@
     transform-origin: center center
 
   .containerRight
+    pointer-events: none
     display: inline-block
     position: absolute
     margin: 0 0 0 0
@@ -19,6 +20,7 @@
     height: 16px
 
   .labelRight.not-empty
+    pointer-events: none
     display: none
     //display: inline-block
     background-color: white

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

@@ -80,8 +80,8 @@ export class TimelineCellRenderer {
                           labels:WorkPackageCellLabels,
                           dates:CellDateMovement) {
 
-    this.assignDate(changeset, "startDate", dates.startDate!);
-    this.assignDate(changeset, "dueDate", dates.dueDate!);
+    this.assignDate(changeset, 'startDate', dates.startDate!);
+    this.assignDate(changeset, 'dueDate', dates.dueDate!);
 
     this.updateLabels(true, labels, changeset);
   }
@@ -93,7 +93,7 @@ export class TimelineCellRenderer {
   public onDaysMoved(changeset:WorkPackageChangeset,
                      dayUnderCursor:Moment,
                      delta:number,
-                     direction:"left" | "right" | "both" | "create" | "dragright"):CellDateMovement {
+                     direction:'left' | 'right' | 'both' | 'create' | 'dragright'):CellDateMovement {
 
     const initialStartDate = changeset.workPackage.startDate;
     const initialDueDate = changeset.workPackage.dueDate;
@@ -144,7 +144,7 @@ export class TimelineCellRenderer {
     }
 
     const changeset = renderInfo.changeset;
-    let direction:"left" | "right" | "both" | "create" | "dragright";
+    let direction:'left' | 'right' | 'both' | 'dragright';
 
     // Update the cursor and maybe set start/due values
     if (jQuery(ev.target).hasClass(classNameLeftHandle)) {
@@ -173,13 +173,6 @@ export class TimelineCellRenderer {
       direction = 'dragright';
     }
 
-    // RR: Keept this code as comment, since it might be useful in the future.
-    // Determine if the left or right handle was clicked
-    // if (!jQuery(ev.target).hasClass(classNameRightHandle) && renderInfo.workPackage.startDate) {
-    // }
-    // if (!jQuery(ev.target).hasClass(classNameLeftHandle) && renderInfo.workPackage.dueDate) {
-    // }
-
     this.updateLabels(true, labels, renderInfo.changeset);
 
     return direction;
@@ -296,9 +289,9 @@ export class TimelineCellRenderer {
    * start to due date.
    */
   public render(renderInfo:RenderInfo):HTMLDivElement {
-    const bar = document.createElement("div");
-    const left = document.createElement("div");
-    const right = document.createElement("div");
+    const bar = document.createElement('div');
+    const left = document.createElement('div');
+    const right = document.createElement('div');
 
     bar.className = timelineElementCssClass + ' ' + this.type;
     left.className = classNameLeftHandle;
@@ -357,7 +350,7 @@ export class TimelineCellRenderer {
 
   protected assignDate(changeset:WorkPackageChangeset, attributeName:string, value:moment.Moment) {
     if (value) {
-      changeset.setValue(attributeName, value.format("YYYY-MM-DD"));
+      changeset.setValue(attributeName, value.format('YYYY-MM-DD'));
     }
   }
 

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

@@ -92,7 +92,7 @@ export class TimelineMilestoneCellRenderer extends TimelineCellRenderer {
       return 'both'; // irrelevant
     }
 
-    let direction: "left" | "right" | "both" | "create" | "dragright" = "both";
+    let direction:'both' | 'create' = 'both';
     this.forceCursor('ew-resize');
 
     if (dateForCreate) {
@@ -106,7 +106,7 @@ export class TimelineMilestoneCellRenderer extends TimelineCellRenderer {
     return direction;
   }
 
-  public update(element: HTMLDivElement, renderInfo: RenderInfo): boolean {
+  public update(element:HTMLDivElement, renderInfo:RenderInfo): boolean {
     const viewParams = renderInfo.viewParams;
     const date = moment(renderInfo.changeset.value('date'));
 
@@ -117,11 +117,11 @@ export class TimelineMilestoneCellRenderer extends TimelineCellRenderer {
 
     const diamond = jQuery('.diamond', element)[0];
 
-    element.style.width = 15 + "px";
-    element.style.height = 15 + "px";
-    diamond.style.width = 15 + "px";
-    diamond.style.height = 15 + "px";
-    diamond.style.marginLeft = -(15 / 2) + (renderInfo.viewParams.pixelPerDay / 2) + "px";
+    element.style.width = 15 + 'px';
+    element.style.height = 15 + 'px';
+    diamond.style.width = 15 + 'px';
+    diamond.style.height = 15 + 'px';
+    diamond.style.marginLeft = -(15 / 2) + (renderInfo.viewParams.pixelPerDay / 2) + 'px';
     diamond.style.backgroundColor = this.typeColor(renderInfo.workPackage);
 
     // offset left