Skip to content

Commit be79998

Browse files
nathanjosiahnathanjosiah
committed
MC-3571: Implement Preview content powered by PageBuilder inside the Stage
- Initial implementation with slight tweak from prototype
1 parent 6c7d879 commit be79998

File tree

15 files changed

+154
-184
lines changed

15 files changed

+154
-184
lines changed

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/products/_default.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
// Default appearance styles
88
// _____________________________________________
99

10+
[data-role='products'],
1011
.pagebuilder-products {
1112
.rendered-content a,
1213
.rendered-content button {

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/tabs/_default.less

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,3 +182,103 @@
182182
.pagebuilder-stage.focus-child .pagebuilder-content-type.pagebuilder-tabs .tabs-content {
183183
z-index: auto;
184184
}
185+
@f6: #f6f6f6;
186+
@ccc: #ccc;
187+
@color-black: #000;
188+
@color-white: #fff;
189+
190+
//
191+
// Default appearance styles
192+
// _____________________________________________
193+
194+
div[data-role='tabs'] {
195+
.tabs-navigation {
196+
display: block;
197+
font-size: 0;
198+
margin: 0 0 -1px;
199+
padding: 0;
200+
201+
li:first-child {
202+
margin-left: 0 !important;
203+
}
204+
205+
li.tab-header {
206+
background: @f6;
207+
border: 1px solid @ccc;
208+
border-bottom: 0 !important;
209+
border-bottom-left-radius: 0 !important;
210+
border-bottom-right-radius: 0 !important;
211+
display: inline-block;
212+
margin: 0;
213+
position: relative;
214+
z-index: 1;
215+
216+
&:not(:first-child) {
217+
margin-left: -1px;
218+
}
219+
220+
a.tab-title {
221+
border-right: 0;
222+
color: @color-black;
223+
cursor: pointer !important;
224+
display: block;
225+
font-size: 14px;
226+
font-weight: 600;
227+
padding: 1.4rem 2rem;
228+
position: relative;
229+
transition: all .3s;
230+
vertical-align: middle;
231+
white-space: normal;
232+
233+
span.tab-title {
234+
display: block;
235+
}
236+
237+
&:hover {
238+
text-decoration: none;
239+
}
240+
}
241+
242+
&:last-child {
243+
border-right: 1px solid @ccc;
244+
}
245+
246+
&.ui-state-active {
247+
background: @color-white;
248+
z-index: 19;
249+
250+
a.tab-title {
251+
position: relative;
252+
transition: all .3s;
253+
}
254+
}
255+
}
256+
}
257+
258+
.tabs-content {
259+
border: 1px solid @ccc;
260+
overflow: hidden;
261+
position: relative;
262+
z-index: 9;
263+
264+
[data-role='tab-item'] {
265+
box-sizing: border-box;
266+
min-height: inherit;
267+
268+
&:not(:first-child) {
269+
display: none;
270+
}
271+
}
272+
}
273+
274+
&.tab-align-left {
275+
.tabs-content {
276+
border-top-left-radius: 0 !important;
277+
}
278+
}
279+
&.tab-align-right {
280+
.tabs-content {
281+
border-top-right-radius: 0 !important;
282+
}
283+
}
284+
}

‎app/code/Magento/PageBuilder/view/base/layout/default.xml

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,57 @@
1111
<block class="Magento\PageBuilder\Block\GoogleMapsApi" name="google.maps.api" template="Magento_PageBuilder::googlemaps.phtml" />
1212
<block class="Magento\PageBuilder\Block\WysiwygSetup" name="wysiwyg.setup" template="Magento_PageBuilder::wysiwyg_setup.phtml" />
1313
</referenceContainer>
14+
<referenceBlock name="head.components">
15+
<block class="Magento\PageBuilder\Block\WidgetInitializer" name="pagebuilder.widget.initializer" template="Magento_PageBuilder::widget_initializer.phtml">
16+
<arguments>
17+
<argument name="config" xsi:type="array">
18+
<item name="slider" xsi:type="array">
19+
<item name="default" xsi:type="array">
20+
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/slider/appearance/default/widget</item>
21+
<!--optional if you want load widget per appearance-->
22+
<item name="appearance" xsi:type="string">default</item>
23+
</item>
24+
</item>
25+
<item name="map" xsi:type="array">
26+
<item name="default" xsi:type="array">
27+
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/map/appearance/default/widget</item>
28+
</item>
29+
</item>
30+
<item name="row" xsi:type="array">
31+
<item name="default" xsi:type="array">
32+
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/row/appearance/default/widget</item>
33+
</item>
34+
</item>
35+
<item name="tabs" xsi:type="array">
36+
<item name="default" xsi:type="array">
37+
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/tabs/appearance/default/widget</item>
38+
</item>
39+
</item>
40+
<item name="slide" xsi:type="array">
41+
<item name="default" xsi:type="array">
42+
<!--required argument-->
43+
<item name="component" xsi:type="string">Magento_PageBuilder/js/widget/show-on-hover</item>
44+
<!--optional if you need provide some config for your widget-->
45+
<item name="config" xsi:type="array">
46+
<item name="buttonSelector" xsi:type="string">.pagebuilder-slide-button</item>
47+
<item name="showOverlay" xsi:type="string">hover</item>
48+
<item name="dataRole" xsi:type="string">slide</item>
49+
</item>
50+
</item>
51+
</item>
52+
<item name="banner" xsi:type="array">
53+
<item name="default" xsi:type="array">
54+
<item name="component" xsi:type="string">Magento_PageBuilder/js/widget/show-on-hover</item>
55+
<item name="config" xsi:type="array">
56+
<item name="buttonSelector" xsi:type="string">.pagebuilder-banner-button</item>
57+
<item name="showOverlay" xsi:type="string">hover</item>
58+
<item name="dataRole" xsi:type="string">banner</item>
59+
</item>
60+
</item>
61+
</item>
62+
</argument>
63+
</arguments>
64+
</block>
65+
</referenceBlock>
1466
</body>
1567
</page>

‎app/code/Magento/PageBuilder/view/frontend/templates/widget_initializer.phtml renamed to ‎app/code/Magento/PageBuilder/view/base/templates/widget_initializer.phtml

File renamed without changes.

‎app/code/Magento/PageBuilder/view/base/web/css/source/_module.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@
55

66
@import 'hljs/hljs.less';
77
@import 'jarallax/jarallax.less';
8+
@import 'content-type/_import.less';

‎app/code/Magento/PageBuilder/view/frontend/web/js/content-type/map/appearance/default/widget.js renamed to ‎app/code/Magento/PageBuilder/view/base/web/js/content-type/map/appearance/default/widget.js

File renamed without changes.

‎app/code/Magento/PageBuilder/view/frontend/web/js/content-type/row/appearance/default/widget.js renamed to ‎app/code/Magento/PageBuilder/view/base/web/js/content-type/row/appearance/default/widget.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,6 @@ define([
1111
return function (config, element) {
1212
var $element = $(element);
1313

14-
if ($element.attr('data-appearance') && $element.attr('data-appearance') === 'contained') {
15-
$element = $(element).find('>[data-element="inner"]');
16-
}
17-
1814
if ($element.data('enableParallax') !== 1) {
1915
return;
2016
}

‎app/code/Magento/PageBuilder/view/frontend/web/js/content-type/slider/appearance/default/widget.js renamed to ‎app/code/Magento/PageBuilder/view/base/web/js/content-type/slider/appearance/default/widget.js

File renamed without changes.

‎app/code/Magento/PageBuilder/view/frontend/web/js/content-type/tabs/appearance/default/widget.js renamed to ‎app/code/Magento/PageBuilder/view/base/web/js/content-type/tabs/appearance/default/widget.js

File renamed without changes.

‎app/code/Magento/PageBuilder/view/frontend/web/js/widget-initializer.js renamed to ‎app/code/Magento/PageBuilder/view/base/web/js/widget-initializer.js

File renamed without changes.

0 commit comments

Comments
 (0)