MC-5423: Scheduled Update slide out issues

- Add transitions for content margins and left panel height changes

Author: davemacaulay

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

@@ -165,6 +165,8 @@
 }
 
 .pagebuilder-stage {
+    -moz-transition: margin-left .35s ease-in-out;
+    -webkit-transition: margin-left .35s ease-in-out;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
@@ -175,6 +177,7 @@
     min-height: 200px;
     padding: 0;
     user-select: none;
+    transition: margin-left .35s ease-in-out;
 
     &.stage-full-screen {
         background: @color-black;

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

@@ -110,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: .4s ease-in-out;
+        -moz-user-select: none;
+        -ms-user-select: none;
         -o-user-select: none;
-        -webkit-transition: .4s;
-        -webkit-user-select: none; /* Chrome/Safari */
+        -webkit-transition: .4s ease-in-out;
+        -webkit-user-select: none;
         background: @color-very-dark-grayish-orange;
-        transition: .4s;
+        transition: .4s ease-in-out;
         user-select: none;
 
         .search-results-empty {

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -25,6 +25,7 @@ export default class PageBuilder implements PageBuilderInterface {
     public loading: KnockoutObservable<boolean> = ko.observable(true);
     public wrapperStyles: KnockoutObservable<{[key: string]: string}> = ko.observable({});
     private previousWrapperStyles: {[key: string]: string} = {};
+    private previousPanelHeight: number;
 
     constructor(config: any, initialValue: string) {
         Config.setConfig(config);
@@ -50,8 +51,15 @@ export default class PageBuilder implements PageBuilderInterface {
     public toggleFullScreen(): void {
         const stageWrapper = $("#" + this.stage.id).parent();
         const pageBuilderWrapper = stageWrapper.parents(".pagebuilder-wysiwyg-wrapper");
+        const panel = stageWrapper.find(".pagebuilder-panel");
         if (!this.isFullScreen()) {
-            pageBuilderWrapper.height(pageBuilderWrapper.height());
+            pageBuilderWrapper.height(pageBuilderWrapper.outerHeight());
+            this.previousPanelHeight = panel.outerHeight();
+            panel.css("height", this.previousPanelHeight + "px");
+            /**
+             * Fix the stage in the exact place it is when it's part of the content and allow it to transition to full
+             * screen.
+             */
             this.previousWrapperStyles = {
                 'position': 'fixed',
                 'top': parseInt(stageWrapper.offset().top.toString(), 10) -
@@ -61,23 +69,31 @@ export default class PageBuilder implements PageBuilderInterface {
                 'width': stageWrapper.outerWidth().toString() + 'px'
             };
             this.wrapperStyles(this.previousWrapperStyles);
-            this.isFullScreen(!this.isFullScreen());
+            this.isFullScreen(true);
             _.defer(() => {
+                // Remove all styles we applied to fix the position once we're transitioning
+                panel.css("height", "");
                 this.wrapperStyles(Object.keys(this.previousWrapperStyles)
                     .reduce((object: object, styleName: string) => {
                         return Object.assign(object, {[styleName]: ""});
                     }, {})
                 );
             });
         } else {
+            // When leaving full screen mode just transition back to the original state
             this.wrapperStyles(this.previousWrapperStyles);
+            this.isFullScreen(false);
+            panel.css("height", this.previousPanelHeight + "px");
+            // Wait for the 350ms animation to complete before changing these properties back
             _.delay(() => {
-                this.isFullScreen(!this.isFullScreen());
+                panel.css("height", "");
                 this.wrapperStyles(Object.keys(this.previousWrapperStyles)
                     .reduce((object: object, styleName: string) => {
                         return Object.assign(object, {[styleName]: ""});
                     }, {})
                 );
+                this.previousWrapperStyles = {};
+                this.previousPanelHeight = null;
             }, 350);
         }
     }