Adds section heading for Bar Graph Series

src/plugins/plot/ColorSwatch.vue

@@ -21,67 +21,57 @@
 -->
 <template>
 <div class="u-contents">
-    <ul v-if="canEdit"
-        class="l-inspector-part"
+    <div v-if="canEdit"
+         class="grid-row"
     >
-        <h2 v-if="heading"
-            :title="heading"
-        >{{ heading }}</h2>
-        <li class="grid-row">
-            <div class="grid-cell label"
-                 :title="editTitle"
-            >{{ shortLabel }}</div>
-            <div class="grid-cell value">
-                <div class="c-click-swatch c-click-swatch--menu"
-                     @click="toggleSwatch()"
+        <div class="grid-cell label"
+             :title="editTitle"
+        >{{ shortLabel }}</div>
+        <div class="grid-cell value">
+            <div class="c-click-swatch c-click-swatch--menu"
+                 @click="toggleSwatch()"
+            >
+                <span class="c-color-swatch"
+                      :style="{ background: currentColor }"
                 >
-                    <span class="c-color-swatch"
-                          :style="{ background: currentColor }"
+                </span>
+            </div>
+            <div class="c-palette c-palette--color">
+                <div v-show="swatchActive"
+                     class="c-palette__items"
+                >
+                    <div v-for="group in colorPaletteGroups"
+                         :key="group.id"
+                         class="u-contents"
                     >
-                    </span>
-                </div>
-                <div class="c-palette c-palette--color">
-                    <div v-show="swatchActive"
-                         class="c-palette__items"
-                    >
-                        <div v-for="group in colorPaletteGroups"
-                             :key="group.id"
-                             class="u-contents"
+                        <div v-for="color in group"
+                             :key="color.id"
+                             class="c-palette__item"
+                             :class="{ 'selected': currentColor === color.hexString }"
+                             :style="{ background: color.hexString }"
+                             @click="setColor(color)"
                         >
-                            <div v-for="color in group"
-                                 :key="color.id"
-                                 class="c-palette__item"
-                                 :class="{ 'selected': currentColor === color.hexString }"
-                                 :style="{ background: color.hexString }"
-                                 @click="setColor(color)"
-                            >
-                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </li>
-    </ul>
-    <ul v-else
-        class="l-inspector-part"
+        </div>
+    </div>
+    <div v-else
+         class="grid-row"
     >
-        <h2 v-if="heading"
-            :title="heading"
-        >{{ heading }}</h2>
-        <li class="grid-row">
-            <div class="grid-cell label"
-                 :title="viewTitle"
-            >{{ shortLabel }}</div>
-            <div class="grid-cell value">
-                <span class="c-color-swatch"
-                      :style="{
-                          'background': currentColor
-                      }"
-                >
-                </span>
-            </div>
-        </li>
-    </ul>
+        <div class="grid-cell label"
+             :title="viewTitle"
+        >{{ shortLabel }}</div>
+        <div class="grid-cell value">
+            <span class="c-color-swatch"
+                  :style="{
+                      'background': currentColor
+                  }"
+            >
+            </span>
+        </div>
+    </div>
 </div>
 </template>
 
@@ -114,12 +104,6 @@ export default {
             default() {
                 return 'Color';
             }
-        },
-        heading: {
-            type: String,
-            default() {
-                return '';
-            }
         }
     },
     data() {

src/plugins/plot/barGraph/BarGraphView.vue

@@ -107,7 +107,7 @@ export default {
                 };
                 this.openmct.objects.mutate(
                     this.domainObject,
-                    `configuration.barStyles[${this.key}]`,
+                    `configuration.barStyles[${key}]`,
                     this.domainObject.configuration.barStyles[key]
                 );
             } else {

src/plugins/plot/barGraph/inspector/BarGraphOptions.vue

@@ -33,9 +33,9 @@
     </li>
     <ColorSwatch v-if="expanded"
                  :current-color="currentColor"
-                 title="Manually set the color for this bar graph."
-                 edit-title="Manually set the color for this bar graph"
-                 view-title="The color for this bar graph."
+                 title="Manually set the color for this bar graph series."
+                 edit-title="Manually set the color for this bar graph series"
+                 view-title="The color for this bar graph series."
                  short-label="Color"
                  class="grid-properties"
                  @colorSet="setColor"

src/plugins/plot/barGraph/inspector/Options.vue

@@ -20,15 +20,13 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div>
-    <ul class="c-tree">
-        <li v-for="series in domainObject.composition"
-            :key="series.key"
-        >
-            <bar-graph-options :item="series" />
-        </li>
-    </ul>
-</div>
+<ul class="c-tree">
+    <h2 title="Display properties for this object">Bar Graph Series</h2>
+    <bar-graph-options v-for="series in domainObject.composition"
+                       :key="series.key"
+                       :item="series"
+    />
+</ul>
 </template>
 
 <script>