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 6d69c2b567..674963f4a0 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts @@ -129,6 +129,7 @@ import IconLucideMousePointer from '~icons/lucide/mouse-pointer'; import IconLucideNetwork from '~icons/lucide/network'; import IconLucidePackageOpen from '~icons/lucide/package-open'; import IconLucidePalette from '~icons/lucide/palette'; +import IconLucidePanelRight from '~icons/lucide/panel-right'; import IconLucidePause from '~icons/lucide/pause'; import IconLucidePen from '~icons/lucide/pen'; import IconLucidePencil from '~icons/lucide/pencil'; @@ -524,6 +525,7 @@ export const updatedIconSet = { network: IconLucideNetwork, 'package-open': IconLucidePackageOpen, palette: IconLucidePalette, + 'panel-right': IconLucidePanelRight, pause: IconLucidePause, pen: IconLucidePen, pencil: IconLucidePencil, diff --git a/packages/frontend/@n8n/i18n/src/locales/en.json b/packages/frontend/@n8n/i18n/src/locales/en.json index a38bb58ab2..74d8103883 100644 --- a/packages/frontend/@n8n/i18n/src/locales/en.json +++ b/packages/frontend/@n8n/i18n/src/locales/en.json @@ -1497,8 +1497,8 @@ "nodeView.couldntImportWorkflow": "Could not import workflow", "nodeView.couldntLoadWorkflow.invalidWorkflowObject": "Invalid workflow object", "nodeView.deletesTheCurrentExecutionData": "Deletes the current execution data", - "nodeView.focusPanel.title": "Focus", - "nodeView.focusPanel.noParameters": "No parameters focused. Focus a parameter by clicking on the action dropdown in the node detail view.", + "nodeView.focusPanel.noParameters.title": "Show a node parameter here, to iterate easily", + "nodeView.focusPanel.noParameters.subtitle": "For example, keep your prompt always visible so you can run the workflow while tweaking it", "nodeView.focusPanel.missingParameter": "This parameter is no longer visible on the node. A related parameter was likely changed, removing this one.", "nodeView.itLooksLikeYouHaveBeenEditingSomething": "It looks like you made some edits. If you leave before saving, your changes will be lost.", "nodeView.loadingTemplate": "Loading template", diff --git a/packages/frontend/editor-ui/src/components/FocusPanel.vue b/packages/frontend/editor-ui/src/components/FocusPanel.vue index b43be1f3df..6f47f41fb3 100644 --- a/packages/frontend/editor-ui/src/components/FocusPanel.vue +++ b/packages/frontend/editor-ui/src/components/FocusPanel.vue @@ -314,14 +314,6 @@ const onResizeThrottle = useThrottleFn(onResize, 10); @resize="onResizeThrottle" >
-
- - {{ locale.baseText('nodeView.focusPanel.title') }} - -
- -
-
@@ -330,17 +322,26 @@ const onResizeThrottle = useThrottleFn(onResize, 10); {{ resolvedParameter.node.name }}
- +
+ + +
@@ -448,8 +449,32 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
- - {{ locale.baseText('nodeView.focusPanel.noParameters') }} +
+
+ + +
+ + +
+ + {{ locale.baseText('nodeView.focusPanel.noParameters.title') }} + + + {{ locale.baseText('nodeView.focusPanel.noParameters.subtitle') }}
@@ -463,7 +488,7 @@ const onResizeThrottle = useThrottleFn(onResize, 10); display: flex; flex-direction: row nowrap; border-left: 1px solid var(--color-foreground-base); - background: var(--color-foreground-light); + background: var(--color-background-xlight); overflow-y: hidden; height: 100%; } @@ -474,18 +499,6 @@ const onResizeThrottle = useThrottleFn(onResize, 10); height: 100%; } -.closeButton:hover { - cursor: pointer; -} - -.header { - display: flex; - padding: var(--spacing-2xs); - justify-content: space-between; - border-bottom: 1px solid var(--color-foreground-base); - background: var(--color-foreground-xlight); -} - .content { display: flex; flex-direction: column; @@ -498,7 +511,35 @@ const onResizeThrottle = useThrottleFn(onResize, 10); align-items: center; .emptyText { - max-width: 300px; + margin: 0 var(--spacing-xl); + display: flex; + flex-direction: column; + gap: var(--spacing-2xs); + + .focusParameterWrapper { + display: flex; + align-items: center; + justify-content: center; + gap: var(--spacing-2xs); + margin-bottom: var(--spacing-m); + + .iconWrapper { + position: relative; + display: inline-block; + } + + .pointerIcon { + position: absolute; + top: 100%; + left: 50%; + transform: translate(-20%, -30%); + pointer-events: none; + } + + :global([class*='_disabled_']) { + cursor: default !important; + } + } } } @@ -517,8 +558,8 @@ const onResizeThrottle = useThrottleFn(onResize, 10); .buttonWrapper { display: flex; - padding: 6px 8px 6px 34px; - justify-content: flex-end; + gap: var(--spacing-2xs); + align-items: center; } } @@ -545,6 +586,7 @@ const onResizeThrottle = useThrottleFn(onResize, 10); font-size: var(--font-size-2xs); :global(.cm-editor) { + background-color: var(--color-code-background); width: 100%; } } @@ -552,7 +594,17 @@ const onResizeThrottle = useThrottleFn(onResize, 10); } } +.closeButton { + cursor: pointer; +} + .heightFull { height: 100%; } + +.forceHover { + color: var(--color-button-secondary-hover-active-focus-font); + border-color: var(--color-button-secondary-hover-active-focus-border); + background-color: var(--color-button-secondary-hover-active-focus-background); +} diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreation.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreation.vue index 063a572e98..6bd0ef7b16 100644 --- a/packages/frontend/editor-ui/src/components/Node/NodeCreation.vue +++ b/packages/frontend/editor-ui/src/components/Node/NodeCreation.vue @@ -135,7 +135,7 @@ function onAskAssistantButtonClick() {