Merge branch 'MC-5423-staging-issues' of github.com:magento-obsessive-owls/magento2-page-builder into cms-team-1-delivery

Author: anthoula

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderStageSection.xml

@@ -11,7 +11,7 @@
     <section name="PageBuilderStage">
         <element name="imageSource" type="text" selector="//img[contains(@src,'{{var1}}')]" parameterized="true"/>
         <element name="openFullScreen" type="button" selector="//i[@class='icon-pagebuilder-fullscreen']"/>
-        <element name="exitFullScreen" type="button" selector=".pagebuilder-header .action-close"/>
+        <element name="exitFullScreen" type="button" selector=".pagebuilder-header .icon-pagebuilder-fullscreen-exit"/>
         <element name="stageLoading" type="button" selector="div.pagebuilder-stage-loading"/>
         <element name="stageWrapper" type="button" selector="//div[@class='pagebuilder-stage-wrapper']"/>
         <element name="enabled" type="button" selector="//div[not(contains(@class, '_disabled'))]/div[contains(@class, 'pagebuilder-wysiwyg-wrapper')]/div[@class='pagebuilder-stage-wrapper']"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderPanelTest.xml

@@ -437,6 +437,7 @@
             <argument name="contentType" value="PageBuilderRowContentType"/>
         </actionGroup>
         <click selector="{{PageBuilderStage.openFullScreen}}" stepKey="enterFullScreen"/>
+        <waitForElementVisible selector="{{PageBuilderStage.exitFullScreen}}" stepKey="waitForExitVisible"/>
         <scrollTo selector="{{RowOnStage.base('6')}}" stepKey="scrollToBottom"/>
         <seeElement selector="{{PageBuilderStage.exitFullScreen}}" stepKey="verifyHeader"/>
     </test>

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less

@@ -6,6 +6,7 @@
 @border-size: 2px;
 
 .pagebuilder-header {
+    margin-bottom: 15px;
     text-align: right;
 
     > .icon-pagebuilder-fullscreen {
@@ -23,14 +24,20 @@
 }
 
 .pagebuilder-stage-wrapper {
+    -moz-transition: .35s ease-in-out;
+    -webkit-transition: .35s ease-in-out;
+    background: @color-white;
     position: relative;
+    transition: .35s ease-in-out;
 
     ._disabled & {
         opacity: .5;
         pointer-events: none;
     }
 
     &.stage-full-screen {
+        -moz-transform: translateZ(0);
+        -webkit-transform: translateZ(0);
         background: @color-white;
         height: 100%;
         left: 0;
@@ -39,10 +46,12 @@
         padding: 0;
         position: fixed;
         top: 0;
+        transform: translateZ(0);
         width: 100%;
         z-index: 800;
 
         .pagebuilder-header {
+            float: right;
             height: 0;
             padding: 0;
             position: fixed;
@@ -53,11 +62,12 @@
             width: auto;
             z-index: 101;
 
-            .action-close {
+            .icon-pagebuilder-fullscreen-exit {
                 background: rgba(255,255,255,.8);
                 border: none;
                 border-radius: 0;
                 box-shadow: none;
+                cursor: pointer;
                 display: inline-block;
                 margin: 0;
                 padding: 15px 20px;
@@ -113,8 +123,8 @@
     .pagebuilder-header {
         .pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-header;
 
-        .action-close {
-            .pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-header.action-close;
+        .icon-pagebuilder-fullscreen-exit {
+            .pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-header.icon-pagebuilder-fullscreen-exit;
         }
     }
 }
@@ -124,53 +134,30 @@
         -moz-transition: .175s ease-in-out;
         -webkit-transition: .175s ease-in-out;
         opacity: 0;
-        transform: scale(.8);
+        transform: scale(.8) translateZ(0);
         transition: .175s ease-in-out;
         visibility: hidden;
     }
 
     &.trigger-transition .pagebuilder-stage-wrapper {
         opacity: 1;
-        transform: scale(1);
+        transform: scale(1) translateZ(0);
         visibility: visible;
     }
 }
 
-.pagebuilder-add-row-wrapper {
-    float: left;
-    text-align: center;
-    width: 100%;
-
-    .pagebuilder-add-row {
-        -moz-border-radius: 5px;
-        -webkit-border-radius: 5px;
-
-        background: @row-color;
-        border-radius: 5px;
-        color: @color-white;
-        display: inline-block;
-        font-size: 26px;
-        height: 50px;
-        line-height: 50px;
-        width: 50px;
-
-        &:hover {
-            background: darken(@row-color, 15%);
-        }
-    }
-}
-
 .pagebuilder-stage {
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* IE10+ */
-    /* Rules below not implemented in browsers yet */
+    -moz-transition: margin-left .35s ease-in-out;
+    -moz-user-select: none;
+    -ms-user-select: none;
     -o-user-select: none;
-    -webkit-user-select: none; /* Chrome/Safari */
-
+    -webkit-transition: margin-left .35s ease-in-out;
+    -webkit-user-select: none;
     font-size: 0;
-    margin-left: 170px; // temp
+    margin-left: 170px;
     min-height: 200px;
-    padding: 0 0 60px; // 60px to include the add row button
+    padding: 0;
+    transition: margin-left .35s ease-in-out;
     user-select: none;
 
     &.stage-full-screen {
@@ -179,12 +166,10 @@
 
     &.pagebuilder-no-user-select {
         * {
-            -moz-user-select: none !important; /* Firefox */
-            -ms-user-select: none !important; /* IE10+ */
-
-            /* Rules below not implemented in browsers yet */
+            -moz-user-select: none !important;
+            -ms-user-select: none !important;
             -o-user-select: none !important;
-            -webkit-user-select: none !important; /* Chrome/Safari */
+            -webkit-user-select: none !important;
             user-select: none !important;
         }
     }
@@ -205,11 +190,11 @@
     }
 
     .pagebuilder-canvas {
-        -moz-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
-        -webkit-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
+        -moz-transition: opacity .75s ease-in-out, visibility .75s ease-in-out, padding-top .35s ease-in-out;
+        -webkit-transition: opacity .75s ease-in-out, visibility .75s ease-in-out, padding-top .35s ease-in-out;
         opacity: 0;
-        padding-bottom: 60px;
-        transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
+        padding-bottom: 120px;
+        transition: opacity .75s ease-in-out, visibility .75s ease-in-out, padding-top .35s ease-in-out;
         visibility: hidden;
 
         &.active {

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_panel.less

@@ -52,10 +52,17 @@
     float: left;
     opacity: 0;
     position: relative;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 87px;
     transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
     visibility: hidden;
     width: 150px;
 
+    &.no-position-sticky {
+        top: 0;
+    }
+
     &.visible {
         opacity: 1;
         visibility: visible;
@@ -103,15 +110,14 @@
     }
 
     .pagebuilder-panel {
-        -moz-transition: .4s;
-        -moz-user-select: none; /* Firefox */
-        -ms-user-select: none; /* IE10+ */
-        /* Rules below not implemented in browsers yet */
+        -moz-transition: .35s ease-in-out opacity, .35s ease-in-out visibility, .35s ease-in-out height;
+        -moz-user-select: none;
+        -ms-user-select: none;
         -o-user-select: none;
-        -webkit-transition: .4s;
-        -webkit-user-select: none; /* Chrome/Safari */
+        -webkit-transition: .35s ease-in-out opacity, .35s ease-in-out visibility, .35s ease-in-out height;
+        -webkit-user-select: none;
         background: @color-very-dark-grayish-orange;
-        transition: .4s;
+        transition: .35s ease-in-out opacity, .35s ease-in-out visibility, .35s ease-in-out height;
         user-select: none;
 
         .search-results-empty {
@@ -210,18 +216,6 @@
                         speak: none;
                     }
                 }
-                &.full-screen {
-                    cursor: pointer;
-                    float: right;
-                    margin-right: 4px;
-
-                    &:before {
-                        content: @icon-pagebuilder-fullscreen__content;
-                        font-family: @icon_font;
-                        line-height: 1;
-                        speak: none;
-                    }
-                }
             }
         }
     }
@@ -312,3 +306,7 @@
         }
     }
 }
+
+.modal-slide .modal-content .pagebuilder-panel-wrapper {
+    top: 10px;
+}