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

Revert "Condition improve reorder (#2818)"

Browse Source 
This reverts commit 46fedc1a307b1112a845ccf72ea7899b7f2194b2.
This commit is contained in:
Deep Tailor 2020-04-10 14:32:48 -07:00 committed by GitHub
parent d5539c7ae4
commit 928bc4c68a
3 changed files with 413 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,167 +21,159 @@
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div class="c-condition-h" <div v-if="isEditing"
:class="{ 'is-drag-target': draggingOver }" class="c-condition c-condition--edit js-condition-drag-wrapper"
@dragover.prevent
@drop.prevent="dropCondition($event, conditionIndex)"
@dragenter="dragEnter($event, conditionIndex)"
@dragleave="dragLeave($event, conditionIndex)"
> >
<div class="c-condition-h__drop-target"></div> <!-- Edit view -->
<div v-if="isEditing" <div class="c-condition__header">
class="c-condition c-condition--edit" <span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag"
> title="Drag to reorder conditions"
<!-- Edit view --> :class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]"
<div class="c-condition__header"> :draggable="!condition.isDefault"
<span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag" @dragstart="dragStart"
title="Drag to reorder conditions" @dragstop="dragStop"
:class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]" @dragover.stop
:draggable="!condition.isDefault" ></span>
@dragstart="dragStart"
@dragend="dragEnd"
></span>
<span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled" <span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
:class="{ 'c-disclosure-triangle--expanded': expanded }" :class="{ 'c-disclosure-triangle--expanded': expanded }"
@click="expanded = !expanded" @click="expanded = !expanded"
></span> ></span>
<span class="c-condition__name">{{ condition.configuration.name }}</span> <span class="c-condition__name">{{ condition.configuration.name }}</span>
<span class="c-condition__summary"> <span class="c-condition__summary">
<template v-if="!canEvaluateCriteria"> <template v-if="!canEvaluateCriteria">
Define criteria Define criteria
</template> </template>
<span v-else> <span v-else>
<condition-description :show-label="false" <condition-description :show-label="false"
:condition="condition" :condition="condition"
/> />
</span>
</span> </span>
</span>
<div class="c-condition__buttons"> <div class="c-condition__buttons">
<button v-if="!condition.isDefault" <button v-if="!condition.isDefault"
class="c-click-icon c-condition__duplicate-button icon-duplicate" class="c-click-icon c-condition__duplicate-button icon-duplicate"
title="Duplicate this condition" title="Duplicate this condition"
@click="cloneCondition" @click="cloneCondition"
></button> ></button>
<button v-if="!condition.isDefault" <button v-if="!condition.isDefault"
class="c-click-icon c-condition__delete-button icon-trash" class="c-click-icon c-condition__delete-button icon-trash"
title="Delete this condition" title="Delete this condition"
@click="removeCondition" @click="removeCondition"
></button> ></button>
</div>
</div> </div>
<div v-if="expanded" </div>
class="c-condition__definition c-cdef" <div v-if="expanded"
class="c-condition__definition c-cdef"
>
<span class="c-cdef__separator c-row-separator"></span>
<span class="c-cdef__label">Condition Name</span>
<span class="c-cdef__controls">
<input v-model="condition.configuration.name"
class="t-condition-input__name"
type="text"
@blur="persist"
>
</span>
<span class="c-cdef__label">Output</span>
<span class="c-cdef__controls">
<span class="c-cdef__control">
<select v-model="selectedOutputSelection"
@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"
class="c-cdef__match-and-criteria"
> >
<span class="c-cdef__separator c-row-separator"></span> <span class="c-cdef__separator c-row-separator"></span>
<span class="c-cdef__label">Condition Name</span> <span class="c-cdef__label">Match</span>
<span class="c-cdef__controls"> <span class="c-cdef__controls">
<input v-model="condition.configuration.name" <select v-model="condition.configuration.trigger"
class="t-condition-input__name" @change="persist"
type="text"
@change="persist"
> >
<option v-for="option in triggers"
:key="option.value"
:value="option.value"
> {{ option.label }}</option>
</select>
</span> </span>
<span class="c-cdef__label">Output</span> <template v-if="telemetry.length || condition.configuration.criteria.length">
<span class="c-cdef__controls"> <div v-for="(criterion, index) in condition.configuration.criteria"
<span class="c-cdef__control"> :key="criterion.id"
<select v-model="selectedOutputSelection" class="c-cdef__criteria"
@change="setOutputValue" >
> <Criterion :telemetry="telemetry"
<option v-for="option in outputOptions" :criterion="criterion"
:key="option" :index="index"
:value="option" :trigger="condition.configuration.trigger"
> :is-default="condition.configuration.criteria.length === 1"
{{ initCap(option) }} @persist="persist"
</option> />
</select> <div class="c-cdef__criteria__buttons">
</span> <button class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate"
<span class="c-cdef__control"> title="Duplicate this criteria"
<input v-if="selectedOutputSelection === outputOptions[2]" @click="cloneCriterion(index)"
v-model="condition.configuration.output" ></button>
class="t-condition-name-input" <button v-if="!(condition.configuration.criteria.length === 1)"
type="text" class="c-click-icon c-cdef__criteria-duplicate-button icon-trash"
@change="persist" title="Delete this criteria"
> @click="removeCriterion(index)"
</span> ></button>
</span>
<div v-if="!condition.isDefault"
class="c-cdef__match-and-criteria"
>
<span class="c-cdef__separator c-row-separator"></span>
<span class="c-cdef__label">Match</span>
<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> </div>
</template>
<div class="c-cdef__separator c-row-separator"></div>
<div class="c-cdef__controls"
:disabled="!telemetry.length"
>
<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>
</template>
<div class="c-cdef__separator c-row-separator"></div>
<div class="c-cdef__controls"
:disabled="!telemetry.length"
>
<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 v-else </div>
class="c-condition c-condition--browse" <div v-else
> class="c-condition c-condition--browse"
<!-- Browse view --> >
<div class="c-condition__header"> <!-- Browse view -->
<span class="c-condition__name"> <div class="c-condition__header">
{{ condition.configuration.name }} <span class="c-condition__name">
</span> {{ condition.configuration.name }}
<span class="c-condition__output"> </span>
Output: {{ condition.configuration.output }} <span class="c-condition__output">
</span> Output: {{ condition.configuration.output }}
</div> </span>
<div class="c-condition__summary"> </div>
<condition-description :show-label="false" <div class="c-condition__summary">
:condition="condition" <condition-description :show-label="false"
/> :condition="condition"
</div> />
</div> </div>
</div> </div>
</template> </template>
@ -215,14 +207,6 @@ export default {
type: Array, type: Array,
required: true, required: true,
default: () => [] default: () => []
},
isDragging: {
type: Boolean,
default: false
},
moveIndex: {
type: Number,
default: 0
} }
}, },
data() { data() {
@ -233,8 +217,8 @@ export default {
selectedOutputSelection: '', selectedOutputSelection: '',
outputOptions: ['false', 'true', 'string'], outputOptions: ['false', 'true', 'string'],
criterionIndex: 0, criterionIndex: 0,
draggingOver: false, selectedTelemetryName: '',
isDefault: this.condition.isDefault selectedFieldName: ''
}; };
}, },
computed: { computed: {
@ -302,39 +286,11 @@ 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('.c-condition-h'), 0, 0); e.dataTransfer.setDragImage(e.target.closest('.js-condition-drag-wrapper'), 0, 0);
this.$emit('setMoveIndex', this.conditionIndex); this.$emit('setMoveIndex', this.conditionIndex);
}, },
dragEnd(event) { dragStop(e) {
this.dragStarted = false; e.dataTransfer.clearData();
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,24 +52,28 @@
<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">
:class="{ 'is-active-dragging': isDragging }" <div v-for="(condition, index) in conditionCollection"
> :key="condition.id"
<Condition v-for="(condition, index) in conditionCollection" class="c-condition-h"
:key="condition.id" >
:condition="condition" <div v-if="isEditing"
:condition-index="index" class="c-c__drag-ghost"
:telemetry="telemetryObjs" @drop.prevent="dropCondition"
:is-editing="isEditing" @dragenter="dragEnter"
:move-index="moveIndex" @dragleave="dragLeave"
:is-dragging="isDragging" @dragover.prevent
@updateCondition="updateCondition" ></div>
@removeCondition="removeCondition" <Condition :condition="condition"
@cloneCondition="cloneCondition" :condition-index="index"
@setMoveIndex="setMoveIndex" :telemetry="telemetryObjs"
@dragComplete="dragComplete" :is-editing="isEditing"
@dropCondition="dropCondition" @updateCondition="updateCondition"
/> @removeCondition="removeCondition"
@cloneCondition="cloneCondition"
@setMoveIndex="setMoveIndex"
/>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -104,10 +108,9 @@ export default {
conditionResults: {}, conditionResults: {},
conditions: [], conditions: [],
telemetryObjs: [], telemetryObjs: [],
moveIndex: undefined, moveIndex: Number,
isDragging: false, isDragging: false,
defaultOutput: undefined, defaultOutput: undefined
dragCounter: 0
}; };
}, },
watch: { watch: {
@ -162,7 +165,9 @@ export default {
this.moveIndex = index; this.moveIndex = index;
this.isDragging = true; this.isDragging = true;
}, },
dropCondition(targetIndex) { dropCondition(e) {
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) {
@ -188,10 +193,20 @@ export default {
} }
this.reorder(reorderPlan); this.reorder(reorderPlan);
},
dragComplete() { e.target.classList.remove("dragging");
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,129 +19,260 @@
* 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 */
.is-active-dragging {
.c-condition-h__drop-target {
height: 3px;
margin-bottom: $interiorMarginSm;
}
}
.c-condition-h { .c-cs {
&__drop-target { display: flex;
border-radius: $controlCr; flex-direction: column;
height: 0; height: 100%;
min-height: 0; overflow: hidden;
transition: background-color, height;
transition-duration: 150ms; /************************** CONDITION SET LAYOUT */
&__current-output {
flex: 0 0 auto;
} }
&.is-drag-target { &__test-data-and-conditions-w {
.c-condition > * { display: flex;
pointer-events: none; // Keeps the JS drop handler from being intercepted by internal elements 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-condition-h__drop-target { .c-button {
background-color: rgba($colorKey, 0.7); 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;
} }
} }
} }
.c-condition,
.c-test-datum {
@include discreteItem();
display: flex;
padding: $interiorMargin;
&--edit { /***************************** CONDITIONS AND TEST DATUM ELEMENTS */
line-height: 160%; // For layout when inputs wrap, like in criteria .c-condition,
} .c-test-datum {
} @include discreteItem();
display: flex;
padding: $interiorMargin;
line-height: 170%; // Aligns text with controls like selects
}
.c-condition { .c-cdef,
flex-direction: column; .c-cs-test {
min-width: 400px; &__controls {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
> * + * { > * > * {
margin-top: $interiorMarginSm; margin-right: $interiorMarginSm;
} }
&--browse { }
.c-condition__summary {
border-top: 1px solid $colorInteriorBorder;
padding-top: $interiorMargin;
}
}
/***************************** HEADER */ &__buttons {
&__header { white-space: nowrap;
$h: 22px; }
display: flex; }
align-items: start;
align-content: stretch;
overflow: hidden;
min-height: $h;
line-height: $h;
> * { .c-condition {
flex: 0 0 auto; flex-direction: column;
+ * { min-width: 400px;
margin-left: $interiorMarginSm;
}
}
}
&__drag-grippy { > * + * {
transform: translateY(50%); margin-top: $interiorMarginSm;
} }
&--browse {
.c-condition__summary {
border-top: 1px solid $colorInteriorBorder;
padding-top: $interiorMargin;
}
}
&__name { /***************************** HEADER */
font-weight: bold; &__header {
align-self: baseline; // Fixes bold line-height offset problem $h: 22px;
} display: flex;
align-items: start;
align-content: stretch;
overflow: hidden;
min-height: $h;
line-height: $h;
&__output, > * {
&__summary { flex: 0 0 auto;
flex: 1 1 auto; + * {
} margin-left: $interiorMarginSm;
} }
}
}
/***************************** CONDITION DEFINITION, EDITING */ &__drag-grippy {
.c-cdef { transform: translateY(50%);
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;
&__criteria, &__name {
&__match-and-criteria { font-weight: bold;
display: contents; align-self: baseline; // Fixes bold line-height offset problem
} }
&__label { &__output,
grid-column: 1; &__summary {
text-align: right; flex: 1 1 auto;
white-space: nowrap; }
} }
&__separator { /***************************** CONDITION DEFINITION, EDITING */
grid-column: 1 / span 3; .c-cdef {
} 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;
&__controls { &__criteria,
display: flex; &__match-and-criteria {
flex-wrap: wrap; display: contents;
align-items: flex-start; }
grid-column: 2;
> * > * { &__label {
margin-right: $interiorMarginSm; grid-column: 1;
} text-align: right;
} white-space: nowrap;
}
&__buttons { &__separator {
grid-column: 3; grid-column: 1 / span 3;
} }
}
&__controls {
align-items: flex-start;
grid-column: 2;
> * > * {
margin-right: $interiorMarginSm;
}
}
&__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;
}
}