Fix page's jump when adding new page (#6539)

* Fix page's jump when adding new page

* Update etalons

* Fix placeholder paddings

* Update zoom-in/out etalons

* Update legacy etalons

* Fix blinking functional test

* Update etalons

* Update legacy etalons

* Update etalons

functionalTests/designer/drag-drop.ts

@@ -108,118 +108,118 @@ test("Drag Drop Toolbox All Questions", async (t) => {
 
   await t
     .hover(CheckboxItem)
-    .dragToElement(CheckboxItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(CheckboxItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(2);
 
   await t
     .hover(RadiogroupItem)
-    .dragToElement(RadiogroupItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(RadiogroupItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(3);
 
   await t
     .hover(DropdownItem)
-    .dragToElement(DropdownItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(DropdownItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(4);
 
   await t
     .hover(CommentItem)
-    .dragToElement(CommentItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(CommentItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(5);
   await t.scrollIntoView(newGhostPagePage);
 
   await t
     .hover(RatingToolboxItem)
-    .dragToElement(RatingToolboxItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(RatingToolboxItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(6);
 
   await t
     .hover(RankingItem)
-    .dragToElement(RankingItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(RankingItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(7);
 
   await t
     .hover(SingleInputToolboxItem)
-    .dragToElement(SingleInputToolboxItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(SingleInputToolboxItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(8);
 
   await t
     .hover(HtmlItem)
-    .dragToElement(HtmlItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(HtmlItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(9);
 
   await t
     .hover(SignatureItem)
-    .dragToElement(SignatureItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(SignatureItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(10);
 
   await t
     .hover(ExpressionItem)
-    .dragToElement(ExpressionItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(ExpressionItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(11);
 
   await t
     .hover(FileItem)
-    .dragToElement(FileItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(FileItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(12);
 
   await t
     .hover(MatrixSingleChoiceItem)
-    .dragToElement(MatrixSingleChoiceItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(MatrixSingleChoiceItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(13);
 
   await t
     .hover(MatrixMultipleChoiceItem)
-    .dragToElement(MatrixMultipleChoiceItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(MatrixMultipleChoiceItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(14);
 
   await t
     .hover(MatrixDynamicRowsItem)
-    .dragToElement(MatrixDynamicRowsItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(MatrixDynamicRowsItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(15);
 
   await t
     .hover(MultipleTextItem)
-    .dragToElement(MultipleTextItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(MultipleTextItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(16);
 
   await t
     .hover(PanelItem)
-    .dragToElement(PanelItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(PanelItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(17);
 
   await t
     .hover(PanelDynamicItem)
-    .dragToElement(PanelDynamicItem, newGhostPagePage, { speed: 0.5 });
+    .dragToElement(PanelDynamicItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 });
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(18);
 
   await t
     .hover(BooleanItem)
-    .dragToElement(BooleanItem, newGhostPagePage, { speed: 0.5 })
+    .dragToElement(BooleanItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 })
     .wait(150);
 
   pagesLength = await getPagesLength();
   await t.expect(pagesLength).eql(19);
 
   await t
     .hover(ImageItem)
-    .dragToElement(BooleanItem, newGhostPagePage, { speed: 0.5 })
+    .dragToElement(BooleanItem, newGhostPagePage, { speed: 0.5, destinationOffsetY: -50 })
     .wait(150);
 
   pagesLength = await getPagesLength();

packages/survey-creator-core/src/components/page.scss

@@ -238,12 +238,16 @@ svc-page {
 .svc-page__content--new.svc-page__content--new {
   box-shadow: none;
   background-color: transparent;
-  padding-top: var(--ctr-survey-page-margin-top, var(--lbr-spacing-x2));
   padding-bottom: var(--ctr-survey-page-margin-bottom-new-page, var(--lbr-spacing-x9));
   .svc-page-toolbar {
     display: none;
   }
 }
+.svc-designer-placeholder-page {
+  .svc-page__content--new.svc-page__content--new {
+    padding-top: var(--ctr-survey-page-margin-top, var(--lbr-spacing-x2));
+  }
+}
 
 .svc-page__content--selected,
 .svc-hovered.svc-page__content {
@@ -303,7 +307,8 @@ svc-page {
   }
 
   &.svc-page__content--collapsed-drag-over-inside {
-    box-shadow: 0 0 0 var(--ctr-survey-page-border-width-overing, var(--lbr-stroke-x2)) var(--ctr-survey-page-border-color-overing, var(--sjs-primary-background-500, #19b394ff));
+    box-shadow: 0 0 0 var(--ctr-survey-page-border-width-overing, var(--lbr-stroke-x2))
+      var(--ctr-survey-page-border-color-overing, var(--sjs-primary-background-500, #19b394ff));
     background: var(--ctr-survey-page-background-color-overing, var(--sjs-primary-background-10, #19b3941a));
     animation: collapsed-drag-over-inside-blinking 1s infinite;
     outline-color: transparent;
@@ -340,7 +345,8 @@ svc-page {
 
   .svc-page__content:not(.svc-page__content--new):focus,
   .svc-hovered.svc-page__content:not(.svc-page__content--new) {
-    box-shadow: 0 0 0 2px inset var(--ctr-survey-page-border-color-hovered, var(--sjs-secondary-background-25, #19b39440));
+    box-shadow: 0 0 0 2px inset
+      var(--ctr-survey-page-border-color-hovered, var(--sjs-secondary-background-25, #19b39440));
   }
 }
 
@@ -441,7 +447,12 @@ svc-page {
   width: 100%;
   height: var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2));
   left: 0;
-  top: calc(calc(var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) + var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2))) / -2);
+  top: calc(
+    calc(
+        var(--lbr-page-layout-gap-medium, var(--lbr-spacing-x2)) +
+          var(--ctr-survey-drop-indicator-width, var(--lbr-stroke-x2))
+      ) / -2
+  );
 }
 
 .svc-page--drag-over-empty-no-add-button:after {
@@ -564,12 +575,20 @@ $svc-page-move-out-delay: var(--sjs-svc-page-move-out-delay, 100ms);
   --fade-animation-delay: 0s;
   --move-animation-delay: #{$svc-page-move-out-delay};
 }
+.svc-page__content {
+  transition-property: padding-bottom;
+  transition-duration: $svc-page-move-in-duration;
+  transition-timing-function: $ease-out;
+}
 
 .svc-creator--disable-animations {
   .svc-page--enter,
   .svc-page--leave {
     animation: none;
   }
+  .svc-page__content {
+    transition: none;
+  }
 }
 
 .svc-page--enter.svc-page--enter {