WIP: styling components

src/plugins/conditionSet/ConditionSetViewProvider.js

@@ -50,12 +50,12 @@ export default class ConditionSetViewProvider {
                     },
                     provide: {
                         openmct,
-                        // domainObject,
+                        domainObject,
                         objectPath
                     },
                     data() {
                         return {
-                            isEditing: isEditing
+                            isEditing
                         }
                     },
                     template: '<condition-set :isEditing="isEditing"></condition-set>'

src/plugins/conditionSet/components/CurrentOutput.vue

@@ -5,8 +5,8 @@
     <div class="c-cs__ui__header">
         <span class="c-cs__ui__header-label">Current Output</span>
         <span
-            class="c-disclosure-triangle is-enabled flex-elem"
-            :class="{'c-disclosure-triangle--expanded': expanded}"
+            class="c-cs__disclosure-triangle is-enabled flex-elem"
+            :class="{'c-cs__disclosure-triangle--expanded': expanded}"
         ></span>
     </div>
     <div class="c-cs__ui_text">

src/plugins/conditionSet/components/TestData.vue

@@ -3,12 +3,12 @@
          id="test-data"
          class="test-data"
 >
-    <div class="c-sw-edit__ui__header">
+    <div class="c-cs__ui__header">
+        <span class="c-cs__ui__header-label">Test Data</span>
         <span
-            class="c-disclosure-triangle is-enabled flex-elem"
-            :class="{'c-disclosure-triangle--expanded': expanded}"
+            class="c-cs__disclosure-triangle is-enabled flex-elem"
+            :class="{'c-cs__disclosure-triangle--expanded': expanded}"
         ></span>
-        <span class="c-sw-edit__ui__header-label">Test Data</span>
     </div>
     <div class="l-enable">
         <label class="checkbox custom">

src/plugins/conditionSet/components/condition-set.scss

@@ -5,6 +5,13 @@
     font-size: 0.8em;
     font-weight: bold;
     color: #7C7D80;
+    display: flex;
+    justify-content: stretch;
+}
+
+.c-cs__ui__header-label {
+    display: inline-block;
+    width: 100%;
 }
 
 .c-cs__ui_text {
@@ -13,10 +20,9 @@
     font-size: 0.8em;
     font-weight: bold;
     color: #7C7D80;
-
 }
 
-.c-disclosure-triangle {
+.c-cs__disclosure-triangle {
     $d: 8px;
     color: $colorDisclosureCtrl;
     display: flex;
@@ -35,7 +41,7 @@
 
         &:before {
             $s: .5;
-            content: $glyph-icon-arrow-up;
+            content: $glyph-icon-arrow-down;
             display: block;
             font-family: symbolsfont;
             font-size: 1rem * $s;

src/plugins/conditionSet/pluginSpec.js

@@ -23,7 +23,7 @@
 import { createOpenMct } from 'testTools';
 import ConditionSetPlugin from './plugin';
 
-describe('The plugin', () => {
+fdescribe('The plugin', () => {
     let openmct;
     let conditionSetDefinition;
     let element;

src/styles/vue-styles.scss

@@ -1,6 +1,6 @@
 @import "../api/overlays/components/dialog-component.scss";
 @import "../api/overlays/components/overlay-component.scss";
-@import "../plugins/conditionSet/components/current-output.scss";
+@import "../plugins/conditionSet/components/condition-set.scss";
 @import "../plugins/displayLayout/components/box-view.scss";
 @import "../plugins/displayLayout/components/display-layout.scss";
 @import "../plugins/displayLayout/components/edit-marquee.scss";