mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-12 21:37:32 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

💄 Improve editor-ui connection creation and deletion

Browse source
This commit is contained in:
Jan Oberhauser 2019-07-25 21:57:27 +02:00
parent 6c2887e608
commit 0ac97c6523
3 changed files with 161 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
packages/editor-ui/src/components/Node.vue
View file

@ -1,5 +1,6 @@
<template>
<div class="node-default" :style="nodeStyle" :class="nodeClass" :ref="data.name" @dblclick="setNodeActive" @click.left="mouseLeftClick">
<div class="node-wrapper" :style="nodePosition">
<div class="node-default" :ref="data.name" :style="nodeStyle" :class="nodeClass" @dblclick="setNodeActive" @click.left="mouseLeftClick">
<div v-if="hasIssues" class="node-info-icon node-issues">
<el-tooltip placement="top" effect="light">
<div slot="content" v-html="nodeIssues"></div>
@ -25,6 +26,9 @@
<font-awesome-icon class="execute-icon" icon="play-circle" />
</div>
</div>
<NodeIcon class="node-icon" :nodeType="nodeType" size="60" :style="nodeIconStyle"/>
</div>
<div class="node-description">
<div class="node-name" :title="data.name">
{{data.name}}
@ -33,8 +37,6 @@
{{nodeSubtitle}}
</div>
</div>
<NodeIcon class="node-icon" :nodeType="nodeType" size="60" :style="nodeIconStyle"/>
</div>
</template>
@ -196,10 +198,40 @@ export default mixins(nodeBase, workflowHelpers).extend({
<style lang="scss">
.node-default {
.node-wrapper {
position: absolute;
width: 100px;
height: 100px;
.node-description {
position: absolute;
bottom: -55px;
left: -50px;
width: 200px;
height: 50px;
text-align: center;
cursor: default;
.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.8em;
}
}
.node-default {
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 25px;
text-align: center;
@ -238,15 +270,6 @@ export default mixins(nodeBase, workflowHelpers).extend({
}
}
.node-description {
position: absolute;
bottom: -70px;
left: -50px;
width: 200px;
height: 60px;
text-align: center;
}
.node-executing-info {
display: none;
position: absolute;
@ -286,22 +309,6 @@ export default mixins(nodeBase, workflowHelpers).extend({
color: #ff0000;
}
.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;
@ -309,7 +316,7 @@ export default mixins(nodeBase, workflowHelpers).extend({
left: -10px;
width: 120px;
height: 45px;
font-size: 1em;
font-size: 0.9em;
text-align: left;
z-index: 10;
color: #aaa;
@ -331,6 +338,7 @@ export default mixins(nodeBase, workflowHelpers).extend({
}
}
}
}
}
</style>
@ -355,7 +363,7 @@ export default mixins(nodeBase, workflowHelpers).extend({
border: 2px solid #ff2244;
}
.node-default.jtk-drag-selected {
.jtk-drag-selected .node-default {
/* https://www.cssmatic.com/box-shadow */
-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);

14
packages/editor-ui/src/components/mixins/nodeBase.ts
View file

@ -41,12 +41,20 @@ export const nodeBase = mixins(nodeIndex).extend({
nodeIndex (): string {
return this.$store.getters.getNodeIndex(this.data.name).toString();
},
nodeStyle (): object {
nodePosition (): object {
const returnStyles: {
[key: string]: string;
} = {
left: this.data.position[0] + 'px',
top: this.data.position[1] + 'px',
};
return returnStyles;
},
nodeStyle (): object {
const returnStyles: {
[key: string]: string;
} = {
'border-color': this.data.color as string,
};
@ -67,7 +75,7 @@ export const nodeBase = mixins(nodeIndex).extend({
uuid: '-input',
maxConnections: -1,
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,
},
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',
});
},

4
packages/editor-ui/src/views/NodeView.vue
View file

@ -1961,6 +1961,10 @@ export default mixins(
font-size: 0.8em;
}
.delete-connection {
font-weight: 500;
}
.remove-connection-label {
font-size: 12px;
color: #fff;