[30354] Override type color in selection-mode

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

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

@@ -252,6 +252,7 @@ export class TimelineCellRenderer {
 
     this.checkForActiveSelectionMode(renderInfo, bar);
     this.checkForSpecialDisplaySituations(renderInfo, bar);
+    this.applyTypeColor(renderInfo, bar);
 
     return true;
   }
@@ -327,7 +328,7 @@ export class TimelineCellRenderer {
     // create center label
     const labelCenter = document.createElement('div');
     labelCenter.classList.add(classNameBarLabel);
-    this.applyTypeColor(renderInfo.workPackage, labelCenter);
+    this.applyTypeColor(renderInfo, labelCenter);
     element.appendChild(labelCenter);
 
     // create left label
@@ -366,15 +367,25 @@ export class TimelineCellRenderer {
     return labels;
   }
 
-  protected applyTypeColor(wp:WorkPackageResource, bg:HTMLElement):void {
+  protected applyTypeColor(renderInfo:RenderInfo, bg:HTMLElement):void {
+    let wp = renderInfo.workPackage;
     let type = wp.type;
+    let selectionMode = renderInfo.viewParams.activeSelectionMode;
 
-    if (!type) {
+    if (!type && !selectionMode) {
       bg.style.backgroundColor = this.fallbackColor;
     }
 
+    bg.style.backgroundColor = '';
+
+    // Don't apply the class in selection mode
     const id = type.id;
-    bg.classList.add(Highlighting.backgroundClass('type', id!));
+    if (renderInfo.viewParams.activeSelectionMode) {
+      bg.classList.remove(Highlighting.backgroundClass('type', id!));
+      return;
+    } else {
+      bg.classList.add(Highlighting.backgroundClass('type', id!));
+    }
   }
 
   protected assignDate(changeset:WorkPackageChangeset, attributeName:string, value:moment.Moment) {
@@ -408,7 +419,7 @@ export class TimelineCellRenderer {
       bar.style.background = 'none';
     } else {
       // Apply the background color
-      this.applyTypeColor(renderInfo.workPackage, bar);
+      this.applyTypeColor(renderInfo, bar);
     }
   }
 

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

@@ -47,7 +47,6 @@ export class TimelineMilestoneCellRenderer extends TimelineCellRenderer {
 
     const diamond = document.createElement('div');
     diamond.className = 'diamond';
-    diamond.style.backgroundColor = '#DDDDDD';
     diamond.style.left = '0.5em';
     diamond.style.height = '1em';
     diamond.style.width = '1em';
@@ -130,7 +129,7 @@ export class TimelineMilestoneCellRenderer extends TimelineCellRenderer {
     diamond.style.width = 15 + 'px';
     diamond.style.height = 15 + 'px';
     diamond.style.marginLeft = -(15 / 2) + (renderInfo.viewParams.pixelPerDay / 2) + 'px';
-    this.applyTypeColor(renderInfo.workPackage, diamond);
+    this.applyTypeColor(renderInfo, diamond);
 
     // offset left
     const offsetStart = date.diff(viewParams.dateDisplayStart, 'days');

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

@@ -347,6 +347,7 @@ export class WorkPackageTimelineTableController implements AfterViewInit, OnDest
     this.selectionParams.notification = this.NotificationsService.addNotice(this.text.selectionMode);
 
     this.$element.addClass('active-selection-mode');
+
     this.refreshView();
   }