From 9bf9d0ee9e16ef08e6e4dc4c8150252aef8a3dd8 Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Wed, 23 Oct 2024 17:38:46 +0300 Subject: [PATCH 1/4] #5985 Drag-drop indicator disappears between questions and panels Fixes #5985 --- .../src/components/question.scss | 14 +++++- testCafe/designer/drag-drop.ts | 47 +++++++++++++++++++ 2 files changed, 60 insertions(+), 1 deletion(-) diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss index 3885d9a391..d4d689153e 100644 --- a/packages/survey-creator-core/src/components/question.scss +++ b/packages/survey-creator-core/src/components/question.scss @@ -38,6 +38,18 @@ svc-question { } } } + &:before { + position: absolute; + content: ""; + width: 100%; + height: 100%; + margin-top: calcSize(-2); + padding-top: calcSize(2); + margin-left: calcSize(-2); + padding-left: calcSize(2); + bottom: 0; + right: 0; + } } .svc-question__adorner { @@ -584,7 +596,7 @@ svc-question { } .svc-question__drop-indicator--top { - top: -9px; + top: -8px; } .svc-question__drop-indicator--bottom { diff --git a/testCafe/designer/drag-drop.ts b/testCafe/designer/drag-drop.ts index 30eec84258..379298a44c 100644 --- a/testCafe/designer/drag-drop.ts +++ b/testCafe/designer/drag-drop.ts @@ -1914,6 +1914,53 @@ test("Drag Drop indicator - rows", async (t) => { .expect(Selector(".svc-row").nth(1).hasClass("svc-row--drag-over-bottom")).notOk(); }); +test("Drag Drop indicator - between questions", async (t) => { + await t.resizeWindow(1600, 1000); + const json = { + "logoPosition": "right", + "pages": [ + { + "name": "page1", + "elements": [ + { + "type": "text", + "name": "question1" + }, + { + "type": "text", + "name": "question2", + "startWithNewLine": false + }, + { + "type": "text", + "name": "question3" + } + ] + } + ] + }; + await setJSON(json); + + const toolboxToolAction = Selector(".svc-toolbox__tool > .sv-action__content"); + + await t.expect(Selector(".svc-question__adorner").visible).ok(); + + const questionRectRight = await Selector(".svc-question__adorner").getBoundingClientRectProperty("right"); + const questionRectBottom = await Selector(".svc-question__adorner").getBoundingClientRectProperty("bottom"); + await t + .hover(toolboxToolAction) + .dispatchEvent(toolboxToolAction, "pointerdown") + .hover(Selector("#survey-creator"), { offsetX: Math.round(questionRectRight) + 8, offsetY: Math.round(questionRectBottom) - 100 }) + .expect(Selector(".svc-question__content").nth(1).hasClass("svc-question__content--drag-over-left")).ok(); + + await t + .hover(toolboxToolAction) + .dispatchEvent(toolboxToolAction, "pointerdown") + .hover(Selector("#survey-creator"), { offsetX: Math.round(questionRectRight) - 100, offsetY: Math.round(questionRectBottom) + 8 }) + .expect(Selector(".svc-question__content").nth(2).hasClass("svc-question__content--drag-over-top")).ok(); + +}); + test("Drag Drop page with other pages collapsed on start drag", async (t) => { await ClientFunction(() => { window["creator"].expandCollapseButtonVisibility = "always"; From 747eea6028f2e0c4a32efd2fc62cf2bdb5f005bf Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Wed, 23 Oct 2024 18:57:07 +0300 Subject: [PATCH 2/4] #5985 fixed row click offset in v-test Fixes #5985 --- visualRegressionTests/tests/designer/surface.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/visualRegressionTests/tests/designer/surface.ts b/visualRegressionTests/tests/designer/surface.ts index 0646186785..aff440962c 100644 --- a/visualRegressionTests/tests/designer/surface.ts +++ b/visualRegressionTests/tests/designer/surface.ts @@ -852,7 +852,7 @@ test("Matrix dynamic with detail two questions + select", async (t) => { ], }; await setJSON(json); - await t.click(Selector(".sd-table__cell--detail-panel .svc-row").nth(0), { offsetX: -5, offsetY: -5 }) + await t.click(Selector(".sd-table__cell--detail-panel .svc-row").nth(0), { offsetX: -25, offsetY: -25 }) .expect(Selector(".svc-question__content--selected").visible).ok(); await takeElementScreenshot("surface-matrix-detail-two-questions-select.png", Selector(".svc-question__content"), t, comparer); }); From b40b907928580d8b0a5498517219ac381c72e384 Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Wed, 23 Oct 2024 23:08:51 +0300 Subject: [PATCH 3/4] #5985 - fixed placeholder interactivity and indicator position --- packages/survey-creator-core/src/components/question.scss | 3 ++- packages/survey-creator-core/src/components/row.scss | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss index d4d689153e..440343cae8 100644 --- a/packages/survey-creator-core/src/components/question.scss +++ b/packages/survey-creator-core/src/components/question.scss @@ -596,7 +596,7 @@ svc-question { } .svc-question__drop-indicator--top { - top: -8px; + top: -9px; } .svc-question__drop-indicator--bottom { @@ -939,6 +939,7 @@ svc-question, display: flex; flex-grow: 1; box-sizing: border-box; + position: relative; } .svc-question__content--empty-template { diff --git a/packages/survey-creator-core/src/components/row.scss b/packages/survey-creator-core/src/components/row.scss index defa154aa0..ab1cf350d3 100644 --- a/packages/survey-creator-core/src/components/row.scss +++ b/packages/survey-creator-core/src/components/row.scss @@ -95,7 +95,7 @@ } .svc-row__drop-indicator--bottom { - bottom: -10px; + bottom: -9px; } .svc-row--drag-over-top { From 8bb451c09c578638e13b3795ad2cb3b80aa84723 Mon Sep 17 00:00:00 2001 From: Aleksey Novikov Date: Wed, 23 Oct 2024 23:11:30 +0300 Subject: [PATCH 4/4] #5985 - fixed drag indicator --- packages/survey-creator-core/src/components/row.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/survey-creator-core/src/components/row.scss b/packages/survey-creator-core/src/components/row.scss index ab1cf350d3..ceb5796952 100644 --- a/packages/survey-creator-core/src/components/row.scss +++ b/packages/survey-creator-core/src/components/row.scss @@ -91,7 +91,7 @@ } .svc-row__drop-indicator--top { - top: 6px; + top: 7px; } .svc-row__drop-indicator--bottom {