Merge branch '514_content-snapshot-category-admin-page' into 511_content-snapshot-product-admin-page

Author: Lukasz Borowiec

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

@@ -8,7 +8,6 @@
 @wysiwyg-overlay-border: #4181e4;
 
 .pagebuilder-header {
-    display: none;
     opacity: 0;
     text-align: right;
 
@@ -23,12 +22,21 @@
     }
 
     &.visible {
-        display: block;
         opacity: 1;
         visibility: visible;
     }
 }
 
+.pagebuilder_content_snapshot {
+    .pagebuilder-header {
+        display: none;
+
+        &.visible {
+            display: block;
+        }
+    }
+}
+
 .admin__fieldset > .admin__field > .admin__control-grouped {
     &.pagebuilder-active {
         float: left;
@@ -50,6 +58,22 @@
         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);
@@ -71,7 +95,6 @@
             background: @color-very-dark-grayish-orange;
             border: none;
             border-bottom: 1px solid @color-brownie-almost;
-            display: block;
             left: 150px;
             opacity: 0;
             padding: 0;
@@ -96,14 +119,12 @@
             }
 
             &.visible {
-                display: block;
                 opacity: 1;
                 visibility: visible;
             }
         }
 
         .pagebuilder-canvas {
-            padding-bottom: 120px;
             padding-top: 30px;
         }
 
@@ -217,15 +238,18 @@
 }
 
 .pagebuilder-stage {
+    -moz-transition: margin-left .35s ease-in-out;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
+    -webkit-transition: margin-left .35s ease-in-out;
     -webkit-user-select: none;
     font-size: 0;
+    margin-left: 170px;
     min-height: 200px;
     padding: 0;
+    transition: margin-left .35s ease-in-out;
     user-select: none;
-
     &.stage-full-screen {
         background: @color-black;
     }
@@ -259,7 +283,7 @@
         -moz-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
         -webkit-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
         opacity: 0;
-        padding-top: 8px;
+        padding-bottom: 120px;
         transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
         visibility: hidden;
 
@@ -283,6 +307,21 @@
     }
 }
 
+.pagebuilder_content_snapshot {
+    .pagebuilder-stage {
+        -moz-transition: none;
+        -webkit-transition: none;
+        margin-left: auto;
+        transition: none;
+
+        .pagebuilder-canvas {
+            padding-bottom: 0;
+            padding-top: 8px;
+        }
+
+    }
+}
+
 .pagebuilder-row-wrapper,
 .pagebuilder-structure-wrapper {
     display: inline-block;

app/code/Magento/PageBuilder/view/adminhtml/web/js/config.js

@@ -5,7 +5,7 @@
  */
 -->
 <div class="pagebuilder-stage-wrapper"
-     css="'stage-full-screen': isFullScreen"
+     css="'stage-full-screen': isFullScreen,'pagebuilder_content_snapshot': !panel.isVisible()"
      ko-style="wrapperStyles">
     <div class="admin__field pagebuilder-header" css="visible: panel.isVisible()">
         <button type="button" translate="'Apply Template'" if="isAllowedTemplateApply" click="toggleTemplateManger"/>

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

@@ -4,7 +4,7 @@
  */
 
 import _ from "underscore";
-import ConfigInterface, {Mode, ContentSnapshotInterface} from "./config.types";
+import ConfigInterface, {ContentSnapshotInterface, Mode} from "./config.types";
 import ContentTypeConfigInterface from "./content-type-config.types";
 
 export default class Config {
@@ -45,12 +45,23 @@ export default class Config {
         Config.contentSnapshot = contentSnapshot;
     }
 
+    /**
+     * Set the content snapshot flag to inform other components about fullscreen mode
+     * when page builder is enabled
+     *
+     * @param flag
+     */
+    public static setContentSnapshotFullScreenMode(flag: boolean): void
+    {
+        Config.contentSnapshot.isFullScreen = flag;
+    }
+
     /**
      * Retrieve the current instances mode
      */
     public static getContentSnapshot(): ContentSnapshotInterface
     {
-        return Config.contentSnapshot
+        return Config.contentSnapshot;
     }
 
     /**

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

@@ -23,8 +23,9 @@ export type ContentSnapshot = true | false;
 
 export interface ContentSnapshotInterface
 {
-    pageBuilderId: string,
-    contentSnapshotMode: ContentSnapshot,
+    pageBuilderId: string;
+    isFullScreen: boolean;
+    contentSnapshotMode: ContentSnapshot;
 }
 
 export interface MenuSectionInterface {

app/code/Magento/PageBuilder/view/adminhtml/web/js/panel.js

@@ -12,8 +12,8 @@ import _ from "underscore";
 import "../binding/live-edit";
 import "../binding/sortable";
 import "../binding/sortable-children";
-import ContentTypeCollection from "../content-type-collection";
 import Config from "../config";
+import ContentTypeCollection from "../content-type-collection";
 import ContentTypeCollectionInterface from "../content-type-collection.types";
 import ContentTypeConfigInterface, {ConfigFieldInterface} from "../content-type-config.types";
 import createContentType from "../content-type-factory";
@@ -91,7 +91,7 @@ export default class Preview implements PreviewInterface {
             "empty-placeholder-background": this.isPlaceholderVisible,
         });
 
-        if (Config.getContentSnapshot().contentSnapshotMode) {
+        if (Config.getContentSnapshot().contentSnapshotMode && !Config.getContentSnapshot().isFullScreen) {
             this.accessibility(false);
         }
 
@@ -499,6 +499,9 @@ export default class Preview implements PreviewInterface {
      * Bind events
      */
     protected bindEvents() {
+        const pageBuilderId = Config.getContentSnapshot().pageBuilderId;
+        const fullScreenModeChangeAfterEvent = `stage:${pageBuilderId}:fullScreenModeChangeAfter`;
+
         this.contentType.dataStore.subscribe(
             (data: DataObject) => {
                 this.updateObservables();
@@ -515,7 +518,8 @@ export default class Preview implements PreviewInterface {
                 },
             );
         }
-        events.on(`stage:${Config.getContentSnapshot().pageBuilderId}:fullScreenModeChangeAfter`, this.toggleAccessibility.bind(this));
+
+        events.on(fullScreenModeChangeAfterEvent, this.toggleAccessibility.bind(this));
     }
 
     /**
@@ -648,6 +652,7 @@ export default class Preview implements PreviewInterface {
     {
         if (Config.getContentSnapshot().contentSnapshotMode) {
           this.accessibility(args.fullScreen);
+          Config.setContentSnapshotFullScreenMode(args.fullScreen);
         }
     }
 }

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

@@ -43,7 +43,13 @@ export default class PageBuilder implements PageBuilderInterface {
     constructor(config: any, initialValue: string, contentSnapshot: boolean) {
         Config.setConfig(config);
         Config.setMode("Preview");
-        Config.setContentSnapshot({pageBuilderId: this.id, contentSnapshotMode: contentSnapshot});
+        Config.setContentSnapshot(
+            {
+                pageBuilderId: this.id,
+                isFullScreen: config.isFullScreen,
+                contentSnapshotMode: contentSnapshot,
+            },
+        );
         this.preloadTemplates(config);
         this.initialValue = initialValue;
         this.isFullScreen(config.isFullScreen);