Skip to content

Commit 6137518

Browse files
omiroshnichenkoomiroshnichenko
authored
Merge pull request #577 from magento/514__7_content-snapshot-category-admin-page
#514: User sees content snapshot on Cate…
2 parents 135b5eb + 379db15 commit 6137518

File tree

10 files changed

+306
-83
lines changed

10 files changed

+306
-83
lines changed

‎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: 142 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,6 @@
2525
}
2626
}
2727

28-
.pagebuilder-content-snapshot {
29-
.pagebuilder-header {
30-
display: none;
31-
32-
&.visible {
33-
display: block;
34-
}
35-
}
36-
}
37-
3828
.admin__fieldset > .admin__field > .admin__control-grouped {
3929
&.pagebuilder-active {
4030
float: left;
@@ -56,22 +46,6 @@
5646
pointer-events: none;
5747
}
5848

59-
&.pagebuilder-content-snapshot {
60-
&.stage-full-screen {
61-
.pagebuilder-header {
62-
display: block;
63-
64-
&.visible {
65-
display: block;
66-
}
67-
}
68-
69-
.pagebuilder-canvas {
70-
padding-bottom: 120px;
71-
}
72-
}
73-
}
74-
7549
&.stage-full-screen {
7650
-moz-transform: translateZ(0);
7751
-webkit-transform: translateZ(0);
@@ -126,6 +100,12 @@
126100
padding-top: 30px;
127101
}
128102

103+
&.stage-content-snapshot {
104+
.pagebuilder-canvas {
105+
padding-bottom: 120px;
106+
}
107+
}
108+
129109
.pagebuilder-panel-wrapper {
130110
bottom: 0;
131111
position: fixed;
@@ -305,18 +285,149 @@
305285
}
306286
}
307287

308-
.pagebuilder-content-snapshot {
288+
.stage-content-snapshot {
309289
.pagebuilder-stage {
290+
.pagebuilder-canvas {
291+
padding-bottom: 0;
292+
padding-top: 8px;
293+
}
294+
}
295+
}
296+
297+
.pagebuilder-wysiwyg-snapshot {
298+
.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 {
310310
-moz-transition: none;
311311
-webkit-transition: none;
312-
margin-left: auto;
312+
background-color: transparent;
313313
transition: none;
314314

315-
.pagebuilder-canvas {
316-
padding-bottom: 0;
317-
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+
}
318348
}
349+
}
319350

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+
}
320431
}
321432
}
322433

‎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)