feat(editor): Improve style of Canvas action buttons (#16724)

cypress/e2e/25-stickies.cy.ts

@@ -12,7 +12,7 @@ describe('Canvas Actions', () => {
 	});
 
 	it('adds sticky to canvas with default text and position', () => {
-		workflowPage.getters.addStickyButton().should('not.be.visible');
+		workflowPage.getters.addStickyButton().should('be.visible');
 
 		addDefaultSticky();
 		workflowPage.actions.deselectAll();

cypress/pages/workflow.ts

@@ -437,7 +437,6 @@ export class WorkflowPage extends BasePage {
 				.click({ force: true });
 		},
 		addSticky: () => {
-			this.getters.nodeCreatorPlusButton().realHover();
 			this.getters.addStickyButton().click();
 		},
 		deleteSticky: () => {

packages/frontend/editor-ui/src/components/Node/NodeCreation.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /* eslint-disable vue/no-multiple-template-root */
-import { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, defineAsyncComponent } from 'vue';
 import { getMidCanvasPosition } from '@/utils/nodeViewUtils';
 import {
 	DEFAULT_STICKY_HEIGHT,
@@ -18,7 +18,6 @@ import type {
 	ToggleNodeCreatorOptions,
 } from '@/Interface';
 import { useActions } from './NodeCreator/composables/useActions';
-import { useThrottleFn } from '@vueuse/core';
 import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
 import { useI18n } from '@n8n/i18n';
 
@@ -48,26 +47,10 @@ const i18n = useI18n();
 
 const { getAddedNodesAndConnections } = useActions();
 
-const wrapperRef = ref<HTMLElement | undefined>();
-const wrapperBoundingRect = ref<DOMRect | undefined>();
-const isStickyNotesButtonVisible = ref(true);
 const isOpenFocusPanelButtonVisible = computed(() => {
 	return posthogStore.getVariant(FOCUS_PANEL_EXPERIMENT.name) === FOCUS_PANEL_EXPERIMENT.variant;
 });
 
-const onMouseMove = useThrottleFn((event: MouseEvent) => {
-	if (wrapperBoundingRect.value) {
-		const offset = 100;
-		isStickyNotesButtonVisible.value =
-			event.clientX >= wrapperBoundingRect.value.left - offset &&
-			event.clientX <= wrapperBoundingRect.value.right + offset &&
-			event.clientY >= wrapperBoundingRect.value.top - offset &&
-			event.clientY <= wrapperBoundingRect.value.bottom + offset;
-	} else {
-		isStickyNotesButtonVisible.value = true;
-	}
-}, 250);
-
 function openNodeCreator() {
 	emit('toggleNodeCreator', {
 		source: NODE_CREATOR_OPEN_SOURCES.ADD_NODE_BUTTON,
@@ -99,67 +82,49 @@ function nodeTypeSelected(value: NodeTypeSelectedPayload[]) {
 	emit('addNodes', getAddedNodesAndConnections(value));
 	closeNodeCreator(true);
 }
-
-function setWrapperRect() {
-	wrapperBoundingRect.value = wrapperRef.value?.getBoundingClientRect();
-}
-
-onMounted(() => {
-	setWrapperRect();
-
-	document.addEventListener('mousemove', onMouseMove);
-	window.addEventListener('resize', setWrapperRect);
-});
-
-onBeforeUnmount(() => {
-	document.removeEventListener('mousemove', onMouseMove);
-	window.removeEventListener('resize', setWrapperRect);
-});
 </script>
 
 <template>
 	<div v-if="!createNodeActive" :class="$style.nodeButtonsWrapper">
-		<div ref="wrapperRef" :class="$style.nodeCreatorButton">
+		<KeyboardShortcutTooltip
-			<KeyboardShortcutTooltip
+			:label="i18n.baseText('nodeView.openNodesPanel')"
-				:label="i18n.baseText('nodeView.openNodesPanel')"
+			:shortcut="{ keys: ['Tab'] }"
-				:shortcut="{ keys: ['Tab'] }"
+			placement="left"
-				placement="left"
+		>
-			>
+			<n8n-icon-button
-				<n8n-icon-button
+				size="large"
-					size="large"
+				icon="plus"
-					icon="plus"
+				type="tertiary"
-					type="tertiary"
+				data-test-id="node-creator-plus-button"
-					data-test-id="node-creator-plus-button"
+				@click="openNodeCreator"
-					@click="openNodeCreator"
+			/>
-				/>
+		</KeyboardShortcutTooltip>
-			</KeyboardShortcutTooltip>
+		<KeyboardShortcutTooltip
-			<div
+			:label="i18n.baseText('nodeView.addStickyHint')"
-				:class="[$style.addStickyButton, isStickyNotesButtonVisible ? $style.visibleButton : '']"
+			:shortcut="{ keys: ['s'], shiftKey: true }"
+			placement="left"
+		>
+			<n8n-icon-button
+				size="large"
+				type="tertiary"
+				:icon="['far', 'note-sticky']"
 				data-test-id="add-sticky-button"
 				@click="addStickyNote"
-			>
+			/>
-				<KeyboardShortcutTooltip
+		</KeyboardShortcutTooltip>
-					:label="i18n.baseText('nodeView.addStickyHint')"
+		<KeyboardShortcutTooltip
-					:shortcut="{ keys: ['s'], shiftKey: true }"
+			v-if="isOpenFocusPanelButtonVisible"
-					placement="left"
+			:label="i18n.baseText('nodeView.openFocusPanel')"
-				>
+			:shortcut="{ keys: ['f'], shiftKey: true }"
-					<n8n-icon-button type="tertiary" :icon="['far', 'note-sticky']" />
+			placement="left"
-				</KeyboardShortcutTooltip>
+		>
-			</div>
+			<n8n-icon-button
-			<KeyboardShortcutTooltip
+				type="tertiary"
-				v-if="isOpenFocusPanelButtonVisible"
+				size="large"
-				:label="i18n.baseText('nodeView.openFocusPanel')"
+				icon="list"
-				:shortcut="{ keys: ['f'], shiftKey: true }"
+				@click="focusPanelStore.toggleFocusPanel"
-				placement="left"
+			/>
-			>
+		</KeyboardShortcutTooltip>
-				<n8n-icon-button
-					type="tertiary"
-					size="large"
-					icon="list"
-					@click="focusPanelStore.toggleFocusPanel"
-				/>
-			</KeyboardShortcutTooltip>
-		</div>
 	</div>
 	<Suspense>
 		<LazyNodeCreator
@@ -176,25 +141,9 @@ onBeforeUnmount(() => {
 	top: 0;
 	right: 0;
 	display: flex;
-}
+	flex-direction: column;
-
+	gap: var(--spacing-2xs);
-.addStickyButton {
+	padding: var(--spacing-s);
-	margin-top: var(--spacing-2xs);
-	opacity: 0;
-	transition: 0.1s;
-	transition-timing-function: linear;
-}
-
-.visibleButton {
-	opacity: 1;
-	pointer-events: all;
-}
-
-.nodeCreatorButton {
-	position: absolute;
-	text-align: center;
-	top: var(--spacing-s);
-	right: var(--spacing-s);
 	pointer-events: all !important;
 }
 </style>