mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
💄 Improve editor-ui connection creation and deletion
This commit is contained in:
Jan Oberhauser
parent
6c2887e608
commit
0ac97c6523
|
|
@ -1,29 +1,33 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="node-default" :style="nodeStyle" :class="nodeClass" :ref="data.name" @dblclick="setNodeActive" @click.left="mouseLeftClick">
|
<div class="node-wrapper" :style="nodePosition">
|
||||||
<div v-if="hasIssues" class="node-info-icon node-issues">
|
<div class="node-default" :ref="data.name" :style="nodeStyle" :class="nodeClass" @dblclick="setNodeActive" @click.left="mouseLeftClick">
|
||||||
<el-tooltip placement="top" effect="light">
|
<div v-if="hasIssues" class="node-info-icon node-issues">
|
||||||
<div slot="content" v-html="nodeIssues"></div>
|
<el-tooltip placement="top" effect="light">
|
||||||
<font-awesome-icon icon="exclamation-triangle" />
|
<div slot="content" v-html="nodeIssues"></div>
|
||||||
</el-tooltip>
|
<font-awesome-icon icon="exclamation-triangle" />
|
||||||
</div>
|
</el-tooltip>
|
||||||
<el-badge v-else :hidden="workflowDataItems === 0" class="node-info-icon data-count" :value="workflowDataItems"></el-badge>
|
</div>
|
||||||
|
<el-badge v-else :hidden="workflowDataItems === 0" class="node-info-icon data-count" :value="workflowDataItems"></el-badge>
|
||||||
|
|
||||||
<div class="node-executing-info" title="Node is executing">
|
<div class="node-executing-info" title="Node is executing">
|
||||||
<font-awesome-icon icon="sync-alt" spin />
|
<font-awesome-icon icon="sync-alt" spin />
|
||||||
</div>
|
|
||||||
<div class="node-options" v-if="!isReadOnly">
|
|
||||||
<div @click.stop.left="deleteNode" class="option" title="Delete Node" >
|
|
||||||
<font-awesome-icon icon="trash" />
|
|
||||||
</div>
|
</div>
|
||||||
<div @click.stop.left="disableNode" class="option" title="Activate/Deactivate Node" >
|
<div class="node-options" v-if="!isReadOnly">
|
||||||
<font-awesome-icon :icon="nodeDisabledIcon" />
|
<div @click.stop.left="deleteNode" class="option" title="Delete Node" >
|
||||||
</div>
|
<font-awesome-icon icon="trash" />
|
||||||
<div @click.stop.left="duplicateNode" class="option" title="Duplicate Node" >
|
</div>
|
||||||
<font-awesome-icon icon="clone" />
|
<div @click.stop.left="disableNode" class="option" title="Activate/Deactivate Node" >
|
||||||
</div>
|
<font-awesome-icon :icon="nodeDisabledIcon" />
|
||||||
<div @click.stop.left="executeNode" class="option" title="Execute Node" v-if="!isReadOnly && !workflowRunning">
|
</div>
|
||||||
<font-awesome-icon class="execute-icon" icon="play-circle" />
|
<div @click.stop.left="duplicateNode" class="option" title="Duplicate Node" >
|
||||||
|
<font-awesome-icon icon="clone" />
|
||||||
|
</div>
|
||||||
|
<div @click.stop.left="executeNode" class="option" title="Execute Node" v-if="!isReadOnly && !workflowRunning">
|
||||||
|
<font-awesome-icon class="execute-icon" icon="play-circle" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<NodeIcon class="node-icon" :nodeType="nodeType" size="60" :style="nodeIconStyle"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="node-description">
|
<div class="node-description">
|
||||||
<div class="node-name" :title="data.name">
|
<div class="node-name" :title="data.name">
|
||||||
|
|
@ -33,8 +37,6 @@
|
||||||
{{nodeSubtitle}}
|
{{nodeSubtitle}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<NodeIcon class="node-icon" :nodeType="nodeType" size="60" :style="nodeIconStyle"/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -196,138 +198,144 @@ export default mixins(nodeBase, workflowHelpers).extend({
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
||||||
.node-default {
|
.node-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 25px;
|
|
||||||
text-align: center;
|
|
||||||
z-index: 24;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #444;
|
|
||||||
border: 1px dashed grey;
|
|
||||||
|
|
||||||
&.has-data {
|
|
||||||
border-style: solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled {
|
|
||||||
color: #a0a0a0;
|
|
||||||
text-decoration: line-through;
|
|
||||||
border: 1px solid #eee !important;
|
|
||||||
background-color: #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.executing {
|
|
||||||
background-color: $--color-primary-light !important;
|
|
||||||
border-color: $--color-primary !important;
|
|
||||||
|
|
||||||
.node-executing-info {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.node-execute {
|
|
||||||
display: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-options {
|
|
||||||
display: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-description {
|
.node-description {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -70px;
|
bottom: -55px;
|
||||||
left: -50px;
|
left: -50px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 60px;
|
height: 50px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
cursor: default;
|
||||||
|
|
||||||
.node-executing-info {
|
.node-name {
|
||||||
display: none;
|
white-space: nowrap;
|
||||||
position: absolute;
|
overflow: hidden;
|
||||||
left: 0px;
|
text-overflow: ellipsis;
|
||||||
top: 0px;
|
font-weight: 500;
|
||||||
z-index: 12;
|
}
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 3.75em;
|
|
||||||
line-height: 1.65em;
|
|
||||||
text-align: center;
|
|
||||||
color: rgba($--color-primary, 0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-icon {
|
.node-subtitle {
|
||||||
position: absolute;
|
white-space: nowrap;
|
||||||
top: calc(50% - 30px);
|
overflow: hidden;
|
||||||
left: calc(50% - 30px);
|
text-overflow: ellipsis;
|
||||||
}
|
font-weight: 400;
|
||||||
|
color: $--custom-font-light;
|
||||||
.node-info-icon {
|
font-size: 0.8em;
|
||||||
position: absolute;
|
|
||||||
top: -18px;
|
|
||||||
right: 12px;
|
|
||||||
z-index: 10;
|
|
||||||
|
|
||||||
&.data-count {
|
|
||||||
font-weight: 600;
|
|
||||||
top: -12px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-issues {
|
.node-default {
|
||||||
width: 25px;
|
width: 100%;
|
||||||
height: 25px;
|
height: 100%;
|
||||||
font-size: 20px;
|
background-color: #fff;
|
||||||
color: #ff0000;
|
border-radius: 25px;
|
||||||
}
|
|
||||||
|
|
||||||
.node-name {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-subtitle {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $--custom-font-light;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.node-options {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: -35px;
|
|
||||||
left: -10px;
|
|
||||||
width: 120px;
|
|
||||||
height: 45px;
|
|
||||||
font-size: 1em;
|
|
||||||
text-align: left;
|
|
||||||
z-index: 10;
|
|
||||||
color: #aaa;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
z-index: 24;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #444;
|
||||||
|
border: 1px dashed grey;
|
||||||
|
|
||||||
.option {
|
&.has-data {
|
||||||
width: 20px;
|
border-style: solid;
|
||||||
display: inline-block;
|
}
|
||||||
padding: 0 0.3em;
|
|
||||||
|
|
||||||
&:hover {
|
&.disabled {
|
||||||
color: $--color-primary;
|
color: #a0a0a0;
|
||||||
|
text-decoration: line-through;
|
||||||
|
border: 1px solid #eee !important;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.executing {
|
||||||
|
background-color: $--color-primary-light !important;
|
||||||
|
border-color: $--color-primary !important;
|
||||||
|
|
||||||
|
.node-executing-info {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.node-execute {
|
||||||
|
display: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.execute-icon {
|
.node-options {
|
||||||
position: relative;
|
display: initial;
|
||||||
top: 2px;
|
}
|
||||||
font-size: 1.2em;
|
}
|
||||||
|
|
||||||
|
.node-executing-info {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
z-index: 12;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-size: 3.75em;
|
||||||
|
line-height: 1.65em;
|
||||||
|
text-align: center;
|
||||||
|
color: rgba($--color-primary, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(50% - 30px);
|
||||||
|
left: calc(50% - 30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-info-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: -18px;
|
||||||
|
right: 12px;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
&.data-count {
|
||||||
|
font-weight: 600;
|
||||||
|
top: -12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-issues {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node-options {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: -35px;
|
||||||
|
left: -10px;
|
||||||
|
width: 120px;
|
||||||
|
height: 45px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
text-align: left;
|
||||||
|
z-index: 10;
|
||||||
|
color: #aaa;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.option {
|
||||||
|
width: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 0.3em;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $--color-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.execute-icon {
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -355,7 +363,7 @@ export default mixins(nodeBase, workflowHelpers).extend({
|
||||||
border: 2px solid #ff2244;
|
border: 2px solid #ff2244;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-default.jtk-drag-selected {
|
.jtk-drag-selected .node-default {
|
||||||
/* https://www.cssmatic.com/box-shadow */
|
/* https://www.cssmatic.com/box-shadow */
|
||||||
-webkit-box-shadow: 0px 0px 6px 2px rgba(50, 75, 216, 0.37);
|
-webkit-box-shadow: 0px 0px 6px 2px rgba(50, 75, 216, 0.37);
|
||||||
-moz-box-shadow: 0px 0px 6px 2px rgba(50, 75, 216, 0.37);
|
-moz-box-shadow: 0px 0px 6px 2px rgba(50, 75, 216, 0.37);
|
||||||
|
|
|
||||||
|
|
@ -41,12 +41,20 @@ export const nodeBase = mixins(nodeIndex).extend({
|
||||||
nodeIndex (): string {
|
nodeIndex (): string {
|
||||||
return this.$store.getters.getNodeIndex(this.data.name).toString();
|
return this.$store.getters.getNodeIndex(this.data.name).toString();
|
||||||
},
|
},
|
||||||
nodeStyle (): object {
|
nodePosition (): object {
|
||||||
const returnStyles: {
|
const returnStyles: {
|
||||||
[key: string]: string;
|
[key: string]: string;
|
||||||
} = {
|
} = {
|
||||||
left: this.data.position[0] + 'px',
|
left: this.data.position[0] + 'px',
|
||||||
top: this.data.position[1] + 'px',
|
top: this.data.position[1] + 'px',
|
||||||
|
};
|
||||||
|
|
||||||
|
return returnStyles;
|
||||||
|
},
|
||||||
|
nodeStyle (): object {
|
||||||
|
const returnStyles: {
|
||||||
|
[key: string]: string;
|
||||||
|
} = {
|
||||||
'border-color': this.data.color as string,
|
'border-color': this.data.color as string,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -67,7 +75,7 @@ export const nodeBase = mixins(nodeIndex).extend({
|
||||||
uuid: '-input',
|
uuid: '-input',
|
||||||
maxConnections: -1,
|
maxConnections: -1,
|
||||||
endpoint: 'Rectangle',
|
endpoint: 'Rectangle',
|
||||||
endpointStyle: { width: 12, height: 24, fill: '#555', stroke: '#555', strokeWidth: 0 },
|
endpointStyle: { width: 10, height: 24, fill: '#777', stroke: '#777', lineWidth: 0 },
|
||||||
dragAllowedWhenFull: true,
|
dragAllowedWhenFull: true,
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
|
|
@ -276,7 +284,7 @@ export const nodeBase = mixins(nodeIndex).extend({
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
filter: '.action-button',
|
filter: '.node-description, .node-description .node-name, .node-description .node-subtitle',
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1961,6 +1961,10 @@ export default mixins(
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.delete-connection {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
.remove-connection-label {
|
.remove-connection-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue