Merge branch 'master' into fix-enum-comparison

src/plugins/condition/components/Condition.vue

@@ -21,9 +21,17 @@
 *****************************************************************************/
 
 <template>
-<div v-if="isEditing"
+<div class="c-condition-h"
-     class="c-condition c-condition--edit js-condition-drag-wrapper"
+     :class="{ 'is-drag-target': draggingOver }"
+     @dragover.prevent
+     @drop.prevent="dropCondition($event, conditionIndex)"
+     @dragenter="dragEnter($event, conditionIndex)"
+     @dragleave="dragLeave($event, conditionIndex)"
 >
+    <div class="c-condition-h__drop-target"></div>
+    <div v-if="isEditing"
+         class="c-condition c-condition--edit"
+    >
         <!-- Edit view -->
         <div class="c-condition__header">
             <span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag"
@@ -31,8 +39,7 @@
                   :class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]"
                   :draggable="!condition.isDefault"
                   @dragstart="dragStart"
-              @dragstop="dragStop"
+                  @dragend="dragEnd"
-              @dragover.stop
             ></span>
 
             <span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
@@ -75,7 +82,7 @@
                 <input v-model="condition.configuration.name"
                        class="t-condition-input__name"
                        type="text"
-                   @blur="persist"
+                       @change="persist"
                 >
             </span>
 
@@ -98,7 +105,7 @@
                            v-model="condition.configuration.output"
                            class="t-condition-name-input"
                            type="text"
-                       @blur="persist"
+                           @change="persist"
                     >
                 </span>
             </span>
@@ -157,10 +164,10 @@
                 </div>
             </div>
         </div>
-</div>
+    </div>
-<div v-else
+    <div v-else
          class="c-condition c-condition--browse"
->
+    >
         <!-- Browse view -->
         <div class="c-condition__header">
             <span class="c-condition__name">
@@ -175,6 +182,7 @@
                                    :condition="condition"
             />
         </div>
+    </div>
 </div>
 </template>
 
@@ -207,6 +215,14 @@ export default {
             type: Array,
             required: true,
             default: () => []
+        },
+        isDragging: {
+            type: Boolean,
+            default: false
+        },
+        moveIndex: {
+            type: Number,
+            default: 0
         }
     },
     data() {
@@ -217,8 +233,8 @@ export default {
             selectedOutputSelection: '',
             outputOptions: ['false', 'true', 'string'],
             criterionIndex: 0,
-            selectedTelemetryName: '',
+            draggingOver: false,
-            selectedFieldName: ''
+            isDefault: this.condition.isDefault
         };
     },
     computed: {
@@ -286,11 +302,39 @@ export default {
         dragStart(e) {
             e.dataTransfer.setData('dragging', e.target); // required for FF to initiate drag
             e.dataTransfer.effectAllowed = "copyMove";
-            e.dataTransfer.setDragImage(e.target.closest('.js-condition-drag-wrapper'), 0, 0);
+            e.dataTransfer.setDragImage(e.target.closest('.c-condition-h'), 0, 0);
             this.$emit('setMoveIndex', this.conditionIndex);
         },
-        dragStop(e) {
+        dragEnd(event) {
-            e.dataTransfer.clearData();
+            this.dragStarted = false;
+            event.dataTransfer.clearData();
+            this.$emit('dragComplete');
+        },
+        dropCondition(event, targetIndex) {
+            if (!this.isDragging) { return }
+            if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
+            if (this.isValidTarget(targetIndex)) {
+                this.dragElement = undefined;
+                this.draggingOver = false;
+                this.$emit('dropCondition', targetIndex);
+            }
+        },
+        dragEnter(event, targetIndex) {
+            if (!this.isDragging) { return }
+            if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
+            if (this.isValidTarget(targetIndex)) {
+                this.dragElement = event.target.parentElement;
+                this.draggingOver = true;
+            }
+        },
+        dragLeave(event) {
+            if (event.target.parentElement === this.dragElement) {
+                this.draggingOver = false;
+                this.dragElement = undefined;
+            }
+        },
+        isValidTarget(targetIndex) {
+            return this.moveIndex !== targetIndex;
         },
         destroy() {
         },

src/plugins/condition/components/ConditionCollection.vue

@@ -52,30 +52,26 @@
             <span class="c-cs-button__label">Add Condition</span>
         </button>
 
-        <div class="c-cs__conditions-h">
+        <div class="c-cs__conditions-h"
-            <div v-for="(condition, index) in conditionCollection"
+             :class="{ 'is-active-dragging': isDragging }"
-                 :key="condition.id"
-                 class="c-condition-h"
         >
-                <div v-if="isEditing"
+            <Condition v-for="(condition, index) in conditionCollection"
-                     class="c-c__drag-ghost"
+                       :key="condition.id"
-                     @drop.prevent="dropCondition"
+                       :condition="condition"
-                     @dragenter="dragEnter"
-                     @dragleave="dragLeave"
-                     @dragover.prevent
-                ></div>
-                <Condition :condition="condition"
                        :condition-index="index"
                        :telemetry="telemetryObjs"
                        :is-editing="isEditing"
+                       :move-index="moveIndex"
+                       :is-dragging="isDragging"
                        @updateCondition="updateCondition"
                        @removeCondition="removeCondition"
                        @cloneCondition="cloneCondition"
                        @setMoveIndex="setMoveIndex"
+                       @dragComplete="dragComplete"
+                       @dropCondition="dropCondition"
             />
         </div>
     </div>
-    </div>
 </section>
 </template>
 
@@ -108,9 +104,10 @@ export default {
             conditionResults: {},
             conditions: [],
             telemetryObjs: [],
-            moveIndex: Number,
+            moveIndex: undefined,
             isDragging: false,
-            defaultOutput: undefined
+            defaultOutput: undefined,
+            dragCounter: 0
         };
     },
     watch: {
@@ -165,9 +162,7 @@ export default {
             this.moveIndex = index;
             this.isDragging = true;
         },
-        dropCondition(e) {
+        dropCondition(targetIndex) {
-            let targetIndex = Array.from(document.querySelectorAll('.c-c__drag-ghost')).indexOf(e.target);
-            if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
             const oldIndexArr = Object.keys(this.conditionCollection);
             const move = function (arr, old_index, new_index) {
                 while (old_index < 0) {
@@ -193,20 +188,10 @@ export default {
             }
 
             this.reorder(reorderPlan);
-
+        },
-            e.target.classList.remove("dragging");
+        dragComplete() {
             this.isDragging = false;
         },
-        dragEnter(e) {
-            if (!this.isDragging) { return }
-            let targetIndex = Array.from(document.querySelectorAll('.c-c__drag-ghost')).indexOf(e.target);
-            if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
-            if (this.moveIndex === targetIndex) { return }
-            e.target.classList.add("dragging");
-        },
-        dragLeave(e) {
-            e.target.classList.remove("dragging");
-        },
         addTelemetryObject(domainObject) {
             this.telemetryObjs.push(domainObject);
             this.$emit('telemetryUpdated', this.telemetryObjs);

src/plugins/condition/components/conditionals.scss

@@ -19,150 +19,45 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
+/***************************** DRAGGING */
-.c-cs {
+.is-active-dragging {
-    display: flex;
+    .c-condition-h__drop-target {
-    flex-direction: column;
+        height: 3px;
-    height: 100%;
+        margin-bottom: $interiorMarginSm;
-    overflow: hidden;
-
-    /************************** CONDITION SET LAYOUT */
-    &__current-output {
-        flex: 0 0 auto;
-    }
-
-    &__test-data-and-conditions-w {
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
-        height: 100%;
-        overflow: hidden;
-    }
-
-    &__test-data,
-    &__conditions {
-        flex: 0 0 auto;
-        overflow: hidden;
-    }
-
-    &__test-data {
-        flex: 0 0 auto;
-        max-height: 50%;
-
-        &.is-expanded {
-            margin-bottom: $interiorMargin * 4;
-        }
-    }
-
-    &__conditions {
-        flex: 1 1 auto;
-
-        > * + * {
-            margin-top: $interiorMarginSm;
-        }
-    }
-
-    &__content {
-        display: flex;
-        flex-direction: column;
-        flex: 0 1 auto;
-        overflow: hidden;
-
-        > * {
-            flex: 0 0 auto;
-            overflow: hidden;
-            + * {
-                margin-top: $interiorMarginSm;
-            }
-        }
-
-        .c-button {
-            align-self: start;
-        }
-    }
-
-    .is-editing & {
-        // Add some space to kick away from blue editing border indication
-        padding: $interiorMargin;
-    }
-
-    section {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-    }
-
-    &__conditions-h {
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
-        overflow: auto;
-        padding-right: $interiorMarginSm;
-
-        > * + * {
-            margin-top: $interiorMarginSm;
-        }
-    }
-
-    .hint {
-        padding: $interiorMarginSm;
-    }
-
-    /************************** SPECIFIC ITEMS */
-    &__current-output-value {
-        flex-direction: row;
-        align-items: baseline;
-        padding: 0 $interiorMargin $interiorMarginLg $interiorMargin;
-
-        > * {
-            padding: $interiorMargin 0; // Must do this to align label and value
-        }
-
-        &__label {
-            color: $colorInspectorSectionHeaderFg;
-            opacity: 0.9;
-            text-transform: uppercase;
-        }
-
-        &__value {
-            $p: $interiorMargin * 3;
-            font-size: 1.25em;
-            margin-left: $interiorMargin;
-            padding-left: $p;
-            padding-right: $p;
-            background: rgba(black, 0.2);
-            border-radius: 5px;
-        }
     }
 }
 
-/***************************** CONDITIONS AND TEST DATUM ELEMENTS */
+.c-condition-h {
-.c-condition,
+    &__drop-target {
-.c-test-datum {
+        border-radius: $controlCr;
+        height: 0;
+        min-height: 0;
+        transition: background-color, height;
+        transition-duration: 150ms;
+    }
+
+    &.is-drag-target {
+        .c-condition > * {
+            pointer-events: none; // Keeps the JS drop handler from being intercepted by internal elements
+        }
+
+        .c-condition-h__drop-target {
+            background-color: rgba($colorKey, 0.7);
+        }
+    }
+}
+ .c-condition,
+ .c-test-datum {
      @include discreteItem();
      display: flex;
      padding: $interiorMargin;
-    line-height: 170%; // Aligns text with controls like selects
-}
 
-.c-cdef,
+     &--edit {
-.c-cs-test {
+         line-height: 160%; // For layout when inputs wrap, like in criteria
-    &__controls {
-        display: flex;
-        flex: 1 1 auto;
-        flex-wrap: wrap;
-
-        > * > * {
-            margin-right: $interiorMarginSm;
      }
  }
 
-    &__buttons {
+ .c-condition {
-        white-space: nowrap;
-    }
-}
-
-.c-condition {
      flex-direction: column;
      min-width: 400px;
 
@@ -207,10 +102,10 @@
      &__summary {
          flex: 1 1 auto;
      }
-}
+ }
 
-/***************************** CONDITION DEFINITION, EDITING */
+ /***************************** CONDITION DEFINITION, EDITING */
-.c-cdef {
+ .c-cdef {
      display: grid;
      grid-row-gap: $interiorMarginSm;
      grid-column-gap: $interiorMargin;
@@ -236,6 +131,8 @@
      }
 
      &__controls {
+         display: flex;
+         flex-wrap: wrap;
          align-items: flex-start;
          grid-column: 2;
 
@@ -247,32 +144,4 @@
      &__buttons {
          grid-column: 3;
      }
-}
-
-.c-c__drag-ghost {
-    width: 100%;
-    min-height: $interiorMarginSm;
-
-    &.dragging {
-        min-height: 5em;
-        background-color: lightblue;
-        border-radius: 2px;
  }
-}
-
-/***************************** TEST DATA */
-.c-cs-tests {
-    flex: 0 1 auto;
-    overflow: auto;
-    padding-right: $interiorMarginSm;
-
-    > * + * {
-        margin-top: $interiorMarginSm;
-    }
-}
-
-.c-cs-test {
-    > * + * {
-        margin-left: $interiorMargin;
-    }
-}