Skip to content

Commit e0832f3

Browse files
hannahnidahannahnida
committed
Merge branch '514_content-snapshot-category-admin-page' of magento/magento2-page-builder into 511_content-snapshot-product-admin-page
2 parents ee25229 + 6137518 commit e0832f3

File tree

15 files changed

+330
-96
lines changed

15 files changed

+330
-96
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/StageActionGroup/AdminOpenPageBuilderFromContentPreviewOverlayActionGroup.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
-->
88
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
99
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
10-
<actionGroup name="AdminOpenPageBuilderFromContentPreviewOverlay">
10+
<actionGroup name="AdminOpenPageBuilderFromContentPreviewOverlayActionGroup">
1111
<annotations>
12-
<description>Verifies Page Builder Full Screen is ready.</description>
12+
<description>Click Page Builder preview overlay to open Page Builder stage.</description>
1313
</annotations>
1414
<waitForElementVisible selector="{{PageBuilderStage.stageOverlay}}" stepKey="waitForStageOverlay"/>
1515
<click selector="{{PageBuilderStage.stageOverlay}}" stepKey="clickOnStageOverlayOnStage"/>

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/StageActionGroup/ValidatePageBuilderPreviewActionGroup.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
-->
88
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
99
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
10-
<actionGroup name="ValidatePageBuilderPreview">
10+
<actionGroup name="ValidatePageBuilderPreviewActionGroup">
1111
<annotations>
12-
<description>Verifies Page Builder preview is ready.</description>
12+
<description>Verifies Page Builder preview has the 'Edit with Page Builder' button, has an overlay, does not have the Page Builder left panel, does not have the Page Builder template buttons, and does not open content type option menus.</description>
1313
</annotations>
1414
<arguments>
1515
<argument name="pageBuilderArea" defaultValue="" type="string"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminContentSnapshot/PageBuilderCatalogCategoryContentSnapshotTest.xml

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,18 @@
2424
<actionGroup ref="NavigateToCreatedCategoryActionGroup" stepKey="navigateToAPageWithPageBuilder">
2525
<argument name="Category" value="$$createPreReqCategory$$"/>
2626
</actionGroup>
27-
<actionGroup ref="expandAdminCategorySection" stepKey="switchToPageBuilderStage"/>
27+
<actionGroup ref="expandAdminCategorySection" stepKey="expandContentSection"/>
2828
</before>
2929
<after>
3030
<deleteData createDataKey="createPreReqCategory" stepKey="deleteCreatedCategory"/>
3131
<actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
3232
</after>
3333
<!-- Verify Page Builder preview is ready -->
34-
<actionGroup ref="ValidatePageBuilderPreview" stepKey="verifyPageBuilderPreview"/>
34+
<actionGroup ref="ValidatePageBuilderPreviewActionGroup" stepKey="verifyPageBuilderPreview"/>
3535
<!-- Verify Empty Row -->
36-
<actionGroup ref="verifyEmptyStage" stepKey="verifyStageEmptyRow"/>
37-
<!-- Verify Page Builder Full Screen -->
38-
<actionGroup ref="AdminOpenPageBuilderFromContentPreviewOverlay" stepKey="verifyPageBuilderFullScreen"/>
36+
<actionGroup ref="verifyEmptyStage" stepKey="verifyPreviewEmptyRow"/>
37+
<!-- Open Page Builder Full Screen -->
38+
<actionGroup ref="AdminOpenPageBuilderFromContentPreviewOverlayActionGroup" stepKey="openPageBuilderFullScreen"/>
3939
<!-- Verify Empty Row -->
4040
<actionGroup ref="verifyEmptyStage" stepKey="verifyFullScreenEmptyRow"/>
4141
<!-- Add Button to Row -->
@@ -53,10 +53,10 @@
5353
<!-- Verify PageBuilder Button Content Type is on Stage -->
5454
<waitForElementVisible selector="{{ButtonItemOnStorefrontEmptyLink.buttonItemText('1', PageBuilderButtonItemText_OneCharacter.value)}}" stepKey="seePageBuilderButtonText"/>
5555
<!-- Verify no Empty Preview Message on Stage -->
56-
<dontSeeElementInDOM selector="{{RowOnStage.empty('1')}}" stepKey="dontSeeEmptyPreviewMessageOnStage"/>
56+
<dontSeeElementInDOM selector="{{RowOnStage.empty('1')}}" stepKey="dontSeeEmptyRowOnPreview"/>
5757
<!-- Verify Page Builder preview is ready -->
58-
<actionGroup ref="ValidatePageBuilderPreview" stepKey="verifyPageBuilderPreviewAfterFullScreen"/>
58+
<actionGroup ref="ValidatePageBuilderPreviewActionGroup" stepKey="verifyPageBuilderPreviewAfterFullScreen"/>
5959
<!-- Verify Page Builder Full Screen -->
60-
<actionGroup ref="AdminOpenPageBuilderFromContentPreviewOverlay" stepKey="verifyPageBuilderFullScreenAfterFullScreen"/>
60+
<actionGroup ref="AdminOpenPageBuilderFromContentPreviewOverlayActionGroup" stepKey="openPageBuilderFullScreen2"/>
6161
</test>
6262
</tests>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTemplateTests/PageBuilderTemplatesDisablePageBuilder.xml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,18 @@
2525
</before>
2626
<after>
2727
<magentoCLI command="config:set cms/pagebuilder/enabled 1" stepKey="enablePageBuilder"/>
28+
<actionGroup ref="CliCacheFlushActionGroup" stepKey="flushCache">
29+
<argument name="tags" value=""/>
30+
</actionGroup>
2831
<actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
2932
</after>
3033
<!-- Verify Successful Navigation to Templates Page -->
3134
<actionGroup ref="navigateToPageBuilderTemplatesGridPage" stepKey="navigateToPageBuilderTemplatesGridPage"/>
3235
<!-- Disabled Page Builder -->
3336
<magentoCLI command="config:set cms/pagebuilder/enabled 0" stepKey="disablePageBuilder"/>
37+
<actionGroup ref="CliCacheFlushActionGroup" stepKey="flushCache">
38+
<argument name="tags" value=""/>
39+
</actionGroup>
3440
<actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
3541
<actionGroup ref="AdminLoginActionGroup" stepKey="loginAsAdmin"/>
3642
<!-- Verify Unsuccessful Navigation to Templates Page -->

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,30 @@
4848
display: none !important;
4949
}
5050
}
51+
52+
//
53+
// Animations
54+
// _____________________________________________
55+
56+
.keyframes(
57+
@name;
58+
@arguments
59+
) {
60+
@-moz-keyframes @name {
61+
@arguments();
62+
}
63+
64+
@-webkit-keyframes @name {
65+
@arguments();
66+
}
67+
68+
@keyframes @name {
69+
@arguments();
70+
}
71+
}
72+
73+
.animation (@arguments) {
74+
-webkit-animation: @arguments;
75+
-moz-animation: @arguments;
76+
animation: @arguments;
77+
}

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

Lines changed: 144 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
// * See COPYING.txt for license details.
44
// */
55

6+
@border-size: 2px; // Deprecated
7+
68
.pagebuilder-header {
79
opacity: 0;
810
text-align: right;
@@ -23,16 +25,6 @@
2325
}
2426
}
2527

26-
.pagebuilder-content-snapshot {
27-
.pagebuilder-header {
28-
display: none;
29-
30-
&.visible {
31-
display: block;
32-
}
33-
}
34-
}
35-
3628
.admin__fieldset > .admin__field > .admin__control-grouped {
3729
&.pagebuilder-active {
3830
float: left;
@@ -54,22 +46,6 @@
5446
pointer-events: none;
5547
}
5648

57-
&.pagebuilder-content-snapshot {
58-
&.stage-full-screen {
59-
.pagebuilder-header {
60-
display: block;
61-
62-
&.visible {
63-
display: block;
64-
}
65-
}
66-
67-
.pagebuilder-canvas {
68-
padding-bottom: 120px;
69-
}
70-
}
71-
}
72-
7349
&.stage-full-screen {
7450
-moz-transform: translateZ(0);
7551
-webkit-transform: translateZ(0);
@@ -124,6 +100,12 @@
124100
padding-top: 30px;
125101
}
126102

103+
&.stage-content-snapshot {
104+
.pagebuilder-canvas {
105+
padding-bottom: 120px;
106+
}
107+
}
108+
127109
.pagebuilder-panel-wrapper {
128110
bottom: 0;
129111
position: fixed;
@@ -303,18 +285,149 @@
303285
}
304286
}
305287

306-
.pagebuilder-content-snapshot {
288+
.stage-content-snapshot {
289+
.pagebuilder-stage {
290+
.pagebuilder-canvas {
291+
padding-bottom: 0;
292+
padding-top: 8px;
293+
}
294+
}
295+
}
296+
297+
.pagebuilder-wysiwyg-snapshot {
307298
.pagebuilder-stage {
299+
-moz-transition: @pagebuilder-transition;
300+
-webkit-transition: @pagebuilder-transition;
301+
margin-left: auto;
302+
transition: @pagebuilder-transition;
303+
}
304+
305+
.element-children.content-type-container.root-container-container {
306+
background-color: @color-white;
307+
}
308+
309+
.pagebuilder-stage-wrapper {
308310
-moz-transition: none;
309311
-webkit-transition: none;
310-
margin-left: auto;
312+
background-color: transparent;
311313
transition: none;
312314

313-
.pagebuilder-canvas {
314-
padding-bottom: 0;
315-
padding-top: 8px;
315+
&.stage-full-screen {
316+
.keyframes(fade-in; {
317+
0% {
318+
background-color: transparent;
319+
}
320+
100% {
321+
background-color: @color-white;
322+
}
323+
});
324+
.animation(fade-in @pagebuilder-animation);
325+
background-color: @color-white;
326+
327+
&.transition-out {
328+
.keyframes(fade-out; {
329+
0% {
330+
background-color: @color-white;
331+
}
332+
50% {
333+
background-color: @color-white;
334+
}
335+
100% {
336+
background-color: transparent;
337+
}
338+
});
339+
.animation(fade-out @pagebuilder-animation);
340+
}
341+
342+
.pagebuilder-stage {
343+
left: 0;
344+
position: relative;
345+
top: 0;
346+
width: calc(~'100% - 150px');
347+
}
316348
}
349+
}
317350

351+
.pagebuilder-header {
352+
.keyframes(slide-in-top; {
353+
0% {
354+
-moz-transform: translateX(-41px);
355+
-webkit-transform: translateY(-41px);
356+
transform: translateY(-41px);
357+
}
358+
100% {
359+
-moz-transform: translateX(0);
360+
-webkit-transform: translateX(0);
361+
transform: translateX(0);
362+
}
363+
});
364+
.animation(slide-in-top @pagebuilder-animation);
365+
opacity: 1;
366+
transition: none;
367+
visibility: visible;
368+
369+
&.transition-out {
370+
.pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-header;
371+
.keyframes(slide-out-top; {
372+
0% {
373+
-moz-transform: translateX(0);
374+
-webkit-transform: translateX(0);
375+
transform: translateX(0);
376+
}
377+
100% {
378+
-moz-transform: translateX(-41px);
379+
-webkit-transform: translateY(-41px);
380+
transform: translateY(-41px);
381+
}
382+
});
383+
.animation(slide-out-top @pagebuilder-animation);
384+
-moz-transition: none;
385+
-webkit-transition: none;
386+
transition: none;
387+
z-index: 801;
388+
}
389+
}
390+
391+
.pagebuilder-panel-wrapper {
392+
.keyframes(slide-in-left; {
393+
0% {
394+
-moz-transform: translateX(-150px);
395+
-webkit-transform: translateX(-150px);
396+
transform: translateX(-150px);
397+
}
398+
100% {
399+
-moz-transform: translateX(0);
400+
-webkit-transform: translateX(0);
401+
transform: translateX(0);
402+
}
403+
});
404+
.animation(slide-in-left @pagebuilder-animation);
405+
-moz-transition: none;
406+
-webkit-transition: none;
407+
opacity: 1;
408+
transition: none;
409+
visibility: visible;
410+
411+
&.transition-out {
412+
.pagebuilder-stage-wrapper.stage-full-screen.pagebuilder-panel-wrapper;
413+
.keyframes(slide-out-left; {
414+
0% {
415+
-moz-transform: translateX(0);
416+
-webkit-transform: translateX(0);
417+
transform: translateX(0);
418+
}
419+
100% {
420+
-moz-transform: translateX(-150px);
421+
-webkit-transform: translateX(-150px);
422+
transform: translateX(-150px);
423+
}
424+
});
425+
.animation(slide-out-left @pagebuilder-animation);
426+
-moz-transition: none;
427+
-webkit-transition: none;
428+
transition: none;
429+
z-index: 801;
430+
}
318431
}
319432
}
320433

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@
4949
.pagebuilder-panel-wrapper {
5050
-moz-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
5151
-webkit-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
52-
display: none;
5352
float: left;
5453
opacity: 0;
5554
position: relative;
@@ -65,10 +64,8 @@
6564
}
6665

6766
&.visible {
68-
display: block;
6967
opacity: 1;
7068
visibility: visible;
71-
z-index: 1;
7269

7370
&.sticky-top {
7471
position: fixed;

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,3 +66,12 @@
6666
@tab-size: 80px;
6767
@border-width: 2px;
6868
@entity-border-width: 1px;
69+
70+
//
71+
// Transition and Animation Variables
72+
// ---------------------------------------------
73+
74+
@pagebuilder-transition-duration: .35s;
75+
@pagebuilder-transition: @pagebuilder-transition-duration ease-in-out;
76+
@pagebuilder-animation: .35s ease-in-out both;
77+

0 commit comments

Comments
 (0)