[30110] Avoid type bg classes applied to timeline bar

The timeline element previously looked like this

```
div.timeline-element # Background applied here
  .labelLeft
  .labelRight
  // ....
```

Since the `__type_inl` classes were applied to the parent element, the
labels would also receive the overridden colors.

To avoid this, a new element is added into the timeline-element that
only draws the background diamond / bar type

https://community.openproject.com/wp/30110

[ci skip]

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

@@ -5,8 +5,9 @@
   float: left
   z-index: 0
 
-  // Fallback color
+  .timeline-element--bg
-  background: #555
+    width: 100%
+    height: 100%
 
   &:hover:not(.-clamp-style)
     .leftHandle, .rightHandle

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

@@ -22,6 +22,7 @@
     // Position container left of bar
     position: absolute
     left: 0px
+    top: 0px
     // Then translate by its own width + some margin
     transform: translateX(calc(-100% - 10px))
     font-size: 12px

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

@@ -3,7 +3,7 @@ import {WorkPackageResource} from 'core-app/modules/hal/resources/work-package-r
 import {
   calculatePositionValueForDayCount,
   calculatePositionValueForDayCountingPx,
-  RenderInfo,
+  RenderInfo, timelineBackgroundElementClass,
   timelineElementCssClass,
   timelineMarkerSelectionStartClass
 } from '../wp-timeline';
@@ -204,17 +204,18 @@ export class TimelineCellRenderer {
    * @return true, if the element should still be displayed.
    *         false, if the element must be removed from the timeline.
    */
-  public update(bar:HTMLDivElement, labels:WorkPackageCellLabels|null, renderInfo:RenderInfo):boolean {
+  public update(element:HTMLDivElement, labels:WorkPackageCellLabels|null, renderInfo:RenderInfo):boolean {
     const changeset = renderInfo.changeset;
+    const bar = element.querySelector(`.${timelineBackgroundElementClass}`) as HTMLElement;
 
     const viewParams = renderInfo.viewParams;
     let start = moment(changeset.value('startDate'));
     let due = moment(changeset.value('dueDate'));
 
     if (_.isNaN(start.valueOf()) && _.isNaN(due.valueOf())) {
-      bar.style.visibility = 'hidden';
+      element.style.visibility = 'hidden';
     } else {
-      bar.style.visibility = 'visible';
+      element.style.visibility = 'visible';
     }
 
     // only start date, fade out bar to the right
@@ -232,16 +233,16 @@ export class TimelineCellRenderer {
 
     // offset left
     const offsetStart = start.diff(viewParams.dateDisplayStart, 'days');
-    bar.style.left = calculatePositionValueForDayCount(viewParams, offsetStart);
+    element.style.left = calculatePositionValueForDayCount(viewParams, offsetStart);
 
     // duration
     const duration = due.diff(start, 'days') + 1;
-    bar.style.width = calculatePositionValueForDayCount(viewParams, duration);
+    element.style.width = calculatePositionValueForDayCount(viewParams, duration);
 
     // ensure minimum width
     if (!_.isNaN(start.valueOf()) || !_.isNaN(due.valueOf())) {
       const minWidth = _.max([renderInfo.viewParams.pixelPerDay, 2]);
-      bar.style.minWidth = minWidth + 'px';
+      element.style.minWidth = minWidth + 'px';
     }
 
     // Update labels if any
@@ -306,17 +307,20 @@ export class TimelineCellRenderer {
    * start to finish date.
    */
   public render(renderInfo:RenderInfo):HTMLDivElement {
+    const container = document.createElement('div');
     const bar = document.createElement('div');
     const left = document.createElement('div');
     const right = document.createElement('div');
 
-    bar.className = timelineElementCssClass + ' ' + this.type;
+    container.className = timelineElementCssClass + ' ' + this.type;
+    bar.className = timelineBackgroundElementClass;
     left.className = classNameLeftHandle;
     right.className = classNameRightHandle;
-    bar.appendChild(left);
+    container.appendChild(bar);
-    bar.appendChild(right);
+    container.appendChild(left);
+    container.appendChild(right);
 
-    return bar;
+    return container;
   }
 
   createAndAddLabels(renderInfo:RenderInfo, element:HTMLElement):WorkPackageCellLabels {
@@ -362,15 +366,15 @@ export class TimelineCellRenderer {
     return labels;
   }
 
-  protected applyTypeColor(wp:WorkPackageResource, element:HTMLElement):void {
+  protected applyTypeColor(wp:WorkPackageResource, bg:HTMLElement):void {
     let type = wp.type;
 
     if (!type) {
-      element.style.backgroundColor = this.fallbackColor;
+      bg.style.backgroundColor = this.fallbackColor;
     }
 
     const id = type.id;
-    element.classList.add(Highlighting.backgroundClass('type', id!));
+    bg.classList.add(Highlighting.backgroundClass('type', id!));
   }
 
   protected assignDate(changeset:WorkPackageChangeset, attributeName:string, value:moment.Moment) {

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

@@ -2,7 +2,7 @@ import * as moment from 'moment';
 import {WorkPackageResource} from 'core-app/modules/hal/resources/work-package-resource';
 import {
   calculatePositionValueForDayCountingPx,
-  RenderInfo,
+  RenderInfo, timelineBackgroundElementClass,
   timelineElementCssClass
 } from '../wp-timeline';
 import {CellDateMovement, LabelPosition, TimelineCellRenderer} from './timeline-cell-renderer';
@@ -125,8 +125,8 @@ export class TimelineMilestoneCellRenderer extends TimelineCellRenderer {
 
     const diamond = jQuery('.diamond', element)[0];
 
-    element.style.width = 15 + 'px';
+    diamond.style.width = 15 + 'px';
-    element.style.height = 15 + 'px';
+    diamond.style.height = 15 + 'px';
     diamond.style.width = 15 + 'px';
     diamond.style.height = 15 + 'px';
     diamond.style.marginLeft = -(15 / 2) + (renderInfo.viewParams.pixelPerDay / 2) + 'px';

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

@@ -34,6 +34,7 @@ import {RenderedRow} from '../../wp-fast-table/builders/primary-render-pass';
 import Moment = moment.Moment;
 
 export const timelineElementCssClass = 'timeline-element';
+export const timelineBackgroundElementClass = 'timeline-element--bg';
 export const timelineGridElementCssClass = 'wp-timeline--grid-element';
 export const timelineMarkerSelectionStartClass = 'selection-start';