#514: User sees content snapshot on Category Page in Admin Panel - Added CR fixes and reverted animation on CMS pages

Author: hannahnida

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

@@ -49,7 +49,6 @@
 .pagebuilder-panel-wrapper {
     -moz-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
     -webkit-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
-    display: none;
     float: left;
     opacity: 0;
     position: relative;
@@ -65,10 +64,8 @@
     }
 
     &.visible {
-        display: block;
         opacity: 1;
         visibility: visible;
-        z-index: 1;
 
         &.sticky-top {
             position: fixed;

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

@@ -6,7 +6,7 @@
 -->
 <div class="pagebuilder-stage"
      attr="id: id, 'data-role': 'pagebuilder-stage'"
-     ko-style="$parent.stageStyles"
+     ko-style="pageBuilder.stageStyles"
      css="'pagebuilder-show-borders': showBorders, 'pagebuilder-no-user-select': !userSelect(), 'panel-collapsed': pageBuilder.panel.isCollapsed, 'interacting': interacting, 'focus-child': focusChild">
     <div class="pagebuilder-stage-loading" visible="loading">
         <span class="spinner">

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/preview.html

@@ -6,7 +6,7 @@
 -->
 
 <div id="pagebuilder-panel-wrapper" class="pagebuilder-panel-wrapper"
-    css="visible: isVisible, 'sticky-top': isStickyTop, 'sticky-bottom': isStickyBottom, 'transition-out': $parent.isSnapshotTransition"
+    css="visible: isVisible, 'sticky-top': isStickyTop, 'sticky-bottom': isStickyBottom, 'transition-out': pageBuilder.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

@@ -31,7 +31,6 @@ export default class PageBuilder implements PageBuilderInterface {
     public initialValue: string;
     public id: string = utils.uniqueid();
     public originalScrollTop: number = 0;
-    public snapshot: boolean;
     public isFullScreen: KnockoutObservable<boolean> = ko.observable(false);
     public isSnapshot: KnockoutObservable<boolean> = ko.observable(false);
     public isSnapshotTransition: KnockoutObservable<boolean> = ko.observable(false);
@@ -42,6 +41,7 @@ export default class PageBuilder implements PageBuilderInterface {
     public isAllowedTemplateApply: boolean;
     private previousStyles: {[key: string]: string} = {};
     private previousPanelHeight: number;
+    private snapshot: boolean;
 
     constructor(config: any, initialValue: string) {
         Config.setConfig(config);
@@ -98,10 +98,12 @@ export default class PageBuilder implements PageBuilderInterface {
             this.isFullScreen(!this.isFullScreen());
             return;
         }
+
         const stageWrapper = $("#" + this.stage.id).parent();
         const pageBuilderWrapper = stageWrapper.parents(".pagebuilder-wysiwyg-wrapper");
         const panel = stageWrapper.find(".pagebuilder-panel");
         stageWrapper.scrollTop(0);
+
         if (!this.isFullScreen()) {
             pageBuilderWrapper.css("height", pageBuilderWrapper.outerHeight());
             this.previousPanelHeight = panel.outerHeight();
@@ -120,14 +122,15 @@ export default class PageBuilder implements PageBuilderInterface {
                 zIndex: "800",
                 width: stageWrapper.outerWidth().toString() + "px",
             };
-            this.isFullScreen(true);
+
             if (this.snapshot) {
                 this.isSnapshot(false);
                 this.stageStyles(this.previousStyles);
             } else {
                 this.wrapperStyles(this.previousStyles);
             }
 
+            this.isFullScreen(true);
             _.defer(() => {
                 // Remove all styles we applied to fix the position once we're transitioning
                 panel.css("height", "");
@@ -152,7 +155,9 @@ export default class PageBuilder implements PageBuilderInterface {
                 this.stageStyles(this.previousStyles)
             } else {
                 this.wrapperStyles(this.previousStyles);
+                this.isFullScreen(false);
             }
+
             panel.css("height", this.previousPanelHeight + "px");
             // Wait for the 350ms animation to complete before changing these properties back
             _.delay(() => {
@@ -164,14 +169,15 @@ export default class PageBuilder implements PageBuilderInterface {
                             return Object.assign(object, {[styleName]: ""});
                         }, {}),
                     );
+                    this.isFullScreen(false);
                 } else {
                     this.wrapperStyles(Object.keys(this.previousStyles)
                         .reduce((object: object, styleName: string) => {
                             return Object.assign(object, {[styleName]: ""});
                         }, {}),
                     );
                 }
-                this.isFullScreen(false);
+
                 panel.css("height", "");
                 pageBuilderWrapper.css("height", "");
                 this.previousStyles = {};