Skip to content

Commit 5df43c9

Browse files
anthoulaanthoula
committed
MAGETWO-92697: Add vertical alignment to column configuration
- add content element to config to apply to preview - do not persist these elements on main - remove preview styles function and replace is data from config - merge style data for storefront
1 parent 87c137c commit 5df43c9

File tree

5 files changed

+43
-52
lines changed

5 files changed

+43
-52
lines changed

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/column/preview.js

Lines changed: 1 addition & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/column/full-height/master.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<div class="pagebuilder-column"
99
attr="data.main.attributes"
10-
ko-style="data.main.style"
10+
ko-style="Object.assign(data.main.style(), data.content.style())"
1111
css="data.main.css">
1212
<render args="renderChildTemplate"/>
1313
</div>

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/column/full-height/preview.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
data-bind="visible: $index() < $parent.parent.children().length - 1"></div>
1717
<div class="pagebuilder-resizing" css="{active: resizing}"></div>
1818
<render args="getOptions().template"></render>
19-
<div class="element-children content-type-container" each="parent.getChildren()" ko-style="getChildrenStyles()" css="getChildrenCss()" attr="{id: parent.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
19+
<div class="element-children content-type-container" each="parent.getChildren()" ko-style="data.content.style" css="getChildrenCss()" attr="{id: parent.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
2020
<if args="$parent.isContainer()">
2121
<div class="pagebuilder-drop-indicator"></div>
2222
</if>

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/column/preview.ts

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -210,23 +210,6 @@ export default class Preview extends PreviewCollection {
210210
}
211211
}
212212

213-
/**
214-
* Get the CSS styles for the children element
215-
*
216-
* @returns {object}
217-
*/
218-
public getChildrenStyles(): {display?: string, flexDirection?: string, justifyContent?: string} {
219-
const styles = this.data.main.style();
220-
if (_.isEmpty(styles.display)) {
221-
return {};
222-
}
223-
return {
224-
display: styles.display,
225-
flexDirection: styles.flexDirection,
226-
justifyContent: styles.justifyContent,
227-
};
228-
}
229-
230213
/**
231214
* Update the style attribute mapper converts images to directives, override it to include the correct URL
232215
*

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

Lines changed: 40 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,12 @@
3737
<property name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
3838
<property name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
3939
<property name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
40-
<property name="justify_content" source="justify_content"/>
40+
<property name="justify_content" source="justify_content" persist="false"/>
4141
<property name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
4242
<property name="width" source="width"/>
4343
<static_property source="align_self" value="stretch"/>
44-
<static_property source="display" value="flex"/>
45-
<static_property source="flex_direction" value="column"/>
44+
<static_property source="display" value="flex" persist="false"/>
45+
<static_property source="flex_direction" value="column" persist="false"/>
4646
<complex_property name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins-and-paddings" converter="Magento_PageBuilder/js/converter/style/margins-and-paddings"/>
4747
</style_properties>
4848
<attributes>
@@ -55,6 +55,13 @@
5555
</filter>
5656
</css>
5757
</element>
58+
<element name="content">
59+
<style_properties>
60+
<property name="justify_content" source="justify_content"/>
61+
<static_property source="display" value="flex"/>
62+
<static_property source="flex_direction" value="column"/>
63+
</style_properties>
64+
</element>
5865
</elements>
5966
<converters>
6067
<converter name="preferred_color_format" component="Magento_PageBuilder/js/mass-converter/preferred-color-format">
@@ -84,12 +91,12 @@
8491
<property name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
8592
<property name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
8693
<property name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
87-
<property name="justify_content" source="justify_content"/>
94+
<property name="justify_content" source="justify_content" persist="false"/>
8895
<property name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
8996
<property name="width" source="width"/>
9097
<static_property source="align_self" value="flex-start"/>
91-
<static_property source="display" value="flex"/>
92-
<static_property source="flex_direction" value="column"/>
98+
<static_property source="display" value="flex" persist="false"/>
99+
<static_property source="flex_direction" value="column" persist="false"/>
93100
<complex_property name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins-and-paddings" converter="Magento_PageBuilder/js/converter/style/margins-and-paddings"/>
94101
</style_properties>
95102
<attributes>
@@ -102,6 +109,13 @@
102109
</filter>
103110
</css>
104111
</element>
112+
<element name="content">
113+
<style_properties>
114+
<property name="justify_content" source="justify_content"/>
115+
<static_property source="display" value="flex"/>
116+
<static_property source="flex_direction" value="column"/>
117+
</style_properties>
118+
</element>
105119
</elements>
106120
<converters>
107121
<converter name="preferred_color_format" component="Magento_PageBuilder/js/mass-converter/preferred-color-format">
@@ -131,12 +145,12 @@
131145
<property name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
132146
<property name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
133147
<property name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
134-
<property name="justify_content" source="justify_content"/>
148+
<property name="justify_content" source="justify_content" persist="false"/>
135149
<property name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
136150
<property name="width" source="width"/>
137151
<static_property source="align_self" value="center"/>
138-
<static_property source="display" value="flex"/>
139-
<static_property source="flex_direction" value="column"/>
152+
<static_property source="display" value="flex" persist="false"/>
153+
<static_property source="flex_direction" value="column" persist="false"/>
140154
<complex_property name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins-and-paddings" converter="Magento_PageBuilder/js/converter/style/margins-and-paddings"/>
141155
</style_properties>
142156
<attributes>
@@ -149,6 +163,13 @@
149163
</filter>
150164
</css>
151165
</element>
166+
<element name="content">
167+
<style_properties>
168+
<property name="justify_content" source="justify_content"/>
169+
<static_property source="display" value="flex"/>
170+
<static_property source="flex_direction" value="column"/>
171+
</style_properties>
172+
</element>
152173
</elements>
153174
<converters>
154175
<converter name="preferred_color_format" component="Magento_PageBuilder/js/mass-converter/preferred-color-format">
@@ -178,12 +199,12 @@
178199
<property name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
179200
<property name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
180201
<property name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
181-
<property name="justify_content" source="justify_content"/>
202+
<property name="justify_content" source="justify_content" persist="false"/>
182203
<property name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
183204
<property name="width" source="width"/>
184205
<static_property source="align_self" value="flex-end"/>
185-
<static_property source="display" value="flex"/>
186-
<static_property source="flex_direction" value="column"/>
206+
<static_property source="display" value="flex" persist="false"/>
207+
<static_property source="flex_direction" value="column" persist="false"/>
187208
<complex_property name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins-and-paddings" converter="Magento_PageBuilder/js/converter/style/margins-and-paddings"/>
188209
</style_properties>
189210
<attributes>
@@ -196,6 +217,13 @@
196217
</filter>
197218
</css>
198219
</element>
220+
<element name="content">
221+
<style_properties>
222+
<property name="justify_content" source="justify_content"/>
223+
<static_property source="display" value="flex"/>
224+
<static_property source="flex_direction" value="column"/>
225+
</style_properties>
226+
</element>
199227
</elements>
200228
<converters>
201229
<converter name="preferred_color_format" component="Magento_PageBuilder/js/mass-converter/preferred-color-format">

0 commit comments

Comments
 (0)