Closes #7936

- Moved all event line styling into events-view.scss.
- Refactor `*__event-wrapper` to `*__event-line`.
- Event line color styling for hover and `s-select`.
- New theme constants for `$colorEvent<color>Line`.
- Removed `--no-style` CSS class; created unnecessary need to override.

e2e/tests/functional/plugins/event/eventTimelineView.e2e.spec.js

@@ -74,7 +74,7 @@ test.describe('Event Timeline View', () => {
 
     // count the event lines
     const eventWrappersContainer = page.locator('.c-events-tsv__container');
-    const eventWrappers = eventWrappersContainer.locator('.c-events-tsv__event-wrapper');
+    const eventWrappers = eventWrappersContainer.locator('.c-events-tsv__event-line');
     const expectedEventWrappersCount = 25;
     await expect(eventWrappers).toHaveCount(expectedEventWrappersCount);
 
@@ -104,7 +104,7 @@ test.describe('Event Timeline View', () => {
 
     // count the extended lines
     const overlayLinesContainer = page.locator('.c-timeline__overlay-lines');
-    const extendedLines = overlayLinesContainer.locator('.c-timeline__extended-line');
+    const extendedLines = overlayLinesContainer.locator('.c-timeline__event-line--extended');
     const expectedCount = 25;
     await expect(extendedLines).toHaveCount(expectedCount);
   });

src/plugins/events/components/EventTimelineView.vue

@@ -38,7 +38,7 @@ import eventData from '../mixins/eventData.js';
 const PADDING = 1;
 const CONTAINER_CLASS = 'c-events-tsv__container';
 const NO_ITEMS_CLASS = 'c-events-tsv__no-items';
-const EVENT_WRAPPER_CLASS = 'c-events-tsv__event-wrapper';
+const EVENT_WRAPPER_CLASS = 'c-events-tsv__event-line';
 const ID_PREFIX = 'wrapper-';
 const AXES_PADDING = 20;
 

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

@@ -1,3 +1,16 @@
+@mixin styleEventLine($colorConst) {
+    background-color: $colorConst !important;
+    &:hover,
+    &[s-selected] {
+        box-shadow: rgba($colorConst, 0.5) 0 0 0px 4px;
+        transition: none;
+        z-index: 2;
+    }
+}
+@mixin styleEventLineExtended($colorConst) {
+    background-color: $colorConst !important;
+}
+
 .c-events-tsv {
     $m: $interiorMargin;
     overflow: hidden;
@@ -11,21 +24,37 @@
         top: $m; right: 0; bottom: $m; left: 0;
     }
 
-    &__event-wrapper {
+    &__event-line {
         // Wraps an individual event line
         // Also holds the hover flyout element
         $c: $colorEventLine;
         $lineW: $eventLineW;
         $hitAreaW: 7px;
         $m: $interiorMarginSm;
-        background-color: rgba($c, 0.6);
         cursor: pointer;
         position: absolute;
         display: flex;
         top: $m; bottom: $m;
+        transition: box-shadow 250ms ease-out;
         width: $lineW;
         z-index: 1;
 
+        @include styleEventLine($colorEventLine);
+        &.is-event {
+            &--purple {
+                @include styleEventLine($colorEventPurpleLine);
+            }
+            &--red {
+                @include styleEventLine($colorEventRedLine);
+            }
+            &--orange {
+                @include styleEventLine($colorEventOrangeLine);
+            }
+            &--yellow {
+                @include styleEventLine($colorEventYellowLine);
+            }
+        }
+
         &:before {
             // Extend hit area
             content: '';
@@ -36,17 +65,6 @@
             width: $hitAreaW;
             transform: translateX(($hitAreaW - $lineW) * -0.5);
         }
-
-        &.is-selected, // TODO: temp, remove this once we set selection correctly
-        &[s-selected],
-        &:hover {
-            z-index: 2;
-            background-color: $c;
-
-            &:before {
-                background-color: rgba($c, 0.4);
-            }
-        }
     }
 
     &__no-items {
@@ -64,3 +82,33 @@
     top: 0;
     z-index: 2;
 }
+
+// Extended event lines
+.c-timeline__event-line--extended {
+    @include abs();
+    transition: opacity 250ms ease-out;
+    width: $eventLineW;
+    opacity: 0.4;
+
+    &.--hovered,
+    &.--s-selected {
+        opacity: 0.8;
+        transition: none;
+    }
+
+    @include styleEventLineExtended($colorEventLine);
+    &.is-event {
+        &--purple {
+            @include styleEventLineExtended($colorEventPurpleLine);
+        }
+        &--red {
+            @include styleEventLineExtended($colorEventRedLine);
+        }
+        &--orange {
+            @include styleEventLineExtended($colorEventOrangeLine);
+        }
+        &--yellow {
+            @include styleEventLineExtended($colorEventYellowLine);
+        }
+    }
+}

src/plugins/timeline/ExtendedLinesOverlay.vue

@@ -24,17 +24,17 @@
     <div
       v-for="(lines, key) in extendedLinesPerKey"
       :key="key"
-      class="c-timeline__extended-line-container"
+      class="c-timeline__event-line--extended-container"
     >
       <div
         v-for="(line, index) in lines"
         :id="line.id"
         :key="index"
-        class="c-timeline__extended-line"
+        class="c-timeline__event-line--extended"
         :class="[
           line.limitClass,
           {
-            'c-timeline__extended-line-hovered':
+            '--hovered':
               hoveredLineId && hoveredKeyString === key && line.id === hoveredLineId
           }
         ]"

src/plugins/timeline/timeline.scss

@@ -51,10 +51,4 @@
         pointer-events: none; // Allows clicks to pass through
         z-index: 10; // Ensure it sits atop swimlanes
     }
-
-    &__extended-line {
-        position: absolute;
-        width: $eventLineW;
-        background-color: $colorEventLineExtended;
-    }
 }

src/styles/_constants-darkmatter.scss

@@ -443,6 +443,10 @@ $colorEventPurpleBg: #31204a;
 $colorEventRedBg: #3c1616;
 $colorEventOrangeBg: #3e2a13;
 $colorEventYellowBg: #3e3316;
+$colorEventPurpleLine: #9e36ff;
+$colorEventRedLine: #ff2525;
+$colorEventOrangeLine: #ff8800;
+$colorEventYellowLine: #fdce22;
 
 // Bubble colors
 $colorInfoBubbleBg: #dddddd;

src/styles/_constants-espresso.scss

@@ -412,6 +412,10 @@ $colorEventPurpleBg: #31204a;
 $colorEventRedBg: #3c1616;
 $colorEventOrangeBg: #3e2a13;
 $colorEventYellowBg: #3e3316;
+$colorEventPurpleLine: #9e36ff;
+$colorEventRedLine: #ff2525;
+$colorEventOrangeLine: #ff8800;
+$colorEventYellowLine: #fdce22;
 
 // Bubble colors
 $colorInfoBubbleBg: #dddddd;

src/styles/_constants-maelstrom.scss

@@ -428,6 +428,10 @@ $colorEventPurpleBg: #31204a;
 $colorEventRedBg: #3c1616;
 $colorEventOrangeBg: #3e2a13;
 $colorEventYellowBg: #3e3316;
+$colorEventPurpleLine: #9e36ff;
+$colorEventRedLine: #ff2525;
+$colorEventOrangeLine: #ff8800;
+$colorEventYellowLine: #fdce22;
 
 // Bubble colors
 $colorInfoBubbleBg: #dddddd;

src/styles/_constants-snow.scss

@@ -403,14 +403,18 @@ $colorLimitCyanFg: #d3faff;
 $colorLimitCyanIc: #1795c0;
 
 // Events
-$colorEventPurpleFg: #6433ff;
+$colorEventPurpleFg: #6f07ed;
 $colorEventRedFg: #aa0000;
 $colorEventOrangeFg: #b84900;
-$colorEventYellowFg: #867109;
+$colorEventYellowFg: #a98c04;
 $colorEventPurpleBg: #ebe7fb;
 $colorEventRedBg: #fcefef;
 $colorEventOrangeBg: #ffece3;
 $colorEventYellowBg: #fdf8eb;
+$colorEventPurpleLine: $colorEventPurpleFg;
+$colorEventRedLine: $colorEventRedFg;
+$colorEventOrangeLine: $colorEventOrangeFg;
+$colorEventYellowLine: $colorEventYellowFg;
 
 // Bubble colors
 $colorInfoBubbleBg: $colorMenuBg;

src/styles/_status.scss

@@ -252,8 +252,6 @@ tr {
     background-color: $colorEventYellowBg !important;
     color: $colorEventYellowFg !important;
   }
-  &--no-style {
-    background-color: $colorBodyBg !important;
-    color: $colorBodyFg !important;
-  }
 }
+
+