#514: User sees content snapshot on Category Page in Admin Panel - Changed styles to be more generic, added mouseover events for overlay

Author: hannahnida

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

@@ -48,35 +48,3 @@
         display: none !important;
     }
 }
-
-//
-//  Category Description
-//  ---------------------------------------------
-
-.catalog-category-edit {
-    .admin__fieldset {
-        > .admin__field {
-            &[data-index="description"] {
-                > .admin__field-label {
-                    text-align: left;
-                    
-                    label {
-                        span {
-                            &:before {
-                                left: 0;
-                            }
-                        }
-                    }
-                }
-                
-                > .admin__field-control {
-                    float: right;
-
-                    button.action-default {
-                        float: right;
-                    }
-                }
-            }
-        }
-    }
-}

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

@@ -45,3 +45,30 @@
         }
     }
 }
+
+
+//
+//  Page Builder full width field
+//   _____________________________________________
+
+
+.admin__fieldset {
+    > .admin__field.admin__field-wide.admin__field-page-builder[class]:not(.admin__field-option) {
+        > .admin__field-label {
+            text-align: right;
+            min-height: 32px;
+            margin-top: @indent__xs;
+        }
+    }
+}
+
+.admin__field-page-builder {
+    margin-top: @indent__l;
+
+    button.action-default {
+        position: absolute;
+        top: @indent__xs;
+        right: 0;
+    }
+
+}

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

@@ -4,6 +4,8 @@
 //  */
 
 @border-size: 2px;
+@stage-overlay-background: rgba(0, 120, 249, 0.08);
+@stage-overlay-border: #4181E4;
 
 .pagebuilder-header {
     opacity: 0;
@@ -98,6 +100,7 @@
 
         .pagebuilder-canvas {
             padding-top: 30px;
+            padding-bottom: 120px;
         }
 
         .pagebuilder-panel-wrapper {
@@ -148,14 +151,27 @@
     visibility: hidden;
     width: 0;
 
-    &.active {
+    &.visible {
+        -moz-transition: .175s ease-in-out;
+        -webkit-transition: .175s ease-in-out;
         cursor: pointer;
         display: block;
         height: 100%;
+        opacity: 0;
+        transform: translateY(-@indent__xs);
+        transition: .175s ease-in-out;
         visibility: visible;
         width: 100%;
         z-index: @z-index-2;
     }
+
+    &._hover {
+        background-color: @stage-overlay-background;
+        border-radius: 2px;
+        border: 2px solid @stage-overlay-border;
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 .pagebuilder-wysiwyg-wrapper.pagebuilder-transition-out .pagebuilder-stage-wrapper {
@@ -188,17 +204,13 @@
 }
 
 .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 {
@@ -234,7 +246,6 @@
         -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-bottom: 120px;
         transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
         visibility: hidden;
 

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

@@ -10,7 +10,8 @@
     <div if="hasStageOverlay()"
          class="pagebuilder-stage-overlay"
          click="toggleFullScreen.bind($data, $element)"
-         css="'active': !isFullScreen()"
+         css="'visible': !isFullScreen()"
+         event="{ mouseover: onStageOverlayMouseOver, mouseout: onStageOverlayMouseOut }, mouseoverBubble: false"
          tabindex="0">
     </div>
     <div class="admin__field pagebuilder-header" css="visible: panel.isVisible">

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

@@ -94,6 +94,20 @@ export default class PageBuilder implements PageBuilderInterface {
         stageWrapper.find(focusableElements).attr('tabindex', tabIndexValue);
     }
 
+    /**
+     * MouseOver event for Stage Overlay
+     */
+    public onStageOverlayMouseOver (): void {
+        $('.pagebuilder-stage-overlay').addClass('_hover');
+    }
+
+    /**
+     * MouseOut event for Stage Overlay
+     */
+    public onStageOverlayMouseOut (): void {
+        $('.pagebuilder-stage-overlay').removeClass('_hover');
+    }
+
     /**
      * Tells the stage wrapper to expand to fullScreen
      *