diff --git a/functionalTests/designer/drag-drop.ts b/functionalTests/designer/drag-drop.ts index 30eec84258..379298a44c 100644 --- a/functionalTests/designer/drag-drop.ts +++ b/functionalTests/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"; diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss index 6b3fed31a1..be611a3a64 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 { @@ -923,6 +935,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..ceb5796952 100644 --- a/packages/survey-creator-core/src/components/row.scss +++ b/packages/survey-creator-core/src/components/row.scss @@ -91,11 +91,11 @@ } .svc-row__drop-indicator--top { - top: 6px; + top: 7px; } .svc-row__drop-indicator--bottom { - bottom: -10px; + bottom: -9px; } .svc-row--drag-over-top { 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); });