Skip to content

Commit 19a68ff

Browse files
cspruiellcspruiell
committed
Merge remote-tracking branch 'origin/MC-3610-Remove-legacy-system-from-slide' into cms-team-1-delivery
# Conflicts: # app/code/Magento/PageBuilder/view/base/pagebuilder/content_type/slide.xml
2 parents bee76dc + daa0d43 commit 19a68ff

File tree

10 files changed

+50
-167
lines changed

10 files changed

+50
-167
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderSliderSection.xml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
<element name="collageLeft" type="button" selector="div[data-role='slide'] .pagebuilder-mobile-hidden[style*='40px calc(50% + 40px) 40px 40px'][style*='magento']"/>
9393
<element name="collageCentered" type="button" selector="div[data-role='slide'] .pagebuilder-mobile-hidden[style*='40px calc(25% + 40px)'][style*='magento']"/>
9494
<element name="collageRight" type="button" selector="div[data-role='slide'] .pagebuilder-mobile-hidden[style*='40px 40px 40px calc(50% + 40px)'][style*='magento']"/>
95-
<element name="collageMargin" type="button" selector="div[data-role='slide'] .pagebuilder-slide-wrapper[style*='margin: 1px 2px 3px 4px']"/>
95+
<element name="collageMargin" type="button" selector="div[data-role='slide'][style*='margin: 1px 2px 3px 4px']"/>
9696
<element name="collageMinHeight" type="button" selector="div[data-role='slide'] .pagebuilder-mobile-hidden[style*='min-height: {{arg1}}px'][style*='magento']" parameterized="true"/>
9797
<element name="collageAlignment" type="button" selector="div[data-role='slide'] .pagebuilder-slide-wrapper[style*='text-align: center']"/>
9898
<element name="collageMobileWithoutMobileImage" type="button" selector="div[data-role='slide'] .pagebuilder-mobile-only[style*='padding: 40px;'][style*='magento']"/>
@@ -109,8 +109,8 @@
109109
<element name="collageMinHeightMobile" type="button" selector="div[data-role='slide'] .pagebuilder-mobile-only[style*='min-height: {{arg1}}px'][style*='magento']" parameterized="true"/>
110110
<element name="collageOverlay" type="button" selector=".pagebuilder-overlay[style*='rgba(255, 255, 255, 0.7)']"/>
111111
<element name="posterOverlay" type="button" selector=".pagebuilder-poster-overlay[style*='rgba(255, 255, 255, 0.7)']"/>
112-
<element name="slideBorderStyle" type="button" selector="div[data-role='slide'][style*='border-width: {{arg1}}px'][style*='border-style: {{arg2}}'][style*='border-color: {{arg3}}']" parameterized="true"/>
113-
<element name="slideBorderRadiusStyle" type="button" selector="div[data-role='slide'][style*='border-radius: {{arg1}}']" parameterized="true"/>
112+
<element name="slideBorderStyle" type="button" selector="div[data-role='slide'] div[style*='border-width: {{arg1}}px'][style*='border-style: {{arg2}}'][style*='border-color: {{arg3}}']" parameterized="true"/>
113+
<element name="slideBorderRadiusStyle" type="button" selector="div[data-role='slide'] div[style*='border-radius: {{arg1}}']" parameterized="true"/>
114114
<element name="slideClass" type="button" selector="div[data-role='slide'][class*='{{arg1}}']" parameterized="true"/>
115115
<element name="computedBoxSizing" type="button" selector="return window.getComputedStyle(document.querySelector('[data-role=slide]')).boxSizing"/>
116116
</section>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderSlideCommonTest.xml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -551,12 +551,12 @@
551551
<!-- Validate Storefront -->
552552
<comment userInput="Validate Storefront" stepKey="commentValidateStorefront"/>
553553
<comment userInput="Verify slide defaults on storefront: margin 0 px by default" stepKey="storefrontDefaultMargin"/>
554-
<assertElementContainsAttribute selector="{{SlideOnFrontend.slide('1')}} .pagebuilder-slide-wrapper" attribute="style" expectedValue="margin: 0px;" stepKey="verifyMargin0pxStorefront"/>
554+
<assertElementContainsAttribute selector="{{SlideOnFrontend.slide('1')}}" attribute="style" expectedValue="margin: 0px;" stepKey="verifyMargin0pxStorefront"/>
555555
<comment userInput="Verify slide defaults on storefront: paddings 40 px by default" stepKey="storefrontDefaultPadding"/>
556-
<assertElementContainsAttribute selector="{{SlideOnFrontend.slide('1')}} .pagebuilder-slide-wrapper" attribute="style" expectedValue="padding: 40px;" stepKey="verifyPadding40pxStorefront"/>
556+
<assertElementContainsAttribute selector="{{SlideOnFrontend.slide('1')}} .pagebuilder-slide-wrapper .pagebuilder-poster-overlay" attribute="style" expectedValue="padding: 40px;" stepKey="verifyPadding40pxStorefront"/>
557557
<comment userInput="Verify slide defaults on storefront: User sees no slide border by default" stepKey="storefrontDefaultBorder"/>
558-
<assertElementContainsAttribute selector="{{SlideOnFrontend.slide('1')}}" attribute="style" expectedValue="border-style: none" stepKey="verifyBorderNoneStorefront"/>
559-
<assertElementContainsAttribute selector="{{SlideOnFrontend.slide('1')}}" attribute="style" expectedValue="border-radius: 0px;" stepKey="verifyBorderRadius0Storefront"/>
558+
<assertElementContainsAttribute selector="{{SlideOnFrontend.slide('1')}} .pagebuilder-slide-wrapper" attribute="style" expectedValue="border-style: none" stepKey="verifyBorderNoneStorefront"/>
559+
<assertElementContainsAttribute selector="{{SlideOnFrontend.slide('1')}} .pagebuilder-slide-wrapper" attribute="style" expectedValue="border-radius: 0px;" stepKey="verifyBorderRadius0Storefront"/>
560560
<comment userInput="Verify slide defaults on storefront: Appearance defaults to Poster" stepKey="storefrontDefaultAppearance" />
561561
<assertElementContainsAttribute selector="{{SlideOnFrontend.slide('1')}}" attribute="data-appearance" expectedValue="poster" stepKey="slideStorefrontPoster"/>
562562
<comment userInput="Verify slide defaults on storefront: Minimum Height defaults to 300" stepKey="storefrontDefaultMinHeight"/>

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/preview.js

Lines changed: 0 additions & 66 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-centered/preview.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
attr="data.main.attributes"
1010
css="data.main.css"
1111
event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
12-
<div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), getPaddingStyles())"
12+
<div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), {paddingLeft: 'calc(25% + ' + data.desktop_image.style().paddingLeft + ')', paddingRight: 'calc(25% + ' + data.desktop_image.style().paddingRight + ')'})"
1313
event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
1414
<div class="pagebuilder-collage-overlay" ko-style="data.overlay.style()">
1515
<scope args="getUploader().getUiComponent()">

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-left/preview.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
attr="data.main.attributes"
1010
css="data.main.css"
1111
event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
12-
<div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), getPaddingStyles())"
12+
<div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), {paddingRight: 'calc(50% + ' + data.desktop_image.style().paddingRight + ')'})"
1313
css="data.main.css"
1414
event="{ mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper }">
1515
<div class="pagebuilder-collage-overlay"

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/collage-right/preview.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
attr="data.main.attributes"
1010
css="data.main.css"
1111
event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
12-
<div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), getPaddingStyles())"
12+
<div ko-style="Object.assign(data.main.style(), data.desktop_image.style(), {paddingLeft: 'calc(50% + ' + data.desktop_image.style().paddingLeft + ')'})"
1313
event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
1414
<div class="pagebuilder-collage-overlay" ko-style="data.overlay.style">
1515
<scope args="getUploader().getUiComponent()">

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/preview.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010
css="data.main.css"
1111
event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
1212
<div class="pagebuilder-slide-wrapper"
13-
ko-style="Object.assign(getBackgroundStyles(), data.main.style())"
13+
ko-style="Object.assign(data.desktop_image.style(), data.main.style())"
1414
event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
1515
<div class="pagebuilder-poster-overlay"
1616
attr="data.overlay.attributes"
17-
ko-style="Object.assign(data.desktop_image.style(), data.overlay.style(), getPaddingStyles())"
17+
ko-style="data.overlay.style"
1818
css="data.overlay.css">
1919
<scope args="getUploader().getUiComponent()">
2020
<render />

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slide/preview.ts

Lines changed: 0 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -23,69 +23,6 @@ export default class Preview extends BasePreview {
2323
*/
2424
private uploader: Uploader;
2525

26-
/**
27-
* Get the background wrapper attributes for the preview
28-
*
29-
* @returns {any}
30-
*/
31-
public getBackgroundStyles() {
32-
const desktopStyles = this.data.desktop_image.style();
33-
return {
34-
...desktopStyles,
35-
paddingBottom: "",
36-
paddingLeft: "",
37-
paddingRight: "",
38-
paddingTop: "",
39-
borderStyle: "none",
40-
borderRadius: "0px",
41-
};
42-
}
43-
44-
/**
45-
* Get the slide wrapper attributes for the preview
46-
*
47-
* @returns {any}
48-
*/
49-
public getPaddingStyles() {
50-
const previewData = this.previewData;
51-
const appearance = this.data.main.attributes()["data-appearance"];
52-
const paddingData: any = {};
53-
switch (appearance) {
54-
case "collage-centered":
55-
paddingData.paddingLeft = `calc(25% + ${this.data.desktop_image.style().paddingLeft})`;
56-
paddingData.paddingRight = `calc(25% + ${this.data.desktop_image.style().paddingRight})`;
57-
break;
58-
case "collage-left":
59-
paddingData.paddingRight = `calc(50% + ${this.data.desktop_image.style().paddingRight})`;
60-
break;
61-
case "collage-right":
62-
paddingData.paddingLeft = `calc(50% + ${this.data.desktop_image.style().paddingLeft})`;
63-
break;
64-
default:
65-
break;
66-
}
67-
let backgroundImage: string = "none";
68-
if (previewData.background_image() && previewData.background_image() !== "" &&
69-
previewData.background_image() !== undefined &&
70-
previewData.background_image()[0] !== undefined) {
71-
backgroundImage = "url(" + previewData.background_image()[0].url + ")";
72-
}
73-
const styles = {
74-
backgroundImage,
75-
backgroundSize: previewData.background_size(),
76-
minHeight: previewData.min_height() ? previewData.min_height() + "px" : "300px",
77-
overflow: "hidden",
78-
paddingBottom: this.data.desktop_image.style().paddingBottom || "",
79-
paddingLeft: this.data.desktop_image.style().paddingLeft || "",
80-
paddingRight: this.data.desktop_image.style().paddingRight || "",
81-
paddingTop: this.data.desktop_image.style().paddingTop || "",
82-
};
83-
return {
84-
...styles,
85-
...paddingData,
86-
};
87-
}
88-
8926
/**
9027
* Set state based on overlay mouseover event for the preview
9128
*/

0 commit comments

Comments
 (0)