Skip to content

Commit 0b450f3

Browse files
anthoulaanthoula
committed
Merge branch 'MC-5383' of github.com:magento-obsessive-owls/magento2-page-builder into cms-team-1-delivery
# Conflicts: # app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTextTest.xml
2 parents e1c9aa6 + 6aa97a8 commit 0b450f3

File tree

38 files changed

+838
-62
lines changed

38 files changed

+838
-62
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderHeadingSection.xml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@
2525
<element name="headingTextAlignToolbar" type="button" selector="(//div[contains(@class,'pagebuilder-heading')])[{{arg1}}]//i[contains(@class,'icon-pagebuilder-align-{{arg2}}')]" parameterized="true"/>
2626
<element name="headingTextAlignToolbarSelected" type="button" selector="(//div[contains(@class,'pagebuilder-heading')])[{{arg1}}]//a[contains(@class, 'toolbar-active')]//i[contains(@class,'icon-pagebuilder-align-{{arg2}}')]" parameterized="true"/>
2727
<element name="headingToolbarButtonViewportPositionTop" type="button" selector="return document.querySelector('.pagebuilder-toolbar-options-wrapper ul:{{arg1}}-child li:{{arg1}}-child').getBoundingClientRect().top;" parameterized="true"/>
28+
<element name="headingToolbarViewportPositionTop" type="button" selector="return document.querySelectorAll('.pagebuilder-heading .pagebuilder-toolbar-options-wrapper')[{{arg1}}].getBoundingClientRect().top;" parameterized="true"/>
29+
<element name="headingToolbarViewportPositionBottom" type="button" selector="return document.querySelectorAll('.pagebuilder-heading .pagebuilder-toolbar-options-wrapper')[{{arg1}}].getBoundingClientRect().bottom;" parameterized="true"/>
30+
<element name="headingContentTypeViewportPositionTop" type="button" selector="return document.querySelectorAll('.pagebuilder-heading')[{{arg1}}].getBoundingClientRect().top;" parameterized="true"/>
31+
<element name="headingContentTypeViewportPositionBottom" type="button" selector="return document.querySelectorAll('.pagebuilder-heading')[{{arg1}}].getBoundingClientRect().bottom;" parameterized="true"/>
2832
<!-- Advanced Configuration -->
2933
<element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-heading')]//{{arg1}})[{{arg2}}][contains(@style,'text-align: {{arg3}};')]" parameterized="true"/>
3034
<element name="noAlignment" type="text" selector="(//{{arg1}}[@data-role='heading'])[{{arg2}}][not(contains(@style,'text-align:'))]" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderTextSection.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@
2828
<element name="emptyTextInImportantStyle" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//div[contains(normalize-space(@class), 'cms-content-important')]" parameterized="true"/>
2929
<element name="imageSource" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//img[contains(@src,'{{var1}}')]" parameterized="true"/>
3030
<element name="inlineWYSIWYGEditorWithTag" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//div[contains(@class,'inline-wysiwyg')]//{{arg2}}" parameterized="true"/>
31-
<element name="wysiwyg" type="text" selector="(//div[@data-role='text'])[{{arg1}}][contains(@class,'inline-wysiwyg')]" parameterized="true"/>
32-
<element name="contentJS" type="text" selector="document.querySelectorAll('div[data-role=text].inline-wysiwyg')[{{arg1}} - 1]" parameterized="true"/>
31+
<element name="wysiwyg" type="text" selector="(//div[@data-role='text'])[{{arg1}}]//div[contains(@class,'inline-wysiwyg')]" parameterized="true"/>
32+
<element name="contentJS" type="text" selector="document.querySelectorAll('div[data-role=text] .inline-wysiwyg')[{{arg1}} - 1]" parameterized="true"/>
3333
<!-- Advanced Configuration -->
3434
<element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]/div[contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
3535
<element name="noAlignment" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]/div[not(contains(@style,'text-align:'))]" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderHeadingTest.xml

Lines changed: 239 additions & 0 deletions
Large diffs are not rendered by default.

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTextTest.xml

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -444,7 +444,8 @@
444444
<!--Input image into stage-->
445445
<comment userInput="Input image into stage" stepKey="commentInputImageIntoStage"/>
446446
<click selector="{{TextOnStage.tinymce('1')}}" stepKey="focusOnTextEditorArea"/>
447-
<click selector="{{TinyMCESection.InsertImageIcon}}" stepKey="clickInsertImageIcon" />
447+
<waitForElementVisible selector="{{TinyMCESection.InsertImageIcon}}" stepKey="waitForInsertImageIcon"/>
448+
<click selector="{{TinyMCESection.InsertImageIcon}}" stepKey="clickInsertImageIcon"/>
448449
<waitForPageLoad stepKey="waitForPageLoad" />
449450
<actionGroup ref="clickBrowseBtnOnUploadPopup" stepKey="clickBrowserBtn"/>
450451
<actionGroup ref="VerifyMediaGalleryStorageActions" stepKey="VerifyMediaGalleryStorageBtn"/>
@@ -607,6 +608,7 @@
607608
<argument name="contentType" value="PageBuilderTextContentType"/>
608609
</actionGroup>
609610
<click selector="{{TextOnStage.tinymce('1')}}" stepKey="focusOnTextEditorArea"/>
611+
<waitForElementVisible selector="{{TinyMCESection.InsertImageIcon}}" stepKey="waitForInsertImageIcon"/>
610612
<click selector="{{TinyMCESection.InsertImageIcon}}" stepKey="clickInsertImageIcon" />
611613
<waitForPageLoad stepKey="waitForPageLoad" />
612614
<actionGroup ref="clickBrowseBtnOnUploadPopup" stepKey="clickBrowserBtn"/>
@@ -2147,7 +2149,8 @@
21472149
<!--Input image into stage-->
21482150
<comment userInput="Input image into stage" stepKey="commentInputImageIntoStage"/>
21492151
<click selector="{{TextOnStage.tinymce('1')}}" stepKey="focusOnTextEditorArea"/>
2150-
<click selector="{{TinyMCESection.InsertImageIcon}}" stepKey="clickInsertImageIcon" />
2152+
<waitForElementVisible selector="{{TinyMCESection.InsertImageIcon}}" stepKey="waitForInsertImageIcon"/>
2153+
<click selector="{{TinyMCESection.InsertImageIcon}}" stepKey="clickInsertImageIcon"/>
21512154
<waitForPageLoad stepKey="waitForPageLoad" />
21522155
<actionGroup ref="clickBrowseBtnOnUploadPopup" stepKey="clickBrowserBtn"/>
21532156
<actionGroup ref="VerifyMediaGalleryStorageActions" stepKey="VerifyMediaGalleryStorageBtn"/>
@@ -2773,4 +2776,55 @@
27732776
<actualResult type="variable">getBlockTextOnStorefrontHeight</actualResult>
27742777
</assertEquals>
27752778
</test>
2779+
<test name="TextTooltipMenusAreNotCutOffInFullScreenMode" extends="HeadingLiveEditToolbarNotCutOffInFullScreenMode">
2780+
<annotations>
2781+
<features value="PageBuilder"/>
2782+
<stories value="Text"/>
2783+
<title value="Text tooltip menus should not overflow viewport bounds (get 'cut off') in full screen mode"/>
2784+
<description value="As a content creator I want text tooltip menus to be always positioned within viewport bounds so that they are accessible to me within the UI"/>
2785+
<severity value="MAJOR"/>
2786+
<useCaseId value="MC-5383"/>
2787+
<testCaseId value="MC-6491"/>
2788+
<group value="pagebuilder"/>
2789+
<group value="pagebuilder-text"/>
2790+
</annotations>
2791+
<before>
2792+
<magentoCLI command="config:set cms/wysiwyg/editor mage/adminhtml/wysiwyg/tiny_mce/tinymce4Adapter" stepKey="enableTinyMCE4" before="enableWYSIWYG"/>
2793+
<magentoCLI command="config:set cms/wysiwyg/enabled enabled" stepKey="enableWYSIWYG" before="navigateToAPageWithPageBuilder"/>
2794+
</before>
2795+
<!-- Add Text Content Type -->
2796+
<comment userInput="Add Text Content Type" stepKey="commentAddInnerContentType"/>
2797+
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderInnerContentTypePanelGroup">
2798+
<argument name="group" value="PageBuilderTextContentType"/>
2799+
</actionGroup>
2800+
<actionGroup ref="dragContentTypeToContainer" stepKey="dragInnerContentTypeIntoColumn">
2801+
<argument name="contentType" value="PageBuilderTextContentType"/>
2802+
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
2803+
<argument name="containerTargetIndex" value="1"/>
2804+
<argument name="contentTypeIndex" value="1"/>
2805+
</actionGroup>
2806+
<waitForElementVisible selector="{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}" stepKey="waitForToolbarVisible"/>
2807+
<executeJS function="return document.evaluate(`{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().bottom" stepKey="toolbarBottomPosition"/>
2808+
<executeJS function="return document.evaluate(`{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="toolbarTopPosition"/>
2809+
<executeJS function="return document.evaluate(`{{TextOnStage.wysiwyg('1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="inputBoxTopPosition"/>
2810+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusEditor">
2811+
<argument name="contentType" value="PageBuilderTextContentType"/>
2812+
</actionGroup>
2813+
<waitForElementVisible selector="{{TextOnStage.wysiwyg('1')}}" stepKey="waitForContentTypeToBeVisible"/>
2814+
<click selector="{{TextOnStage.wysiwyg('1')}}" stepKey="focusOnInnerContentType"/>
2815+
<waitForPageLoad after="focusOnInnerContentType" stepKey="waitForToolbarAnimationAfterOverflow"/>
2816+
<waitForElementVisible selector="{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}" after="waitForToolbarAnimationAfterOverflow" stepKey="waitForToolbarVisibleAfterOverflow"/>
2817+
<executeJS function="return document.evaluate(`{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="toolbarTopPositionAfterOverflow"/>
2818+
<executeJS function="return document.evaluate(`{{TextOnStage.wysiwyg('1')}}`, document.body).iterateNext().getBoundingClientRect().bottom" stepKey="inputBoxBottomPositionAfterOverflow"/>
2819+
<executeJS function="return document.evaluate(`{{TextOnStage.wysiwyg('1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="inputBoxTopPositionAfterOverflow"/>
2820+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusEditorAfterOverflow">
2821+
<argument name="contentType" value="PageBuilderTextContentType"/>
2822+
</actionGroup>
2823+
<click selector="{{TextOnStage.wysiwyg('1')}}" stepKey="focusOnInnerContentTypeAfterExitFullScreen"/>
2824+
<waitForPageLoad after="focusOnInnerContentTypeAfterExitFullScreen" stepKey="waitForToolbarAnimationAfterExitFullScreen"/>
2825+
<waitForElementVisible selector="{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}" after="waitForToolbarAnimationAfterExitFullScreen" stepKey="waitForToolbarVisibleAfterExitFullScreen"/>
2826+
<executeJS function="return document.evaluate(`{{TextOnStage.wysiwyg('1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="inputBoxTopPositionAfterExitFullScreen"/>
2827+
<executeJS function="return document.evaluate(`{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().top" stepKey="toolbarTopPositionAfterExitFullScreen"/>
2828+
<executeJS function="return document.evaluate(`{{PageBuilderStage.inlineWYSIWYGEditorPanel(PageBuilderTextContentType.role, '1')}}`, document.body).iterateNext().getBoundingClientRect().bottom" stepKey="toolbarBottomPositionAfterExitFullScreen"/>
2829+
</test>
27762830
</tests>

‎app/code/Magento/PageBuilder/etc/adminhtml/di.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -512,6 +512,7 @@
512512
<item name="component_initializers" xsi:type="array">
513513
<item name="text" xsi:type="string">Magento_PageBuilder/js/content-type/text/wysiwyg/tinymce4/component-initializer</item>
514514
<item name="slide" xsi:type="string">Magento_PageBuilder/js/content-type/slide/wysiwyg/tinymce4/component-initializer</item>
515+
<item name="banner" xsi:type="string">Magento_PageBuilder/js/content-type/banner/wysiwyg/tinymce4/component-initializer</item>
515516
</item>
516517
<item name="config_modifiers" xsi:type="array">
517518
<item name="text" xsi:type="string">Magento_PageBuilder/js/content-type/text/wysiwyg/tinymce4/config-modifier</item>

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_inline-wysiwyg.less

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,9 @@
3838
}
3939
&.mce-edit-focus {
4040
outline: none;
41-
4241
~ .mce-tinymce-inline {
4342
opacity: 1;
4443
pointer-events: all;
45-
transform: translateY(-100%);
4644
visibility: visible !important;
4745
}
4846
}

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
}
7676

7777
.pagebuilder-canvas {
78-
padding-top: 25px;
78+
padding-top: 30px;
7979
}
8080

8181
.pagebuilder-panel-wrapper {

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
}
1919

2020
.pagebuilder-toolbar-options {
21-
bottom: 100%;
2221
opacity: 1;
2322
transition-delay: 200ms;
2423
visibility: visible;
@@ -30,16 +29,15 @@
3029
}
3130

3231
.pagebuilder-toolbar-options {
33-
-moz-transition: opacity 200ms, top 200ms, visibility 200ms;
34-
-o-transition: opacity 200ms, top 200ms, visibility 200ms;
35-
-webkit-transition: opacity 200ms, top 200ms, visibility 200ms;
32+
-moz-transition: transform 200ms, opacity 200ms, visibility 200ms;
33+
-o-transition: transform 200ms, opacity 200ms, visibility 200ms;
34+
-webkit-transition: transform 200ms, opacity 200ms, visibility 200ms;
3635
background-color: @color-gray94;
3736
border: 1px solid @color-gray75;
38-
bottom: 0;
3937
left: -2px;
4038
opacity: 0;
4139
position: absolute;
42-
transition: bottom 200ms, opacity 200ms, visibility 200ms;
40+
transition: transform 200ms, opacity 200ms, visibility 200ms;
4341
visibility: hidden;
4442
width: calc(~'100% + 4px');
4543
z-index: 32;
@@ -60,6 +58,7 @@
6058
content: '';
6159
height: 80%;
6260
left: 0;
61+
max-height: 32px;
6362
position: relative;
6463
top: 10%;
6564
width: 1px;

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

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -318,7 +318,6 @@
318318

319319
.pagebuilder-options-visible {
320320
opacity: 1;
321-
transform: translate(-50%, -50%);
322321
transition-delay: 200ms;
323322
visibility: visible;
324323
}
@@ -328,18 +327,23 @@
328327
-o-transition: opacity 200ms, visibility 200ms;
329328
-webkit-transition: opacity 200ms, visibility 200ms;
330329
height: 40px;
331-
left: 50%;
332330
opacity: 0;
333331
position: absolute;
332+
right: 0;
334333
text-align: center;
335334
top: 0;
336-
transform: translate(-50%, -50%);
335+
transform: translate(0, -50%);
337336
transition: opacity 200ms, visibility 200ms;
338337
visibility: hidden;
339-
z-index: 30;
338+
z-index: 105;
339+
340+
&.pagebuilder-options-middle {
341+
right: 50%;
342+
transform: translate(50%, -50%);
343+
}
340344

341345
&.pagebuilder-options-visible {
342-
.pagebuilder-options-visible;
346+
.pagebuilder-options-visible
343347
}
344348

345349
.pagebuilder-options-wrapper {
@@ -460,8 +464,9 @@
460464
-moz-transition: opacity 200ms, visibility 200ms, transform 200ms;
461465
-o-transition: opacity 200ms, visibility 200ms, transform 200ms;
462466
-webkit-transition: opacity 200ms, visibility 200ms, transform 200ms;
467+
right: 50%;
463468
top: -20px;
464-
transform: translate(-50%, -20%);
469+
transform: translate(50%, -50%);
465470
transition: opacity 200ms, visibility 200ms, transform 200ms;
466471
transition-delay: 0ms !important; // Arrow options have no delay in transitioning out
467472

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

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@
117117
&.resizing,
118118
&.grid-form-open {
119119
.pagebuilder-grid-size-indicator {
120-
z-index: 100;
120+
z-index: 105;
121121
}
122122

123123
.resize-grid {
@@ -291,7 +291,7 @@
291291
bottom: 175%;
292292
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .3);
293293
font-size: 14px;
294-
left: -390%;
294+
left: -200%;
295295
padding: .9rem 1.8rem;
296296
position: absolute;
297297
text-align: left;
@@ -305,21 +305,45 @@
305305
content: '';
306306
display: block;
307307
height: 0;
308-
left: 87.5%;
308+
left: 70.5%;
309309
margin-left: -.8rem;
310310
position: absolute;
311311
top: 100%;
312312
width: 0;
313313
}
314+
314315
&:before {
315316
border-top-color: @color-dark-grayish-orange;
316317
margin-top: 1px;
317318
z-index: 3;
318319
}
320+
319321
&:after {
320322
border-top-color: @color-lazy-sun;
321323
z-index: 4;
322324
}
325+
326+
&.tooltip-down {
327+
bottom: -490%;
328+
329+
&:before,
330+
&:after {
331+
top: -25%;
332+
}
333+
334+
&:before {
335+
border-bottom-color: @color-lazy-sun;
336+
border-top-color: transparent;
337+
margin-top: 1px;
338+
z-index: 4;
339+
}
340+
341+
&:after {
342+
border-bottom-color: @color-dark-grayish-orange;
343+
border-top-color: transparent;
344+
z-index: 3;
345+
}
346+
}
323347
}
324348

325349
.grid-panel-tooltip:hover > .tooltip-content {

0 commit comments

Comments
 (0)