Merge branch 'MC-4117-banner-images' into MC-4116-slider-images

anthoula · anthoula · commit 11f83f85950f · 2018-10-10T13:49:02.000-05:00
# Conflicts:
#	app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_collage-right.less
diff --git a/app/code/Magento/PageBuilder/Setup/DataConverter/Renderer/Driver.php b/app/code/Magento/PageBuilder/Setup/DataConverter/Renderer/Driver.php
@@ -89,6 +89,7 @@ public function render(array $itemData, array $additionalData = []) : string
             'data-href' => $eavData['link_url'] ?? '',
             'data-target' => isset($eavData['target_blank']) && $eavData['target_blank'] ? '_blank' : '',
         ];
+
         $imageAttributes = [
             'data-element' => 'wrapper',
             'data-background-images' => '{\&quot;'
@@ -98,7 +99,7 @@ public function render(array $itemData, array $additionalData = []) : string
                 . '}}\&quot;,\&quot;'
                 . 'mobile_image\&quot;:\&quot;'
                 . '{{media url=wysiwyg'
-                . $eavData['mobile_image']
+                . $eavData['image']
                 . '}}\&quot;}',
             'style' => 'min-height: 300px; background-size: auto; '
                 . 'background-repeat: no-repeat; background-attachment: scroll;'
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_collage-center.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_collage-center.less
@@ -24,16 +24,11 @@
 //  Collage center appearance styles rendered through Block
 //  _______________________________________________________
 
-
-[data-appearance='collage-centered'] {
+[data-role='banner'][data-appearance='collage-centered'] {
     .pagebuilder-banner-wrapper {
         .pagebuilder-overlay {
             margin-left: auto;
             margin-right: auto;
-
-            .pagebuilder-collage-content {
-                padding: 30px;
-            }
         }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_collage-left.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_collage-left.less
@@ -12,13 +12,3 @@
         padding: 30px;
     }
 }
-
-//
-//  Collage left appearance styles rendered through Block
-//  _____________________________________________________
-
-[data-appearance='collage-left'] {
-    .pagebuilder-collage-content {
-        padding: 30px;
-    }
-}
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_collage-right.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_collage-right.less
@@ -23,12 +23,8 @@
 //  Collage right appearance styles rendered through Block
 //  ______________________________________________________
 
-[data-appearance='collage-right'] {
+[data-role='banner'][data-appearance='collage-right'] {
     .pagebuilder-overlay {
         margin-left: auto;
-
-        .pagebuilder-collage-content {
-            padding: 30px;
-        }
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_default.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_default.less
@@ -45,6 +45,7 @@
             right: 0;
             z-index: 20;
         }
+
         > .mce-content-body {
             min-height: 50px;
             min-width: 10px;
@@ -57,6 +58,7 @@
                 top: -45px;
             }
         }
+
         > .mce-edit-focus {
             ~ .placeholder-text {
                 display: none;
@@ -107,6 +109,6 @@
     }
 
     .pagebuilder-banner-button {
-        margin: 20px 0 0 0;
+        margin: @margin 0 0 0;
     }
 }
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_poster.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/banner/_poster.less
@@ -8,7 +8,6 @@
 //  _____________________________________________
 
 .pagebuilder-banner-wrapper {
-
     .pagebuilder-poster-content {
         text-align: center;
         width: 100%;
diff --git a/dev/tests/integration/testsuite/Magento/PageBuilder/Setup/DataConverter/TreeConverterTest.php b/dev/tests/integration/testsuite/Magento/PageBuilder/Setup/DataConverter/TreeConverterTest.php
@@ -971,10 +971,9 @@ public function convertDataProvider()
                         [
                             'entity_id' => 1,
                             'css_classes' => 'one two',
-                            'image' => '/m/a/magento1.png',
+                            'image' => '/m/a/magento.png',
                             'link_url' => 'http://domain.com/',
                             'link_text' => 'Link Text',
-                            'mobile_image' => '/m/a/magento2.png',
                             'target_blank' => '0'
                         ]
                     ]
@@ -1006,7 +1005,6 @@ public function convertDataProvider()
                             'css_classes' => 'one two',
                             'image' => '/m/a/magento1.png',
                             'link_url' => 'http://domain.com/',
-                            'mobile_image' => '/m/a/magento2.png',
                             'target_blank' => '1',
                         ]
                     ]
diff --git a/dev/tests/integration/testsuite/Magento/PageBuilder/_files/banner.html b/dev/tests/integration/testsuite/Magento/PageBuilder/_files/banner.html
@@ -1 +1 @@
-<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="banner" data-appearance="poster" data-show-button="always" data-show-overlay="never" class="one two" style="background-size: auto; background-repeat: no-repeat; background-attachment: scroll; border: 1px none; border-radius: 0px; margin: 2px 3px 4px 1px;"><div data-element="link" data-href="http://domain.com/"><div data-element="wrapper" data-background-images="{\&quot;desktop_image\&quot;:\&quot;{{media url=wysiwyg/m/a/magento1.png}}\&quot;,\&quot;mobile_image\&quot;:\&quot;{{media url=wysiwyg/m/a/magento2.png}}\&quot;}" style="min-height: 300px; background-size: auto; background-repeat: no-repeat; background-attachment: scroll; text-align: left;" class="pagebuilder-banner-wrapper"><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"></div><button data-element="button" class="pagebuilder-banner-button pagebuilder-button-primary" style="visibility: visible; opacity: 1;">Link Text</button></div></div></div><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"></div><button data-element="button" class="pagebuilder-banner-button pagebuilder-button-primary" style="visibility: visible; opacity: 1;">Link Text</button></div></div></div></div></div></div></div>
+<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="banner" data-appearance="poster" data-show-button="always" data-show-overlay="never" class="one two" style="background-size: auto; background-repeat: no-repeat; background-attachment: scroll; border: 1px none; border-radius: 0px; margin: 2px 3px 4px 1px;"><div data-element="link" data-href="http://domain.com/"><div data-element="wrapper" data-background-images="{\&quot;desktop_image\&quot;:\&quot;{{media url=wysiwyg/m/a/magento.png}}\&quot;,\&quot;mobile_image\&quot;:\&quot;{{media url=wysiwyg/m/a/magento.png}}\&quot;}" style="min-height: 300px; background-size: auto; background-repeat: no-repeat; background-attachment: scroll; text-align: left;" class="pagebuilder-banner-wrapper"><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"></div><button data-element="button" class="pagebuilder-banner-button pagebuilder-button-primary" style="visibility: visible; opacity: 1;">Link Text</button></div></div></div><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"></div><button data-element="button" class="pagebuilder-banner-button pagebuilder-button-primary" style="visibility: visible; opacity: 1;">Link Text</button></div></div></div></div></div></div></div>
diff --git a/dev/tests/integration/testsuite/Magento/PageBuilder/_files/banner_mobile_image.html b/dev/tests/integration/testsuite/Magento/PageBuilder/_files/banner_mobile_image.html
@@ -1 +1 @@
-<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="banner" data-appearance="poster" data-show-button="never" data-show-overlay="never" class="one two" style="background-size: auto; background-repeat: no-repeat; background-attachment: scroll; border: 1px none; border-radius: 0px; margin: 0px;"><div data-element="link" data-href="http://domain.com/"><div data-element="wrapper" data-background-images="{\&quot;desktop_image\&quot;:\&quot;{{media url=wysiwyg/m/a/magento1.png}}\&quot;,\&quot;mobile_image\&quot;:\&quot;{{media url=wysiwyg/m/a/magento2.png}}\&quot;}" style="min-height: 300px; background-size: auto; background-repeat: no-repeat; background-attachment: scroll;" class="pagebuilder-banner-wrapper"><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 40px;"><div class="pagebuilder-poster-content"><div data-element="content"></div></div></div></div><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 40px;"><div class="pagebuilder-poster-content"><div data-element="content"></div></div></div></div></div></div></div></div>
+<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="banner" data-appearance="poster" data-show-button="never" data-show-overlay="never" class="one two" style="background-size: auto; background-repeat: no-repeat; background-attachment: scroll; border: 1px none; border-radius: 0px; margin: 0px;"><div data-element="link" data-href="http://domain.com/"><div data-element="wrapper" data-background-images="{\&quot;desktop_image\&quot;:\&quot;{{media url=wysiwyg/m/a/magento1.png}}\&quot;,\&quot;mobile_image\&quot;:\&quot;{{media url=wysiwyg/m/a/magento1.png}}\&quot;}" style="min-height: 300px; background-size: auto; background-repeat: no-repeat; background-attachment: scroll;" class="pagebuilder-banner-wrapper"><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 40px;"><div class="pagebuilder-poster-content"><div data-element="content"></div></div></div></div><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 40px;"><div class="pagebuilder-poster-content"><div data-element="content"></div></div></div></div></div></div></div></div>
diff --git a/dev/tests/integration/testsuite/Magento/PageBuilder/_files/banner_new_window.html b/dev/tests/integration/testsuite/Magento/PageBuilder/_files/banner_new_window.html
@@ -1 +1 @@
-<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="banner" data-appearance="poster" data-show-button="never" data-show-overlay="never" class="one two" style="background-size: auto; background-repeat: no-repeat; background-attachment: scroll; border: 1px none; border-radius: 0px; margin: 0px;"><div data-element="link" data-href="http://domain.com/" data-target="_blank"><div data-element="wrapper" data-background-images="{\&quot;desktop_image\&quot;:\&quot;{{media url=wysiwyg/m/a/magento1.png}}\&quot;,\&quot;mobile_image\&quot;:\&quot;{{media url=wysiwyg/m/a/magento2.png}}\&quot;}" style="min-height: 300px; background-size: auto; background-repeat: no-repeat; background-attachment: scroll;" class="pagebuilder-banner-wrapper"><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 40px;"><div class="pagebuilder-poster-content"><div data-element="content"></div></div></div></div><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 40px;"><div class="pagebuilder-poster-content"><div data-element="content"></div></div></div></div></div></div></div></div>
+<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="banner" data-appearance="poster" data-show-button="never" data-show-overlay="never" class="one two" style="background-size: auto; background-repeat: no-repeat; background-attachment: scroll; border: 1px none; border-radius: 0px; margin: 0px;"><div data-element="link" data-href="http://domain.com/" data-target="_blank"><div data-element="wrapper" data-background-images="{\&quot;desktop_image\&quot;:\&quot;{{media url=wysiwyg/m/a/magento1.png}}\&quot;,\&quot;mobile_image\&quot;:\&quot;{{media url=wysiwyg/m/a/magento1.png}}\&quot;}" style="min-height: 300px; background-size: auto; background-repeat: no-repeat; background-attachment: scroll;" class="pagebuilder-banner-wrapper"><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 40px;"><div class="pagebuilder-poster-content"><div data-element="content"></div></div></div></div><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 40px;"><div class="pagebuilder-poster-content"><div data-element="content"></div></div></div></div></div></div></div></div>

Original file line number	Diff line number	Diff line change
`@@ -24,16 +24,11 @@`
`24`	`24`	`// Collage center appearance styles rendered through Block`
`25`	`25`	`// _______________________________________________________`
`26`	`26`
`27`		`-`
`28`		`-[data-appearance='collage-centered'] {`
	`27`	`+[data-role='banner'][data-appearance='collage-centered'] {`
`29`	`28`	`.pagebuilder-banner-wrapper {`
`30`	`29`	`.pagebuilder-overlay {`
`31`	`30`	`margin-left: auto;`
`32`	`31`	`margin-right: auto;`
`33`		`-`
`34`		`- .pagebuilder-collage-content {`
`35`		`- padding: 30px;`
`36`		`- }`
`37`	`32`	`}`
`38`	`33`	`}`
`39`	`34`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,13 +12,3 @@`
`12`	`12`	`padding: 30px;`
`13`	`13`	`}`
`14`	`14`	`}`
`15`		`-`
`16`		`-//`
`17`		`-// Collage left appearance styles rendered through Block`
`18`		`-// _____________________________________________________`
`19`		`-`
`20`		`-[data-appearance='collage-left'] {`
`21`		`- .pagebuilder-collage-content {`
`22`		`- padding: 30px;`
`23`		`- }`
`24`		`-}`
Original file line number	Diff line number	Diff line change
`@@ -23,12 +23,8 @@`
`23`	`23`	`// Collage right appearance styles rendered through Block`
`24`	`24`	`// ______________________________________________________`
`25`	`25`
`26`		`-[data-appearance='collage-right'] {`
	`26`	`+[data-role='banner'][data-appearance='collage-right'] {`
`27`	`27`	`.pagebuilder-overlay {`
`28`	`28`	`margin-left: auto;`
`29`		`-`
`30`		`- .pagebuilder-collage-content {`
`31`		`- padding: 30px;`
`32`		`- }`
`33`	`29`	`}`
`34`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -45,6 +45,7 @@`
`45`	`45`	`right: 0;`
`46`	`46`	`z-index: 20;`
`47`	`47`	`}`
	`48`	`+`
`48`	`49`	`> .mce-content-body {`
`49`	`50`	`min-height: 50px;`
`50`	`51`	`min-width: 10px;`
`@@ -57,6 +58,7 @@`
`57`	`58`	`top: -45px;`
`58`	`59`	`}`
`59`	`60`	`}`
	`61`	`+`
`60`	`62`	`> .mce-edit-focus {`
`61`	`63`	`~ .placeholder-text {`
`62`	`64`	`display: none;`
`@@ -107,6 +109,6 @@`
`107`	`109`	`}`
`108`	`110`
`109`	`111`	`.pagebuilder-banner-button {`
`110`		`- margin: 20px 0 0 0;`
	`112`	`+ margin: @margin 0 0 0;`
`111`	`113`	`}`
`112`	`114`	`}`
Original file line number	Diff line number	Diff line change
`@@ -971,10 +971,9 @@ public function convertDataProvider()`
`971`	`971`	`[`
`972`	`972`	`'entity_id' => 1,`
`973`	`973`	`'css_classes' => 'one two',`
`974`		`- 'image' => '/m/a/magento1.png',`
	`974`	`+ 'image' => '/m/a/magento.png',`
`975`	`975`	`'link_url' => 'http://domain.com/',`
`976`	`976`	`'link_text' => 'Link Text',`
`977`		`- 'mobile_image' => '/m/a/magento2.png',`
`978`	`977`	`'target_blank' => '0'`
`979`	`978`	`]`
`980`	`979`	`]`
`@@ -1006,7 +1005,6 @@ public function convertDataProvider()`
`1006`	`1005`	`'css_classes' => 'one two',`
`1007`	`1006`	`'image' => '/m/a/magento1.png',`
`1008`	`1007`	`'link_url' => 'http://domain.com/',`
`1009`		`- 'mobile_image' => '/m/a/magento2.png',`
`1010`	`1008`	`'target_blank' => '1',`
`1011`	`1009`	`]`
`1012`	`1010`	`]`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="banner" data-appearance="poster" data-show-button="always" data-show-overlay="never" class="one two" style="background-size: auto; background-repeat: no-repeat; background-attachment: scroll; border: 1px none; border-radius: 0px; margin: 2px 3px 4px 1px;"><div data-element="link" data-href="http://domain.com/"><div data-element="wrapper" data-background-images="{\"desktop_image\":\"{{media url=wysiwyg/m/a/magento1.png}}\",\"mobile_image\":\"{{media url=wysiwyg/m/a/magento2.png}}\"}" style="min-height: 300px; background-size: auto; background-repeat: no-repeat; background-attachment: scroll; text-align: left;" class="pagebuilder-banner-wrapper"><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"></div><button data-element="button" class="pagebuilder-banner-button pagebuilder-button-primary" style="visibility: visible; opacity: 1;">Link Text</button></div></div></div><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"></div><button data-element="button" class="pagebuilder-banner-button pagebuilder-button-primary" style="visibility: visible; opacity: 1;">Link Text</button></div></div></div></div></div></div></div>
	`1`	+<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="banner" data-appearance="poster" data-show-button="always" data-show-overlay="never" class="one two" style="background-size: auto; background-repeat: no-repeat; background-attachment: scroll; border: 1px none; border-radius: 0px; margin: 2px 3px 4px 1px;"><div data-element="link" data-href="http://domain.com/"><div data-element="wrapper" data-background-images="{\"desktop_image\":\"{{media url=wysiwyg/m/a/magento.png}}\",\"mobile_image\":\"{{media url=wysiwyg/m/a/magento.png}}\"}" style="min-height: 300px; background-size: auto; background-repeat: no-repeat; background-attachment: scroll; text-align: left;" class="pagebuilder-banner-wrapper"><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"></div><button data-element="button" class="pagebuilder-banner-button pagebuilder-button-primary" style="visibility: visible; opacity: 1;">Link Text</button></div></div></div><div data-element="overlay" class="pagebuilder-poster-overlay" data-overlay-color="transparent" style="background-color: transparent; min-height: 300px; padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"></div><button data-element="button" class="pagebuilder-banner-button pagebuilder-button-primary" style="visibility: visible; opacity: 1;">Link Text</button></div></div></div></div></div></div></div>