Merge branch '514_content-snapshot-category-admin-page' into 512_content-snapshot-block-admin-page

Author: Lukasz Borowiec

app/code/Magento/PageBuilder/i18n/en_US.csv

@@ -16,6 +16,7 @@ Page,Page
 "Page with ID: %s doesn't exist","Page with ID: %s doesn't exist"
 "ID: %s","ID: %s"
 Condition,Condition
+"Photo upload is available in full screen mode","Photo upload is available in full screen mode"
 "This will change your Admin and storefront by:","This will change your Admin and storefront by:"
 "Removing PageBuilder's advanced content tools","Removing PageBuilder's advanced content tools"
 "from their assigned text fields and adding a basic text editor as replacement.","from their assigned text fields and adding a basic text editor as replacement."

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

@@ -12,10 +12,16 @@
                 <item name="config" xsi:type="array">
                     <item name="wysiwygConfigData" xsi:type="array">
                         <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>
                 </item>
             </argument>
+            <settings>
+                <additionalClasses>
+                    <class name="admin__field-wide admin__field-page-builder">true</class>
+                </additionalClasses>
+            </settings>
         </field>
     </fieldset>
 </form>

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

@@ -45,3 +45,33 @@
         }
     }
 }
+
+//
+//  Page Builder full width field
+//  _____________________________________________
+
+.admin__fieldset {
+    > .admin__field.admin__field-wide.admin__field-page-builder[class]:not(.admin__field-option) {
+        > .admin__field-label {
+            margin-bottom: @indent__xs;
+            margin-top: @indent__xs;
+            min-height: 32px;
+
+            span[data-config-scope] {
+                &:before {
+                    left: 0;
+                }
+            }
+        }
+    }
+}
+
+.admin__field-wide.admin__field-page-builder {
+    margin-bottom: 32px;
+
+    button.action-default {
+        position: absolute;
+        right: 0;
+        top: @indent__xs;
+    }
+}

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

@@ -4,6 +4,8 @@
 //  */
 
 @border-size: 2px;
+@wysiwyg-overlay-background: #0078f9;
+@wysiwyg-overlay-border: #4181e4;
 
 .pagebuilder-header {
     opacity: 0;
@@ -25,6 +27,16 @@
     }
 }
 
+.pagebuilder-content-snapshot {
+    .pagebuilder-header {
+        display: none;
+
+        &.visible {
+            display: block;
+        }
+    }
+}
+
 .admin__fieldset > .admin__field > .admin__control-grouped {
     &.pagebuilder-active {
         float: left;
@@ -46,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);
@@ -139,6 +167,47 @@
     }
 }
 
+
+.pagebuilder-wysiwyg-overlay {
+    display: none;
+    height: 0;
+    left: -1px;
+    position: absolute;
+    top: -1px;
+    visibility: hidden;
+    width: 0;
+
+    &.visible {
+        -moz-transition: .175s ease-in-out;
+        -webkit-transition: .175s ease-in-out;
+        border: 2px solid transparent;
+        border-radius: 2px;
+        cursor: pointer;
+        display: block;
+        height: calc(~'100% + 2px');
+        transform: translateY(-2px);
+        transition: .175s ease-in-out;
+        visibility: visible;
+        width: calc(~'100% + 2px');
+        z-index: @z-index-2;
+    }
+
+    &._hover {
+        background-color: fade(@wysiwyg-overlay-background, 8%);
+        border-color: @wysiwyg-overlay-border;
+        transform: translateY(0);
+    }
+
+    ._keyfocus & {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.pagebuilder-wysiwyg-wrapper {
+    position: relative;
+}
+
 .pagebuilder-wysiwyg-wrapper.pagebuilder-transition-out .pagebuilder-stage-wrapper {
     .pagebuilder-stage-wrapper.stage-full-screen;
 
@@ -181,7 +250,6 @@
     padding: 0;
     transition: margin-left .35s ease-in-out;
     user-select: none;
-
     &.stage-full-screen {
         background: @color-black;
     }
@@ -239,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/css/source/_panel.less

@@ -49,6 +49,7 @@
 .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;
@@ -64,8 +65,10 @@
     }
 
     &.visible {
+        display: block;
         opacity: 1;
         visibility: visible;
+        z-index: 1;
 
         &.sticky-top {
             position: fixed;