MC-4116: Update slider to use new background images logic

anthoula · anthoula · commit 440c8db7538a · 2018-10-09T17:04:34.000-05:00
- fix overlay on stage when rendered in Block
diff --git a/app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderSliderSection.xml b/app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderSliderSection.xml
@@ -99,8 +99,8 @@
         <element name="buttonType" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='wrapper']//button[@data-element='button'][contains(@class,'{{arg2}}')]" parameterized="true"/>
         <element name="buttonText" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='wrapper']//button[@data-element='button'][.='{{arg2}}']" parameterized="true"/>
         <element name="showOverlay" type="text" selector="(//div[@data-role='slide'])[{{arg1}}][@data-show-overlay='{{arg2}}']" parameterized="true"/>
-        <element name="overlayColorAndTransparency" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='wrapper']//div[@data-element='overlay' or contains(@class,'pagebuilder-collage-overlay')][contains(@style,'background-color: rgba({{arg2}}, {{arg3}});')]" parameterized="true"/>
-        <element name="transparentOverlay" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='wrapper']//div[@data-element='overlay' or contains(@class,'pagebuilder-collage-overlay')][contains(@style,'background-color: transparent;')]" parameterized="true"/>
+        <element name="overlayColorAndTransparency" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='wrapper']//div[@data-element='overlay' or contains(@class,'pagebuilder-overlay')][contains(@style,'background-color: rgba({{arg2}}, {{arg3}});')]" parameterized="true"/>
+        <element name="transparentOverlay" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='wrapper']//div[@data-element='overlay' or contains(@class,'pagebuilder-overlay')][contains(@style,'background-color: transparent;')]" parameterized="true"/>
         <!-- Advanced Configuration -->
         <element name="alignment" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='wrapper'][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
         <element name="noAlignment" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='wrapper'][not(contains(@style,'text-align:'))]" parameterized="true"/>
@@ -119,7 +119,7 @@
         <element name="base" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]" parameterized="true"/>
         <element name="emptySlide" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='content'][contains(@class,'pagebuilder-empty-slide') and text()='Edit Slide Text']" parameterized="true"/>
         <element name="wrapperJS" type="button" selector="document.querySelectorAll('[data-role=slider] div.pagebuilder-slide-wrapper')[{{arg1}} - 1]" parameterized="true"/>
-        <element name="overlayJS" type="button" selector="document.querySelectorAll('[data-role=slider] div.pagebuilder-collage-overlay')[{{arg1}} - 1]" parameterized="true"/>
+        <element name="overlayJS" type="button" selector="document.querySelectorAll('[data-role=slider] div.pagebuilder-overlay')[{{arg1}} - 1]" parameterized="true"/>
         <element name="editableButtonItemElement" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//a[@data-element='button']//span[contains(@contenteditable, 'true')]" parameterized="true"/>
         <element name="openOptionsMenu" type="button" selector="(//div[contains(@class,'navigation-dot')])[{{arg1}}]" parameterized="true"/>
         <element name="optionsMenu" type="button" selector="(//div[contains(@class,'navigation-dot')])[{{arg1}}]//div[@class='pagebuilder-options-wrapper']" parameterized="true"/>
@@ -149,8 +149,8 @@
         <element name="buttonType" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//a[@data-element='button'][contains(@class,'{{arg2}}')]" parameterized="true"/>
         <element name="buttonText" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//a[@data-element='button']//span[.='{{arg2}}']" parameterized="true"/>
         <element name="showOverlay" type="button" selector="(//div[@data-role='slide'])[{{arg1}}][@data-show-overlay='{{arg2}}']" parameterized="true"/>
-        <element name="overlayColorAndTransparency" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='overlay' or contains(@class,'pagebuilder-collage-overlay')][contains(@style,'background-color: rgba({{arg2}}, {{arg3}});')]" parameterized="true"/>
-        <element name="transparentOverlay" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='overlay' or contains(@class,'pagebuilder-collage-overlay')][contains(@style,'background-color: transparent;')]" parameterized="true"/>
+        <element name="overlayColorAndTransparency" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='overlay' or contains(@class,'pagebuilder-overlay')][contains(@style,'background-color: rgba({{arg2}}, {{arg3}});')]" parameterized="true"/>
+        <element name="transparentOverlay" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='overlay' or contains(@class,'pagebuilder-overlay')][contains(@style,'background-color: transparent;')]" parameterized="true"/>
         <!-- Advanced Configuration -->
         <element name="posterAlignment" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@class='pagebuilder-slide-wrapper'][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
         <element name="posterNoAlignment" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@class='pagebuilder-slide-wrapper'][not(contains(@style,'text-align:'))]" parameterized="true"/>
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-center.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-center.less
@@ -8,7 +8,7 @@
 //  _____________________________________________
 
 .pagebuilder-slide.pagebuilder-collage-centered {
-    .pagebuilder-collage-overlay {
+    .pagebuilder-overlay {
         -moz-transition: background-color 500ms ease;
         -o-transition: background-color 500ms ease;
         -webkit-transition: background-color 500ms ease;
@@ -18,3 +18,21 @@
         transition: background-color 500ms ease;
     }
 }
+
+//
+//  Collage center appearance styles rendered through Block
+//  _______________________________________________________
+
+
+[data-appearance='collage-centered'] {
+    .pagebuilder-slide-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/slide/_collage-left.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-left.less
@@ -8,11 +8,17 @@
 //  _____________________________________________
 
 .pagebuilder-slide {
-    .pagebuilder-collage-overlay {
+    .pagebuilder-overlay {
         -moz-transition: background-color 500ms ease;
         -o-transition: background-color 500ms ease;
         -webkit-transition: background-color 500ms ease;
         padding: 30px;
         transition: background-color 500ms ease;
     }
 }
+
+[data-appearance='collage-left'] {
+    .pagebuilder-collage-content {
+        padding: 30px;
+    }
+}
diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-right.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_collage-right.less
@@ -8,7 +8,7 @@
 //  _____________________________________________
 
 .pagebuilder-slide.pagebuilder-collage-right {
-    .pagebuilder-collage-overlay {
+    .pagebuilder-overlay {
         -moz-transition: background-color 500ms ease;
         -o-transition: background-color 500ms ease;
         -webkit-transition: background-color 500ms ease;
@@ -23,3 +23,18 @@
         }
     }
 }
+
+//
+//  Collage right appearance styles rendered through Block
+//  ______________________________________________________
+
+
+[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/slide/_default.less b/app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slide/_default.less
@@ -16,7 +16,7 @@
         font-size: 14px;
         font-weight: lighter;
     }
-    .pagebuilder-collage-overlay:not(.pagebuilder-poster-overlay) {
+    .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
         max-width: 50%;
     }
 
@@ -89,3 +89,21 @@
         }
     }
 }
+
+//
+//  Default appearance styles rendered through Block
+//  ________________________________________________
+
+[data-role='slide'] {
+    .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
+        max-width: 50%;
+    }
+
+    [data-element='content'] {
+        min-height: 50px;
+    }
+
+    .pagebuilder-slide-button {
+        margin: 20px 0 0 0;
+    }
+}
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
@@ -15,7 +15,7 @@
         <scope args="getUploader().getUiComponent()">
             <render />
         </scope>
-        <div class="pagebuilder-collage-overlay wysiwyg-container"
+        <div class="pagebuilder-overlay wysiwyg-container"
              ko-style="data.overlay.style()"
              event="mousedown: activateEditor">
             <div class="inline-wysiwyg"
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
@@ -16,7 +16,7 @@
         <scope args="getUploader().getUiComponent()">
             <render />
         </scope>
-        <div class="pagebuilder-collage-overlay wysiwyg-container"
+        <div class="pagebuilder-overlay wysiwyg-container"
              attr="data.overlay.attributes"
              ko-style="data.overlay.style"
              event="mousedown: activateEditor">
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
@@ -15,7 +15,7 @@
         <scope args="getUploader().getUiComponent()">
             <render />
         </scope>
-        <div class="pagebuilder-collage-overlay wysiwyg-container"
+        <div class="pagebuilder-overlay wysiwyg-container"
              ko-style="data.overlay.style"
              event="mousedown: activateEditor">
             <div class="inline-wysiwyg"

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@`
`16`	`16`	`font-size: 14px;`
`17`	`17`	`font-weight: lighter;`
`18`	`18`	`}`
`19`		`- .pagebuilder-collage-overlay:not(.pagebuilder-poster-overlay) {`
	`19`	`+ .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {`
`20`	`20`	`max-width: 50%;`
`21`	`21`	`}`
`22`	`22`
`@@ -89,3 +89,21 @@`
`89`	`89`	`}`
`90`	`90`	`}`
`91`	`91`	`}`
	`92`	`+`
	`93`	`+//`
	`94`	`+// Default appearance styles rendered through Block`
	`95`	`+// ________________________________________________`
	`96`	`+`
	`97`	`+[data-role='slide'] {`
	`98`	`+ .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {`
	`99`	`+ max-width: 50%;`
	`100`	`+ }`
	`101`	`+`
	`102`	`+ [data-element='content'] {`
	`103`	`+ min-height: 50px;`
	`104`	`+ }`
	`105`	`+`
	`106`	`+ .pagebuilder-slide-button {`
	`107`	`+ margin: 20px 0 0 0;`
	`108`	`+ }`
	`109`	`+}`