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): Fix square button layout (no-changelog) (#14671)

Browse Source 
Co-authored-by: Csaba Tuncsik <csaba.tuncsik@gmail.com>
This commit is contained in:
Raúl Gómez Morales
2025-04-17 19:46:53 +02:00
committed by GitHub
parent e6f26b895d
commit e1632348f2
6 changed files with 29 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { useCssModule, computed, useAttrs, watchEffect } from 'vue'; import { computed, useAttrs, useCssModule, watchEffect } from 'vue';
import type { ButtonProps } from '@n8n/design-system/types/button'; import type { ButtonProps } from '@n8n/design-system/types/button';
@@ -71,9 +71,8 @@ const classes = computed(() => {
<N8nSpinner v-if="loading" :size="iconSize" /> <N8nSpinner v-if="loading" :size="iconSize" />
<N8nIcon v-else-if="icon" :icon="icon" :size="iconSize" /> <N8nIcon v-else-if="icon" :icon="icon" :size="iconSize" />
</span> </span>
<span v-if="label || $slots.default"> <span v-if="label">{{ label }}</span>
<slot>{{ label }}</slot> <template v-else-if="$slots.default"><slot /></template>
</span>
</component> </component>
</template> </template>

6
packages/frontend/@n8n/design-system/src/components/N8nButton/__snapshots__/Button.test.ts.snap
View File

@@ -1,8 +1,8 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button class="button button primary medium withIcon" aria-live="polite"><span class="icon"><n8n-icon-stub icon="plus-circle" size="medium" spin="false"></n8n-icon-stub></span><span>Button</span></button>"`; exports[`components > N8nButton > props > icon > should render icon button 1`] = `"<button class="button button primary medium withIcon" aria-live="polite"><span class="icon"><n8n-icon-stub icon="plus-circle" size="medium" spin="false"></n8n-icon-stub></span>Button</button>"`;
exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button class="button button primary medium loading withIcon" disabled="" aria-busy="true" aria-live="polite"><span class="icon"><n8n-spinner-stub size="medium" type="dots"></n8n-spinner-stub></span><span>Button</span></button>"`; exports[`components > N8nButton > props > loading > should render loading spinner 1`] = `"<button class="button button primary medium loading withIcon" disabled="" aria-busy="true" aria-live="polite"><span class="icon"><n8n-spinner-stub size="medium" type="dots"></n8n-spinner-stub></span>Button</button>"`;
exports[`components > N8nButton > props > square > should render square button 1`] = ` exports[`components > N8nButton > props > square > should render square button 1`] = `
"<button class="button button primary medium square" aria-live="polite"> "<button class="button button primary medium square" aria-live="polite">
@@ -12,6 +12,6 @@ exports[`components > N8nButton > props > square > should render square button 1
exports[`components > N8nButton > should render correctly 1`] = ` exports[`components > N8nButton > should render correctly 1`] = `
"<button class="button button primary medium" aria-live="polite"> "<button class="button button primary medium" aria-live="polite">
<!--v-if--><span>Button</span> <!--v-if-->Button
</button>" </button>"
`; `;

4
packages/frontend/editor-ui/src/components/__snapshots__/InputPanel.test.ts.snap
View File

@@ -137,9 +137,7 @@ exports[`InputPanel > should render 1`] = `
> >
<!--v-if--> <!--v-if-->
<span> <span>
Cancel Cancel
</span> </span>
</button> </button>
<button <button
@@ -149,9 +147,7 @@ exports[`InputPanel > should render 1`] = `
> >
<!--v-if--> <!--v-if-->
<span> <span>
Save Save
</span> </span>
</button> </button>
</div> </div>

2
packages/frontend/editor-ui/src/components/__snapshots__/VirtualSchema.test.ts.snap
View File

@@ -2820,9 +2820,7 @@ exports[`VirtualSchema.vue > renders schema with spaces and dots 1`] = `
> >
<!--v-if--> <!--v-if-->
<span> <span>
Execute previous nodes Execute previous nodes
</span> </span>
</button> </button>
<!--teleport start--> <!--teleport start-->

4
packages/frontend/editor-ui/src/components/canvas/elements/buttons/__snapshots__/CanvasControlButtons.test.ts.snap
View File

@@ -21,7 +21,9 @@ exports[`CanvasControlButtons > should render correctly 1`] = `
<!--teleport start--> <!--teleport start-->
<!--teleport end--> <!--teleport end-->
<!--v-if--><button class="button button tertiary large square iconButton el-tooltip__trigger el-tooltip__trigger iconButton el-tooltip__trigger el-tooltip__trigger" aria-live="polite" data-test-id="tidy-up-button"> <!--v-if--><button class="button button tertiary large square iconButton el-tooltip__trigger el-tooltip__trigger iconButton el-tooltip__trigger el-tooltip__trigger" aria-live="polite" data-test-id="tidy-up-button">
<!--v-if--><span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M1.6.13c-.18-.17-.47-.18-.62 0L.56.57.14.98c-.2.15-.18.44 0 .62l3.63 3.6c.1.1.1.27 0 .37-.2.2-.53.52-.93.94-.56.57-.12 1.62.22 2.11.05.07.12.1.2.1.05-.01.1-.04.15-.08l5.23-5.22c.1-.1.1-.26-.02-.34-.5-.34-1.55-.78-2.12-.22-.42.4-.75.73-.94.93-.1.1-.27.1-.37 0L1.6.13ZM9.5 3.9c.07-.09.2-.1.3-.04l6.07 3.44c.15.08.18.29.05.4l-1.21 1.22a.26.26 0 0 1-.26.07l-2.18-.64a.26.26 0 0 0-.32.33l.76 2.02c.04.1.01.2-.06.27L7.7 15.92a.26.26 0 0 1-.41-.05L3.83 9.8a.26.26 0 0 1 .04-.3l5.62-5.6Z"></path></svg></span> <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill="currentColor" d="M1.6.13c-.18-.17-.47-.18-.62 0L.56.57.14.98c-.2.15-.18.44 0 .62l3.63 3.6c.1.1.1.27 0 .37-.2.2-.53.52-.93.94-.56.57-.12 1.62.22 2.11.05.07.12.1.2.1.05-.01.1-.04.15-.08l5.23-5.22c.1-.1.1-.26-.02-.34-.5-.34-1.55-.78-2.12-.22-.42.4-.75.73-.94.93-.1.1-.27.1-.37 0L1.6.13ZM9.5 3.9c.07-.09.2-.1.3-.04l6.07 3.44c.15.08.18.29.05.4l-1.21 1.22a.26.26 0 0 1-.26.07l-2.18-.64a.26.26 0 0 0-.32.33l.76 2.02c.04.1.01.2-.06.27L7.7 15.92a.26.26 0 0 1-.41-.05L3.83 9.8a.26.26 0 0 1 .04-.3l5.62-5.6Z"></path>
</svg>
</button> </button>
<!--teleport start--> <!--teleport start-->
<!--teleport end--> <!--teleport end-->

23
packages/frontend/editor-ui/src/components/executions/ExecutionsFilter.vue
View File

@@ -166,11 +166,17 @@ onBeforeMount(() => {
square square
:active="!!countSelectedFilterProps" :active="!!countSelectedFilterProps"
data-test-id="executions-filter-button" data-test-id="executions-filter-button"
:class="$style.filterButton"
> >
<template v-if="!!countSelectedFilterProps" #default> <template v-if="!!countSelectedFilterProps" #default>
<n8n-badge theme="primary" class="mr-4xs" data-test-id="execution-filter-badge">{{ <n8n-badge
countSelectedFilterProps theme="primary"
}}</n8n-badge> class="mr-4xs"
data-test-id="execution-filter-badge"
:class="$style.filterBadge"
>
{{ countSelectedFilterProps }}
</n8n-badge>
</template> </template>
</n8n-button> </n8n-button>
</template> </template>
@@ -401,6 +407,17 @@ onBeforeMount(() => {
.tooltipIcon { .tooltipIcon {
color: var(--color-text-light); color: var(--color-text-light);
} }
.filterButton {
position: relative;
.filterBadge {
position: absolute;
top: 0;
right: -4px;
transform: translate(50%, -50%);
}
}
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>