[25272] Add year grid lines to timeline in all zoom levels

[ci skip]

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

@@ -85,6 +85,11 @@ export class WorkPackageTableTimelineGrid {
     this.renderTimeSlices(vp, 'day', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
       cell.style.paddingTop = '1px';
     });
+
+    this.renderTimeSlices(vp, 'year', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
+      cell.classList.add('-grid-highlight');
+      cell.style.zIndex = '2';
+    });
   }
 
   private renderLabelsWeeks(vp:TimelineViewParameters) {
@@ -94,6 +99,11 @@ export class WorkPackageTableTimelineGrid {
     this.renderTimeSlices(vp, 'week', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
       cell.classList.add('-grid-highlight');
     });
+
+    this.renderTimeSlices(vp, 'year', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
+      cell.classList.add('-grid-highlight');
+      cell.style.zIndex = '2';
+    });
   }
 
   private renderLabelsMonths(vp:TimelineViewParameters) {
@@ -103,6 +113,11 @@ export class WorkPackageTableTimelineGrid {
     this.renderTimeSlices(vp, 'month', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
       cell.classList.add('-grid-highlight');
     });
+
+    this.renderTimeSlices(vp, 'year', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
+      cell.classList.add('-grid-highlight');
+      cell.style.zIndex = '2';
+    });
   }
 
   private renderLabelsQuarters(vp:TimelineViewParameters) {
@@ -112,6 +127,11 @@ export class WorkPackageTableTimelineGrid {
     this.renderTimeSlices(vp, 'quarter', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
       cell.classList.add('-grid-highlight');
     });
+
+    this.renderTimeSlices(vp, 'year', vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
+      cell.classList.add('-grid-highlight');
+      cell.style.zIndex = '2';
+    });
   }
 
   private renderLabelsYears(vp:TimelineViewParameters) {