opensource/n8n
3
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-09-01 05:38:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(core): Fix for jumpy UI when using drag/drop to fields in NDV (#23516)

Browse Source 
Co-authored-by: Michael Kret <michael.k@radency.com>
This commit is contained in:
Dawid Myslak
2026-01-07 12:25:40 +01:00
committed by GitHub
parent 699698c5ee
commit 4f606d7ae4
8 changed files with 43 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/editor-ui/src/app/components/DropArea/DropArea.vue
+5 -2
View File
@@ -41,13 +41,16 @@ const onDrop = (value: string) => {
}
.droppable {
border-color: var(--ndv--droppable-parameter--color);
border-width: 1.5px;
border-color: transparent;
outline: 1.5px dashed var(--ndv--droppable-parameter--color);
outline-offset: -1.5px;
background: var(--ndv--droppable-parameter--color--background);
}
.active {
border-color: var(--color--success);
border-width: 1px;
background: var(--ndv--droppable-parameter--color--background--active);
outline: none;
}
</style>
packages/frontend/editor-ui/src/features/ndv/parameters/components/ExpressionParameterInput.vue
+9 -4
View File
@@ -315,12 +315,14 @@ defineExpose({ focus, select });
}
.droppable {
--input--border-color: var(--ndv--droppable-parameter--color);
--input--border-right-color: var(--ndv--droppable-parameter--color);
--input--border-style: dashed;
--input--border-color: transparent;
--input--border-right-color: transparent;
:global(.cm-editor) {
border-width: 1.5px;
border-color: transparent;
outline: 1.5px dashed var(--ndv--droppable-parameter--color);
outline-offset: -1.5px;
transition: none;
}
}
@@ -332,7 +334,10 @@ defineExpose({ focus, select });
:global(.cm-editor) {
cursor: grabbing !important;
border-color: var(--color--success);
border-width: 1px;
outline: none;
transition: none;
}
}
</style>
packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInput.vue
+11 -5
View File
@@ -1910,14 +1910,16 @@ onUpdated(async () => {
}
.droppable {
--input--border-color: var(--ndv--droppable-parameter--color);
--input--border-right-color: var(--ndv--droppable-parameter--color);
--input--border-style: dashed;
--input--border-color: transparent;
--input--border-right-color: transparent;
textarea,
input,
.cm-editor {
border-width: 1.5px;
border-color: transparent;
outline: 1.5px dashed var(--ndv--droppable-parameter--color);
outline-offset: -1.5px;
transition: none;
}
}
@@ -1928,9 +1930,13 @@ onUpdated(async () => {
--input--border-style: solid;
textarea,
input {
input,
.cm-editor {
cursor: grabbing !important;
border-color: var(--color--success);
border-width: 1px;
outline: none;
transition: none;
}
}
packages/frontend/editor-ui/src/features/shared/editors/components/CodeNodeEditor/CodeNodeEditor.vue
+4 -3
View File
@@ -341,9 +341,9 @@ defineExpose({
.editorInput.droppable {
:global(.cm-editor) {
border-color: var(--ndv--droppable-parameter--color);
border-style: dashed;
border-width: 1.5px;
border-color: transparent;
outline: 1.5px dashed var(--ndv--droppable-parameter--color);
outline-offset: -1.5px;
}
}
@@ -353,6 +353,7 @@ defineExpose({
border-style: solid;
cursor: grabbing;
border-width: 1px;
outline: none;
}
}
</style>
packages/frontend/editor-ui/src/features/shared/editors/components/CssEditor/CssEditor.vue
+4 -3
View File
@@ -131,9 +131,9 @@ defineExpose({
.droppable {
:global(.cm-editor) {
border-color: var(--ndv--droppable-parameter--color);
border-style: dashed;
border-width: 1.5px;
border-color: transparent;
outline: 1.5px dashed var(--ndv--droppable-parameter--color);
outline-offset: -1.5px;
}
}
@@ -143,6 +143,7 @@ defineExpose({
border-style: solid;
cursor: grabbing;
border-width: 1px;
outline: none;
}
}
</style>
packages/frontend/editor-ui/src/features/shared/editors/components/HtmlEditor/HtmlEditor.vue
+4 -3
View File
@@ -292,9 +292,9 @@ defineExpose({
.droppable {
:global(.cm-editor) {
border-color: var(--ndv--droppable-parameter--color);
border-style: dashed;
border-width: 1.5px;
border-color: transparent;
outline: 1.5px dashed var(--ndv--droppable-parameter--color);
outline-offset: -1.5px;
}
}
@@ -304,6 +304,7 @@ defineExpose({
border-style: solid;
cursor: grabbing;
border-width: 1px;
outline: none;
}
}
</style>
packages/frontend/editor-ui/src/features/shared/editors/components/SqlEditor/SqlEditor.vue
+4 -3
View File
@@ -249,9 +249,9 @@ defineExpose({
.codemirror.droppable {
:global(.cm-editor) {
border-color: var(--ndv--droppable-parameter--color);
border-style: dashed;
border-width: 1.5px;
border-color: transparent;
outline: 1.5px dashed var(--ndv--droppable-parameter--color);
outline-offset: -1.5px;
}
}
@@ -261,6 +261,7 @@ defineExpose({
border-style: solid;
cursor: grabbing;
border-width: 1px;
outline: none;
}
}
</style>
packages/testing/playwright/tests/e2e/workflows/editor/expressions/mapping.spec.ts
+2 -2
View File
@@ -333,10 +333,10 @@ test.describe('Data Mapping', () => {
await expect(n8n.ndv.getParameterTextInput('includeOtherFields')).toBeVisible();
const includeOtherFieldsInput = n8n.ndv.getParameterTextInput('includeOtherFields');
await expect(includeOtherFieldsInput).toHaveCSS('border', /dashed.*rgb\(90, 76, 194\)/);
await expect(includeOtherFieldsInput).toHaveCSS('outline', /rgb\(90, 76, 194\) dashed/);
const valueInput = n8n.ndv.getParameterTextInput('value');
await expect(valueInput).toHaveCSS('border', /dashed.*rgb\(90, 76, 194\)/);
await expect(valueInput).toHaveCSS('outline', /rgb\(90, 76, 194\) dashed/);
await n8n.page.mouse.up();
});