mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update options index

Browse source
This commit is contained in:
Mutasem 2021-11-10 16:58:16 +01:00
parent 1190435bb5
commit 59d41ce475
1 changed files with 46 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,27 +1,32 @@
<template> <template>
<div :class="{'node-wrapper': true, selected: isSelected}" :style="nodePosition"> <div class="node-wrapper" :style="nodePosition">
<div class="select-background" v-show="isSelected"></div> <div class="select-background" v-show="isSelected"></div>
<div class="node-default" :data-name="data.name" :ref="data.name" :style="nodeStyle" :class="nodeClass" @dblclick="setNodeActive" @click.left="mouseLeftClick" v-touch:start="touchStart" v-touch:end="touchEnd"> <div class="node-default" :data-name="data.name" :ref="data.name">
<div v-if="hasIssues" class="node-info-icon node-issues"> <div :class="nodeClass" :style="nodeStyle" @dblclick="setNodeActive" @click.left="mouseLeftClick" v-touch:start="touchStart" v-touch:end="touchEnd">
<n8n-tooltip placement="bottom" > <div v-if="hasIssues" class="node-info-icon node-issues">
<div slot="content" v-html="nodeIssues"></div> <n8n-tooltip placement="bottom" >
<font-awesome-icon icon="exclamation-triangle" /> <div slot="content" v-html="nodeIssues"></div>
</n8n-tooltip> <font-awesome-icon icon="exclamation-triangle" />
</div> </n8n-tooltip>
<div v-else-if="waiting" class="node-info-icon waiting"> </div>
<n8n-tooltip placement="bottom"> <div v-else-if="waiting" class="node-info-icon waiting">
<div slot="content" v-html="waiting"></div> <n8n-tooltip placement="bottom">
<font-awesome-icon icon="clock" /> <div slot="content" v-html="waiting"></div>
</n8n-tooltip> <font-awesome-icon icon="clock" />
</div> </n8n-tooltip>
<span v-else-if="workflowDataItems && !data.disabled" class="node-info-icon data-count"> </div>
<font-awesome-icon icon="check" /> <span v-else-if="workflowDataItems && !data.disabled" class="node-info-icon data-count">
<span v-if="workflowDataItems > 1" class="items-count"> {{ workflowDataItems }}</span> <font-awesome-icon icon="check" />
</span> <span v-if="workflowDataItems > 1" class="items-count"> {{ workflowDataItems }}</span>
</span>
<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>
<NodeIcon class="node-icon" :nodeType="nodeType" :size="40" :shrink="false" :disabled="this.data.disabled"/>
</div> </div>
<div class="node-options no-select-on-click" v-if="!isReadOnly" v-show="!hideActions"> <div class="node-options no-select-on-click" v-if="!isReadOnly" v-show="!hideActions">
<div v-touch:tap="deleteNode" class="option" title="Delete Node" > <div v-touch:tap="deleteNode" class="option" title="Delete Node" >
<font-awesome-icon icon="trash" /> <font-awesome-icon icon="trash" />
@ -39,8 +44,7 @@
<font-awesome-icon class="execute-icon" icon="play-circle" /> <font-awesome-icon class="execute-icon" icon="play-circle" />
</div> </div>
</div> </div>
<div :class="{'disabled-linethrough': true, success: workflowDataItems > 0}" v-if="showDisabledLinethrough"></div>
<NodeIcon class="node-icon" :nodeType="nodeType" :size="40" :shrink="false" :disabled="this.data.disabled"/>
</div> </div>
<div class="node-description"> <div class="node-description">
<div class="node-name" :title="data.name"> <div class="node-name" :title="data.name">
@ -50,7 +54,6 @@
{{nodeSubtitle}} {{nodeSubtitle}}
</div> </div>
</div> </div>
<div :class="{'disabled-linethrough': true, success: workflowDataItems > 0}" v-if="showDisabledLinethrough"></div>
</div> </div>
</template> </template>
@ -107,7 +110,11 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
return this.$store.getters.nodeType(this.data.type); return this.$store.getters.nodeType(this.data.type);
}, },
nodeClass () { nodeClass () {
const classes = []; const classes = ['node-box'];
if (this.isSelected) {
classes.push('selected');
}
if (this.data.disabled) { if (this.data.disabled) {
classes.push('disabled'); classes.push('disabled');
@ -324,12 +331,15 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #fff;
border-radius: var(--border-radius-large);
text-align: center;
cursor: pointer; cursor: pointer;
color: #444;
border: 2px solid var(--color-foreground-xdark); .node-box {
width: 100%;
height: 100%;
border: 2px solid var(--color-foreground-xdark);
border-radius: var(--border-radius-large);
background-color: #fff;
}
&.executing { &.executing {
background-color: $--color-primary-light !important; background-color: $--color-primary-light !important;
@ -455,6 +465,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
top: 49px; top: 49px;
left: -3px; left: -3px;
width: 111px; width: 111px;
pointer-events: none;
&.success { &.success {
border-color: var(--color-success-light); border-color: var(--color-success-light);
@ -465,10 +476,10 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
<style lang="scss"> <style lang="scss">
/** node */ /** node */
.node-wrapper > * { .node-box {
z-index: 1; z-index: 1;
&.selected > * { &.selected {
z-index: 2; z-index: 2;
} }
} }
@ -515,6 +526,10 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
z-index: 9; z-index: 9;
} }
.node-options {
z-index: 10;
}
.disabled .node-icon img { .disabled .node-icon img {
-webkit-filter: contrast(40%) brightness(1.5) grayscale(100%); -webkit-filter: contrast(40%) brightness(1.5) grayscale(100%);
filter: contrast(40%) brightness(1.5) grayscale(100%); filter: contrast(40%) brightness(1.5) grayscale(100%);