mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-28 22:19:41 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

make selects faster

Browse source
This commit is contained in:
Mutasem 2021-10-27 13:39:07 +02:00
parent e9e7d1f2a4
commit 8fcc88f358
1 changed files with 13 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
<template> <template>
<div :class="{'node-wrapper': true, 'has-subtitles': !!nodeSubtitle}" :style="nodePosition"> <div class="node-wrapper" :style="nodePosition">
<div :class="{'selected': true, 'has-subtitles': !!nodeSubtitle}" v-show="isSelected"></div>
<div class="node-default" :ref="data.name" :style="nodeStyle" :class="nodeClass" @dblclick="setNodeActive" @click.left="mouseLeftClick" v-touch:start="touchStart" v-touch:end="touchEnd"> <div class="node-default" :ref="data.name" :style="nodeStyle" :class="nodeClass" @dblclick="setNodeActive" @click.left="mouseLeftClick" v-touch:start="touchStart" v-touch:end="touchEnd">
<div v-if="hasIssues" class="node-info-icon node-issues"> <div v-if="hasIssues" class="node-info-icon node-issues">
<n8n-tooltip placement="top" > <n8n-tooltip placement="top" >
@ -74,6 +75,7 @@ import mixins from 'vue-typed-mixins';
import { get } from 'lodash'; import { get } from 'lodash';
import { getStyleTokenValue } from './helpers'; import { getStyleTokenValue } from './helpers';
import { INodeUi } from '@/Interface';
export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).extend({ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).extend({
name: 'Node', name: 'Node',
@ -183,6 +185,9 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
return returnStyles; return returnStyles;
}, },
isSelected (): boolean {
return this.$store.getters.getSelectedNodes.find((node: INodeUi) => node.name === this.data.name);
},
}, },
watch: { watch: {
isActive(newValue, oldValue) { isActive(newValue, oldValue) {
@ -414,15 +419,21 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
} }
.selected { .selected {
content: ' ';
display: block;
position: absolute; position: absolute;
top: -8px; top: -8px;
left: -8px; left: -8px;
background-color: var(--color-foreground-base); background-color: var(--color-foreground-base);
height: 116px; height: 140px;
width: 116px; width: 116px;
border-radius: var(--border-radius-xlarge); border-radius: var(--border-radius-xlarge);
opacity: 0.8; opacity: 0.8;
z-index: 0; z-index: 0;
&.has-subtitles {
height: 166px;
}
} }
</style> </style>
@ -472,26 +483,6 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
z-index: 9; z-index: 9;
} }
.jtk-drag-selected {
&.has-subtitles:before {
height: 166px;
}
&:before {
content: ' ';
display: block;
position: absolute;
top: -8px;
left: -8px;
background-color: var(--color-foreground-base);
height: 140px;
width: 116px;
border-radius: var(--border-radius-xlarge);
opacity: 0.8;
z-index: 0;
}
}
.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%);