mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-24 20:24:05 -08:00
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. 
This commit is contained in:
Csaba Tuncsik
GitHub
parent
67092c0a1b
commit
217de21605
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
.cardDescription {
|
||||
min-height: 19px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0 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>
|
||||
|
|
|
|||
|
|
@ -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,12 +200,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 {
|
||||
|
|
@ -214,5 +215,7 @@ export default defineComponent({
|
|||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 var(--spacing-s) 0 0;
|
||||
cursor: default;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue