WIP: all condition set UI elements in place except condition form elements

src/plugins/condition/components/ConditionEdit.vue

@@ -4,7 +4,11 @@
      :class="['widget-condition', { 'widget-condition--current': isCurrent }]"
 >
     <div class="title-bar">
-        <span class="is-enabled c-c__menu-hamburger"></span>
+        <span
+            class="c-c__menu-hamburger"
+            :class="{ 'is-enabled': !isDefault }"
+            @click="expanded = !expanded"
+        ></span>
         <span
             class="is-enabled flex-elem"
             :class="['c-c__disclosure-triangle', { 'c-c__disclosure-triangle--expanded': expanded }]"
@@ -31,7 +35,9 @@
         <span class="is-enabled c-c__duplicate"></span>
         <span class="is-enabled c-c__trash"></span>
     </div>
-    <div class="condition-config">
+    <div v-if="expanded"
+         class="condition-config-edit"
+    >
         [form stuff]
     </div>
 </div>

src/plugins/condition/components/condition.scss

@@ -15,41 +15,56 @@
     display: flex;
     align-items: center;
     justify-content: stretch;
+    padding: 0.4em 0;
 }
 
 .title-bar span {
-    margin-right: 3px;
+    margin-right: 0.6em;
+}
+
+.title-bar span.c-c__duplicate,
+.title-bar span.c-c__trash{
+    margin-right: 0;
+    margin-left: 0.3em;
 }
 
 .widget-condition > div {
-    margin: 0 0.6em;
+    margin: 0 0.4em;
 }
 
-.widget-condition .condition-name {
+.condition-name {
     font-weight: bold;
 }
 
-.widget-condition .condition-output {
+.condition-output {
     color: #7C7D80;
 }
 
-.widget-condition .condition-summary {
+.condition-summary {
     flex-grow: 1;
 }
 
+.condition-config {
+    padding: 0.6em 0;
+}
 
-.c-c__disclosure-triangle {
+.condition-config-edit {
+    border-top: solid 1px #ccc;
+    padding: 0.6em 0;
+}
+
+.c-c__disclosure-triangle,
+.c-c__menu-hamburger,
+.c-c__duplicate,
+.c-c__trash {
     $d: 8px;
     color: $colorDisclosureCtrl;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 auto;
     width: $d;
-    position: relative;
+    visibility: hidden;
 
     &.is-enabled {
         cursor: pointer;
+        visibility: visible;
 
         &:hover {
             color: $colorDisclosureCtrlHov;
@@ -57,84 +72,39 @@
 
         &:before {
             $s: .5;
-            content: $glyph-icon-arrow-down;
             display: block;
             font-family: symbolsfont;
             font-size: 1rem * $s;
         }
     }
+}
+
+.c-c__disclosure-triangle {
+    &:before {
+        content: $glyph-icon-arrow-down;
+    }
 
     &--expanded {
         &:before {
-            transform: rotate(0deg);
+            transform: rotate(180deg);
         }
     }
 }
 
 .c-c__menu-hamburger {
-    $d: 8px;
+    &:before {
-    color: $colorDisclosureCtrl;
+        content: $glyph-icon-menu-hamburger;
-    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;
+    &:before {
-    color: $colorDisclosureCtrl;
+        content: $glyph-icon-duplicate;
-    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;
+    &:before {
-    color: $colorDisclosureCtrl;
+        content: $glyph-icon-trash;
-    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

@@ -22,9 +22,9 @@
             <button
                 v-show="isEditing"
                 id="addCondition"
-                class="c-button c-button--major add-condition-button"
+                class="c-cs-button c-cs-button--major add-condition-button"
             >
-                <span class="c-button__label">Add Condition</span>
+                <span class="c-cs-button__label">Add Condition</span>
             </button>
         </div>
         <div v-if="isEditing">

src/plugins/conditionSet/components/TestData.vue

@@ -22,20 +22,28 @@
         </label>
         <div class="t-test-data-config">
             <div class="c-cs-editui__conditions widget-condition">
-                <label>
+                <form>
-                    <span>Set</span>
+                    <label>
-                    <select>
+                        <span>Set</span>
-                        <option>- Select Input -</option>
+                        <select>
-                    </select>
+                            <option>- Select Input -</option>
-                </label>
+                        </select>
+                    </label>
+                    <span class="is-enabled  flex-elem c-cs__duplicate"></span>
+                    <span class="is-enabled  flex-elem c-cs__trash"></span>
+                </form>
             </div>
             <div class="c-cs-editui__conditions widget-condition">
-                <label>
+                <form>
-                    <span>Set</span>
+                    <label>
-                    <select>
+                        <span>Set</span>
-                        <option>- Select Input -</option>
+                        <select>
-                    </select>
+                            <option>- Select Input -</option>
-                </label>
+                        </select>
+                    </label>
+                    <span class="is-enabled c-cs__duplicate"></span>
+                    <span class="is-enabled c-cs__trash"></span>
+                </form>
             </div>
         </div>
     </div>

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

@@ -23,17 +23,12 @@ section {
 }
 
 .c-cs__ui_content {
-    font-size: 0.8em;
+    padding: 0.4em;
-    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;
+    padding: 0.4em 0;
 }
 
 .current-output {
@@ -52,30 +47,47 @@ section {
     margin-left: 0.6em;
 }
 
-.c-button[class*="--major"],
+.t-test-data-config {
-.c-button[class*='is-active'],
+    margin-top: 5px;
-.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 {
+.widget-condition form {
-    $d: 8px;
+    padding: 0.5em;
-    color: $colorDisclosureCtrl;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: stretch;
-    flex: 0 0 auto;
+}
+
+.widget-condition form label {
+    flex-grow: 1;
+    margin-left: 0;
+}
+
+.c-cs-button[class*="--major"],
+.c-cs-button[class*='is-active'],
+.c-cs-button--menu[class*="--major"],
+.c-cs-button--menu[class*='is-active'] {
+    border: solid 1.5px #0B427C;
+    background-color: #4778A3;
+    padding: 0.2em 0.6em;
+    margin: 0.4em;
+    font-weight: bold;
+    color: #eee;
+    border-radius: 6px;
+}
+
+.c-cs__disclosure-triangle,
+.c-cs__menu-hamburger,
+.c-cs__duplicate,
+.c-cs__trash {
+    $d: 8px;
+    color: $colorDisclosureCtrl;
     width: $d;
-    position: relative;
+    visibility: hidden;
 
     &.is-enabled {
         cursor: pointer;
+        visibility: visible;
 
         &:hover {
             color: $colorDisclosureCtrlHov;
@@ -83,12 +95,17 @@ section {
 
         &:before {
             $s: .5;
-            content: $glyph-icon-arrow-down;
             display: block;
             font-family: symbolsfont;
             font-size: 1rem * $s;
         }
     }
+}
+
+.c-cs__disclosure-triangle {
+    &:before {
+        content: $glyph-icon-arrow-down;
+    }
 
     &--expanded {
         &:before {
@@ -96,3 +113,17 @@ section {
         }
     }
 }
+
+.c-cs__duplicate {
+    margin-right: 0.3em;
+    &:before {
+        content: $glyph-icon-duplicate;
+    }
+}
+
+.c-cs__trash {
+    &:before {
+        content: $glyph-icon-trash;
+    }
+}
+