Skip to content

Commit 7fd3bfe

Browse files
omiroshnichenkoomiroshnichenko
authored
Merge pull request #670 from yolouiese/637-form-field-viewport-scope-icon-tooltip-content-type
#637: Form field/field group viewport scope - icon and tooltip
2 parents 1ca5f11 + 381df2a commit 7fd3bfe

15 files changed

+180
-1
lines changed

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,19 @@
4141
</item>
4242
</item>
4343
</argument>
44+
<settings>
45+
<additionalClasses>
46+
<class name="admin__field-min-height-mobile-with-notice">true</class>
47+
<class name="admin__field-min-height">true</class>
48+
</additionalClasses>
49+
<tooltip>
50+
<description translate="true">
51+
<![CDATA[
52+
<p>Style changes will only affect this breakpoint</p>
53+
]]>
54+
</description>
55+
</tooltip>
56+
</settings>
4457
</field>
4558
</fieldset>
4659
</form>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,19 @@
4141
</item>
4242
</item>
4343
</argument>
44+
<settings>
45+
<additionalClasses>
46+
<class name="admin__field-min-height-mobile">true</class>
47+
<class name="admin__field-min-height">true</class>
48+
</additionalClasses>
49+
<tooltip>
50+
<description translate="true">
51+
<![CDATA[
52+
<p>Style changes will only affect this breakpoint</p>
53+
]]>
54+
</description>
55+
</tooltip>
56+
</settings>
4457
</field>
4558
</fieldset>
4659
</form>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,19 @@
4141
</item>
4242
</item>
4343
</argument>
44+
<settings>
45+
<additionalClasses>
46+
<class name="admin__field-min-height-mobile-with-notice">true</class>
47+
<class name="admin__field-min-height">true</class>
48+
</additionalClasses>
49+
<tooltip>
50+
<description translate="true">
51+
<![CDATA[
52+
<p>Style changes will only affect this breakpoint</p>
53+
]]>
54+
</description>
55+
</tooltip>
56+
</settings>
4457
</field>
4558
</fieldset>
4659
</form>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,19 @@
4141
</item>
4242
</item>
4343
</argument>
44+
<settings>
45+
<additionalClasses>
46+
<class name="admin__field-min-height-mobile-with-notice">true</class>
47+
<class name="admin__field-min-height">true</class>
48+
</additionalClasses>
49+
<tooltip>
50+
<description translate="true">
51+
<![CDATA[
52+
<p>Style changes will only affect this breakpoint</p>
53+
]]>
54+
</description>
55+
</tooltip>
56+
</settings>
4457
</field>
4558
</fieldset>
4659
</form>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,19 @@
4141
</item>
4242
</item>
4343
</argument>
44+
<settings>
45+
<additionalClasses>
46+
<class name="admin__field-min-height-mobile-with-notice">true</class>
47+
<class name="admin__field-min-height">true</class>
48+
</additionalClasses>
49+
<tooltip>
50+
<description translate="true">
51+
<![CDATA[
52+
<p>Style changes will only affect this breakpoint</p>
53+
]]>
54+
</description>
55+
</tooltip>
56+
</settings>
4457
</field>
4558
</fieldset>
4659
</form>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,19 @@
4141
</item>
4242
</item>
4343
</argument>
44+
<settings>
45+
<additionalClasses>
46+
<class name="admin__field-min-height-mobile">true</class>
47+
<class name="admin__field-min-height">true</class>
48+
</additionalClasses>
49+
<tooltip>
50+
<description translate="true">
51+
<![CDATA[
52+
<p>Style changes will only affect this breakpoint</p>
53+
]]>
54+
</description>
55+
</tooltip>
56+
</settings>
4457
</field>
4558
</fieldset>
4659
</form>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,19 @@
4141
</item>
4242
</item>
4343
</argument>
44+
<settings>
45+
<additionalClasses>
46+
<class name="admin__field-min-height-mobile">true</class>
47+
<class name="admin__field-min-height">true</class>
48+
</additionalClasses>
49+
<tooltip>
50+
<description translate="true">
51+
<![CDATA[
52+
<p>Style changes will only affect this breakpoint</p>
53+
]]>
54+
</description>
55+
</tooltip>
56+
</settings>
4457
</field>
4558
</fieldset>
4659
</form>

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_icons.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
@icon-pagebuilder-widgets__content: '\e918';
3838
@icon-pagebuilder-show__content: '\e91f';
3939
@icon-pagebuilder-hide__content: '\e920';
40+
@icon-pagebuilder-mobile__content: '\e921';
4041

4142
.icon-pagebuilder-accordion:before {
4243
content: @icon-pagebuilder-accordion__content;

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/form/element/_import.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,4 @@
1313
@import 'uploader/preview/_image.less';
1414
@import '_visual-select.less';
1515
@import '_product-totals.less';
16+
@import '_mobile.less';

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/form/element/_mobile.less

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
// /**
2+
// * Copyright © Magento, Inc. All rights reserved.
3+
// * See COPYING.txt for license details.
4+
// */
5+
6+
//
7+
// Default appearance styles rendered through Mobile viewport
8+
// _____________________________________________________
9+
.admin__fieldset .admin__field.admin__field-min-height-mobile,
10+
.admin__fieldset .admin__field.admin__field-min-height-mobile-with-notice {
11+
.admin__field-control._with-tooltip {
12+
.admin__control-addon {
13+
max-width: inherit;
14+
}
15+
16+
.admin__field-tooltip {
17+
margin-left: 19px;
18+
margin-top: .3rem;
19+
}
20+
21+
.admin__field-tooltip-action {
22+
&:before {
23+
color: @color-gray-middle5;
24+
content: @icon-pagebuilder-mobile__content;
25+
font-family: @icon_font;
26+
font-size: 1.9rem;
27+
line-height: inherit;
28+
overflow: inherit;
29+
}
30+
}
31+
32+
.admin__field-tooltip-content {
33+
background: @color-gray-middle5;
34+
border: none;
35+
bottom: auto;
36+
box-shadow: unset;
37+
left: -1.9rem;
38+
opacity: .9;
39+
padding: 6px 15px 2px;
40+
right: auto;
41+
top: 3.5rem;
42+
width: 16rem;
43+
44+
p {
45+
color: @color-white;
46+
font-size: 1.2rem;
47+
}
48+
49+
&:before {
50+
border-bottom: 7px solid @color-gray-middle5;
51+
border-left: 4px solid transparent;
52+
border-right: 4px solid transparent;
53+
border-top: unset;
54+
content: '';
55+
height: 0;
56+
left: 20px;
57+
opacity: .9;
58+
position: absolute;
59+
top: -5px;
60+
width: 0;
61+
}
62+
63+
&:after {
64+
display: none;
65+
}
66+
}
67+
}
68+
}
69+
70+
.admin__fieldset .admin__field.admin__field-min-height-mobile {
71+
.admin__field-control._with-tooltip {
72+
display: flex;
73+
width: 17.9rem;
74+
}
75+
}
76+
77+
.admin__fieldset .admin__field.admin__field-min-height-mobile-with-notice {
78+
.admin__field-control._with-tooltip {
79+
width: 38.9rem;
80+
}
81+
82+
.admin__field-note {
83+
width: 34.9rem;
84+
}
85+
}

0 commit comments

Comments
 (0)