#514: User sees content snapshot on Category Page in Admin Panel - Changed animation for enter/exit full screen mode

Author: hannahnida

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

@@ -48,3 +48,28 @@
         display: none !important;
     }
 }
+
+//
+//  Animations
+//  _____________________________________________
+
+
+.keyframes (@name; @arguments) {
+    @-moz-keyframes @name {
+        @arguments();
+    }
+
+    @-webkit-keyframes @name {
+        @arguments();
+    }
+
+    @keyframes @name {
+        @arguments();
+    }
+}
+
+.animation (@arguments) {
+    -webkit-animation: @arguments;
+    -moz-animation: @arguments;
+    animation: @arguments;
+}

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

@@ -23,16 +23,6 @@
     }
 }
 
-.pagebuilder-content-snapshot {
-    .pagebuilder-header {
-        display: none;
-
-        &.visible {
-            display: block;
-        }
-    }
-}
-
 .admin__fieldset > .admin__field > .admin__control-grouped {
     &.pagebuilder-active {
         float: left;
@@ -54,22 +44,6 @@
         pointer-events: none;
     }
 
-    &.pagebuilder-content-snapshot {
-        &.stage-full-screen {
-            .pagebuilder-header {
-                display: block;
-
-                &.visible {
-                    display: block;
-                }
-            }
-
-            .pagebuilder-canvas {
-                padding-bottom: 120px;
-            }
-        }
-    }
-
     &.stage-full-screen {
         -moz-transform: translateZ(0);
         -webkit-transform: translateZ(0);
@@ -124,6 +98,12 @@
             padding-top: 30px;
         }
 
+        &.stage-content-snapshot {
+            .pagebuilder-canvas {
+                padding-bottom: 120px;
+            }
+        }
+
         .pagebuilder-panel-wrapper {
             bottom: 0;
             position: fixed;
@@ -303,7 +283,13 @@
     }
 }
 
-.pagebuilder-content-snapshot {
+.stage-content-snapshot {
+    &.stage-full-screen {
+        .pagebuilder-stage {
+            margin-left: auto;
+        }
+    }
+
     .pagebuilder-stage {
         -moz-transition: none;
         -webkit-transition: none;
@@ -314,10 +300,104 @@
             padding-bottom: 0;
             padding-top: 8px;
         }
+    }
+}
+
+.pagebuilder-wysiwyg-snapshot {
+    .pagebuilder-stage-wrapper {
+        -moz-transition-delay: 0s;
+        -webkit-transition-delay: 0s;
+        transition-delay: 0s;
+        &.stage-full-screen {
+            -moz-transition-delay: .25s;
+            -webkit-transition-delay: .25s;
+            transition-delay: .25s;
+        }
+    }
 
+    .pagebuilder-stage {
+        margin-left: 0;
+    }
+
+    .pagebuilder-header {
+        .keyframes(slide-in-top;{
+            0% {
+                -webkit-transform: translateY(-41px);
+                transform: translateY(-41px);
+                opacity: 0;
+            }
+            100% {
+                -webkit-transform: translateY(0);
+                transform: translateY(0);
+                opacity: 1;
+            }
+        });
+        .animation(slide-in-top .35s .15s ease-in-out both);
+        opacity: 1;
+        transition: none;
+        visibility: visible;
+
+        &.transition {
+            .pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-header;
+            .keyframes(slide-out-top;{
+                0% {
+                    -webkit-transform: translateY(0);
+                    transform: translateY(0);
+                    opacity: 1;
+                }
+
+                100% {
+                    -webkit-transform: translateY(-41px);
+                    transform: translateY(-41px);
+                    opacity: 0;
+                }
+            });
+            .animation(slide-out-top .35s 0s ease-in-out both);
+            transition: none;
+            z-index: 800;
+        }
+    }
+
+    .pagebuilder-panel-wrapper {
+        .keyframes(slide-in-left;{
+            0% {
+                -webkit-transform: translateX(-150px);
+                transform: translateX(-150px);
+                opacity: 0;
+            }
+            100% {
+                -webkit-transform: translateX(0);
+                transform: translateX(0);
+                opacity: 1;
+            }
+        });
+        .animation(slide-in-left .35s .15s ease-in-out both);
+        opacity: 1;
+        transition: none;
+        visibility: visible;
+
+        &.transition {
+            .pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-panel-wrapper;
+            .keyframes(slide-out-left;{
+                0% {
+                    -webkit-transform: translateX(0);
+                    transform: translateX(0);
+                    opacity: 1;
+                }
+                100% {
+                    -webkit-transform: translateX(-150px);
+                    transform: translateX(-150px);
+                    opacity: 0;
+                }
+            });
+            .animation(slide-out-left .35s 0s ease-in-out both);
+            transition: none;
+            z-index: 800;
+        }
     }
 }
 
+
 .pagebuilder-row-wrapper,
 .pagebuilder-structure-wrapper {
     display: inline-block;

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

@@ -17,7 +17,7 @@
     <if args="isComponentInitialized">
         <div visible="visiblePageBuilder"
              class="pagebuilder-wysiwyg-wrapper"
-             css="{'pagebuilder-transition-in': wysiwygConfigData()['pagebuilder_button'] && !wysiwygConfigData()['pagebuilder_content_snapshot'], 'trigger-transition': transition, 'pagebuilder-transition-out': transitionOut}">
+             css="{'pagebuilder-transition-in': wysiwygConfigData()['pagebuilder_button'] && !wysiwygConfigData()['pagebuilder_content_snapshot'], 'trigger-transition': transition, 'pagebuilder-transition-out': transitionOut, 'pagebuilder-wysiwyg-snapshot': wysiwygConfigData()['pagebuilder_content_snapshot']}">
             <div if="wysiwygConfigData()['pagebuilder_content_snapshot']"
                  class="pagebuilder-wysiwyg-overlay"
                  click="pageBuilderEditButtonClick.bind($data)"

app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/wysiwyg.html

@@ -5,10 +5,10 @@
  */
 -->
 <div class="pagebuilder-stage-wrapper"
-     css="'stage-full-screen': isFullScreen, 'pagebuilder-content-snapshot': isSnapshot"
+     css="'stage-full-screen': isFullScreen, 'stage-content-snapshot': isSnapshot"
      ko-style="wrapperStyles">
     <div class="admin__field pagebuilder-header"
-         css="visible: panel.isVisible()"
+         css="visible: panel.isVisible(), transition: isSnapshotTransition()"
          if="!isSnapshot()">
         <button type="button" translate="'Apply Template'" if="isAllowedTemplateApply" click="toggleTemplateManger"/>
         <button type="button" translate="'Save as Template'" if="isAllowedTemplateSave" click="saveAsTemplate"/>

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

@@ -6,7 +6,7 @@
 -->
 
 <div id="pagebuilder-panel-wrapper" class="pagebuilder-panel-wrapper"
-    css="visible: isVisible, 'sticky-top': isStickyTop, 'sticky-bottom': isStickyBottom"
+    css="visible: isVisible, 'sticky-top': isStickyTop, 'sticky-bottom': isStickyBottom, 'transition': $parent.isSnapshotTransition"
     afterRender="afterRender">
     <div id="pagebuilder-panel" class="pagebuilder-panel">
         <div class="search-content-types">

app/code/Magento/PageBuilder/view/adminhtml/web/template/panel.html

@@ -33,6 +33,7 @@ export default class PageBuilder implements PageBuilderInterface {
     public originalScrollTop: number = 0;
     public isFullScreen: KnockoutObservable<boolean> = ko.observable(false);
     public isSnapshot: KnockoutObservable<boolean> = ko.observable(false);
+    public isSnapshotTransition: KnockoutObservable<boolean> = ko.observable(false);
     public loading: KnockoutObservable<boolean> = ko.observable(true);
     public wrapperStyles: KnockoutObservable<{[key: string]: string}> = ko.observable({});
     public isAllowedTemplateSave: boolean;
@@ -47,6 +48,7 @@ export default class PageBuilder implements PageBuilderInterface {
         this.initialValue = initialValue;
         this.isFullScreen(config.isFullScreen);
         this.isSnapshot(config.pagebuilder_content_snapshot);
+        this.isSnapshotTransition(false);
         this.config = config;
 
         this.isAllowedTemplateApply = isAllowed(resources.TEMPLATE_APPLY);
@@ -89,9 +91,6 @@ export default class PageBuilder implements PageBuilderInterface {
      * @param {StageToggleFullScreenParamsInterface} args
      */
     public toggleFullScreen(args: StageToggleFullScreenParamsInterface): void {
-        if (Config.getConfig("pagebuilder_content_snapshot")) {
-            this.isSnapshot(this.isFullScreen());
-        }
         if (args.animate === false) {
             this.isFullScreen(!this.isFullScreen());
             return;
@@ -129,13 +128,27 @@ export default class PageBuilder implements PageBuilderInterface {
                     }, {}),
                 );
             });
+            _.delay(() => {
+                if (Config.getConfig("pagebuilder_content_snapshot")) {
+                    this.isSnapshot(false);
+                }
+            }, 350);
         } else {
             // When leaving full screen mode just transition back to the original state
+            if (Config.getConfig("pagebuilder_content_snapshot")) {
+                this.isSnapshotTransition(true);
+            }
             this.wrapperStyles(this.previousWrapperStyles);
-            this.isFullScreen(false);
+            _.delay(() => {
+                if (Config.getConfig("pagebuilder_content_snapshot")) {
+                    this.isSnapshot(true);
+                    this.isSnapshotTransition(false);
+                }
+            }, 350);
             panel.css("height", this.previousPanelHeight + "px");
             // Wait for the 350ms animation to complete before changing these properties back
             _.delay(() => {
+                this.isFullScreen(false);
                 panel.css("height", "");
                 pageBuilderWrapper.css("height", "");
                 this.wrapperStyles(Object.keys(this.previousWrapperStyles)
@@ -145,7 +158,7 @@ export default class PageBuilder implements PageBuilderInterface {
                 );
                 this.previousWrapperStyles = {};
                 this.previousPanelHeight = null;
-            }, 350);
+            }, 600);
         }
     }