MC-3146: Add new row appearances to configuration

davemacaulay · davemacaulay · commit 0dc114110561 · 2018-07-24T12:00:26.000+02:00
- Resolve CR comments
- Fix issue with contained appearance on front-end with margins
diff --git a/app/code/Magento/PageBuilder/etc/adminhtml/di.xml b/app/code/Magento/PageBuilder/etc/adminhtml/di.xml
@@ -405,13 +405,13 @@
                     <item name="value" xsi:type="string">full-width</item>
                     <item name="title" xsi:type="string" translate="true">Full Width</item>
                     <item name="icon" xsi:type="string">Magento_PageBuilder/css/images/content-type/row/appearance/full-width.svg</item>
-                    <item name="warningMessage" xsi:type="string" translate="true">Full width appearance will work only with supported layouts.</item>
+                    <item name="noticeMessage" xsi:type="string" translate="true">Full width appearance will work only with supported layouts.</item>
                 </item>
                 <item name="2" xsi:type="array">
                     <item name="value" xsi:type="string">full-bleed</item>
                     <item name="title" xsi:type="string" translate="true">Full Bleed</item>
                     <item name="icon" xsi:type="string">Magento_PageBuilder/css/images/content-type/row/appearance/full-bleed.svg</item>
-                    <item name="warningMessage" xsi:type="string" translate="true">Full bleed appearance will work only with supported layouts.</item>
+                    <item name="noticeMessage" xsi:type="string" translate="true">Full bleed appearance will work only with supported layouts.</item>
                 </item>
             </argument>
         </arguments>
diff --git a/app/code/Magento/PageBuilder/i18n/en_US.csv b/app/code/Magento/PageBuilder/i18n/en_US.csv
@@ -278,3 +278,6 @@ Add,Add
 "Product -- Full Width","Product -- Full Width"
 "Full width appearance will work only with supported layouts.","Full width appearance will work only with supported layouts."
 "Full bleed appearance will work only with supported layouts.","Full bleed appearance will work only with supported layouts."
+"Full Width","Full Width"
+"Full Bleed","Full Bleed"
+"Contained","Contained"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/row/preview.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/row/preview.js
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/row-appearance-visual-select.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/row-appearance-visual-select.js
@@ -11,7 +11,7 @@ define([
 
     return Select.extend({
         defaults: {
-            warningMessage: ''
+            noticeMessage: ''
         },
 
         /**
@@ -21,7 +21,7 @@ define([
          */
         initObservable: function () {
             this._super();
-            this.observe('warningMessage');
+            this.observe('noticeMessage');
 
             return this;
         },
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/contained/master.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/contained/master.html
@@ -5,8 +5,13 @@
  */
 -->
 
-<div attr="data.main.attributes"
-     ko-style="Object.assign(data.container.style(), data.main.style())"
-     css="data.main.css">
-    <render args="renderChildTemplate"/>
+<div class="row-contained"
+     attr="data.wrapper.attributes"
+     ko-style="data.wrapper.style"
+     css="data.wrapper.css">
+    <div attr="data.main.attributes"
+         ko-style="Object.assign(data.container.style(), data.main.style())"
+         css="data.main.css">
+        <render args="renderChildTemplate"/>
+    </div>
 </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/contained/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/contained/preview.html
@@ -11,7 +11,7 @@
          ko-style="data.main.style"
          css="Object.assign(data.main.css(), {'empty-container': parent.children().length == 0, 'jarallax': data.main.attributes()['data-enable-parallax'] == 1})"
          event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
-         afterRender="function (element) { setTimeout(function () { initParallax.call($data, element); }, 0) }">
+         afterRender="initParallax">
         <render args="getOptions().template"/>
         <render args="previewChildTemplate"/>
         <div class="pagebuilder-display-label"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-bleed/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-bleed/preview.html
@@ -10,7 +10,7 @@
      ko-style="data.main.style"
      css="Object.assign(data.main.css(), {'empty-container': parent.children().length == 0, 'jarallax': data.main.attributes()['data-enable-parallax'] == 1})"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
-     afterRender="function (element) { setTimeout(function () { initParallax.call($data, element); }, 0) }">
+     afterRender="initParallax">
     <render args="getOptions().template"/>
     <render args="previewChildTemplate"/>
     <div class="pagebuilder-display-label"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-width/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-width/preview.html
@@ -10,7 +10,7 @@
      ko-style="data.main.style"
      css="Object.assign(data.main.css(), {'empty-container': parent.children().length == 0, 'jarallax': data.main.attributes()['data-enable-parallax'] == 1})"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
-     afterRender="function (element) { setTimeout(function () { initParallax.call($data, element); }, 0) }">
+     afterRender="initParallax">
     <render args="getOptions().template"/>
     <render args="previewChildTemplate"/>
     <div class="pagebuilder-display-label"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/row-appearance-visual-select.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element/row-appearance-visual-select.html
@@ -12,7 +12,7 @@
            attr="id: uid, name: inputName"/>
 
     <ol data-bind="foreach: options, css: {'_disabled': disabled}">
-        <li data-bind="click: function() { if(!$parent.disabled()) {$parent.value(value); $parent.warningMessage($data.warningMessage);} }, css: {active: $parent.value() == value, 'admin__field-visual-select-small': $data.size == 'small', 'admin__field-visual-select-large': $data.size == 'large', 'no-pointer-events': $parent.disabled()}, event: {keyup: function() { if(!$parent.disabled() && (event.keyCode==32||event.keyCode==13)) { $parent.value(value); $parent.warningMessage($data.warningMessage);} }}, attr: { tabindex: !$parent.disabled() ? 0 : 'false', name: value }">
+        <li data-bind="click: function() { if(!$parent.disabled()) {$parent.value(value); $parent.noticeMessage($data.noticeMessage);} }, css: {active: $parent.value() == value, 'admin__field-visual-select-small': $data.size == 'small', 'admin__field-visual-select-large': $data.size == 'large', 'no-pointer-events': $parent.disabled()}, event: {keyup: function() { if(!$parent.disabled() && (event.keyCode==32||event.keyCode==13)) { $parent.value(value); $parent.noticeMessage($data.noticeMessage);} }}, attr: { tabindex: !$parent.disabled() ? 0 : 'false', name: value }">
             <img if="$data.icon" data-bind="attr:{src: $data.icon}" draggable="false" aria-hidden="true"/>
             <!-- ko if: $data.size == 'large' -->
                 <div ifnot="$data.icon" class="admin__field-visual-select-spacer"></div>
@@ -21,7 +21,7 @@
             <span translate="$data.title"/>
         </li>
     </ol>
-    <div if="warningMessage" class="message message-notice notice">
-        <div data-ui-id="messages-message-notice" html="warningMessage"></div>
+    <div if="noticeMessage" class="message message-notice notice">
+        <div data-ui-id="messages-message-notice" html="noticeMessage"></div>
     </div>
 </div>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/row/preview.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/row/preview.ts
@@ -116,14 +116,16 @@ export default class Preview extends PreviewCollection {
      */
     public initParallax(element: Element) {
         this.element = element;
-        this.buildJarallax();
+        _.defer(() => {
+            this.buildJarallax();
+        });
 
-        // Observe for resizes of the element and force jarallax to display correctly
-        if ($(this.element).hasClass("jarallax")) {
-            new ResizeObserver(() => {
+        new ResizeObserver(() => {
+            // Observe for resizes of the element and force jarallax to display correctly
+            if ($(this.element).hasClass("jarallax")) {
                 jarallax(this.element, "onResize");
                 jarallax(this.element, "onScroll");
-            }).observe(this.element);
-        }
+            }
+        }).observe(this.element);
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/base/pagebuilder/content_type/row.xml b/app/code/Magento/PageBuilder/view/base/pagebuilder/content_type/row.xml
@@ -31,6 +31,12 @@
                             reader="Magento_PageBuilder/js/master-format/read/configurable">
                     <data_mapping>
                         <elements>
+                            <element name="wrapper">
+                                <attributes>
+                                    <attribute name="name" source="data-role"/>
+                                    <attribute name="appearance" source="data-appearance"/>
+                                </attributes>
+                            </element>
                             <element name="main">
                                 <style_properties>
                                     <property name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/color"/>
@@ -50,8 +56,6 @@
                                     <complex_property name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/paddings"/>
                                 </style_properties>
                                 <attributes>
-                                    <attribute name="name" source="data-role"/>
-                                    <attribute name="appearance" source="data-appearance"/>
                                     <attribute name="enable_parallax" source="data-enable-parallax"/>
                                     <attribute name="parallax_speed" source="data-parallax-speed"/>
                                     <attribute name="background_color_format" source="data-background-color-format" virtual="true"/>
diff --git a/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/row/_contained.less b/app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/row/_contained.less
@@ -7,8 +7,11 @@
 //  Contained row appearance styles
 //  _____________________________________________
 
-[data-appearance='contained'] {
+.row-contained {
+    box-sizing: border-box;
     margin-left: auto !important;
     margin-right: auto !important;
     max-width: @layout__max-width;
+    padding-left: 20px;
+    padding-right: 20px;
 }
