MC-3571: Implement overlay for MC-1405

Add delegation of hidden state

Author: danmooney2

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

@@ -173,7 +173,8 @@
 .icon-pagebuilder-show:before {
     content: @icon-pagebuilder-show__content;
 }
- .icon-pagebuilder-hide:before {
+
+.icon-pagebuilder-hide:before {
     content: @icon-pagebuilder-hide__content;
 }
 

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/block/_default.less

@@ -21,26 +21,6 @@
             font-weight: lighter;
         }
     }
-    > div:first-child {
-        &:before {
-            content: '';
-            height: 100%;
-            opacity: .7;
-            position: absolute;
-            -moz-transition: background-color 500ms ease;
-            -o-transition: background-color 500ms ease;
-            -webkit-transition: background-color 500ms ease;
-            transition: background-color 500ms ease;
-            width: 100%;
-            z-index: 10;
-        }
-
-        &:hover {
-            &:before {
-                background-color: @color-gray98;
-            }
-        }
-    }
     .rendered-content {
         min-height: 50px;
         pointer-events: none;

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

@@ -7,8 +7,8 @@
 
 <div class="pagebuilder-content-type pagebuilder-block" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css">
-        <div if="displayPreview" class="rendered-content" html="data.main.html" afterRender="initializeWidgets"></div>
-        <div ifnot="displayPreview" class="pagebuilder-block-placeholder">
+        <div if="displayingBlockPreview" class="rendered-content" html="data.main.html" afterRender="initializeWidgets"></div>
+        <div ifnot="displayingBlockPreview" class="pagebuilder-block-placeholder">
             <span class="placeholder-text" text="placeholderText"/>
         </div>
     </div>

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

@@ -9,7 +9,7 @@
     <if args="$parent.isContainer()">
         <div class="pagebuilder-drop-indicator"></div>
     </if>
-    <div class="pagebuilder-content-type-wrapper" template="{ name: preview.previewTemplate, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }"></div>
+    <div class="pagebuilder-content-type-wrapper" template="{ name: preview.previewTemplate, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }" css="{'pagebuilder-content-type-hidden': !preview.display()}"></div>
     <if args="$parent.isContainer() && $index() === $parent.parent.getChildren()().length - 1">
         <div class="pagebuilder-drop-indicator"></div>
     </if>

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

@@ -20,7 +20,7 @@ import BasePreview from "../preview";
  * @api
  */
 export default class Preview extends BasePreview {
-    public displayPreview: KnockoutObservable<boolean> = ko.observable(false);
+    public displayingBlockPreview: KnockoutObservable<boolean> = ko.observable(false);
     public loading: KnockoutObservable<boolean> = ko.observable(false);
     public placeholderText: KnockoutObservable<string>;
     private lastBlockId: number;
@@ -80,17 +80,16 @@ export default class Preview extends BasePreview {
             // The mass converter will have transformed the HTML property into a directive
             if (this.lastRenderedHtml) {
                 this.data.main.html(this.lastRenderedHtml);
-                this.displayPreview(true);
+                this.showBlockPreview(true);
             }
         } else {
-            this.displayPreview(false);
+            this.showBlockPreview(false);
             this.placeholderText("");
         }
 
         if (!data.block_id || data.template.length === 0) {
-            this.displayPreview(false);
+            this.showBlockPreview(false);
             this.placeholderText(this.messages.NOT_SELECTED);
-
             return;
         }
 
@@ -113,7 +112,7 @@ export default class Preview extends BasePreview {
             .done((response) => {
                 // Empty content means something bad happened in the controller that didn't trigger a 5xx
                 if (typeof response.data !== "object") {
-                    this.displayPreview(false);
+                    this.showBlockPreview(false);
                     this.placeholderText(this.messages.UNKNOWN_ERROR);
 
                     return;
@@ -123,10 +122,10 @@ export default class Preview extends BasePreview {
                 this.displayLabel(response.data.title ? response.data.title : this.config.label);
 
                 if (response.data.content) {
-                    this.displayPreview(true);
+                    this.showBlockPreview(true);
                     this.data.main.html(response.data.content);
                 } else if (response.data.error) {
-                    this.displayPreview(false);
+                    this.showBlockPreview(false);
                     this.placeholderText(response.data.error);
                 }
 
@@ -135,11 +134,22 @@ export default class Preview extends BasePreview {
                 this.lastRenderedHtml = response.data.content;
             })
             .fail(() => {
-                this.displayPreview(false);
+                this.showBlockPreview(false);
                 this.placeholderText(this.messages.UNKNOWN_ERROR);
             })
             .always(() => {
                 this.loading(false);
             });
     }
+
+    /**
+     * Toggle display of block preview.  If showing block preview, add hidden mode to PB preview.
+     * @param {boolean} isShow
+     */
+    private showBlockPreview(isShow: boolean) {
+        this.displayingBlockPreview(isShow);
+
+        // preview is hidden only if block is shown
+        this.display(!isShow);
+    }
 }

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

@@ -39,6 +39,7 @@ export default class Preview {
     public data: ObservableObject = {};
     public displayLabel: KnockoutObservable<string>;
     public wrapperElement: Element;
+    public display: KnockoutObservable<boolean> = ko.observable(true);
 
     /**
      * @deprecated