#557: User access Row action panel with 2+ level nesting - Fixed label overflow, static errors

Author: Hanna Hnida

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

@@ -198,14 +198,14 @@
 
     > .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-display-label {
+        background-color: transparent;
+        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/column-group/preview.js

@@ -8,9 +8,11 @@
 <div attr="data.main.attributes"
      ko-style="data.main.style"
      css="data.main.css">
-    <div class="pagebuilder-content-type pagebuilder-content-type-affordance pagebuilder-row-affordance"
+    <div class="pagebuilder-content-type pagebuilder-content-type-affordance pagebuilder-affordance-row"
          ko-style="getStyle(data.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="getStyleWithout(data.inner, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
@@ -33,8 +35,6 @@
                     <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/js/content-type/row/preview.js

@@ -5,9 +5,11 @@
  */
 -->
 
-<div class="pagebuilder-content-type pagebuilder-content-type-affordance pagebuilder-row-affordance"
+<div class="pagebuilder-content-type pagebuilder-content-type-affordance pagebuilder-affordance-row"
      ko-style="getStyle(data.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="getStyleWithout(data.main, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
@@ -30,8 +32,6 @@
                 <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

@@ -5,9 +5,11 @@
  */
 -->
 
-<div class="pagebuilder-content-type pagebuilder-content-type-affordance pagebuilder-row-affordance"
+<div class="pagebuilder-content-type pagebuilder-content-type-affordance pagebuilder-affordance-row"
      ko-style="getStyle(data.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 pagebuilder-row type-container no-system-border children-min-height"
          attr="data.main.attributes"
          ko-style="getStyleWithout(data.main, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
@@ -30,8 +32,6 @@
                 <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

@@ -27,12 +27,12 @@ import Resize, {
 } from "../column/resize";
 import {ContentTypeRemovedEventParamsInterface} from "../content-type-events.types";
 import ObservableUpdater from "../observable-updater";
+import pageBuilderHeaderHeight from "../../utils/pagebuilder-header-height";
 import PreviewCollection from "../preview-collection";
 import {calculateDropPositions, DropPosition} from "./drag-and-drop";
 import {createColumn} from "./factory";
 import {getMaxGridSize, GridSizeError, resizeGrid} from "./grid-size";
 import {getDragColumn, removeDragColumn, setDragColumn} from "./registry";
-import pageBuilderHeaderHeight from "../../utils/pagebuilder-header-height";
 
 /**
  * @api
@@ -468,7 +468,7 @@ export default class Preview extends PreviewCollection {
             this.gridSizeHistory = new Map();
             this.recordGridResize(this.gridSize());
             // inline tooltip out of bounds
-            let tooltipClientRectTop = tooltip[0].getBoundingClientRect().top
+            const tooltipClientRectTop = tooltip[0].getBoundingClientRect().top
                                      - pageBuilderHeaderHeight(this.contentType.stageId);
 
             if (checkStageFullScreen(this.contentType.stageId)

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

@@ -213,30 +213,30 @@ export default class Preview extends PreviewCollection {
     /**
      * Return selected element styles
      *
-     * @param {Object} element
-     * @param {Array} styleProperties
+     * @param element
+     * @param styleProperties
      */
-    public getStyle(element: {[key: string]: any}, styleProperties: Array<string>) {
-        let stylesObject = element.style();
+    public getStyle(element: {[key: string]: any}, styleProperties: string[]) {
+        const stylesObject = element.style();
 
         return styleProperties.reduce((obj, key) => ({ ...obj, [key]: stylesObject[key] }), {});
     }
 
     /**
      * Return element styles without selected
      *
-     * @param {Object} element
-     * @param {Array} styleProperties
+     * @param element
+     * @param styleProperties
      */
-    public getStyleWithout(element: {[key: string]: any}, styleProperties: Array<string>) {
-        let stylesObject = element.style();
+    public getStyleWithout(element: {[key: string]: any}, styleProperties: string[]) {
+        const stylesObject = element.style();
 
         return Object.keys(stylesObject)
-            .filter(key => !styleProperties.includes(key))
+            .filter((key) => !styleProperties.includes(key))
             .reduce((obj, key) => {
                 return {
                     ...obj,
-                    [key]: stylesObject[key]
+                    [key]: stylesObject[key],
                 };
             }, {});
     }