mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor): Add chevron to filter component operator select (#8633)

Browse source
This commit is contained in:
Elias Meire 2024-02-20 15:19:16 +01:00 committed by GitHub
parent b6c8a0c413
commit 20446bdf11
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/editor-ui/src/components/FilterConditions/OperatorSelect.vue
View file

@ -84,12 +84,15 @@ function onGroupSelect(group: string) {
> >
<template #reference> <template #reference>
<div <div
:class="$style.groupTitle" :class="$style.group"
@mouseenter="() => onGroupSelect(group.id)" @mouseenter="() => onGroupSelect(group.id)"
@click="() => onGroupSelect(group.id)" @click="() => onGroupSelect(group.id)"
> >
<n8n-icon v-if="group.icon" :icon="group.icon" color="text-light" size="small" /> <div :class="$style.groupTitle">
<span>{{ i18n.baseText(group.name) }}</span> <n8n-icon v-if="group.icon" :icon="group.icon" color="text-light" size="small" />
<span>{{ i18n.baseText(group.name) }}</span>
</div>
<n8n-icon icon="chevron-right" color="text-light" size="xsmall" />
</div> </div>
</template> </template>
<div> <div>
@ -122,10 +125,11 @@ function onGroupSelect(group: string) {
flex-direction: column; flex-direction: column;
} }
.groupTitle { .group {
display: flex; display: flex;
gap: var(--spacing-2xs); gap: var(--spacing-2xs);
align-items: center; align-items: center;
justify-content: space-between;
font-size: var(--font-size-s); font-size: var(--font-size-s);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
line-height: var(--font-line-height-regular); line-height: var(--font-line-height-regular);
@ -137,4 +141,10 @@ function onGroupSelect(group: string) {
background: var(--color-background-base); background: var(--color-background-base);
} }
} }
.groupTitle {
display: flex;
gap: var(--spacing-2xs);
align-items: center;
}
</style> </style>