Skip to content

Commit 8dc370c

Browse files
cspruiellcspruiell
committed
MC-3406: Explicit Background Attributes for Tab
 - use extensible background attributes form and add support for new mobile image attribute
1 parent 2014962 commit 8dc370c

File tree

4 files changed

+33
-172
lines changed

4 files changed

+33
-172
lines changed

‎app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_tab_item_form.xml

Lines changed: 2 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* See COPYING.txt for license details.
66
*/
77
-->
8-
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd" extends="pagebuilder_base_form">
8+
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd" extends="pagebuilder_base_form_with_background_attributes">
99
<argument name="data" xsi:type="array">
1010
<item name="js_config" xsi:type="array">
1111
<item name="provider" xsi:type="string">pagebuilder_tab_item_form.pagebuilder_tab_item_form_data_source</item>
@@ -99,165 +99,7 @@
9999
</settings>
100100
</field>
101101
</fieldset>
102-
<fieldset name="background" sortOrder="30">
103-
<settings>
104-
<label translate="true">Background</label>
105-
<collapsible>true</collapsible>
106-
<opened>true</opened>
107-
</settings>
108-
<field name="background_color" sortOrder="10" formElement="colorPicker">
109-
<settings>
110-
<label translate="true">Background Color</label>
111-
<componentType>colorPicker</componentType>
112-
<placeholder>No Color</placeholder>
113-
<validation>
114-
<rule name="validate-color" xsi:type="boolean">true</rule>
115-
</validation>
116-
<dataScope>background_color</dataScope>
117-
<additionalClasses>
118-
<class name="admin__field-medium">true</class>
119-
</additionalClasses>
120-
</settings>
121-
<formElements>
122-
<colorPicker>
123-
<settings>
124-
<colorPickerMode>full</colorPickerMode>
125-
<colorFormat>hex</colorFormat>
126-
</settings>
127-
</colorPicker>
128-
</formElements>
129-
</field>
130-
<field name="background_image" sortOrder="20" formElement="imageUploader">
131-
<settings>
132-
<label translate="true">Background Image</label>
133-
<componentType>imageUploader</componentType>
134-
</settings>
135-
<formElements>
136-
<imageUploader>
137-
<settings>
138-
<allowedExtensions>jpg jpeg gif png</allowedExtensions>
139-
<maxFileSize>2097152</maxFileSize>
140-
<uploaderConfig>
141-
<param xsi:type="string" name="url">pagebuilder/contenttype/image_upload</param>
142-
</uploaderConfig>
143-
<previewTmpl>Magento_PageBuilder/form/element/uploader/preview</previewTmpl>
144-
</settings>
145-
</imageUploader>
146-
</formElements>
147-
</field>
148-
<field name="background_position" sortOrder="30" formElement="select">
149-
<argument name="data" xsi:type="array">
150-
<item name="config" xsi:type="array">
151-
<item name="default" xsi:type="string">left top</item>
152-
</item>
153-
</argument>
154-
<settings>
155-
<dataType>text</dataType>
156-
<label translate="true">Background Position</label>
157-
</settings>
158-
<formElements>
159-
<select>
160-
<settings>
161-
<options>
162-
<option name="0" xsi:type="array">
163-
<item name="value" xsi:type="string">left top</item>
164-
<item name="label" xsi:type="string" translate="true">Top Aligned</item>
165-
</option>
166-
<option name="1" xsi:type="array">
167-
<item name="value" xsi:type="string">center center</item>
168-
<item name="label" xsi:type="string" translate="true">Centered</item>
169-
</option>
170-
<option name="2" xsi:type="array">
171-
<item name="value" xsi:type="string">left bottom</item>
172-
<item name="label" xsi:type="string" translate="true">Bottom Aligned</item>
173-
</option>
174-
</options>
175-
</settings>
176-
</select>
177-
</formElements>
178-
</field>
179-
<field name="background_size" sortOrder="40" formElement="select">
180-
<argument name="data" xsi:type="array">
181-
<item name="config" xsi:type="array">
182-
<item name="default" xsi:type="string">cover</item>
183-
</item>
184-
</argument>
185-
<settings>
186-
<dataType>text</dataType>
187-
<label translate="true">Background Size</label>
188-
</settings>
189-
<formElements>
190-
<select>
191-
<settings>
192-
<options>
193-
<option name="0" xsi:type="array">
194-
<item name="value" xsi:type="string">auto</item>
195-
<item name="label" xsi:type="string" translate="true">Auto</item>
196-
</option>
197-
<option name="1" xsi:type="array">
198-
<item name="value" xsi:type="string">cover</item>
199-
<item name="label" xsi:type="string" translate="true">Cover</item>
200-
</option>
201-
<option name="2" xsi:type="array">
202-
<item name="value" xsi:type="string">contain</item>
203-
<item name="label" xsi:type="string" translate="true">Contain</item>
204-
</option>
205-
</options>
206-
</settings>
207-
</select>
208-
</formElements>
209-
</field>
210-
<field name="background_repeat" sortOrder="50" formElement="checkbox">
211-
<argument name="data" xsi:type="array">
212-
<item name="config" xsi:type="array">
213-
<item name="default" xsi:type="string">no-repeat</item>
214-
</item>
215-
</argument>
216-
<settings>
217-
<dataType>boolean</dataType>
218-
<label translate="true">Background Repeat</label>
219-
<dataScope>background_repeat</dataScope>
220-
</settings>
221-
<formElements>
222-
<checkbox>
223-
<settings>
224-
<valueMap>
225-
<map name="false" xsi:type="string">no-repeat</map>
226-
<map name="true" xsi:type="string">repeat</map>
227-
</valueMap>
228-
<prefer>toggle</prefer>
229-
</settings>
230-
</checkbox>
231-
</formElements>
232-
</field>
233-
<field name="background_attachment" sortOrder="60" formElement="select">
234-
<argument name="data" xsi:type="array">
235-
<item name="config" xsi:type="array">
236-
<item name="default" xsi:type="string">scroll</item>
237-
</item>
238-
</argument>
239-
<settings>
240-
<dataType>text</dataType>
241-
<label translate="true">Background Attachment</label>
242-
</settings>
243-
<formElements>
244-
<select>
245-
<settings>
246-
<options>
247-
<option name="0" xsi:type="array">
248-
<item name="value" xsi:type="string">scroll</item>
249-
<item name="label" xsi:type="string" translate="true">Scroll</item>
250-
</option>
251-
<option name="1" xsi:type="array">
252-
<item name="value" xsi:type="string">fixed</item>
253-
<item name="label" xsi:type="string" translate="true">Fixed</item>
254-
</option>
255-
</options>
256-
</settings>
257-
</select>
258-
</formElements>
259-
</field>
260-
</fieldset>
102+
<fieldset name="background" sortOrder="30"/>
261103
<fieldset name="advanced">
262104
<field name="border" sortOrder="20" formElement="select">
263105
<argument name="data" xsi:type="array">

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/tab-item/default/master.html

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,10 @@
66
-->
77

88
<div attr="Object.assign({}, data.main.attributes(), { id: parent.id })" ko-style="data.main.style" css="data.main.css">
9-
<render args="renderChildTemplate" />
9+
<div class="pagebuilder-mobile-hidden" attr="data.desktop_image.attributes" ko-style="data.desktop_image.style" css="data.desktop_image.css">
10+
<render args="renderChildTemplate" />
11+
</div>
12+
<div class="pagebuilder-mobile-only" attr="data.mobile_image.attributes" ko-style="data.mobile_image.style" css="data.mobile_image.css">
13+
<render args="renderChildTemplate" />
14+
</div>
1015
</div>

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/tab-item/default/preview.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66
-->
77

8-
<div class="pagebuilder-content-type type-container pagebuilder-tab-item" attr="Object.assign({}, {id: parent.id}, data.main.attributes())" ko-style="Object.assign({}, data.main.style(), {borderRadius: data.main.style().borderRadius || $parent.parent.preview.data.headers.style().borderRadius})" css="Object.assign({'empty-container': parent.children().length == 0}, data.main.css())">
8+
<div class="pagebuilder-content-type type-container pagebuilder-tab-item" attr="Object.assign({}, {id: parent.id}, data.main.attributes(), data.desktop_image.attributes())" ko-style="Object.assign({}, data.main.style(), data.desktop_image.style(), {borderRadius: data.main.style().borderRadius || $parent.parent.preview.data.headers.style().borderRadius})" css="Object.assign({'empty-container': parent.children().length == 0}, data.main.css(), data.desktop_image.css())">
99
<render args="previewChildTemplate" />
1010
<div class="pagebuilder-empty-container empty-placeholder" css="{visible: parent.children().length == 0}" translate="'Drag content types or columns here'"></div>
1111
</div>

‎app/code/Magento/PageBuilder/view/base/pagebuilder/content_type/tab_item.xml

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,25 +31,39 @@
3131
reader="Magento_PageBuilder/js/master-format/read/configurable">
3232
<elements>
3333
<element name="main">
34-
<style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
35-
<style name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/color"/>
36-
<style name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
37-
<style name="background_position" source="background_position"/>
38-
<style name="background_size" source="background_size"/>
39-
<style name="background_repeat" source="background_repeat"/>
40-
<style name="background_attachment" source="background_attachment"/>
41-
<style name="text_align" source="text_align"/>
4234
<style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
4335
<style name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
4436
<style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
4537
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
46-
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
47-
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
4838
<attribute name="name" source="data-role"/>
4939
<attribute name="appearance" source="data-appearance"/>
5040
<attribute name="tab_name" source="data-tab-name"/>
5141
<css name="css_classes"/>
5242
</element>
43+
<element name="desktop_image">
44+
<style name="text_align" source="text_align"/>
45+
<style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
46+
<style name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/color"/>
47+
<style name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
48+
<style name="background_position" source="background_position"/>
49+
<style name="background_size" source="background_size"/>
50+
<style name="background_repeat" source="background_repeat"/>
51+
<style name="background_attachment" source="background_attachment"/>
52+
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/content-type/slide/converter/style/margins"/>
53+
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
54+
</element>
55+
<element name="mobile_image">
56+
<style name="text_align" source="text_align"/>
57+
<style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
58+
<style name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/color"/>
59+
<style name="mobile_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
60+
<style name="background_position" source="background_position"/>
61+
<style name="background_size" source="background_size"/>
62+
<style name="background_repeat" source="background_repeat"/>
63+
<style name="background_attachment" source="background_attachment"/>
64+
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/content-type/slide/converter/style/margins"/>
65+
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
66+
</element>
5367
</elements>
5468
</appearance>
5569
</appearances>

0 commit comments

Comments
 (0)