ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-03 03:46:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Condition improve reorder (#2818)

Browse Source 
* wip: changing to condition as drag target

* wip

* wip

* wip

* fixed dragging issues

* fixed dragging classes and added temp border on condition with dragging class

* Conditionals sanding and shimming

- CSS and `all-dragging`;

* wip

* fixed drag end issue and changed dragging class to go on parent condition h

* drag with counter

* wip

* wip

* wip

* return to logic in ConditionCollection.vue

* wip

* completed js part with highlighted c-condition-h on dragover

* restored grippy as draggable elem, improved isValidTarget

* fixed drag text bug

* added moveIndex prop in Condition.vue

* Conditionals drag reorder styling

- Moved `.is-drag-target` class up to conditions-h element;
- Renamed `.all-dragging` to `is-active-dragging`;
- Styling for `__drop-target` elements;

* fixed incorrect default for moveIndex in condition collection, unnecessary reset in condition

* fixed downward move reorder

* removed prevent from dragenter and drag leave, changed @blur to @change for name and output fields

* removed console log

Co-authored-by: charlesh88 <charlesh88@gmail.com>
This commit is contained in:
Joel McKinnon 2020-04-10 10:02:33 -07:00 committed by GitHub
parent 11574b7c40
commit 46fedc1a30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 314 additions and 416 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

330
src/plugins/condition/components/Condition.vue
View File

@ -21,159 +21,167 @@
*****************************************************************************/ *****************************************************************************/
<template> <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)"
> >
<!-- Edit view --> <div class="c-condition-h__drop-target"></div>
<div class="c-condition__header"> <div v-if="isEditing"
<span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag" class="c-condition c-condition--edit"
title="Drag to reorder conditions"
:class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]"
:draggable="!condition.isDefault"
@dragstart="dragStart"
@dragstop="dragStop"
@dragover.stop
></span>
<span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
:class="{ 'c-disclosure-triangle--expanded': expanded }"
@click="expanded = !expanded"
></span>
<span class="c-condition__name">{{ condition.configuration.name }}</span>
<span class="c-condition__summary">
<template v-if="!canEvaluateCriteria">
Define criteria
</template>
<span v-else>
<condition-description :show-label="false"
:condition="condition"
/>
</span>
</span>
<div class="c-condition__buttons">
<button v-if="!condition.isDefault"
class="c-click-icon c-condition__duplicate-button icon-duplicate"
title="Duplicate this condition"
@click="cloneCondition"
></button>
<button v-if="!condition.isDefault"
class="c-click-icon c-condition__delete-button icon-trash"
title="Delete this condition"
@click="removeCondition"
></button>
</div>
</div>
<div v-if="expanded"
class="c-condition__definition c-cdef"
> >
<span class="c-cdef__separator c-row-separator"></span> <!-- Edit view -->
<span class="c-cdef__label">Condition Name</span> <div class="c-condition__header">
<span class="c-cdef__controls"> <span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag"
<input v-model="condition.configuration.name" title="Drag to reorder conditions"
class="t-condition-input__name" :class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]"
type="text" :draggable="!condition.isDefault"
@blur="persist" @dragstart="dragStart"
> @dragend="dragEnd"
</span> ></span>
<span class="c-cdef__label">Output</span> <span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
<span class="c-cdef__controls"> :class="{ 'c-disclosure-triangle--expanded': expanded }"
<span class="c-cdef__control"> @click="expanded = !expanded"
<select v-model="selectedOutputSelection" ></span>
@change="setOutputValue"
>
<option v-for="option in outputOptions"
:key="option"
:value="option"
>
{{ initCap(option) }}
</option>
</select>
</span>
<span class="c-cdef__control">
<input v-if="selectedOutputSelection === outputOptions[2]"
v-model="condition.configuration.output"
class="t-condition-name-input"
type="text"
@blur="persist"
>
</span>
</span>
<div v-if="!condition.isDefault" <span class="c-condition__name">{{ condition.configuration.name }}</span>
class="c-cdef__match-and-criteria" <span class="c-condition__summary">
<template v-if="!canEvaluateCriteria">
Define criteria
</template>
<span v-else>
<condition-description :show-label="false"
:condition="condition"
/>
</span>
</span>
<div class="c-condition__buttons">
<button v-if="!condition.isDefault"
class="c-click-icon c-condition__duplicate-button icon-duplicate"
title="Duplicate this condition"
@click="cloneCondition"
></button>
<button v-if="!condition.isDefault"
class="c-click-icon c-condition__delete-button icon-trash"
title="Delete this condition"
@click="removeCondition"
></button>
</div>
</div>
<div v-if="expanded"
class="c-condition__definition c-cdef"
> >
<span class="c-cdef__separator c-row-separator"></span> <span class="c-cdef__separator c-row-separator"></span>
<span class="c-cdef__label">Match</span> <span class="c-cdef__label">Condition Name</span>
<span class="c-cdef__controls"> <span class="c-cdef__controls">
<select v-model="condition.configuration.trigger" <input v-model="condition.configuration.name"
@change="persist" class="t-condition-input__name"
type="text"
@change="persist"
> >
<option v-for="option in triggers"
:key="option.value"
:value="option.value"
> {{ option.label }}</option>
</select>
</span> </span>
<template v-if="telemetry.length || condition.configuration.criteria.length"> <span class="c-cdef__label">Output</span>
<div v-for="(criterion, index) in condition.configuration.criteria" <span class="c-cdef__controls">
:key="criterion.id" <span class="c-cdef__control">
class="c-cdef__criteria" <select v-model="selectedOutputSelection"
> @change="setOutputValue"
<Criterion :telemetry="telemetry" >
:criterion="criterion" <option v-for="option in outputOptions"
:index="index" :key="option"
:trigger="condition.configuration.trigger" :value="option"
:is-default="condition.configuration.criteria.length === 1" >
@persist="persist" {{ initCap(option) }}
/> </option>
<div class="c-cdef__criteria__buttons"> </select>
<button class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate" </span>
title="Duplicate this criteria" <span class="c-cdef__control">
@click="cloneCriterion(index)" <input v-if="selectedOutputSelection === outputOptions[2]"
></button> v-model="condition.configuration.output"
<button v-if="!(condition.configuration.criteria.length === 1)" class="t-condition-name-input"
class="c-click-icon c-cdef__criteria-duplicate-button icon-trash" type="text"
title="Delete this criteria" @change="persist"
@click="removeCriterion(index)" >
></button> </span>
</div> </span>
</div>
</template> <div v-if="!condition.isDefault"
<div class="c-cdef__separator c-row-separator"></div> class="c-cdef__match-and-criteria"
<div class="c-cdef__controls"
:disabled="!telemetry.length"
> >
<button <span class="c-cdef__separator c-row-separator"></span>
class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus" <span class="c-cdef__label">Match</span>
@click="addCriteria" <span class="c-cdef__controls">
<select v-model="condition.configuration.trigger"
@change="persist"
>
<option v-for="option in triggers"
:key="option.value"
:value="option.value"
> {{ option.label }}</option>
</select>
</span>
<template v-if="telemetry.length || condition.configuration.criteria.length">
<div v-for="(criterion, index) in condition.configuration.criteria"
:key="criterion.id"
class="c-cdef__criteria"
>
<Criterion :telemetry="telemetry"
:criterion="criterion"
:index="index"
:trigger="condition.configuration.trigger"
:is-default="condition.configuration.criteria.length === 1"
@persist="persist"
/>
<div class="c-cdef__criteria__buttons">
<button class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate"
title="Duplicate this criteria"
@click="cloneCriterion(index)"
></button>
<button v-if="!(condition.configuration.criteria.length === 1)"
class="c-click-icon c-cdef__criteria-duplicate-button icon-trash"
title="Delete this criteria"
@click="removeCriterion(index)"
></button>
</div>
</div>
</template>
<div class="c-cdef__separator c-row-separator"></div>
<div class="c-cdef__controls"
:disabled="!telemetry.length"
> >
<span class="c-button__label">Add Criteria</span> <button
</button> class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus"
@click="addCriteria"
>
<span class="c-button__label">Add Criteria</span>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div v-else
<div v-else class="c-condition c-condition--browse"
class="c-condition c-condition--browse" >
> <!-- Browse view -->
<!-- Browse view --> <div class="c-condition__header">
<div class="c-condition__header"> <span class="c-condition__name">
<span class="c-condition__name"> {{ condition.configuration.name }}
{{ condition.configuration.name }} </span>
</span> <span class="c-condition__output">
<span class="c-condition__output"> Output: {{ condition.configuration.output }}
Output: {{ condition.configuration.output }} </span>
</span> </div>
</div> <div class="c-condition__summary">
<div class="c-condition__summary"> <condition-description :show-label="false"
<condition-description :show-label="false" :condition="condition"
:condition="condition" />
/> </div>
</div> </div>
</div> </div>
</template> </template>
@ -207,6 +215,14 @@ export default {
type: Array, type: Array,
required: true, required: true,
default: () => [] default: () => []
},
isDragging: {
type: Boolean,
default: false
},
moveIndex: {
type: Number,
default: 0
} }
}, },
data() { data() {
@ -217,8 +233,8 @@ export default {
selectedOutputSelection: '', selectedOutputSelection: '',
outputOptions: ['false', 'true', 'string'], outputOptions: ['false', 'true', 'string'],
criterionIndex: 0, criterionIndex: 0,
selectedTelemetryName: '', draggingOver: false,
selectedFieldName: '' isDefault: this.condition.isDefault
}; };
}, },
computed: { computed: {
@ -286,11 +302,39 @@ export default {
dragStart(e) { dragStart(e) {
e.dataTransfer.setData('dragging', e.target); // required for FF to initiate drag e.dataTransfer.setData('dragging', e.target); // required for FF to initiate drag
e.dataTransfer.effectAllowed = "copyMove"; 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); 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() { destroy() {
}, },

63
src/plugins/condition/components/ConditionCollection.vue
View File

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

337
src/plugins/condition/components/conditionals.scss
View File

@ -19,260 +19,129 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * 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;
@include discreteItem(); height: 0;
display: flex; min-height: 0;
padding: $interiorMargin; transition: background-color, height;
line-height: 170%; // Aligns text with controls like selects transition-duration: 150ms;
} }
.c-cdef, &.is-drag-target {
.c-cs-test { .c-condition > * {
&__controls { pointer-events: none; // Keeps the JS drop handler from being intercepted by internal elements
display: flex; }
flex: 1 1 auto;
flex-wrap: wrap;
> * > * { .c-condition-h__drop-target {
margin-right: $interiorMarginSm; background-color: rgba($colorKey, 0.7);
} }
} }
&__buttons {
white-space: nowrap;
}
} }
.c-condition,
.c-test-datum {
@include discreteItem();
display: flex;
padding: $interiorMargin;
.c-condition { &--edit {
flex-direction: column; line-height: 160%; // For layout when inputs wrap, like in criteria
min-width: 400px; }
}
> * + * { .c-condition {
margin-top: $interiorMarginSm; flex-direction: column;
} min-width: 400px;
&--browse {
.c-condition__summary {
border-top: 1px solid $colorInteriorBorder;
padding-top: $interiorMargin;
}
}
/***************************** HEADER */ > * + * {
&__header { margin-top: $interiorMarginSm;
$h: 22px; }
display: flex; &--browse {
align-items: start; .c-condition__summary {
align-content: stretch; border-top: 1px solid $colorInteriorBorder;
overflow: hidden; padding-top: $interiorMargin;
min-height: $h; }
line-height: $h; }
> * { /***************************** HEADER */
flex: 0 0 auto; &__header {
+ * { $h: 22px;
margin-left: $interiorMarginSm; display: flex;
} align-items: start;
} align-content: stretch;
} overflow: hidden;
min-height: $h;
line-height: $h;
&__drag-grippy { > * {
transform: translateY(50%); flex: 0 0 auto;
} + * {
margin-left: $interiorMarginSm;
}
}
}
&__name { &__drag-grippy {
font-weight: bold; transform: translateY(50%);
align-self: baseline; // Fixes bold line-height offset problem }
}
&__output, &__name {
&__summary { font-weight: bold;
flex: 1 1 auto; align-self: baseline; // Fixes bold line-height offset problem
} }
}
/***************************** CONDITION DEFINITION, EDITING */ &__output,
.c-cdef { &__summary {
display: grid; flex: 1 1 auto;
grid-row-gap: $interiorMarginSm; }
grid-column-gap: $interiorMargin; }
grid-auto-columns: min-content 1fr max-content;
align-items: start;
min-width: 150px;
margin-left: 29px;
overflow: hidden;
&__criteria, /***************************** CONDITION DEFINITION, EDITING */
&__match-and-criteria { .c-cdef {
display: contents; display: grid;
} grid-row-gap: $interiorMarginSm;
grid-column-gap: $interiorMargin;
grid-auto-columns: min-content 1fr max-content;
align-items: start;
min-width: 150px;
margin-left: 29px;
overflow: hidden;
&__label { &__criteria,
grid-column: 1; &__match-and-criteria {
text-align: right; display: contents;
white-space: nowrap; }
}
&__separator { &__label {
grid-column: 1 / span 3; grid-column: 1;
} text-align: right;
white-space: nowrap;
}
&__controls { &__separator {
align-items: flex-start; grid-column: 1 / span 3;
grid-column: 2; }
> * > * { &__controls {
margin-right: $interiorMarginSm; display: flex;
} flex-wrap: wrap;
} align-items: flex-start;
grid-column: 2;
&__buttons { > * > * {
grid-column: 3; margin-right: $interiorMarginSm;
} }
} }
.c-c__drag-ghost { &__buttons {
width: 100%; grid-column: 3;
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;
}
}