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

fix(editor): Fix conflicting hover states between sticky button and node view (#3368)

Browse source 
* 🐛 Fixing conflicting hover states between sticky button and node view.

* 🔨 Updating and optimizing sticky menu hover logic

* 📇 Removing redundant comments from `NodeView`.
This commit is contained in:
Milorad FIlipović 2022-05-27 17:04:14 +02:00 committed by GitHub
parent 993554f22a
commit 96a109a57c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
packages/editor-ui/src/views/NodeView.vue
View file

@ -60,12 +60,20 @@
</div>
<NodeDetailsView :renaming="renamingActive" @valueChanged="valueChanged"/>
<div
class="node-buttons-wrapper"
:class="['node-buttons-wrapper', showStickyButton ? 'no-events' : '']"
v-if="!createNodeActive && !isReadOnly"
@mouseenter="onCreateMenuHoverIn"
>
<div class="node-creator-button">
<n8n-icon-button size="xlarge" icon="plus" @click="() => openNodeCreator('add_node_button')" :title="$locale.baseText('nodeView.addNode')"/>
<div class="add-sticky-button" @click="nodeTypeSelected(STICKY_NODE_TYPE)">
<n8n-icon-button
size="xlarge"
icon="plus"
@click="() => openNodeCreator('add_node_button')" :title="$locale.baseText('nodeView.addNode')"
/>
<div
:class="['add-sticky-button', showStickyButton ? 'visible-button' : '']"
@click="nodeTypeSelected(STICKY_NODE_TYPE)"
>
<n8n-icon-button size="large" :icon="['far', 'note-sticky']" type="outline" :title="$locale.baseText('nodeView.addSticky')"/>
</div>
</div>
@ -385,6 +393,7 @@ export default mixins(
pullConnActive: false,
dropPrevented: false,
renamingActive: false,
showStickyButton: false,
};
},
beforeDestroy () {
@ -395,6 +404,29 @@ export default mixins(
document.removeEventListener('keyup', this.keyUp);
},
methods: {
onCreateMenuHoverIn(mouseinEvent: MouseEvent) {
const buttonsWrapper = mouseinEvent.target as Element;
// Once the popup menu is hovered, it's pointer events are disabled so it's not interfering with element underneath it.
this.showStickyButton = true;
const moveCallback = (mousemoveEvent: MouseEvent) => {
if(buttonsWrapper) {
const wrapperBounds = buttonsWrapper.getBoundingClientRect();
const wrapperH = wrapperBounds.height;
const wrapperW = wrapperBounds.width;
const wrapperLeftNear = wrapperBounds.left;
const wrapperLeftFar = wrapperLeftNear + wrapperW;
const wrapperTopNear = wrapperBounds.top;
const wrapperTopFar = wrapperTopNear + wrapperH;
const inside = ((mousemoveEvent.pageX > wrapperLeftNear && mousemoveEvent.pageX < wrapperLeftFar) && (mousemoveEvent.pageY > wrapperTopNear && mousemoveEvent.pageY < wrapperTopFar));
if(!inside) {
this.showStickyButton = false;
document.removeEventListener('mousemove', moveCallback, false);
}
}
};
document.addEventListener('mousemove', moveCallback, false);
},
clearExecutionData () {
this.$store.commit('setWorkflowExecutionData', null);
this.updateNodesExecutionIssues();
@ -2937,6 +2969,10 @@ export default mixins(
bottom: 10px;
}
.no-events {
pointer-events: none;
}
.node-buttons-wrapper {
position: fixed;
width: 150px;
@ -2952,10 +2988,9 @@ export default mixins(
transition-timing-function: linear;
}
&:hover {
.add-sticky-button {
opacity: 1;
}
.visible-button {
opacity: 1;
pointer-events: all;
}
}
@ -2964,6 +2999,7 @@ export default mixins(
text-align: center;
top: 80px;
right: 20px;
pointer-events: all !important;
}
.node-creator-button button {