admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-16 17:46:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(editor): Increase trigger dropdown width (#18121)

Browse Source
This commit is contained in:
Suguru Inoue
2025-08-08 13:21:12 +02:00
committed by GitHub
parent 7e4c5af383
commit bb3aa18e75
3 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
View File

@@ -28,6 +28,7 @@ interface ActionDropdownProps {
hideArrow?: boolean;
teleported?: boolean;
disabled?: boolean;
extraPopperClass?: string;
}
const props = withDefaults(defineProps<ActionDropdownProps>(), {
@@ -67,7 +68,8 @@ defineSlots<{
const elementDropdown = ref<InstanceType<typeof ElDropdown>>();
const popperClass = computed(
() => `${$style.shadow}${props.hideArrow ? ` ${$style.hideArrow}` : ''}`,
() =>
`${$style.shadow}${props.hideArrow ? ` ${$style.hideArrow}` : ''} ${props.extraPopperClass ?? ''}`,
);
const onSelect = (action: string) => emit('select', action);
@@ -127,7 +129,12 @@ defineExpose({ open, close });
{{ item.label }}
</slot>
</span>
<N8nIcon v-if="item.checked" icon="check" :size="iconSize" />
<N8nIcon
v-if="item.checked"
:class="$style.checkIcon"
icon="check"
:size="iconSize"
/>
<span v-if="item.badge">
<N8nBadge theme="primary" size="xsmall" v-bind="item.badgeProps">
{{ item.badge }}
@@ -200,6 +207,11 @@ defineExpose({ open, close });
}
}
.checkIcon {
flex-grow: 0;
flex-shrink: 0;
}
.shortcut {
display: flex;
}

4
packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/__snapshots__/ActionDropdown.test.ts.snap
View File

@@ -2,12 +2,12 @@
exports[`components > N8nActionDropdown > should render custom styling correctly 1`] = `
"<div class="action-dropdown-container actionDropdownContainer">
<el-dropdown-stub trigger="click" effect="light" placement="bottom" popperoptions="[object Object]" size="" splitbutton="false" hideonclick="true" loop="true" showtimeout="150" hidetimeout="150" tabindex="0" maxheight="" popperclass="shadow" disabled="false" role="menu" teleported="true"></el-dropdown-stub>
<el-dropdown-stub trigger="click" effect="light" placement="bottom" popperoptions="[object Object]" size="" splitbutton="false" hideonclick="true" loop="true" showtimeout="150" hidetimeout="150" tabindex="0" maxheight="" popperclass="shadow " disabled="false" role="menu" teleported="true"></el-dropdown-stub>
</div>"
`;
exports[`components > N8nActionDropdown > should render default styling correctly 1`] = `
"<div class="action-dropdown-container actionDropdownContainer">
<el-dropdown-stub trigger="click" effect="light" placement="bottom" popperoptions="[object Object]" size="" splitbutton="false" hideonclick="true" loop="true" showtimeout="150" hidetimeout="150" tabindex="0" maxheight="" popperclass="shadow" disabled="false" role="menu" teleported="true"></el-dropdown-stub>
<el-dropdown-stub trigger="click" effect="light" placement="bottom" popperoptions="[object Object]" size="" splitbutton="false" hideonclick="true" loop="true" showtimeout="150" hidetimeout="150" tabindex="0" maxheight="" popperclass="shadow " disabled="false" role="menu" teleported="true"></el-dropdown-stub>
</div>"
`;

8
packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasRunWorkflowButton.vue
View File

@@ -51,7 +51,7 @@ const actions = computed(() =>
return aY === bY ? aX - bX : aY - bY;
})
.map<ActionDropdownItem>((node) => ({
label: truncateBeforeLast(node.name, 25),
label: truncateBeforeLast(node.name, 50),
disabled: !!node.disabled || props.executing,
id: node.name,
checked: props.selectedTriggerNodeName === node.name,
@@ -112,6 +112,7 @@ function getNodeTypeByName(name: string): INodeTypeDescription | null {
:items="actions"
:disabled="disabled"
placement="top"
:extra-popper-class="$style.menuPopper"
@select="emit('selectTriggerNode', $event)"
>
<template #activator>
@@ -174,6 +175,11 @@ function getNodeTypeByName(name: string): INodeTypeDescription | null {
height: 100%;
}
.menuPopper {
// Width upper bound is enforced by char count instead
max-width: none !important;
}
.menuItem {
display: flex;
align-items: center;