admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-19 11:01:15 +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

54
packages/editor-ui/src/components/CredentialCard.vue
View File

@@ -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>