Merge pull request #548 from magento/514_4_content-snapshot-category-admin-page

#514: User sees content snapshot on Cate…

Author: omiroshnichenko

app/code/Magento/PageBuilder/view/adminhtml/ui_component/category_form.xml

@@ -14,6 +14,7 @@
                         <item name="is_pagebuilder_enabled" xsi:type="boolean">true</item>
                         <item name="pagebuilder_content_snapshot" xsi:type="boolean">true</item>
                         <item name="pagebuilder_button" xsi:type="boolean">true</item>
+                        <item name="pagebuilder_stage_overlay" xsi:type="boolean">true</item>
                     </item>
                 </item>
             </argument>

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

@@ -139,6 +139,25 @@
     }
 }
 
+.pagebuilder-stage-overlay {
+    display: none;
+    height: 0;
+    left: 0;
+    position: absolute;
+    top: 0;
+    visibility: hidden;
+    width: 0;
+
+    &.active {
+        cursor: pointer;
+        display: block;
+        height: 100%;
+        visibility: visible;
+        width: 100%;
+        z-index: @z-index-2;
+    }
+}
+
 .pagebuilder-wysiwyg-wrapper.pagebuilder-transition-out .pagebuilder-stage-wrapper {
     .pagebuilder-stage-wrapper.stage-full-screen;
 

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

@@ -93,6 +93,10 @@ define([
                     selector: this.stageSelector
                 }, this.disableDomObserver.bind(this));
 
+                if (this.wysiwygConfigData()['pagebuilder_stage_overlay']) {
+                    this.pageBuilder.hasStageOverlay(true);
+                }
+
                 if (!this.wysiwygConfigData()['pagebuilder_button'] ||
                     this.wysiwygConfigData()['pagebuilder_content_snapshot']) {
                     this.visiblePageBuilder(true);

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

@@ -7,6 +7,11 @@
 <div class="pagebuilder-stage-wrapper"
      css="'stage-full-screen': isFullScreen"
      ko-style="wrapperStyles">
+    <div if="hasStageOverlay()"
+         class="pagebuilder-stage-overlay"
+         click="toggleFullScreen.bind($data, $element)"
+         css="'active': !isFullScreen()">
+    </div>
     <div class="admin__field pagebuilder-header" css="visible: panel.isVisible">
         <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

@@ -36,6 +36,7 @@ export default class PageBuilder implements PageBuilderInterface {
     public wrapperStyles: KnockoutObservable<{[key: string]: string}> = ko.observable({});
     public isAllowedTemplateSave: boolean;
     public isAllowedTemplateApply: boolean;
+    public hasStageOverlay: KnockoutObservable<boolean> = ko.observable(false);
     private previousWrapperStyles: {[key: string]: string} = {};
     private previousPanelHeight: number;