Closes #6113

- Refined CSS class naming and application. - Set cursor to pointer for Activity elements. - Added <title> node to Activity elements. - Styling for selected Activities. - Better Inspector tab name.
nasa · Mar 14, 2023 · 377f696 · 377f696
1 parent f2f3add
commit 377f696
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 18 deletions.
diff --git a/src/plugins/plan/components/ActivityTimeline.vue b/src/plugins/plan/components/ActivityTimeline.vue
@@ -48,8 +48,10 @@
                 </template>
                 <g
                     :key="`g-${activity.clipPathId}`"
+                    class="c-plan__activity"
                     @click="setSelectionForActivity(activity, $event)"
                 >
+                    <title>{{ activity.name }}</title>
                     <rect
                         :key="`rect-${index}`"
                         :x="activity.rectStart"
@@ -62,7 +64,7 @@
                     <text
                         v-for="(textLine, textIndex) in activity.textLines"
                         :key="`text-${index}-${textIndex}`"
-                        :class="`activity-label ${activity.textClass}`"
+                        :class="`c-plan__activity-label ${activity.textClass}`"
                         :x="activity.textStart"
                         :y="activity.textY + (textIndex * lineHeight)"
                         :fill="activity.textColor"
@@ -76,9 +78,9 @@
                 v-if="activities.length === 0"
                 x="10"
                 y="20"
-                class="activity-label--outside-rect"
+                class="c-plan__activity-label--outside-rect"
             >
-                No activities within timeframe
+                No activities within current timeframe
             </text>
         </svg>
     </template>

diff --git a/src/plugins/plan/components/Plan.vue b/src/plugins/plan/components/Plan.vue
@@ -474,7 +474,7 @@ export default {
                         row: currentRow,
                         textLines: textLines,
                         textStart: textStart,
-                        textClass: showTextInsideRect ? "" : "activity-label--outside-rect",
+                        textClass: showTextInsideRect ? "" : "c-plan__activity-label--outside-rect",
                         textY: textY,
                         rectStart: rectX1,
                         rectEnd: showTextInsideRect ? rectX2 : textStart + textWidth,

diff --git a/src/plugins/plan/inspector/ActivityInspectorViewProvider.js b/src/plugins/plan/inspector/ActivityInspectorViewProvider.js
@@ -26,7 +26,7 @@ import Vue from 'vue';
 export default function ActivityInspectorViewProvider(openmct) {
     return {
         key: 'activity-inspector',
-        name: 'Activity Inspector View',
+        name: 'Activity',
         canView: function (selection) {
             if (selection.length === 0 || selection[0].length === 0) {
                 return false;

diff --git a/src/plugins/plan/plan.scss b/src/plugins/plan/plan.scss
@@ -21,21 +21,32 @@
  *****************************************************************************/
 
 .c-plan {
-  svg {
-    text-rendering: geometricPrecision;
+    svg {
+        text-rendering: geometricPrecision;
 
-    text {
-      stroke: none;
+        text {
+            stroke: none;
+        }
     }
 
-      .activity-label {
-          &--outside-rect {
-              fill: $colorBodyFg !important;
-          }
-      }
-  }
+    &__activity {
+        cursor: pointer;
 
-  canvas {
-    display: none;
-  }
+        &[s-selected] {
+            rect, use {
+                stroke: $colorSelectedFg;
+                stroke-width: 2px;
+            }
+        }
+    }
+
+    &__activity-label {
+        &--outside-rect {
+            fill: $colorBodyFg !important;
+        }
+    }
+
+    canvas {
+        display: none;
+    }
 }