Closes #7960

- Removed in-page `style` defs from ExtendedLinesOverlay.vue; CSS actually located in timeline.scss.
- Improved sizing and style for Marcus Bains ("now") line.
- Removed extraneous padding at bottom of plot view when in Time Strip.
- Added missing header info to timeline.scss.
- CSS refinements.

Author: charlesh88

src/plugins/events/components/EventTimelineView.vue

@@ -21,7 +21,7 @@
 -->
 
 <template>
-  <div ref="events" class="c-events-tsv c-timeline-holder">
+  <div ref="events" class="c-events-tsv">
     <div ref="eventsHolder" class="c-events-tsv__contents u-contents"></div>
   </div>
 </template>

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

@@ -1,4 +1,5 @@
 .c-events-tsv {
+    overflow: hidden;
     div.c-events-tsv__event-wrapper {
       cursor: pointer;
       position: absolute;
@@ -8,27 +9,26 @@
       margin-top: 5px;
       &:hover {
         z-index: 2;
-  
+
         [class*='__event-handle'] {
           background-color: $colorBodyFg;
         }
       }
     }
-  
+
     &__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
     position: absolute;
     left: 0;
     top: 0;
     z-index: 2;
   }
-  

src/plugins/timeline/ExtendedLinesOverlay.vue

@@ -19,9 +19,8 @@
  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="(line, index) in lines"
@@ -53,22 +52,3 @@ export default {
   }
 };
 </script>
-
-<style scoped>
-.extended-lines-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-}
-
-.extended-line {
-  position: absolute;
-  top: 0;
-  width: 2px;
-  background-color: blue;
-}
-</style>

src/plugins/timeline/timeline.scss

@@ -1,23 +1,51 @@
+/*****************************************************************************
+ * 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;
+    overflow: hidden;
+    position: relative;
+
+    // Plot view overrides
+    .gl-plot-display-area,
+    .gl-plot-axis-area.gl-plot-y {
+        bottom: $interiorMargin !important;
+    }
 }
 
 .c-timeline__objects {
-  display: contents;
+    display: contents;
 }
 
-.extended-lines-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none; /* Allows clicks to pass through */
-  z-index: 10; /* Ensure it sits atop swimlanes */
+.c-timeline__overlay-lines {
+    //background: rgba(deeppink, 0.2);
+    @include abs();
+    pointer-events: none; /* Allows clicks to pass through */
+    z-index: 10; /* Ensure it sits atop swimlanes */
 }
 
 .extended-line {
-  position: absolute;
-  top: 0;
-  width: 2px;
-  background-color: $colorBodyFg; /* Use desired color */
-}
+    position: absolute;
+    top: 0;
+    width: 2px;
+    background-color: $colorBodyFg; /* Use desired color */
+}

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',
@@ -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/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 {
-    width: 2px;
+  &__mb-line {
+    $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;
-    }
   }
 }