mirror of
https://github.com/nasa/openmct.git
synced 2024-12-22 06:27:48 +00:00
Condition improve reorder (#2818)
* 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
GitHub
parent
11574b7c40
commit
46fedc1a30
@ -21,9 +21,17 @@
|
||||
*****************************************************************************/
|
||||
|
||||
<template>
|
||||
<div v-if="isEditing"
|
||||
class="c-condition c-condition--edit js-condition-drag-wrapper"
|
||||
<div class="c-condition-h"
|
||||
: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"
|
||||
@dragover.stop
|
||||
@dragend="dragEnd"
|
||||
></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 v-else
|
||||
</div>
|
||||
<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: '',
|
||||
selectedFieldName: ''
|
||||
draggingOver: false,
|
||||
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) {
|
||||
e.dataTransfer.clearData();
|
||||
dragEnd(event) {
|
||||
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() {
|
||||
},
|
||||
|
||||
@ -52,30 +52,26 @@
|
||||
<span class="c-cs-button__label">Add Condition</span>
|
||||
</button>
|
||||
|
||||
<div class="c-cs__conditions-h">
|
||||
<div v-for="(condition, index) in conditionCollection"
|
||||
:key="condition.id"
|
||||
class="c-condition-h"
|
||||
<div class="c-cs__conditions-h"
|
||||
:class="{ 'is-active-dragging': isDragging }"
|
||||
>
|
||||
<div v-if="isEditing"
|
||||
class="c-c__drag-ghost"
|
||||
@drop.prevent="dropCondition"
|
||||
@dragenter="dragEnter"
|
||||
@dragleave="dragLeave"
|
||||
@dragover.prevent
|
||||
></div>
|
||||
<Condition :condition="condition"
|
||||
<Condition v-for="(condition, index) in conditionCollection"
|
||||
:key="condition.id"
|
||||
: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) {
|
||||
let targetIndex = Array.from(document.querySelectorAll('.c-c__drag-ghost')).indexOf(e.target);
|
||||
if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
|
||||
dropCondition(targetIndex) {
|
||||
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);
|
||||
|
||||
@ -19,150 +19,45 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
.c-cs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
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;
|
||||
}
|
||||
/***************************** DRAGGING */
|
||||
.is-active-dragging {
|
||||
.c-condition-h__drop-target {
|
||||
height: 3px;
|
||||
margin-bottom: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
/***************************** CONDITIONS AND TEST DATUM ELEMENTS */
|
||||
.c-condition,
|
||||
.c-test-datum {
|
||||
.c-condition-h {
|
||||
&__drop-target {
|
||||
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,
|
||||
.c-cs-test {
|
||||
&__controls {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> * > * {
|
||||
margin-right: $interiorMarginSm;
|
||||
&--edit {
|
||||
line-height: 160%; // For layout when inputs wrap, like in criteria
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.c-condition {
|
||||
.c-condition {
|
||||
flex-direction: column;
|
||||
min-width: 400px;
|
||||
|
||||
@ -207,10 +102,10 @@
|
||||
&__summary {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***************************** CONDITION DEFINITION, EDITING */
|
||||
.c-cdef {
|
||||
/***************************** CONDITION DEFINITION, EDITING */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user