Skip to content

Commit 1c37709

Browse files
omiroshnichenkoomiroshnichenko
committed
PB-277: Full height Row
1 parent dfe36e7 commit 1c37709

File tree

4 files changed

+68
-7
lines changed

4 files changed

+68
-7
lines changed

‎app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/row.xml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
<style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
4848
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
4949
<style name="justify_content" source="justify_content" persistence_mode="read"/>
50-
<style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
50+
<style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/min-height"/>
5151
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/margins"/>
5252
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/paddings"/>
5353
<attribute name="enable_parallax" source="data-enable-parallax"/>
@@ -89,7 +89,7 @@
8989
<style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
9090
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
9191
<style name="justify_content" source="justify_content" persistence_mode="read"/>
92-
<style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
92+
<style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/min-height"/>
9393
<style name="display" source="display" converter="Magento_PageBuilder/js/converter/style/display" preview_converter="Magento_PageBuilder/js/converter/style/preview/display"/>
9494
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/margins"/>
9595
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/paddings"/>
@@ -135,7 +135,7 @@
135135
<style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
136136
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
137137
<style name="justify_content" source="justify_content" persistence_mode="read"/>
138-
<style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
138+
<style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/min-height"/>
139139
<style name="display" source="display" converter="Magento_PageBuilder/js/converter/style/display" preview_converter="Magento_PageBuilder/js/converter/style/preview/display"/>
140140
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/margins"/>
141141
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/paddings"/>

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,13 +72,11 @@
7272
<field name="min_height" sortOrder="20" formElement="input">
7373
<settings>
7474
<label translate="true">Minimum Height</label>
75-
<addAfter translate="true">px</addAfter>
7675
<additionalClasses>
77-
<class name="admin__field-small">true</class>
76+
<class name="admin__field-medium">true</class>
7877
</additionalClasses>
7978
<validation>
80-
<rule name="validate-number" xsi:type="boolean">true</rule>
81-
<rule name="greater-than-equals-to" xsi:type="number">0</rule>
79+
<rule name="validate-calc" xsi:type="boolean">true</rule>
8280
</validation>
8381
</settings>
8482
</field>

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/validator-rules-mixin.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,25 @@ define([
105105
);
106106
}
107107

108+
/**
109+
* Validate calc value.
110+
*
111+
* @param {String} value
112+
* @returns {Boolean}
113+
*/
114+
function validateCalc(value) {
115+
var el = document.createElement('div'),
116+
style = el.style;
117+
118+
if (!value.trim().length) {
119+
return true;
120+
}
121+
122+
style.width = 'calc(' + value + ')';
123+
124+
return !!style.width.length;
125+
}
126+
108127
return function (validator) {
109128
var requiredInputRule = validator.getRule('required-entry');
110129

@@ -209,6 +228,14 @@ define([
209228
$.mage.__('Adding link in both content and outer element is not allowed.')
210229
);
211230

231+
validator.addRule(
232+
'validate-calc',
233+
function (value) {
234+
return validateCalc(value);
235+
},
236+
$.mage.__('Please enter a valid value or expression: the + and - operators must be surrounded by whitespace; unexpected division by zero; single value should have extension.')//eslint-disable-line max-len
237+
);
238+
212239
validateObjectField(validator, 'validate-number');
213240
validateObjectField(validator, 'less-than-equals-to');
214241
validateObjectField(validator, 'greater-than-equals-to');

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/converter/style/min-height.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/**
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
6+
import {DataObject} from "../../data-store";
7+
import {get} from "../../utils/object";
8+
import ConverterInterface from "../converter-interface";
9+
10+
/**
11+
* @api
12+
*/
13+
export default class MinHeight implements ConverterInterface {
14+
/**
15+
* Convert value to internal format
16+
*
17+
* @param value string
18+
* @returns {string | object}
19+
*/
20+
public fromDom(value: string): object | string {
21+
return value.indexOf("calc") !== -1 ? value.substring(5, value.length - 1) : value;
22+
}
23+
24+
/**
25+
* Convert value to knockout format
26+
*
27+
* @param name string
28+
* @param data Object
29+
* @returns {string | object}
30+
*/
31+
public toDom(name: string, data: DataObject): string {
32+
const value = get<string>(data, name);
33+
34+
return value.split(/\+|\-|\*|\//).length > 1 ? `calc(${get(data, name)})` : value;
35+
}
36+
}

0 commit comments

Comments
 (0)