WIP: current output styling

index.html

@@ -43,7 +43,7 @@
             openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
         );
 
-        openmct.install(openmct.plugins.Espresso());
+        openmct.install(openmct.plugins.Snow());
         openmct.install(openmct.plugins.MyItems());
         openmct.install(openmct.plugins.LocalStorage());
         openmct.install(openmct.plugins.Generator());

src/plugins/conditionSet/ConditionSetViewProvider.js

@@ -50,7 +50,7 @@ export default class ConditionSetViewProvider {
                     },
                     provide: {
                         openmct,
-                        domainObject,
+                        // domainObject,
                         objectPath
                     },
                     data() {

src/plugins/conditionSet/components/ConditionCollection.vue

@@ -40,7 +40,7 @@ export default {
     },
     data() {
         return {
-            conditionData: {}
+            expanded: true
         };
     },
     methods: {

src/plugins/conditionSet/components/ConditionSet.vue

@@ -2,7 +2,7 @@
 <div class="c-object-view u-contents">
     <div class="c-sw-edit w-summary-widget">
         <div class="c-sw-edit__ui holder">
-            <CurrentOutput />
+            <CurrentOutput :currentOutput="mockCurrentOutput"/>
             <TestData :is-editing="isEditing" />
             <ConditionCollection :is-editing="isEditing" />
         </div>
@@ -24,6 +24,11 @@ export default {
     },
     props: {
         isEditing: Boolean
+    },
+    data() {
+        return {
+            mockCurrentOutput: 'DATA_PRESENT'
+        }
     }
 };
 </script>

src/plugins/conditionSet/components/CurrentOutput.vue

@@ -2,11 +2,15 @@
 <section id="current-output"
          class="current-output"
 >
-    <div class="c-sw-edit__ui__header">
+    <div class="c-cs__ui__header">
-        <span class="c-sw-edit__ui__header-label">Current Output</span>
+        <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}"
+        ></span>
     </div>
-    <div class="t-test-data-config">
+    <div class="c-cs__ui_text">
-        <span>{{ conditionData.currentOutput }}</span>
+        <span>{{ currentOutput }}</span>
     </div>
 </section>
 </template>
@@ -15,13 +19,12 @@
 export default {
     inject: ['openmct'],
     props: {
+        currentOutput: String,
         isEditing: Boolean
     },
     data() {
         return {
-            conditionData: {
+            expanded: true,
-                currentOutput: 'DATA_PRESENT'
-            }
         };
     },
     methods: {

src/plugins/conditionSet/components/TestData.vue

@@ -41,10 +41,11 @@ export default {
     },
     data() {
         return {
-            conditionData: {}
+            expanded: true,
         };
     },
     methods: {
+        
     }
 }
 </script>

src/plugins/conditionSet/components/current-output.scss

@@ -0,0 +1,50 @@
+.c-cs__ui__header {
+    background-color: #D0D1D3;
+    padding: .3em .5em;
+    text-transform: uppercase;
+    font-size: 0.8em;
+    font-weight: bold;
+    color: #7C7D80;
+}
+
+.c-cs__ui_text {
+    padding: .5em .5em;
+    text-transform: uppercase;
+    font-size: 0.8em;
+    font-weight: bold;
+    color: #7C7D80;
+
+}
+
+.c-disclosure-triangle {
+    $d: 8px;
+    color: $colorDisclosureCtrl;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: $d;
+    position: relative;
+
+    &.is-enabled {
+        cursor: pointer;
+
+        &:hover {
+            color: $colorDisclosureCtrlHov;
+        }
+
+        &:before {
+            $s: .5;
+            content: $glyph-icon-arrow-up;
+            display: block;
+            font-family: symbolsfont;
+            font-size: 1rem * $s;
+        }
+    }
+
+    &--expanded {
+        &:before {
+            transform: rotate(180deg);
+        }
+    }
+}

src/styles/vue-styles.scss

@@ -1,5 +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/displayLayout/components/box-view.scss";
 @import "../plugins/displayLayout/components/display-layout.scss";
 @import "../plugins/displayLayout/components/edit-marquee.scss";