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

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

Browse Source 
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)
This commit is contained in:
Csaba Tuncsik
2023-09-13 12:21:26 +02:00
committed by GitHub
parent 67092c0a1b
commit 217de21605
4 changed files with 82 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/editor-ui/src/components/WorkflowCard.vue
View File

@@ -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,12 +276,14 @@ 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 {
@@ -289,5 +291,8 @@ export default defineComponent({
flex-direction: row;
justify-content: center;
align-items: center;
align-self: stretch;
padding: 0 var(--spacing-s) 0 0;
cursor: default;
}
</style>