admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 18:12:04 +00:00
Code Issues 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
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" > <div @click.stop.left="duplicateNode" class="option" title="Duplicate Node" >
<font-awesome-icon icon="clone" /> <font-awesome-icon icon="clone" />
</div> </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"> <div @click.stop.left="executeNode" class="option" title="Execute Node" v-if="!isReadOnly && !workflowRunning">
<font-awesome-icon class="execute-icon" icon="play-circle" /> <font-awesome-icon class="execute-icon" icon="play-circle" />
</div> </div>
</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">
@@ -106,6 +106,10 @@ export default mixins(nodeBase, workflowHelpers).extend({
classes.push('has-issues'); classes.push('has-issues');
} }
if (this.isTouchDevice) {
classes.push('is-touch-device');
}
return classes; return classes;
}, },
nodeIssues (): string { nodeIssues (): string {
@@ -268,10 +272,6 @@ export default mixins(nodeBase, workflowHelpers).extend({
.node-options { .node-options {
display: initial; display: initial;
} }
.touch-option {
display: initial;
}
} }
.node-executing-info { .node-executing-info {
@@ -331,6 +331,10 @@ export default mixins(nodeBase, workflowHelpers).extend({
display: inline-block; display: inline-block;
padding: 0 0.3em; padding: 0 0.3em;
&.touch {
display: none;
}
&:hover { &:hover {
color: $--color-primary; 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-data .node-options,
&.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;
}
}
} }
} }