From 9957cf4a3174c6f689076fd7f708d40eac5544cb Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Fri, 28 Apr 2023 09:36:25 -0700
Subject: [PATCH] Closes #4975. - Better alignment of elements in TC. - Stubbed
 display for :title to be applied to TC's.

---
 src/plugins/timeConductor/Conductor.vue               | 11 ++++++++++-
 src/plugins/timeConductor/conductor.scss              | 11 ++++++++---
 .../independent/IndependentTimeConductor.vue          |  4 +++-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/plugins/timeConductor/Conductor.vue b/src/plugins/timeConductor/Conductor.vue
index 88828f70b8..6735dca769 100644
--- a/src/plugins/timeConductor/Conductor.vue
+++ b/src/plugins/timeConductor/Conductor.vue
@@ -23,6 +23,7 @@
 <div
     ref="timeConductorOptionsHolder"
     class="c-compact-tc is-expanded"
+    :title="titleStr"
     :class="[
         { 'is-zooming': isZooming },
         { 'is-panning': isPanning },
@@ -32,6 +33,10 @@
 >
     <ConductorModeIcon class="c-conductor__mode-icon" />
     <!-- TODO - NEED TO ADD MODE, CLOCK AND TIMESYSTEM VIEW ONLY INFORMATION HERE -->
+    <div class="c-compact-tc__current-state">
+        {{ modeStr }} {{ clockStr }} {{ timeSystemStr }}
+    </div>
+
     <conductor-inputs-fixed
         v-if="isFixed"
         :input-bounds="viewBounds"
@@ -112,7 +117,11 @@ export default {
             showDatePicker: false,
             altPressed: false,
             isPanning: false,
-            isZooming: false
+            isZooming: false,
+            modeStr: (this.openmct.time.clock() === undefined) ? 'Fixed' : 'RT',
+            clockStr: 'Local',
+            timeSystemStr: 'UTC',
+            titleStr: 'RT LOCAL UTC -00:30:00 <> +00:00:15'
         };
     },
     mounted() {
diff --git a/src/plugins/timeConductor/conductor.scss b/src/plugins/timeConductor/conductor.scss
index 7961fb9945..552a03e99a 100644
--- a/src/plugins/timeConductor/conductor.scss
+++ b/src/plugins/timeConductor/conductor.scss
@@ -380,13 +380,18 @@
         @include ellipsize();
         color: $colorTimeRealtimeFg;
         flex: 0 1 auto;
+        line-height: 100%;
 
         &:before {
-            font-size: 0.85em;
+            font-size: 0.75em;
             margin-right: $interiorMarginSm;
         }
     }
 
+    &__current-state {
+        text-transform: uppercase;
+    }
+
     &__current-update {
         @include ellipsize();
         flex: 0 1 auto;
@@ -433,7 +438,7 @@
             color: $colorTimeFixedFg;
         }
 
-        &__bounds__valuelue {
+        &__bounds__value {
             color: $colorTimeFixedFg;
         }
 
@@ -469,7 +474,7 @@
             color: $colorTimeRealtimeFg;
         }
 
-        &__bounds__valuelue {
+        &__bounds__value {
             color: $colorTimeRealtimeFg;
         }
 
diff --git a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
index 3608339793..53c797284f 100644
--- a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
+++ b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
@@ -23,6 +23,7 @@
 <div
     ref="timeConductorOptionsHolder"
     class="c-compact-tc"
+    :title="titleStr"
     :class="[
         isFixed ? 'is-fixed-mode' : independentTCEnabled ? 'is-realtime-mode' : 'is-fixed-mode',
         { 'is-expanded' : independentTCEnabled }
@@ -95,7 +96,8 @@ export default {
             viewBounds: {
                 start: bounds.start,
                 end: bounds.end
-            }
+            },
+            titleStr: 'RT LOCAL UTC -00:30:00 <> +00:00:15'
         };
     },
     computed: {