Closes #7960

- Removed bad `}` in TimeSystemAxis.vue.
- Removed `.u-contents` from line 129 of ganttChart.e2e.spec.js.
- Removed `event-handle` element; not needed.
- Changed `__event-wrapper` to not set height explicitly; uses absolute positioning.
- Added :before element to event-wrapper for better hit area.
- Improved hover styling.
- $colorEvent* style constants added to theme constant SCSS files.

e2e/tests/functional/planning/ganttChart.e2e.spec.js

@@ -126,7 +126,7 @@ test.describe('Gantt Chart', () => {
     await page.goto(ganttChart.url);
 
     // Assert that the Plan's status is displayed as draft
-    expect(await page.locator('.u-contents.c-swimlane.is-status--draft').count()).toBe(
+    expect(await page.locator('.c-swimlane.is-status--draft').count()).toBe(
       Object.keys(testPlan1).length
     );
   });

src/plugins/events/components/EventTimelineView.vue

@@ -416,14 +416,15 @@ export default {
       eventWrapper.classList.add(EVENT_WRAPPER_CLASS);
       eventWrapper.style.left = `${this.xScale(event.time) + this.alignmentData.leftWidth + AXES_PADDING}px`;
 
-      const eventTickElement = document.createElement('div');
+      // const eventTickElement = document.createElement('div');
-      eventTickElement.classList.add('c-events-tsv__event-handle');
+      // eventTickElement.classList.add('c-events-tsv__event-handle');
-      eventTickElement.style.width = '2px';
+      // eventTickElement.style.width = '2px';
-      eventTickElement.style.height = `${String(ROW_HEIGHT - 10)}px`;
+      // eventTickElement.style.height = `${String(ROW_HEIGHT - 10)}px`;
-      if (this.titleKey) {
+      // if (this.titleKey) {
-        eventTickElement.title = event[this.titleKey];
+      //   eventTickElement.title = event[this.titleKey];
-      }
+      // }
-      eventWrapper.appendChild(eventTickElement);
+      // eventWrapper.appendChild(eventTickElement);
+
       const limitEvaluation = this.limitEvaluator.evaluate(event, this.valueMetadata);
       const limitClass = limitEvaluation?.cssClass;
       if (limitClass) {

src/plugins/events/components/events-view.scss

@@ -1,34 +1,51 @@
 .c-events-tsv {
     overflow: hidden;
-    div.c-events-tsv__event-wrapper {
-      cursor: pointer;
-      position: absolute;
-      top: 0;
-      display: flex;
-      z-index: 1;
-      margin-top: 5px;
-      &:hover {
-        z-index: 2;
 
-        [class*='__event-handle'] {
+    &__event-wrapper {
-          background-color: $colorBodyFg;
+        // Wraps an individual event line
+        // Also holds the hover flyout element
+        $c: $colorEventLine;
+        $lineW: 2px;
+        $hitAreaW: 6px;
+        $m: $interiorMargin;
+        background-color: rgba($c, 0.6);
+        cursor: pointer;
+        position: absolute;
+        display: flex;
+        top: $m; bottom: $m;
+        width: $lineW;
+        z-index: 1;
+
+        &:before {
+            // Extend hit area
+            content: '';
+            display: block;
+            position: absolute;
+            top: 0; bottom: 0;
+            z-index: 0;
+            width: $hitAreaW;
+            transform: translateX(($hitAreaW - $lineW) * -0.5);
+        }
+
+        &:hover {
+            z-index: 2;
+            background-color: $c;
+
+            &:before {
+                background-color: rgba($c, 0.4);
+            }
         }
-      }
     }
 
     &__no-items {
-      fill: $colorBodyFg !important;
+        fill: $colorBodyFg !important;
     }
+}
 
-    &__event-handle {
+.c-events-canvas {
-      background-color: rgba($colorBodyFg, 0.5);
-    }
-  }
-
-  .c-events-canvas {
     pointer-events: auto; // This allows the event element to receive a browser-level context click
     position: absolute;
     left: 0;
     top: 0;
     z-index: 2;
-  }
+}

src/plugins/timeline/ExtendedLinesOverlay.vue

@@ -21,11 +21,15 @@
 -->
 <template>
   <div class="c-timeline__overlay-lines">
-    <div v-for="(lines, key) in extendedLinesPerKey" :key="key" class="extended-line-container">
+    <div
+      v-for="(lines, key) in extendedLinesPerKey"
+      :key="key"
+      class="c-timeline__extended-line-container"
+    >
       <div
         v-for="(line, index) in lines"
         :key="index"
-        class="extended-line"
+        class="c-timeline__extended-line"
         :class="line.limitClass"
         :style="{ left: `${line.x + leftOffset}px`, height: `${height}px` }"
       ></div>

src/plugins/timeline/TimelineObjectView.vue

@@ -28,8 +28,8 @@
     :show-ucontents="isPlanLikeObject(item.domainObject)"
     :span-rows-count="item.rowCount"
     :domain-object="item.domainObject"
-    button-title="Toggle event lines"
+    button-title="Toggle extended event lines overlay"
-    button-icon="icon-timeline"
+    button-icon="icon-arrows-up-down"
     :hide-button="!hasEventTelemetry()"
     :button-click-on="enableExtendEventLines"
     :button-click-off="disableExtendEventLines"

src/plugins/timeline/timeline.scss

@@ -24,6 +24,9 @@
 .c-timeline-holder {
     overflow: hidden;
     position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
 
     // Plot view overrides
     .gl-plot-display-area,
@@ -32,20 +35,23 @@
     }
 }
 
-.c-timeline__objects {
+.c-timeline {
-    display: contents;
+    &__objects {
-}
+        display: contents;
+    }
 
-.c-timeline__overlay-lines {
+    &__overlay-lines {
-    //background: rgba(deeppink, 0.2);
+        //background: rgba(deeppink, 0.2);
-    @include abs();
+        @include abs();
-    pointer-events: none; /* Allows clicks to pass through */
+        pointer-events: none; /* Allows clicks to pass through */
-    z-index: 10; /* Ensure it sits atop swimlanes */
+        z-index: 10; /* Ensure it sits atop swimlanes */
-}
+    }
 
-.extended-line {
+    &__extended-line {
-    position: absolute;
+        opacity: 0.3;
-    top: 0;
+        position: absolute;
-    width: 2px;
+        top: 20px; // Offset down to line up with time axis ticks line
-    background-color: $colorBodyFg; /* Use desired color */
+        width: 2px;
+        background-color: $colorEventLine; //$colorBodyFg; /* Use desired color */
+    }
 }

src/styles/_constants-darkmatter.scss

@@ -517,6 +517,8 @@ $colorInProgressBg: $colorTimeRealtimeBg;
 $colorInProgressFg: $colorTimeRealtimeFgSubtle;
 $colorInProgressFgEm: $colorTimeRealtimeFg;
 $colorGanttSelectedBorder: rgba(#fff, 0.3);
+$colorEventLine: $colorBodyFg;
+$colorEventLineExtended: rgba($colorEventLine, 0.3);
 
 // Tree
 $colorTreeBg: transparent;

src/styles/_constants-espresso.scss

@@ -482,6 +482,8 @@ $colorInProgressBg: $colorTimeRealtimeBg;
 $colorInProgressFg: $colorTimeRealtimeFgSubtle;
 $colorInProgressFgEm: $colorTimeRealtimeFg;
 $colorGanttSelectedBorder: rgba(#fff, 0.3);
+$colorEventLine: $colorBodyFg;
+$colorEventLineExtended: rgba($colorEventLine, 0.3);
 
 // Tree
 $colorTreeBg: transparent;

src/styles/_constants-maelstrom.scss

@@ -498,6 +498,8 @@ $colorInProgressBg: $colorTimeRealtimeBg;
 $colorInProgressFg: $colorTimeRealtimeFgSubtle;
 $colorInProgressFgEm: $colorTimeRealtimeFg;
 $colorGanttSelectedBorder: rgba(#fff, 0.3);
+$colorEventLine: $colorBodyFg;
+$colorEventLineExtended: rgba($colorEventLine, 0.3);
 
 // Tree
 $colorTreeBg: transparent;

src/styles/_constants-snow.scss

@@ -481,6 +481,8 @@ $colorInProgressBg: #b1e8ff;
 $colorInProgressFg: $colorCurrentFg;
 $colorInProgressFgEm: $colorCurrentFgEm;
 $colorGanttSelectedBorder: #fff;
+$colorEventLine: $colorBodyFg;
+$colorEventLineExtended: rgba($colorEventLine, 0.3);
 
 // Tree
 $colorTreeBg: transparent;

src/ui/components/TimeSystemAxis.vue

@@ -79,7 +79,7 @@ export default {
     const { size: containerSize, startObserving } = useResizeObserver();
     const svgWidth = ref(0);
     const svgHeight = ref(0);
-    const axisTransform = ref(`translate(0,${TIME_AXIS_LINE_Y}})`);
+    const axisTransform = ref(`translate(0,${TIME_AXIS_LINE_Y})`);
     const alignmentOffset = ref(0);
     const nowMarkerStyle = reactive({
       height: '0px',
@@ -114,7 +114,7 @@ export default {
         if (this.alignmentData.leftWidth) {
           leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
         }
-        this.axisTransform = `translate(${this.alignmentData.leftWidth + leftOffset}, 20)`;
+        this.axisTransform = `translate(${this.alignmentData.leftWidth + leftOffset}, ${TIME_AXIS_LINE_Y})`;
 
         const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
         this.alignmentOffset =

src/ui/components/swim-lane/SwimLane.vue

@@ -34,10 +34,6 @@
       :class="[swimlaneClass, statusClass]"
       :style="gridRowSpan"
     >
-      <div class="c-object-label__name">
-        <slot name="label"></slot>
-      </div>
-
       <div v-if="iconClass" class="c-object-label__type-icon" :class="iconClass">
         <span
           v-if="status"
@@ -46,7 +42,10 @@
           :title="`This item is ${status}`"
         ></span>
       </div>
-      <div class="c-notebook__toggle-nav-button c-icon-button c-icon-button--major">
+      <div class="c-object-label__name">
+        <slot name="label"></slot>
+      </div>
+      <div class="c-icon-button c-icon-button--major">
         <button
           v-if="!hideButton"
           class="c-button"

src/ui/components/swim-lane/swimlane.scss

@@ -24,8 +24,7 @@
   display: grid;
   grid-template-columns: 100px 100px 1fr;
   grid-column-gap: 1px;
-  grid-row-gap: 1px;
+  grid-row-gap: 1px; // Is this being used?
-  margin-bottom: 1px;
   width: 100%;
 
   &.is-status--draft {