#636: Responsive breakpoint switcher - added and called the background image function in content types templates

yolouiese · yolouiese · commit 19949979d121 · 2020-10-07T01:49:27.000+08:00
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/column/_default.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/column/_default.less
@@ -83,8 +83,6 @@
     }
 }
 
-.mobile-viewport .pagebuilder-column-resize-handle,
-.mobile-viewport .pagebuilder-grid-size-indicator,
 .pagebuilder-content-type-hidden .pagebuilder-column-resize-handle,
 .pagebuilder-stage.interacting .pagebuilder-content-type.pagebuilder-column .pagebuilder-column-resize-handle {
     display: none;
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-centered/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-centered/preview.html
@@ -9,7 +9,7 @@
     <render args="getOptions().template" />
     <div class="pagebuilder-banner-wrapper"
          attr="data.wrapper.attributes"
-         ko-style="data.wrapper.style"
+         ko-style="Object.assign({}, data.wrapper.style(), {backgroundImage: getBackgroundImage()})"
          css="Object.assign(data.wrapper.css(), {
             'jarallax': data.wrapper.attributes()['data-background-type'] == 'video'
             })"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-left/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-left/preview.html
@@ -9,7 +9,7 @@
     <render args="getOptions().template" />
     <div class="pagebuilder-banner-wrapper"
          attr="data.wrapper.attributes"
-         ko-style="data.wrapper.style"
+         ko-style="Object.assign({}, data.wrapper.style(), {backgroundImage: getBackgroundImage()})"
          css="Object.assign(data.wrapper.css(), {
             'jarallax': data.wrapper.attributes()['data-background-type'] == 'video'
             })"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-right/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-right/preview.html
@@ -9,7 +9,7 @@
     <render args="getOptions().template" />
     <div class="pagebuilder-banner-wrapper"
          attr="data.wrapper.attributes"
-         ko-style="data.wrapper.style"
+         ko-style="Object.assign({}, data.wrapper.style(), {backgroundImage: getBackgroundImage()})"
          css="Object.assign(data.wrapper.css(), {
             'jarallax': data.wrapper.attributes()['data-background-type'] == 'video'
             })"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/column/full-height/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/column/full-height/preview.html
@@ -7,7 +7,7 @@
 
 <div class="pagebuilder-content-type type-container pagebuilder-column children-min-height"
      attr="data.main.attributes"
-     ko-style="data.main.style"
+     ko-style="Object.assign({}, data.main.style(), {backgroundImage: getBackgroundImage()})"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
      css="Object.assign(data.main.css(), {'empty-container': $parent.children().length == 0})"
      afterRender="initColumn">
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
@@ -10,7 +10,7 @@
      css="data.main.css">
     <div class="pagebuilder-content-type type-container pagebuilder-row children-min-height"
          attr="data.inner.attributes"
-         ko-style="data.inner.style"
+         ko-style="Object.assign({}, data.inner.style(), {backgroundImage: getBackgroundImage()})"
          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'
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
@@ -7,7 +7,7 @@
 
 <div class="pagebuilder-content-type type-container pagebuilder-row children-min-height"
      attr="data.main.attributes"
-     ko-style="data.main.style"
+     ko-style="Object.assign({}, data.main.style(), {backgroundImage: getBackgroundImage()})"
      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'
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
@@ -7,7 +7,7 @@
 
 <div class="pagebuilder-content-type type-container pagebuilder-row children-min-height"
      attr="data.main.attributes"
-     ko-style="data.main.style"
+     ko-style="Object.assign({}, data.main.style(), {backgroundImage: getBackgroundImage()})"
      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'
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/preview.html
@@ -10,7 +10,7 @@
      css="data.main.css"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
     <div class="pagebuilder-slide-wrapper"
-         ko-style="Object.assign(data.main.style(), data.wrapper.style())"
+         ko-style="Object.assign(data.main.style(), data.wrapper.style(), {backgroundImage: getBackgroundImage()})"
          css="{'jarallax': data.wrapper.attributes()['data-background-type'] === 'video'}"
          event="mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper, mousedown: activateEditor"
          attr="data.wrapper.attributes"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/preview.html
@@ -10,7 +10,7 @@
      css="data.main.css"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
     <div class="pagebuilder-slide-wrapper"
-         ko-style="Object.assign(data.main.style(), data.wrapper.style())"
+         ko-style="Object.assign(data.main.style(), data.wrapper.style(), {backgroundImage: getBackgroundImage()})"
          css="{'jarallax': data.wrapper.attributes()['data-background-type'] === 'video'}"
          event="mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper, mousedown: activateEditor"
          attr="data.wrapper.attributes"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/preview.html
@@ -10,7 +10,7 @@
      css="data.main.css"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
     <div class="pagebuilder-slide-wrapper"
-         ko-style="Object.assign(data.main.style(), data.wrapper.style())"
+         ko-style="Object.assign(data.main.style(), data.wrapper.style(), {backgroundImage: getBackgroundImage()})"
          css="{'jarallax': data.wrapper.attributes()['data-background-type'] === 'video'}"
          event="mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper, mousedown: activateEditor"
          attr="data.wrapper.attributes"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/preview.html
@@ -10,7 +10,7 @@
      css="data.main.css"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
     <div class="pagebuilder-slide-wrapper"
-         ko-style="Object.assign(data.main.style(), data.wrapper.style())"
+         ko-style="Object.assign(data.main.style(), data.wrapper.style(), {backgroundImage: getBackgroundImage()})"
          css="{'jarallax': data.wrapper.attributes()['data-background-type'] === 'video'}"
          event="mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper, mousedown: activateEditor"
          attr="data.wrapper.attributes"
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/tab-item/default/preview.html b/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/tab-item/default/preview.html
@@ -5,12 +5,24 @@
  */
 -->
 
-<div class="pagebuilder-content-type type-container pagebuilder-tab-item" attr="Object.assign({}, {id: contentType.id}, data.main.attributes())" ko-style="data.main.style" css="Object.assign({'empty-container': contentType.children().length == 0}, data.main.css())">
-    <div class="element-children content-type-container" each="contentType.getChildren()" ko-style="data.container.style" css="getChildrenCss()" attr="{id: contentType.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
+<div class="pagebuilder-content-type type-container pagebuilder-tab-item"
+     attr="Object.assign({}, {id: contentType.id}, data.main.attributes())"
+     ko-style="Object.assign({}, data.main.style(), {backgroundImage: getBackgroundImage()})"
+     css="Object.assign({'empty-container': contentType.children().length == 0}, data.main.css())">
+    <div class="element-children content-type-container"
+         each="contentType.getChildren()"
+         ko-style="data.container.style"
+         css="getChildrenCss()"
+         attr="{id: contentType.id + '-children'}"
+         data-bind="sortable: getSortableOptions()"
+         afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
         <if args="$parent.isContainer()">
             <div class="pagebuilder-drop-indicator"></div>
         </if>
-        <div class="pagebuilder-content-type-wrapper" template="{ name: preview.template, data: preview, afterRender: preview.dispatchAfterRenderEvent.bind(preview) }" attr="{ id: id }" css="{'pagebuilder-content-type-hidden': !preview.display()}"></div>
+        <div class="pagebuilder-content-type-wrapper"
+             template="{ name: preview.template, data: preview, afterRender: preview.dispatchAfterRenderEvent.bind(preview) }"
+             attr="{ id: id }" css="{'pagebuilder-content-type-hidden': !preview.display()}">
+        </div>
         <if args="$parent.isContainer() && $index() === $parent.contentType.getChildren()().length - 1">
             <div class="pagebuilder-drop-indicator"></div>
         </if>

Original file line number	Diff line number	Diff line change
`@@ -83,8 +83,6 @@`
`83`	`83`	`}`
`84`	`84`	`}`
`85`	`85`
`86`		`-.mobile-viewport .pagebuilder-column-resize-handle,`
`87`		`-.mobile-viewport .pagebuilder-grid-size-indicator,`
`88`	`86`	`.pagebuilder-content-type-hidden .pagebuilder-column-resize-handle,`
`89`	`87`	`.pagebuilder-stage.interacting .pagebuilder-content-type.pagebuilder-column .pagebuilder-column-resize-handle {`
`90`	`88`	`display: none;`