Skip to content

Commit 9f18da0

Browse files
anthoulaanthoula
committed
Merge branch 'MC-5403-category-performance' of github.com:magento-obsessive-owls/magento2-page-builder into cms-team-1-delivery
2 parents 02aaf42 + 1fc1c78 commit 9f18da0

File tree

13 files changed

+253
-107
lines changed

13 files changed

+253
-107
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
<element name="exitFullScreen" type="button" selector=".pagebuilder-header .action-close"/>
1515
<element name="stageLoading" type="button" selector="div.pagebuilder-stage-loading"/>
1616
<element name="stageWrapper" type="button" selector="//div[@class='pagebuilder-stage-wrapper']"/>
17-
<element name="enabled" type="button" selector="//div[not(contains(@class, '_disabled')) and contains(@data-bind,'visible: visible')]/div[@class='pagebuilder-stage-wrapper']"/>
18-
<element name="disabled" type="button" selector="//div[contains(@class, '_disabled') and contains(@data-bind,'visible: visible')]/div[@class='pagebuilder-stage-wrapper']"/>
17+
<element name="enabled" type="button" selector="//div[not(contains(@class, '_disabled'))]/div[contains(@class, 'pagebuilder-wysiwyg-wrapper')]/div[@class='pagebuilder-stage-wrapper']"/>
18+
<element name="disabled" type="button" selector="//div[contains(@class, '_disabled')]/div[contains(@class, 'pagebuilder-wysiwyg-wrapper')]/div[@class='pagebuilder-stage-wrapper']"/>
1919
<element name="stageWrapperFullScreen" type="button" selector="div.pagebuilder-stage-wrapper.stage-full-screen"/>
2020
<element name="stageWidthJS" type="button" selector="document.querySelector('div[class~=\'stage-container\']').clientWidth"/>
2121
<element name="modal" type="text" selector='aside.modal-popup._show'/>

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

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -204,8 +204,14 @@
204204
<comment userInput="Create a new product" stepKey="commentCreateNewProduct"/>
205205
<amOnPage url="{{AdminProductCreatePage.url(AddToDefaultSet.attributeSetId, 'simple')}}" stepKey="navigateToNewProduct"/>
206206
<waitForPageLoad stepKey="waitForProductPage"/>
207+
<!-- Fill the remaining product fields accordingly -->
208+
<comment userInput="Fill the remaining product fields accordingly" stepKey="commentFillProductFields"/>
209+
<actionGroup ref="fillMainProductForm" stepKey="fillMainProductForm">
210+
<argument name="product" value="SimpleProduct"/>
211+
</actionGroup>
207212
<!-- Set background colour of row for custom attribute -->
208213
<comment userInput="Set background colour of row for custom attribute" stepKey="commentSetBackgroundColor"/>
214+
<scrollToTopOfPage stepKey="scrollToTop"/>
209215
<actionGroup ref="openPageBuilderForAttribute" stepKey="openPageBuilderForAttribute">
210216
<argument name="attributeCode" value="$$createWysiwygAttribute.attribute_code$$"/>
211217
</actionGroup>
@@ -218,6 +224,11 @@
218224
<actionGroup ref="saveEditPanelSettingsFullScreen" stepKey="saveEditPanelSettings"/>
219225
<click selector="{{PageBuilderStage.exitFullScreen}}" stepKey="exitPageBuilderFullScreen" />
220226
<waitForPageLoad stepKey="waitForPageLoadExitFullScreen"/>
227+
<!-- Save product, before editing row -->
228+
<comment userInput="Save product, before editing row" stepKey="commentSaveProductAfterAttribute"/>
229+
<click selector="{{AdminProductFormActionSection.saveButton}}" stepKey="saveProductAfterAttribute"/>
230+
<waitForPageLoad stepKey="waitForProductSaveAfterAttribute"/>
231+
<waitForElementVisible selector="{{AdminProductMessagesSection.successMessage}}" stepKey="assertSaveMessageSuccessAfterAttribute"/>
221232
<!-- Set background colour of row for description -->
222233
<comment userInput="Set background colour of row for description" stepKey="commentSetDescriptionRowBackgroundColor"/>
223234
<click selector="{{AdminProductContentSection.sectionHeader}}" stepKey="openContentSection"/>
@@ -233,11 +244,6 @@
233244
<actionGroup ref="saveEditPanelSettingsFullScreen" stepKey="saveDescriptionEditPanelSettings"/>
234245
<click selector="{{PageBuilderStage.exitFullScreen}}" stepKey="exitDescriptionPageBuilderFullScreen" />
235246
<waitForPageLoad stepKey="waitForDescriptionPageLoadExitFullScreen"/>
236-
<!-- Fill the remaining product fields accordingly -->
237-
<comment userInput="Fill the remaining product fields accordingly" stepKey="commentFillProductFields"/>
238-
<actionGroup ref="fillMainProductForm" stepKey="fillMainProductForm">
239-
<argument name="product" value="SimpleProduct"/>
240-
</actionGroup>
241247
<!-- Save product -->
242248
<comment userInput="Save product" stepKey="commentSaveProduct"/>
243249
<click selector="{{AdminProductFormActionSection.saveButton}}" stepKey="saveProduct"/>
@@ -350,8 +356,14 @@
350356
<comment userInput="Create a new product" stepKey="commentCreateNewProduct"/>
351357
<amOnPage url="{{AdminProductCreatePage.url(AddToDefaultSet.attributeSetId, 'simple')}}" stepKey="navigateToNewProduct"/>
352358
<waitForPageLoad stepKey="waitForProductPage"/>
359+
<!-- Fill the remaining product fields accordingly -->
360+
<comment userInput="Fill the remaining product fields accordingly" stepKey="commentFillProductFields"/>
361+
<actionGroup ref="fillMainProductForm" stepKey="fillMainProductForm">
362+
<argument name="product" value="SimpleProduct"/>
363+
</actionGroup>
353364
<!-- Set background colour of row for our first custom attribute -->
354365
<comment userInput="Set background colour of row for our first custom attribute" stepKey="commentSetBackgroundColor"/>
366+
<scrollToTopOfPage stepKey="scrollToTopOfPage"/>
355367
<actionGroup ref="openPageBuilderForAttribute" stepKey="openPageBuilderForAttribute1">
356368
<argument name="attributeCode" value="$$createPageBuilderAttribute1.attribute_code$$"/>
357369
</actionGroup>
@@ -364,6 +376,11 @@
364376
<actionGroup ref="saveEditPanelSettingsFullScreen" stepKey="saveEditPanelSettings"/>
365377
<click selector="{{PageBuilderStage.exitFullScreen}}" stepKey="exitPageBuilderFullScreen" />
366378
<waitForPageLoad stepKey="waitForPageLoadExitFullScreen"/>
379+
<!-- Save product, after first attribute -->
380+
<comment userInput="Save product, after first attribute" stepKey="commentSaveProductAfterAttribute"/>
381+
<click selector="{{AdminProductFormActionSection.saveButton}}" stepKey="saveProductAfterAttribute"/>
382+
<waitForPageLoad stepKey="waitForPageLoadSaveProductAfterAttribute"/>
383+
<waitForElementVisible selector="{{AdminProductMessagesSection.successMessage}}" stepKey="assertSaveMessageSuccessAfterAttribute"/>
367384
<!-- Set background colour of row for our second custom attribute -->
368385
<comment userInput="Set background colour of row for our second custom attribute" stepKey="commentSetBackgroundColor1"/>
369386
<actionGroup ref="openPageBuilderForAttribute" stepKey="openPageBuilderForAttribute2">
@@ -378,11 +395,6 @@
378395
<actionGroup ref="saveEditPanelSettingsFullScreen" stepKey="saveEditPanelSettings1"/>
379396
<click selector="{{PageBuilderStage.exitFullScreen}}" stepKey="exitPageBuilderFullScreen1" />
380397
<waitForPageLoad stepKey="waitForPageLoadExitFullScreen1"/>
381-
<!-- Fill the remaining product fields accordingly -->
382-
<comment userInput="Fill the remaining product fields accordingly" stepKey="commentFillProductFields"/>
383-
<actionGroup ref="fillMainProductForm" stepKey="fillMainProductForm">
384-
<argument name="product" value="SimpleProduct"/>
385-
</actionGroup>
386398
<!-- Save product -->
387399
<comment userInput="Save product" stepKey="commentSaveProduct"/>
388400
<click selector="{{AdminProductFormActionSection.saveButton}}" stepKey="saveProduct"/>
@@ -475,6 +487,11 @@
475487
<actionGroup ref="saveEditPanelSettingsFullScreen" stepKey="saveEditPanelSettings"/>
476488
<click selector="{{PageBuilderStage.exitFullScreen}}" stepKey="exitPageBuilderFullScreen" />
477489
<waitForPageLoad stepKey="waitForPageLoadExitFullScreen"/>
490+
<!-- Save product after custom attribute -->
491+
<comment userInput="Save product after custom attribute" stepKey="saveProductAfterCustomAttribute"/>
492+
<click selector="{{AdminProductFormActionSection.saveButton}}" stepKey="saveProductAfterAttribute"/>
493+
<waitForPageLoad stepKey="waitForPageLoadSaveProductAfterAttribute"/>
494+
<waitForElementVisible selector="{{AdminProductMessagesSection.successMessage}}" stepKey="assertSaveMessageSuccessAfterAttribute"/>
478495
<!-- Add PageBuilder description -->
479496
<comment userInput="Add PageBuilder description" stepKey="commentAddDescription"/>
480497
<conditionalClick selector="{{AdminProductContentSection.sectionHeader}}" dependentSelector="{{AdminProductContentSection.sectionHeaderIfNotShowing}}" visible="false" stepKey="openContentSection"/>

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less

Lines changed: 53 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -35,35 +35,46 @@
3535
height: 100%;
3636
left: 0;
3737
overflow: scroll;
38+
overflow-x: hidden;
3839
padding: 0;
3940
position: fixed;
4041
top: 0;
4142
width: 100%;
4243
z-index: 800;
4344

4445
.pagebuilder-header {
45-
background: rgba(255,255,255,.8);
46+
height: 0;
4647
padding: 0;
4748
position: fixed;
49+
position: -webkit-sticky;
50+
position: sticky;
4851
right: 0;
4952
top: 0;
5053
width: auto;
5154
z-index: 101;
5255

5356
.action-close {
54-
background-color: transparent;
57+
background: rgba(255,255,255,.8);
5558
border: none;
5659
border-radius: 0;
5760
box-shadow: none;
58-
display: block;
61+
display: inline-block;
5962
margin: 0;
6063
padding: 15px 20px;
6164
}
6265
}
6366

67+
.pagebuilder-canvas {
68+
padding-top: 25px;
69+
}
70+
6471
.pagebuilder-panel-wrapper {
72+
bottom: 0;
6573
position: fixed;
74+
position: -webkit-sticky;
75+
position: sticky;
6676
top: 0;
77+
z-index: 102;
6778

6879
.pagebuilder-panel {
6980
height: 100vh;
@@ -96,6 +107,35 @@
96107
}
97108
}
98109

110+
.pagebuilder-wysiwyg-wrapper.pagebuilder-transition-out .pagebuilder-stage-wrapper {
111+
.pagebuilder-stage-wrapper.stage-full-screen;
112+
113+
.pagebuilder-header {
114+
.pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-header;
115+
116+
.action-close {
117+
.pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-header.action-close;
118+
}
119+
}
120+
}
121+
122+
.pagebuilder-wysiwyg-wrapper.pagebuilder-transition-in {
123+
.pagebuilder-stage-wrapper {
124+
-moz-transition: .175s ease-in-out;
125+
-webkit-transition: .175s ease-in-out;
126+
opacity: 0;
127+
transform: scale(.8);
128+
transition: .175s ease-in-out;
129+
visibility: hidden;
130+
}
131+
132+
&.trigger-transition .pagebuilder-stage-wrapper {
133+
opacity: 1;
134+
transform: scale(1);
135+
visibility: visible;
136+
}
137+
}
138+
99139
.pagebuilder-add-row-wrapper {
100140
float: left;
101141
text-align: center;
@@ -154,22 +194,22 @@
154194
}
155195

156196
.pagebuilder-stage-loading {
157-
padding: 90px 0 30px;
158-
text-align: center;
159-
160-
p {
161-
font-size: 14px;
162-
margin: 3rem 0;
197+
.spinner {
198+
font-size: 4rem;
199+
left: 50%;
200+
margin-left: -2rem;
201+
margin-top: -2rem;
202+
position: absolute;
203+
top: 50%;
163204
}
164205
}
165206

166207
.pagebuilder-canvas {
167-
-moz-transition: 1s ease-in-out;
168-
-webkit-transition: 1s ease-in-out;
169-
208+
-moz-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
209+
-webkit-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
170210
opacity: 0;
171211
padding-bottom: 60px;
172-
transition: 1s ease-in-out;
212+
transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
173213
visibility: hidden;
174214

175215
&.active {

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_panel.less

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,18 @@
4747
}
4848

4949
.pagebuilder-panel-wrapper {
50-
display: none;
50+
-moz-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
51+
-webkit-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
5152
float: left;
53+
opacity: 0;
5254
position: relative;
55+
transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
56+
visibility: hidden;
5357
width: 150px;
5458

5559
&.visible {
56-
display: block;
60+
opacity: 1;
61+
visibility: visible;
5762

5863
&.sticky-top {
5964
position: fixed;
@@ -224,7 +229,7 @@
224229
&.collapsed {
225230
width: 32px;
226231

227-
#pagebuilder-panel {
232+
.pagebuilder-panel {
228233
opacity: 0;
229234
transform: translateX(-100%);
230235
}

0 commit comments

Comments
 (0)