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

⚡ Improve support for touch-devices

Browse source
This commit is contained in:
Jan Oberhauser 2020-02-09 00:06:01 -08:00
parent f9315658b8
commit 2e9fa3b868
1 changed files with 23 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -28,6 +28,9 @@
</div> </div>
<NodeIcon class="node-icon" :nodeType="nodeType" size="60" :style="nodeIconStyle"/> <NodeIcon class="node-icon" :nodeType="nodeType" size="60" :style="nodeIconStyle"/>
<div @click.stop.left="setNodeActive" class="touch-option" title="Edit Node" v-if="isTouchDevice">
<font-awesome-icon icon="cog" />
</div>
</div> </div>
<div class="node-description"> <div class="node-description">
<div class="node-name" :title="data.name"> <div class="node-name" :title="data.name">
@ -163,6 +166,7 @@ export default mixins(nodeBase, workflowHelpers).extend({
}, },
data () { data () {
return { return {
isTouchDevice: 'ontouchstart' in window || navigator.msMaxTouchPoints,
}; };
}, },
methods: { methods: {
@ -272,6 +276,10 @@ export default mixins(nodeBase, workflowHelpers).extend({
.node-options { .node-options {
display: initial; display: initial;
} }
.touch-option {
display: initial;
}
} }
.node-executing-info { .node-executing-info {
@ -347,6 +355,21 @@ export default mixins(nodeBase, workflowHelpers).extend({
&.has-issues .node-options { &.has-issues .node-options {
top: -35px; top: -35px;
} }
.touch-option {
bottom: 0.3em;
color: #aaa;
display: none;
font-size: 1.5em;
position: absolute;
right: 0.3em;
z-index: 10;
&:hover {
color: $--color-primary;
}
}
} }
} }