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

⚡ Improve support for touch-devices

Browse source
This commit is contained in:
Jan Oberhauser 2020-02-15 17:29:08 -08:00
parent 70286b469e
commit a56a49574b
1 changed files with 20 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -22,15 +22,15 @@
<div @click.stop.left="duplicateNode" class="option" title="Duplicate Node" >
<font-awesome-icon icon="clone" />
</div>
<div @click.stop.left="setNodeActive" class="option touch" title="Edit Node" v-if="!isReadOnly">
<font-awesome-icon class="execute-icon" icon="cog" />
</div>
<div @click.stop.left="executeNode" class="option" title="Execute Node" v-if="!isReadOnly && !workflowRunning">
<font-awesome-icon class="execute-icon" icon="play-circle" />
</div>
</div>
<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 class="node-description">
<div class="node-name" :title="data.name">
@ -106,6 +106,10 @@ export default mixins(nodeBase, workflowHelpers).extend({
classes.push('has-issues');
}
if (this.isTouchDevice) {
classes.push('is-touch-device');
}
return classes;
},
nodeIssues (): string {
@ -268,10 +272,6 @@ export default mixins(nodeBase, workflowHelpers).extend({
.node-options {
display: initial;
}
.touch-option {
display: initial;
}
}
.node-executing-info {
@ -331,6 +331,10 @@ export default mixins(nodeBase, workflowHelpers).extend({
display: inline-block;
padding: 0 0.3em;
&.touch {
display: none;
}
&:hover {
color: $--color-primary;
}
@ -343,25 +347,19 @@ export default mixins(nodeBase, workflowHelpers).extend({
}
}
&.is-touch-device .node-options {
left: -25px;
width: 150px;
.option.touch {
display: initial;
}
}
&.has-data .node-options,
&.has-issues .node-options {
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;
}
}
}
}