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

⚡ Further improve support for touch-devices

Browse source
This commit is contained in:
Jan Oberhauser 2020-10-24 20:01:13 +02:00
parent 205a033717
commit 4a10cf246b
1 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template> <template>
<div class="node-wrapper" :style="nodePosition"> <div class="node-wrapper" :style="nodePosition">
<div class="node-default" :ref="data.name" :style="nodeStyle" :class="nodeClass" @dblclick="setNodeActive" @click.left="mouseLeftClick" 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">
<el-tooltip placement="top" effect="light"> <el-tooltip placement="top" effect="light">
<div slot="content" v-html="nodeIssues"></div> <div slot="content" v-html="nodeIssues"></div>
@ -16,7 +16,7 @@
<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" />
</div> </div>
<div v-touch:tap="disableNode" v-touch-options="{disableClick: true}" class="option" title="Activate/Deactivate Node" > <div v-touch:tap="disableNode" class="option" title="Activate/Deactivate Node" >
<font-awesome-icon :icon="nodeDisabledIcon" /> <font-awesome-icon :icon="nodeDisabledIcon" />
</div> </div>
<div v-touch:tap="duplicateNode" class="option" title="Duplicate Node" > <div v-touch:tap="duplicateNode" class="option" title="Duplicate Node" >
@ -110,6 +110,10 @@ export default mixins(nodeBase, workflowHelpers).extend({
classes.push('is-touch-device'); classes.push('is-touch-device');
} }
if (this.isTouchActive) {
classes.push('touch-active');
}
return classes; return classes;
}, },
nodeIssues (): string { nodeIssues (): string {
@ -174,7 +178,7 @@ export default mixins(nodeBase, workflowHelpers).extend({
}, },
data () { data () {
return { return {
isTouchDevice: 'ontouchstart' in window || navigator.msMaxTouchPoints, isTouchActive: false,
}; };
}, },
methods: { methods: {
@ -199,6 +203,14 @@ export default mixins(nodeBase, workflowHelpers).extend({
setNodeActive () { setNodeActive () {
this.$store.commit('setActiveNode', this.data.name); this.$store.commit('setActiveNode', this.data.name);
}, },
touchStart () {
if (this.isTouchDevice === true && this.isMacOs === false && this.isTouchActive === false) {
this.isTouchActive = true;
setTimeout(() => {
this.isTouchActive = false;
}, 2000);
}
},
}, },
}); });
@ -268,6 +280,7 @@ export default mixins(nodeBase, workflowHelpers).extend({
} }
} }
&.touch-active,
&:hover { &:hover {
.node-execute { .node-execute {
display: initial; display: initial;