diff --git a/src/plugins/events/components/EventTimelineView.vue b/src/plugins/events/components/EventTimelineView.vue index c1b49f9fc6..52c6757262 100644 --- a/src/plugins/events/components/EventTimelineView.vue +++ b/src/plugins/events/components/EventTimelineView.vue @@ -295,7 +295,11 @@ export default { isNested: true }; }, - template: `` + template: ` + + ` }, { app: this.openmct.app @@ -411,7 +415,6 @@ export default { eventWrapper.setAttribute('id', id); eventWrapper.classList.add(EVENT_WRAPPER_CLASS); eventWrapper.style.left = `${this.xScale(event.time) + this.alignmentData.leftWidth + AXES_PADDING}px`; - const eventTickElement = document.createElement('div'); eventTickElement.classList.add('c-events-tsv__event-handle'); eventTickElement.style.width = '2px'; diff --git a/src/plugins/timeline/ExtendedLinesOverlay.vue b/src/plugins/timeline/ExtendedLinesOverlay.vue index ef6e94fbf7..cfd8abc2a6 100644 --- a/src/plugins/timeline/ExtendedLinesOverlay.vue +++ b/src/plugins/timeline/ExtendedLinesOverlay.vue @@ -27,8 +27,10 @@ v-for="(line, index) in lines" :key="index" class="extended-line" - :class="line.limitClass" + :class="[line.limitClass, { 'extended-line-hovered': isHovered(key, index) }]" :style="{ left: `${line.x + leftOffset}px`, height: `${height}px` }" + @mouseover="startingHover(key, index)" + @mouseleave="startingHover(null, null)" > @@ -50,25 +52,26 @@ export default { type: Number, default: 0 } + }, + data() { + return { + hoveredLine: { + key: null, + index: null + } + }; + }, + methods: { + startingHover(key, index) { + if (key === null && index === null) { + this.hoveredLine = { key: null, index: null }; + } else { + this.hoveredLine = { key, index }; + } + }, + isHovered(key, index) { + return this.hoveredLine.key === key && this.hoveredLine.index === index; + } } }; - - diff --git a/src/plugins/timeline/timeline.scss b/src/plugins/timeline/timeline.scss index 02ab4518e4..71bc0ccebe 100644 --- a/src/plugins/timeline/timeline.scss +++ b/src/plugins/timeline/timeline.scss @@ -11,8 +11,14 @@ position: absolute; top: 0; left: 0; - pointer-events: none; /* Allows clicks to pass through */ - z-index: 10; /* Ensure it sits atop swimlanes */ + z-index: 10; +} + +.extended-lines-overlay { + position: absolute; + top: 0; + left: 0; + z-index: 10; } .extended-line { @@ -20,4 +26,9 @@ top: 0; width: 2px; background-color: $colorBodyFg; /* Use desired color */ +} + + +.extended-line-hovered { + background-color: green; } \ No newline at end of file