mirror of
https://github.com/nasa/openmct.git
synced 2024-12-21 14:07:50 +00:00
style changes for dnd
This commit is contained in:
Joel McKinnon
parent
cfa5dcb02e
commit
7e0f475c63
@ -33,13 +33,9 @@
|
||||
class="c-c__drag-ghost"
|
||||
></div>
|
||||
<div class="c-c__container-holder">
|
||||
<div v-for="conditionIdentifier in conditionCollection"
|
||||
<div v-for="(conditionIdentifier, index) in conditionCollection"
|
||||
:key="conditionIdentifier.key"
|
||||
>
|
||||
<div class="c-c__drop-hint">
|
||||
<div class="c-drop-hint c-drop-hint"></div>
|
||||
</div>
|
||||
|
||||
<div v-if="isEditing">
|
||||
<ConditionEdit :condition-identifier="conditionIdentifier"
|
||||
:current-condition-identifier="currentConditionIdentifier"
|
||||
@ -65,6 +61,7 @@ import Condition from '../../condition/components/Condition.vue';
|
||||
import ConditionEdit from '../../condition/components/ConditionEdit.vue';
|
||||
import uuid from 'uuid';
|
||||
|
||||
|
||||
export default {
|
||||
inject: ['openmct', 'domainObject'],
|
||||
components: {
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
class="c-c-editui__conditions c-c-container__container c-c__drag-wrapper"
|
||||
:class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]"
|
||||
draggable="true"
|
||||
@dragstart="initDrag"
|
||||
>
|
||||
<div class="title-bar">
|
||||
<span
|
||||
@ -28,20 +29,20 @@
|
||||
></span>
|
||||
</div>
|
||||
<div v-if="expanded"
|
||||
class="condition-config-edit widget-rule-content c-sw-editui__rules-wrapper holder widget-rules-wrapper flex-elem expanded"
|
||||
class="condition-config-edit widget-condition-content c-sw-editui__conditions-wrapper holder widget-conditions-wrapper flex-elem expanded"
|
||||
>
|
||||
<div id="ruleArea"
|
||||
class="c-sw-editui__rules widget-rules"
|
||||
<div id="conditionArea"
|
||||
class="c-c-editui__condition widget-conditions"
|
||||
>
|
||||
<div class="c-sw-rule">
|
||||
<div class="c-sw-rule__ui l-compact-form l-widget-rule has-local-controls">
|
||||
<div class="c-c-condition">
|
||||
<div class="c-c-condition__ui l-compact-form l-widget-condition has-local-controls">
|
||||
<div>
|
||||
<ul class="t-widget-rule-config">
|
||||
<ul class="t-widget-condition-config">
|
||||
<li>
|
||||
<label>Condition Name</label>
|
||||
<span class="controls">
|
||||
<input v-model="condition.definition.name"
|
||||
class="t-rule-name-input"
|
||||
class="t-condition-name-input"
|
||||
type="text"
|
||||
>
|
||||
</span>
|
||||
@ -62,16 +63,16 @@
|
||||
</select>
|
||||
<input v-if="selectedOutputKey === outputOptions[2].key"
|
||||
v-model="condition.definition.output"
|
||||
class="t-rule-name-input"
|
||||
class="t-condition-name-input"
|
||||
type="text"
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="!condition.isDefault"
|
||||
class="widget-rule-content expanded"
|
||||
class="widget-condition-content expanded"
|
||||
>
|
||||
<ul class="t-widget-rule-config">
|
||||
<ul class="t-widget-condition-config">
|
||||
<li class="has-local-controls t-condition">
|
||||
<label>Match when</label>
|
||||
<span class="controls">
|
||||
@ -82,7 +83,7 @@
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="t-widget-rule-config">
|
||||
<ul class="t-widget-condition-config">
|
||||
<li v-if="telemetryObject && telemetryMetadata"
|
||||
class="has-local-controls t-condition"
|
||||
>
|
||||
@ -120,7 +121,7 @@
|
||||
</option>
|
||||
</select>
|
||||
<input v-if="comparisonValueField"
|
||||
class="t-rule-name-input"
|
||||
class="t-condition-name-input"
|
||||
type="text"
|
||||
@keyup="getOperationValue"
|
||||
>
|
||||
@ -152,7 +153,7 @@ export default {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
condition: this.condition,
|
||||
@ -198,6 +199,8 @@ export default {
|
||||
this.conditionClass = new ConditionClass(this.condition, this.openmct);
|
||||
this.conditionClass.on('conditionResultUpdated', this.handleConditionResult.bind(this));
|
||||
}));
|
||||
|
||||
this.dragGhost = document.getElementById('js-c-drag-ghost');
|
||||
},
|
||||
updated() {
|
||||
if (this.isCurrent && this.isCurrent.key === this.condition.key) {
|
||||
@ -206,6 +209,25 @@ export default {
|
||||
this.persist();
|
||||
},
|
||||
methods: {
|
||||
initDrag() {
|
||||
// let type = this.openmct.types.get(this.domainObject.type),
|
||||
// iconClass = type.definition ? type.definition.cssClass : 'icon-object-unknown';
|
||||
|
||||
// if (this.dragGhost) {
|
||||
// let originalClassName = this.dragGhost.classList[0];
|
||||
// this.dragGhost.className = '';
|
||||
// this.dragGhost.classList.add(originalClassName, iconClass);
|
||||
|
||||
// this.dragGhost.innerHTML = `<span>${this.domainObject.name}</span>`;
|
||||
// event.dataTransfer.setDragImage(this.dragGhost, 0, 0);
|
||||
// }
|
||||
|
||||
console.log('conditionId', this.condition.id);
|
||||
console.log('containerIndex', this.containerIndex);
|
||||
|
||||
event.dataTransfer.setData('conditionId', this.condition.id);
|
||||
event.dataTransfer.setData('containerIndex', this.containerIndex);
|
||||
},
|
||||
handleConditionResult(args) {
|
||||
// console.log('ConditionEdit::Result', args);
|
||||
this.$emit('condition-result-updated', {
|
||||
|
||||
83
src/plugins/condition/components/DropHint.vue
Normal file
83
src/plugins/condition/components/DropHint.vue
Normal file
@ -0,0 +1,83 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
<template>
|
||||
<div v-show="isValidTarget">
|
||||
<div
|
||||
class="c-drop-hint c-drop-hint--always-show"
|
||||
:class="{'is-mouse-over': isMouseOver}"
|
||||
@dragover.prevent
|
||||
@dragenter="dragenter"
|
||||
@dragleave="dragleave"
|
||||
@drop="dropHandler"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
index: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
allowDrop: {
|
||||
type: Function,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isMouseOver: false,
|
||||
isValidTarget: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.addEventListener('dragstart', this.dragstart);
|
||||
document.addEventListener('dragend', this.dragend);
|
||||
document.addEventListener('drop', this.dragend);
|
||||
},
|
||||
destroyed() {
|
||||
document.removeEventListener('dragstart', this.dragstart);
|
||||
document.removeEventListener('dragend', this.dragend);
|
||||
document.removeEventListener('drop', this.dragend);
|
||||
},
|
||||
methods: {
|
||||
dragenter() {
|
||||
this.isMouseOver = true;
|
||||
},
|
||||
dragleave() {
|
||||
this.isMouseOver = false;
|
||||
},
|
||||
dropHandler(event) {
|
||||
this.$emit('object-drop-to', this.index, event);
|
||||
this.isValidTarget = false;
|
||||
},
|
||||
dragstart(event) {
|
||||
this.isValidTarget = this.allowDrop(event, this.index);
|
||||
},
|
||||
dragend() {
|
||||
this.isValidTarget = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,5 +1,3 @@
|
||||
|
||||
|
||||
.widget-condition {
|
||||
background-color: #eee;
|
||||
margin: 0 0 0.6em;
|
||||
@ -53,7 +51,7 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.l-widget-rule {
|
||||
.l-widget-condition {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -61,11 +59,11 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.widget-rule-content.expanded {
|
||||
.widget-condition-content.expanded {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.widget-rule-content.expanded ul {
|
||||
.widget-condition-content.expanded ul {
|
||||
border-top: solid 1px #ccc;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user