resolve conflicts

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/events-view.scss

@@ -1,16 +1,38 @@
 .c-events-tsv {
-    div.c-events-tsv__event-wrapper {
+    overflow: hidden;
+
+    &__event-wrapper {
+        // 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;
-      top: 0;
         display: flex;
+        top: $m; bottom: $m;
+        width: $lineW;
         z-index: 1;
-      margin-top: 5px;
+
+        &: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;
 
-        [class*='__event-handle'] {
+            &:before {
-          background-color: $colorBodyFg;
+                background-color: rgba($c, 0.4);
             }
         }
     }
@@ -18,17 +40,12 @@
     &__no-items {
         fill: $colorBodyFg !important;
     }
-  
-    &__event-handle {
-      background-color: rgba($colorBodyFg, 0.5);
-    }
 }
 
 .c-events-canvas {
-    pointer-events: auto; // This allows the event element to receive a browser-level context click
+    pointer-events: auto;
     position: absolute;
     left: 0;
     top: 0;
     z-index: 2;
 }
-  

src/plugins/timeline/ExtendedLinesOverlay.vue

@@ -19,15 +19,18 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-
 <template>
-  <div class="extended-lines-overlay">
+  <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, { 'extended-line-hovered': isHovered(key, index) }]"
+        :class="[line.limitClass, { 'c-timeline__extended-line-hovered': isHovered(key, index) }]"
         :style="{ left: `${line.x + leftOffset}px`, height: `${height}px` }"
         @mouseover="startingHover(key, index)"
         @mouseleave="startingHover(null, null)"

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

@@ -1,34 +1,62 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/********************************************* TIME STRIP */
 .c-timeline-holder {
     overflow: hidden;
     position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+
+    // Plot view overrides
+    .gl-plot-display-area,
+    .gl-plot-axis-area.gl-plot-y {
+        bottom: $interiorMargin !important;
+    }
 }
 
-.c-timeline__objects {
+.c-timeline {
+    &__objects {
         display: contents;
     }
 
-.extended-lines-overlay {
+    &__overlay-lines {
-  position: absolute;
+        //background: rgba(deeppink, 0.2);
-  top: 0;
+        @include abs();
-  left: 0;
+        pointer-events: none; /* Allows clicks to pass through */
-  z-index: 10;
+        z-index: 10; /* Ensure it sits atop swimlanes */
     }
 
-.extended-lines-overlay {
+    &__extended-line {
+        opacity: 0.3;
         position: absolute;
-  top: 0;
+        top: 20px; // Offset down to line up with time axis ticks line
-  left: 0;
-  z-index: 10;
-}
-
-.extended-line {
-  position: absolute;
-  top: 0;
         width: 2px;
-  background-color: $colorBodyFg; /* Use desired color */
+        pointer-events: auto;
+        background-color: $colorEventLine; //$colorBodyFg; /* Use desired color */
     }
 
-
+    &__extended-line-hovered {
-.extended-line-hovered {
       background-color: green;
     }
+}

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

@@ -21,9 +21,9 @@
 -->
 <template>
   <div ref="axisHolder" class="c-timesystem-axis">
-    <div class="nowMarker" :style="nowMarkerStyle"><span class="icon-arrow-down"></span></div>
+    <div class="c-timesystem-axis__mb-line" :style="nowMarkerStyle"></div>
     <svg :width="svgWidth" :height="svgHeight">
-      <g class="axis" font-size="1.3em" :transform="axisTransform"></g>
+      <g class="axis" :transform="axisTransform"></g>
     </svg>
   </div>
 </template>
@@ -44,6 +44,7 @@ import { useResizeObserver } from '../composables/resize';
 const PADDING = 1;
 const PIXELS_PER_TICK = 100;
 const PIXELS_PER_TICK_WIDE = 200;
+const TIME_AXIS_LINE_Y = 20;
 
 export default {
   inject: ['openmct', 'domainObject', 'path'],
@@ -78,7 +79,7 @@ export default {
     const { size: containerSize, startObserving } = useResizeObserver();
     const svgWidth = ref(0);
     const svgHeight = ref(0);
-    const axisTransform = ref('translate(0,20)');
+    const axisTransform = ref(`translate(0,${TIME_AXIS_LINE_Y})`);
     const alignmentOffset = ref(0);
     const nowMarkerStyle = reactive({
       height: '0px',
@@ -113,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 =
@@ -169,10 +170,12 @@ export default {
       this.updateNowMarker();
     },
     updateNowMarker() {
-      const nowMarker = this.$el.querySelector('.nowMarker');
+      const nowMarker = this.$el.querySelector('.c-timesystem-axis__mb-line');
       if (nowMarker) {
         nowMarker.classList.remove('hidden');
-        this.nowMarkerStyle.height = this.contentHeight + 'px';
+        // const markerH = this.contentHeight - TIME_AXIS_LINE_Y;
+        this.nowMarkerStyle.height = this.contentHeight - TIME_AXIS_LINE_Y + 'px';
+        this.nowMarkerStyle.top = TIME_AXIS_LINE_Y + 'px';
         const nowTimeStamp = this.openmct.time.now();
         const now = this.xScale(nowTimeStamp);
         this.nowMarkerStyle.left = `${now + this.alignmentOffset}px`;

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 {

src/ui/components/timesystem-axis.scss

@@ -1,9 +1,11 @@
+@use 'sass:math';
+
 .c-timesystem-axis {
   $h: 30px;
   height: $h;
 
   svg {
-    $lineC: rgba($colorBodyFg, 0.3) !important;
+    $lineC: $colorInteriorBorder; //rgba($colorBodyFg, 0.3) !important;
     text-rendering: geometricPrecision;
     width: 100%;
     height: 100%;
@@ -26,21 +28,42 @@
     }
   }
 
-  .nowMarker {
+  &__mb-line {
-    width: 2px;
+    $c: $colorTimeRealtimeBtnBgMajor;
+    $w: 13px;
+    $wHalf: math.floor(math.div($w, 2));
+    //$h: 5px;
+    //$hHalf: math.floor(math.div($h, 2));
+    $transform: translateX(($wHalf - 1) * -1);
+
+    border-right: 2px dashed $c;
+    pointer-events: none;
+    width: 1px;
     position: absolute;
     z-index: 10;
-    background: gray;
+
+    &:before,
+    &:after {
+      //background: $c;
+      content: '';
+      display: block;
+      position: absolute;
+      width: 0;
+      height: 0;
+      transform: $transform;
+      border-left: $wHalf solid transparent;
+      border-right: $wHalf solid transparent;
+      border-top: $wHalf solid $c;
+    }
+
+    &:after {
+      bottom: 0;
+      transform: $transform rotate(180deg);
+    }
 
     &.hidden {
       display: none;
     }
 
-    & .icon-arrow-down {
-      font-size: large;
-      position: absolute;
-      top: -8px;
-      left: -8px;
-    }
   }
 }