#557: User access Row action panel with 2+ level nesting - CR fix, reverted label

Author: hannahnida

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

@@ -189,7 +189,7 @@
 
 .pagebuilder-content-type-affordance {
     border: 15px solid @color-gray98;
-    box-shadow: 0 0 0 1px rgba(197, 197, 197, 0.34); //#ebebeb
+    box-shadow: 0 0 0 1px rgba(197, 197, 197, 0.34); // #ebebeb
     padding: 0;
 
     &:before {
@@ -198,19 +198,13 @@
 
     > .pagebuilder-content-type.type-container.pagebuilder-row {
         box-shadow: none;
-    }
-
-    > .pagebuilder-display-label {
-        background-color: @color-gray98;
-        color: @color-pagebuilder-silver;
-        line-height: 13px;
-        padding: 1px 0 0;
-        transform: translate(-50%, -15px);
-    }
 
-    &.pagebuilder-content-type-hidden {
         > .pagebuilder-display-label {
-            z-index: initial;
+            background-color: @color-gray98;
+            color: @color-pagebuilder-silver;
+            line-height: 13px;
+            padding: 1px 0 0;
+            transform: translate(-50%, -15px);
         }
     }
 }

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

@@ -9,13 +9,11 @@
      ko-style="data.main.style"
      css="data.main.css">
     <div class="pagebuilder-content-type pagebuilder-content-type-affordance"
-         ko-style="Object.keys(data.inner.style()).filter(key => key.startsWith('margin')).reduce((obj, key) => {obj[key] = data.inner.style()[key];return obj;}, {});"
+         ko-style="getStyle('inner', ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
          event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-        <div class="pagebuilder-display-label"
-             text="function () { return displayLabel().toUpperCase(); }()"></div>
         <div class="pagebuilder-content-type no-system-border type-container pagebuilder-row children-min-height"
              attr="data.inner.attributes"
-             ko-style="Object.keys(data.inner.style()).filter(key => !key.startsWith('margin')).reduce((obj, key) => {obj[key] = data.inner.style()[key];return obj;}, {});"
+             ko-style="getStyleWithout('inner', ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
              css="Object.assign(data.inner.css(), {
                 'empty-container': contentType.children().length == 0,
                 'jarallax': data.inner.attributes()['data-enable-parallax'] == 1 || data.inner.attributes()['data-background-type'] == 'video'
@@ -35,6 +33,8 @@
                     <div class="pagebuilder-drop-indicator"></div>
                 </if>
             </div>
+            <div class="pagebuilder-display-label"
+                 text="function () { return displayLabel().toUpperCase(); }()"></div>
             <div class="pagebuilder-empty-container empty-placeholder"
                  css="placeholderCss()"
                  translate="'Drag content types or columns here'"/>

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

@@ -6,13 +6,11 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-content-type-affordance"
-     ko-style="Object.keys(data.main.style()).filter(key => key.startsWith('margin')).reduce((obj, key) => {obj[key] = data.main.style()[key];return obj;}, {});"
+     ko-style="getStyle('main', ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-    <div class="pagebuilder-display-label"
-         text="function () { return displayLabel().toUpperCase(); }()"></div>
     <div class="pagebuilder-content-type type-container no-system-border pagebuilder-row children-min-height"
          attr="data.main.attributes"
-         ko-style="Object.keys(data.main.style()).filter(key => !key.startsWith('margin')).reduce((obj, key) => {obj[key] = data.main.style()[key];return obj;}, {});"
+         ko-style="getStyleWithout('main', ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
          css="Object.assign(data.main.css(), {
             'empty-container': contentType.children().length == 0,
             'jarallax': data.main.attributes()['data-enable-parallax'] == 1 || data.main.attributes()['data-background-type'] == 'video'
@@ -32,6 +30,8 @@
                 <div class="pagebuilder-drop-indicator"></div>
             </if>
         </div>
+        <div class="pagebuilder-display-label"
+             text="function () { return displayLabel().toUpperCase(); }()"></div>
         <div class="pagebuilder-empty-container empty-placeholder"
              css="placeholderCss()"
              translate="'Drag content types or columns here'"/>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-bleed/preview.html

@@ -6,13 +6,11 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-content-type-affordance"
-     ko-style="Object.keys(data.main.style()).filter(key => key.startsWith('margin')).reduce((obj, key) => {obj[key] = data.main.style()[key];return obj;}, {});"
+     ko-style="getStyle('main', ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-    <div class="pagebuilder-display-label"
-         text="function () { return displayLabel().toUpperCase(); }()"></div>
-    <div class="pagebuilder-content-type type-container no-system-border pagebuilder-row children-min-height"
+    <div class="pagebuilder-content-type pagebuilder-row type-container no-system-border children-min-height"
          attr="data.main.attributes"
-         ko-style="Object.keys(data.main.style()).filter(key => !key.startsWith('margin')).reduce((obj, key) => {obj[key] = data.main.style()[key];return obj;}, {});"
+         ko-style="getStyleWithout('main', ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
          css="Object.assign(data.main.css(), {
             'empty-container': contentType.children().length == 0,
             'jarallax': data.main.attributes()['data-enable-parallax'] == 1 || data.main.attributes()['data-background-type'] == 'video'
@@ -32,6 +30,8 @@
                 <div class="pagebuilder-drop-indicator"></div>
             </if>
         </div>
+        <div class="pagebuilder-display-label"
+             text="function () { return displayLabel().toUpperCase(); }()"></div>
         <div class="pagebuilder-empty-container empty-placeholder"
              css="placeholderCss()"
              translate="'Drag content types or columns here'"/>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-width/preview.html

@@ -209,4 +209,37 @@ export default class Preview extends PreviewCollection {
             jarallax(this.element, "destroy");
         }
     }
+
+    /**
+     * Return selected element styles
+     *
+     * @param {String} element
+     * @param {Array} styleProperties
+     */
+    public getStyle(element: String, styleProperties: Array<string>) {
+        let stylesObject = (element === 'main' ? this.data.main.style() : this.data.inner.style());
+
+        return styleProperties.reduce((obj, key) => ({ ...obj, [key]: stylesObject[key] }), {});
+    }
+
+
+    /**
+     * Return element styles without selected
+     *
+     * @param {String} element
+     * @param {Array} styleProperties
+     */
+    public getStyleWithout(element: String, styleProperties: Array<string>) {
+        let stylesObject = (element === 'main' ? this.data.main.style() : this.data.inner.style());
+
+        return Object.keys(stylesObject)
+            .filter(key => !styleProperties.includes(key))
+            .reduce((obj, key) => {
+                return {
+                    ...obj,
+                    [key]: stylesObject[key]
+                };
+            }, {});
+    }
+
 }