diff --git a/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts b/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts index 9017221879..54a1bd84ca 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts @@ -41,6 +41,7 @@ import IconLucideAtSign from '~icons/lucide/at-sign'; import IconLucideBan from '~icons/lucide/ban'; import IconLucideBell from '~icons/lucide/bell'; import IconLucideBook from '~icons/lucide/book'; +import IconLucideBookOpen from '~icons/lucide/book-open'; import IconLucideBot from '~icons/lucide/bot'; import IconLucideBox from '~icons/lucide/box'; import IconLucideBraces from '~icons/lucide/braces'; @@ -163,6 +164,7 @@ import IconLucideScissors from '~icons/lucide/scissors'; import IconLucideSearch from '~icons/lucide/search'; import IconLucideSend from '~icons/lucide/send'; import IconLucideServer from '~icons/lucide/server'; +import IconLucideSettings from '~icons/lucide/settings'; import IconLucideShare from '~icons/lucide/share'; import IconLucideSlidersHorizontal from '~icons/lucide/sliders-horizontal'; import IconLucideSmile from '~icons/lucide/smile'; @@ -451,6 +453,7 @@ export const updatedIconSet = { ban: IconLucideBan, bell: IconLucideBell, book: IconLucideBook, + 'book-open': IconLucideBookOpen, bot: IconLucideBot, box: IconLucideBox, brain: IconLucideBrain, @@ -570,6 +573,7 @@ export const updatedIconSet = { scale: IconLucideScale, scissors: IconLucideScissors, search: IconLucideSearch, + settings: IconLucideSettings, send: IconLucideSend, server: IconLucideServer, share: IconLucideShare, diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.stories.ts b/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.stories.ts index dbe6d18595..30b9135a45 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.stories.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.stories.ts @@ -35,6 +35,7 @@ const Template: StoryFn = (args, { argTypes }) => ({ export const Example = Template.bind({}); Example.args = { + modelValue: 'first', options: [ { label: 'First', @@ -104,23 +105,27 @@ const options: Array> = [ export const TabVariants = Template.bind({}); TabVariants.args = { + modelValue: 'first', options, }; export const WithSmallSize = Template.bind({}); WithSmallSize.args = { + modelValue: 'first', options, size: 'small', }; export const WithModernVariant = Template.bind({}); WithModernVariant.args = { + modelValue: 'first', variant: 'modern', options, }; export const WithSmallAndModern = Template.bind({}); WithSmallAndModern.args = { + modelValue: 'first', variant: 'modern', options, size: 'small', diff --git a/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue b/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue index c535a9db71..40639dc65d 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.vue @@ -188,6 +188,10 @@ const scrollRight = () => scroll(50); /* Hide scrollbar for IE, Edge and Firefox */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ + + .small.modern & { + gap: var(--spacing-xs); + } } .tab { @@ -219,6 +223,10 @@ const scrollRight = () => scroll(50); .small & { font-size: var(--font-size-2xs); } + + .small.modern & { + padding-inline: 0; + } } .activeTab { diff --git a/packages/frontend/@n8n/i18n/src/locales/en.json b/packages/frontend/@n8n/i18n/src/locales/en.json index 769d12d5ec..e5f50e23c6 100644 --- a/packages/frontend/@n8n/i18n/src/locales/en.json +++ b/packages/frontend/@n8n/i18n/src/locales/en.json @@ -1470,7 +1470,10 @@ "nodeSettings.notesInFlow.description": "If active, the note above will display in the flow as a subtitle", "nodeSettings.notesInFlow.displayName": "Display Note in Flow?", "nodeSettings.parameters": "Parameters", + "nodeSettings.parametersShort": "Params", "nodeSettings.settings": "Settings", + "nodeSettings.action": "Action", + "nodeSettings.credential": "Auth", "nodeSettings.communityNodeTooltip": "This is a community node", "nodeSettings.retryOnFail.description": "If active, the node tries to execute again when it fails", "nodeSettings.retryOnFail.displayName": "Retry On Fail", diff --git a/packages/frontend/editor-ui/src/components/NodeActionsList.vue b/packages/frontend/editor-ui/src/components/NodeActionsList.vue new file mode 100644 index 0000000000..c79334c9e2 --- /dev/null +++ b/packages/frontend/editor-ui/src/components/NodeActionsList.vue @@ -0,0 +1,143 @@ + + + + + diff --git a/packages/frontend/editor-ui/src/components/NodeCredentials.vue b/packages/frontend/editor-ui/src/components/NodeCredentials.vue index 9f1e04c541..fccea5b36b 100644 --- a/packages/frontend/editor-ui/src/components/NodeCredentials.vue +++ b/packages/frontend/editor-ui/src/components/NodeCredentials.vue @@ -1,7 +1,6 @@