From b865d8c0383223c4e3f9a51b4e086c5c14e57b8c Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 17 Dec 2024 16:23:44 -0800 Subject: [PATCH] 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 `$colorEventLine`. - Removed `--no-style` CSS class; created unnecessary need to override. --- .../event/eventTimelineView.e2e.spec.js | 4 +- .../events/components/EventTimelineView.vue | 2 +- .../events/components/events-view.scss | 74 +++++++++++++++---- src/plugins/timeline/ExtendedLinesOverlay.vue | 6 +- src/plugins/timeline/timeline.scss | 6 -- src/styles/_constants-darkmatter.scss | 4 + src/styles/_constants-espresso.scss | 4 + src/styles/_constants-maelstrom.scss | 4 + src/styles/_constants-snow.scss | 8 +- src/styles/_status.scss | 6 +- 10 files changed, 87 insertions(+), 31 deletions(-) diff --git a/e2e/tests/functional/plugins/event/eventTimelineView.e2e.spec.js b/e2e/tests/functional/plugins/event/eventTimelineView.e2e.spec.js index 689870cb460..99f5e5aad7b 100644 --- a/e2e/tests/functional/plugins/event/eventTimelineView.e2e.spec.js +++ b/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); }); diff --git a/src/plugins/events/components/EventTimelineView.vue b/src/plugins/events/components/EventTimelineView.vue index 48a9f30e5a7..43def11c2a5 100644 --- a/src/plugins/events/components/EventTimelineView.vue +++ b/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; diff --git a/src/plugins/events/components/events-view.scss b/src/plugins/events/components/events-view.scss index fec35d46e53..597e77e8030 100644 --- a/src/plugins/events/components/events-view.scss +++ b/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); + } + } +} diff --git a/src/plugins/timeline/ExtendedLinesOverlay.vue b/src/plugins/timeline/ExtendedLinesOverlay.vue index b9a06ed64d2..e5b84cfc5b1 100644 --- a/src/plugins/timeline/ExtendedLinesOverlay.vue +++ b/src/plugins/timeline/ExtendedLinesOverlay.vue @@ -24,17 +24,17 @@