WIP: styling for conditionSet and condition

src/plugins/condition/components/Condition.vue

@@ -1,9 +1,36 @@
 <template>
 <div id="conditionArea"
-     class="c-cs-editui__conditions widget-condition"
+     class="c-cs-ui__conditions"
+     :class="['widget-condition', { 'widget-condition--current': isCurrent }]"
 >
-    <span v-if="isEditing">[editable condition data]</span>
+    <div class="title-bar">
-    <span v-else>[read-only condition data]</span>
+        <span v-if="isDefault"
+              class="condition-name"
+        >Default
+        </span>
+        <span v-else
+              class="condition-name"
+        >[condition name]
+        </span>
+        <span v-if="isDefault"
+              class="condition-output"
+        >Output: false
+        </span>
+        <span v-else
+              class="condition-output"
+        >Output: [condition output]
+        </span>
+    </div>
+    <div class="condition-config">
+        <span v-if="isDefault"
+              class="condition-description"
+        >When all else fails
+        </span>
+        <span v-else
+              class="condition-description"
+        >[condition description]
+        </span>
+    </div>
 </div>
 </template>
 
@@ -11,7 +38,9 @@
 export default {
     inject: ['openmct'],
     props: {
-        isEditing: Boolean
+        isEditing: Boolean,
+        isCurrent: Boolean,
+        isDefault: Boolean
     },
     data() {
         return {

src/plugins/condition/components/ConditionEdit.vue

@@ -0,0 +1,57 @@
+<template>
+<div id="conditionArea"
+     class="c-cs-editui__conditions"
+     :class="['widget-condition', { 'widget-condition--current': isCurrent }]"
+>
+    <div class="title-bar">
+        <span class="is-enabled c-c__menu-hamburger"></span>
+        <span
+            class="is-enabled flex-elem"
+            :class="['c-c__disclosure-triangle', { 'c-c__disclosure-triangle--expanded': expanded }]"
+            @click="expanded = !expanded"
+        ></span>
+        <div class="condition-summary">
+            <span v-if="isDefault"
+                  class="condition-name"
+            >Default
+            </span>
+            <span v-else
+                  class="condition-name"
+            >[condition name]
+            </span>
+            <span v-if="isDefault"
+                  class="condition-description"
+            >When all else fails
+            </span>
+            <span v-else
+                  class="condition-description"
+            >[condition description]
+            </span>
+        </div>
+        <span class="is-enabled c-c__duplicate"></span>
+        <span class="is-enabled c-c__trash"></span>
+    </div>
+    <div class="condition-config">
+        [form stuff]
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    inject: ['openmct'],
+    props: {
+        isEditing: Boolean,
+        isCurrent: Boolean,
+        isDefault: Boolean
+    },
+    data() {
+        return {
+            conditionData: {},
+            expanded: true
+        };
+    },
+    methods: {
+    }
+}
+</script>

src/plugins/condition/components/condition.scss

@@ -0,0 +1,140 @@
+
+
+.widget-condition {
+    background-color: #eee;
+    margin: 0 0 0.6em;
+    border-radius: 3px;
+
+    &--current {
+        background-color: #DEECFA;
+    }
+
+}
+
+.title-bar {
+    display: flex;
+    align-items: center;
+    justify-content: stretch;
+}
+
+.title-bar span {
+    margin-right: 3px;
+}
+
+.widget-condition > div {
+    margin: 0 0.6em;
+}
+
+.widget-condition .condition-name {
+    font-weight: bold;
+}
+
+.widget-condition .condition-output {
+    color: #7C7D80;
+}
+
+.widget-condition .condition-summary {
+    flex-grow: 1;
+}
+
+
+.c-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-down;
+            display: block;
+            font-family: symbolsfont;
+            font-size: 1rem * $s;
+        }
+    }
+
+    &--expanded {
+        &:before {
+            transform: rotate(0deg);
+        }
+    }
+}
+
+.c-c__menu-hamburger {
+    $d: 8px;
+    color: $colorDisclosureCtrl;
+    width: $d;
+
+    &.is-enabled {
+        cursor: pointer;
+
+        &:hover {
+            color: $colorDisclosureCtrlHov;
+        }
+
+        &:before {
+            $s: .5;
+            content: $glyph-icon-menu-hamburger;
+            display: block;
+            font-family: symbolsfont;
+            font-size: 1rem * $s;
+        }
+    }
+}
+
+.c-c__duplicate {
+    $d: 8px;
+    color: $colorDisclosureCtrl;
+    width: $d;
+
+    &.is-enabled {
+        cursor: pointer;
+
+        &:hover {
+            color: $colorDisclosureCtrlHov;
+        }
+
+        &:before {
+            $s: .5;
+            content: $glyph-icon-duplicate;
+            display: block;
+            font-family: symbolsfont;
+            font-size: 1rem * $s;
+        }
+    }
+}
+
+.c-c__trash {
+    $d: 8px;
+    color: $colorDisclosureCtrl;
+    width: $d;
+
+    &.is-enabled {
+        cursor: pointer;
+
+        &:hover {
+            color: $colorDisclosureCtrlHov;
+        }
+
+        &:before {
+            $s: .5;
+            content: $glyph-icon-trash;
+            display: block;
+            font-family: symbolsfont;
+            font-size: 1rem * $s;
+        }
+    }
+}
+
+// $glyph-icon-grippy

src/plugins/conditionSet/components/ConditionCollection.vue

@@ -5,7 +5,7 @@
     <div class="c-cs__ui__header">
         <span class="c-cs__ui__header-label">Conditions</span>
         <span
-            class="c-cs__disclosure-triangle is-enabled flex-elem"
+            class="is-enabled flex-elem"
             :class="['c-cs__disclosure-triangle', { 'c-cs__disclosure-triangle--expanded': expanded }]"
             @click="expanded = !expanded"
         ></span>
@@ -13,32 +13,43 @@
     <div v-if="expanded"
          class="c-cs__ui_content"
     >
-        <div id="conditionArea"
+        <div v-show="isEditing"
-             class="c-cs-editui__conditions widget-condition"
+             class="help"
         >
-            <Condition :is-editing="isEditing" />
+            <span>The first condition to match is the one that wins. Drag conditions to rearrange.</span>
-            <Condition :is-editing="isEditing" />
         </div>
-        <div class="holder add-condition-button-wrapper align-right">
+        <div class="holder add-condition-button-wrapper align-left">
             <button
                 v-show="isEditing"
                 id="addCondition"
-                class="c-button c-button--major add-condition-button icon-plus"
+                class="c-button c-button--major add-condition-button"
             >
                 <span class="c-button__label">Add Condition</span>
             </button>
         </div>
+        <div v-if="isEditing">
+            <ConditionEdit />
+            <ConditionEdit :is-current="true" />
+            <ConditionEdit :is-default="true" />
+        </div>
+        <div v-else>
+            <Condition />
+            <Condition :is-current="true" />
+            <Condition :is-default="true" />
+        </div>
     </div>
 </section>
 </template>
 
 <script>
 import Condition from '../../condition/components/Condition.vue';
+import ConditionEdit from '../../condition/components/ConditionEdit.vue';
 
 export default {
     inject: ['openmct'],
     components: {
-        Condition
+        Condition,
+        ConditionEdit
     },
     props: {
         isEditing: Boolean

src/plugins/conditionSet/components/ConditionSet.vue

@@ -1,6 +1,6 @@
 <template>
 <div class="c-object-view u-contents">
-    <div class="c-sw-edit w-summary-widget">
+    <div class="c-cs-edit w-condition-set">
         <div class="c-sw-edit__ui holder">
             <CurrentOutput :current-output="mockCurrentOutput" />
             <TestData :is-editing="isEditing" />

src/plugins/conditionSet/components/CurrentOutput.vue

@@ -3,7 +3,7 @@
     <div class="c-cs__ui__header">
         <span class="c-cs__ui__header-label">Current Output</span>
         <span
-            class="c-cs__disclosure-triangle is-enabled flex-elem"
+            class="is-enabled flex-elem"
             :class="['c-cs__disclosure-triangle', { 'c-cs__disclosure-triangle--expanded': expanded }]"
             @click="expanded = !expanded"
         ></span>
@@ -11,7 +11,9 @@
     <div v-if="expanded"
          class="c-cs__ui_content"
     >
-        <span>{{ currentOutput }}</span>
+        <div>
+            <span class="current-output">{{ currentOutput }}</span>
+        </div>
     </div>
 </section>
 </template>
@@ -24,7 +26,6 @@ export default {
             type: String,
             default: ''
         },
-
         isEditing: Boolean
     },
     data() {

src/plugins/conditionSet/components/TestData.vue

@@ -6,7 +6,7 @@
     <div class="c-cs__ui__header">
         <span class="c-cs__ui__header-label">Test Data</span>
         <span
-            class="c-cs__disclosure-triangle is-enabled flex-elem"
+            class="is-enabled flex-elem"
             :class="['c-cs__disclosure-triangle', { 'c-cs__disclosure-triangle--expanded': expanded }]"
             @click="expanded = !expanded"
         ></span>
@@ -15,21 +15,27 @@
          class="c-cs__ui_content"
     >
         <label class="checkbox custom">
-            Apply Test Values
             <input type="checkbox"
                    class="t-test-data-checkbox"
             >
+            <span>Apply Test Data</span>
         </label>
         <div class="t-test-data-config">
-            <div class="c-sw-editui__rules widget-rules">
+            <div class="c-cs-editui__conditions widget-condition">
-                <span>[data]</span>
+                <label>
+                    <span>Set</span>
+                    <select>
+                        <option>- Select Input -</option>
+                    </select>
+                </label>
             </div>
-            <div class="holder add-condition-button-wrapper align-right">
+            <div class="c-cs-editui__conditions widget-condition">
-                <button id="addRule"
+                <label>
-                        class="c-button c-button--major add-condition-button icon-plus"
+                    <span>Set</span>
-                >
+                    <select>
-                    <span class="c-button__label">Add Test Value</span>
+                        <option>- Select Input -</option>
-                </button>
+                    </select>
+                </label>
             </div>
         </div>
     </div>

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

@@ -1,17 +1,20 @@
+.c-cs-edit {
+    padding: 0;
+}
+
 section {
-    padding-bottom: 10px;
+    padding-bottom: 5px;
 }
 
 .c-cs__ui__header {
     background-color: #D0D1D3;
-    padding: .3em .5em;
+    padding: 0.4em 0.6em;
     text-transform: uppercase;
     font-size: 0.8em;
     font-weight: bold;
     color: #7C7D80;
     display: flex;
     justify-content: stretch;
-    margin-bottom: 5px;
 }
 
 .c-cs__ui__header-label {
@@ -20,11 +23,45 @@ section {
 }
 
 .c-cs__ui_content {
-    text-transform: uppercase;
     font-size: 0.8em;
+    margin: 0.3em 0.3em 0 0.3em;
+}
+
+.c-cs__ui_content label,
+.c-cs__ui_content div {
+    padding: 0.4em 0;
+}
+
+.c-cs__ui_content .help {
+    font-style: italic;
+}
+
+.current-output {
+    text-transform: uppercase;
     font-weight: bold;
-    color: #7C7D80;
+    margin: 0.4em 0.6em;
-    padding-left: 0.5em;
+}
+
+.checkbox.custom {
+    display: flex;
+    align-items: center;
+    margin-left: 0.6em;
+}
+.checkbox.custom span {
+    display: inline-block;
+    margin-left: 0.6em;
+}
+
+.c-button[class*="--major"],
+.c-button[class*='is-active'],
+.c-button--menu[class*="--major"],
+.c-button--menu[class*='is-active'] {
+    border: #0B427C;
+    background-color: #4779A4;
+    padding: 0.3em 0.6em;
+    font-weight: bold;
+    font-size: 1.1em;
+    color: #D5D5D5;
 }
 
 .c-cs__disclosure-triangle {

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/condition/components/condition.scss";
 @import "../plugins/conditionSet/components/condition-set.scss";
 @import "../plugins/displayLayout/components/box-view.scss";
 @import "../plugins/displayLayout/components/display-layout.scss";