fix(editor): Tweak hover area of workflow / cred cards (#7108)

Context When a user is attempting to interact with a foreground action inside an entity card (workflow, credential, community node, logging destination), they might accidentally open that entity instead of interacting with a foreground action. For these card components, actions are always placed on right side. A/C Area around right "column" of entity cards (workflow, cred, community node, logging destination) should not be a hoverable area (that opens that entity when clicked). This area is roughly highlighted in screen shot below in orange. ![image](https://github.com/n8n-io/n8n/assets/5410822/0916bcd5-e972-4367-a862-41d2086a2334)
n8n-io · Sep 13, 2023 · 217de21 · 217de21
1 parent 67092c0
commit 217de21
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 47 deletions.
diff --git a/packages/design-system/src/components/N8nCard/Card.vue b/packages/design-system/src/components/N8nCard/Card.vue
@@ -14,7 +14,7 @@
 				<slot name="footer" />
 			</div>
 		</div>
-		<div v-if="$slots.append">
+		<div v-if="$slots.append" :class="$style.append">
 			<slot name="append" />
 		</div>
 	</div>
@@ -82,7 +82,6 @@ export default defineComponent({
 
 .icon {
 	width: 24px;
-	height: 24px;
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
@@ -101,4 +100,10 @@ export default defineComponent({
 		border-color: var(--color-primary);
 	}
 }
+
+.append {
+	display: flex;
+	align-items: center;
+	cursor: default;
+}
 </style>
diff --git a/packages/editor-ui/src/components/CredentialCard.vue b/packages/editor-ui/src/components/CredentialCard.vue
@@ -1,24 +1,26 @@
 <template>
-	<n8n-card :class="$style['card-link']" @click="onClick">
+	<n8n-card :class="$style.cardLink" @click="onClick">
 		<template #prepend>
 			<credential-icon :credential-type-name="credentialType ? credentialType.name : ''" />
 		</template>
 		<template #header>
-			<n8n-heading tag="h2" bold :class="$style['card-heading']">
+			<n8n-heading tag="h2" bold :class="$style.cardHeading">
 				{{ data.name }}
 			</n8n-heading>
 		</template>
-		<n8n-text color="text-light" size="small">
-			<span v-if="credentialType">{{ credentialType.displayName }} | </span>
-			<span v-show="data"
-				>{{ $locale.baseText('credentials.item.updated') }} <time-ago :date="data.updatedAt" /> |
-			</span>
-			<span v-show="data"
-				>{{ $locale.baseText('credentials.item.created') }} {{ formattedCreatedAtDate }}
-			</span>
-		</n8n-text>
+		<div :class="$style.cardDescription">
+			<n8n-text color="text-light" size="small">
+				<span v-if="credentialType">{{ credentialType.displayName }} | </span>
+				<span v-show="data"
+					>{{ $locale.baseText('credentials.item.updated') }} <time-ago :date="data.updatedAt" /> |
+				</span>
+				<span v-show="data"
+					>{{ $locale.baseText('credentials.item.created') }} {{ formattedCreatedAtDate }}
+				</span>
+			</n8n-text>
+		</div>
 		<template #append>
-			<div :class="$style['card-actions']">
+			<div :class="$style.cardActions" ref="cardActions">
 				<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
 					<n8n-badge v-if="credentialPermissions.isOwner" class="mr-xs" theme="tertiary" bold>
 						{{ $locale.baseText('credentials.item.owner') }}
@@ -128,7 +130,14 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		async onClick() {
+		async onClick(event: Event) {
+			if (
+				this.$refs.cardActions === event.target ||
+				this.$refs.cardActions?.contains(event.target)
+			) {
+				return;
+			}
+
 			this.uiStore.openExistingCredential(this.data.id);
 		},
 		async onAction(action: string) {
@@ -162,23 +171,36 @@ export default defineComponent({
 </script>
 
 <style lang="scss" module>
-.card-link {
+.cardLink {
 	transition: box-shadow 0.3s ease;
 	cursor: pointer;
+	padding: 0 0 0 var(--spacing-s);
+	align-items: stretch;
 
 	&:hover {
 		box-shadow: 0 2px 8px rgba(#441c17, 0.1);
 	}
 }
 
-.card-heading {
+.cardHeading {
 	font-size: var(--font-size-s);
+	padding: var(--spacing-s) 0 0;
+}
+
+.cardDescription {
+	min-height: 19px;
+	display: flex;
+	align-items: center;
+	padding: 0 0 var(--spacing-s);
 }
 
-.card-actions {
+.cardActions {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
+	align-self: stretch;
+	padding: 0 var(--spacing-s) 0 0;
+	cursor: default;
 }
 </style>
diff --git a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
@@ -13,7 +13,7 @@
 			</div>
 		</template>
 		<template #append>
-			<div :class="$style.cardActions">
+			<div :class="$style.cardActions" ref="cardActions">
 				<div :class="$style.activeStatusText" data-test-id="destination-activator-status">
 					<n8n-text v-if="nodeParameters.enabled" :color="'success'" size="small" bold>
 						{{ $locale.baseText('workflowActivator.active') }}
@@ -83,9 +83,7 @@ export default defineComponent({
 		destination: {
 			type: Object,
 			required: true,
-			default: deepCopy(
-				defaultMessageEventBusDestinationOptions,
-			) as MessageEventBusDestinationOptions,
+			default: deepCopy(defaultMessageEventBusDestinationOptions),
 		},
 		isInstanceOwner: Boolean,
 	},
@@ -130,17 +128,16 @@ export default defineComponent({
 				);
 			}
 		},
-		async onClick(event?: PointerEvent) {
+		async onClick(event: Event) {
 			if (
-				event &&
-				event.target &&
-				'className' in event.target &&
-				event.target['className'] === 'el-switch__core'
+				this.$refs.cardActions === event.target ||
+				this.$refs.cardActions?.contains(event.target) ||
+				event.target?.contains(this.$refs.cardActions)
 			) {
-				event.stopPropagation();
-			} else {
-				this.$emit('edit', this.destination.id);
+				return;
 			}
+
+			this.$emit('edit', this.destination.id);
 		},
 		onEnabledSwitched(state: boolean, destinationId: string) {
 			this.nodeParameters.enabled = state;
@@ -184,6 +181,8 @@ export default defineComponent({
 .cardLink {
 	transition: box-shadow 0.3s ease;
 	cursor: pointer;
+	padding: 0 0 0 var(--spacing-s);
+	align-items: stretch;
 
 	&:hover {
 		box-shadow: 0 2px 8px rgba(#441c17, 0.1);
@@ -201,18 +200,22 @@ export default defineComponent({
 .cardHeading {
 	font-size: var(--font-size-s);
 	word-break: break-word;
+	padding: var(--spacing-s) 0 0 var(--spacing-s);
 }
 
 .cardDescription {
 	min-height: 19px;
 	display: flex;
 	align-items: center;
+	padding: 0 0 var(--spacing-s) var(--spacing-s);
 }
 
 .cardActions {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
+	padding: 0 var(--spacing-s) 0 0;
+	cursor: default;
 }
 </style>
diff --git a/packages/editor-ui/src/components/WorkflowCard.vue b/packages/editor-ui/src/components/WorkflowCard.vue
@@ -29,7 +29,7 @@
 			</n8n-text>
 		</div>
 		<template #append>
-			<div :class="$style.cardActions">
+			<div :class="$style.cardActions" ref="cardActions">
 				<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
 					<n8n-badge v-if="workflowPermissions.isOwner" class="mr-xs" theme="tertiary" bold>
 						{{ $locale.baseText('workflows.item.owner') }}
@@ -40,7 +40,6 @@
 					class="mr-s"
 					:workflow-active="data.active"
 					:workflow-id="data.id"
-					ref="activator"
 					data-test-id="workflow-card-activator"
 				/>
 
@@ -78,8 +77,6 @@ import { useUsersStore } from '@/stores/users.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import TimeAgo from '@/components/TimeAgo.vue';
 
-type ActivatorRef = InstanceType<typeof WorkflowActivator>;
-
 export const WORKFLOW_LIST_ITEM_ACTIONS = {
 	OPEN: 'open',
 	SHARE: 'share',
@@ -171,21 +168,22 @@ export default defineComponent({
 		},
 	},
 	methods: {
-		async onClick(event?: PointerEvent) {
-			if (event) {
-				if ((this.$refs.activator as ActivatorRef)?.$el.contains(event.target as HTMLElement)) {
-					return;
-				}
+		async onClick(event: Event) {
+			if (
+				this.$refs.cardActions === event.target ||
+				this.$refs.cardActions?.contains(event.target)
+			) {
+				return;
+			}
 
-				if (event.metaKey || event.ctrlKey) {
-					const route = this.$router.resolve({
-						name: VIEWS.WORKFLOW,
-						params: { name: this.data.id },
-					});
-					window.open(route.href, '_blank');
+			if (event.metaKey || event.ctrlKey) {
+				const route = this.$router.resolve({
+					name: VIEWS.WORKFLOW,
+					params: { name: this.data.id },
+				});
+				window.open(route.href, '_blank');
 
-					return;
-				}
+				return;
 			}
 
 			await this.$router.push({
@@ -267,6 +265,8 @@ export default defineComponent({
 .cardLink {
 	transition: box-shadow 0.3s ease;
 	cursor: pointer;
+	padding: 0;
+	align-items: stretch;
 
 	&:hover {
 		box-shadow: 0 2px 8px rgba(#441c17, 0.1);
@@ -276,18 +276,23 @@ export default defineComponent({
 .cardHeading {
 	font-size: var(--font-size-s);
 	word-break: break-word;
+	padding: var(--spacing-s) 0 0 var(--spacing-s);
 }
 
 .cardDescription {
 	min-height: 19px;
 	display: flex;
 	align-items: center;
+	padding: 0 0 var(--spacing-s) var(--spacing-s);
 }
 
 .cardActions {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
+	align-self: stretch;
+	padding: 0 var(--spacing-s) 0 0;
+	cursor: default;
 }
 </style>