Skip to content

Commit e8d3fcc

Browse files
cspruiellcspruiell
committed
Merge remote-tracking branch 'origin/MC-3775-buttons' into cms-team-1-delivery
2 parents 4e70567 + b93940f commit e8d3fcc

File tree

15 files changed

+382
-355
lines changed

15 files changed

+382
-355
lines changed

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,9 @@
349349
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
350350
<argument name="contentType" value="PageBuilderButtonsContentType"/>
351351
</actionGroup>
352+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
353+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
354+
</actionGroup>
352355
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage1">
353356
<argument name="contentType" value="PageBuilderButtonsContentType"/>
354357
</actionGroup>
@@ -413,6 +416,9 @@
413416
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
414417
<argument name="contentType" value="PageBuilderButtonsContentType"/>
415418
</actionGroup>
419+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
420+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
421+
</actionGroup>
416422
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage1">
417423
<argument name="contentType" value="PageBuilderButtonsContentType"/>
418424
</actionGroup>
@@ -597,6 +603,9 @@
597603
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
598604
<argument name="contentType" value="PageBuilderButtonsContentType"/>
599605
</actionGroup>
606+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
607+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
608+
</actionGroup>
600609
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage1">
601610
<argument name="contentType" value="PageBuilderButtonsContentType"/>
602611
</actionGroup>
@@ -1670,6 +1679,9 @@
16701679
<argument name="containerTargetType" value="PageBuilderColumnContentType"/>
16711680
<argument name="containerTargetIndex" value="1" />
16721681
</actionGroup>
1682+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
1683+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
1684+
</actionGroup>
16731685
<!-- Enable Same Size -->
16741686
<comment userInput="Enable Same Size" stepKey="commentEditPanel1"/>
16751687
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage">
@@ -1932,6 +1944,9 @@
19321944
<argument name="containerTargetType" value="PageBuilderTabContentType"/>
19331945
<argument name="containerTargetIndex" value="1" />
19341946
</actionGroup>
1947+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
1948+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
1949+
</actionGroup>
19351950
<!-- Enable Same Size -->
19361951
<comment userInput="Enable Same Size" stepKey="commentEditPanel1"/>
19371952
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage">
@@ -2032,6 +2047,9 @@
20322047
<argument name="containerTargetType" value="PageBuilderTabContentType"/>
20332048
<argument name="containerTargetIndex" value="1"/>
20342049
</actionGroup>
2050+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
2051+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
2052+
</actionGroup>
20352053
<!-- Enable Same Size -->
20362054
<comment userInput="Enable Same Size" stepKey="commentEditPanel1"/>
20372055
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage">

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,9 @@
8787
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
8888
<argument name="contentType" value="PageBuilderButtonsContentType"/>
8989
</actionGroup>
90+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
91+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
92+
</actionGroup>
9093
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage">
9194
<argument name="contentType" value="PageBuilderButtonsContentType"/>
9295
</actionGroup>
@@ -127,6 +130,9 @@
127130
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
128131
<argument name="contentType" value="PageBuilderButtonsContentType"/>
129132
</actionGroup>
133+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
134+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
135+
</actionGroup>
130136
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage">
131137
<argument name="contentType" value="PageBuilderButtonsContentType"/>
132138
</actionGroup>
@@ -415,6 +421,9 @@
415421
<actionGroup ref="dragContentTypeToStage" stepKey="dragButtonsOntoStage">
416422
<argument name="contentType" value="PageBuilderButtonsContentType"/>
417423
</actionGroup>
424+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
425+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
426+
</actionGroup>
418427
<!-- Validate Edit Panel -->
419428
<comment userInput="Validate Edit Panel" stepKey="CommentValidateEditPanel"/>
420429
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage1">
@@ -516,6 +525,9 @@
516525
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
517526
<argument name="contentType" value="PageBuilderButtonsContentType"/>
518527
</actionGroup>
528+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
529+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
530+
</actionGroup>
519531
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage1">
520532
<argument name="contentType" value="PageBuilderButtonsContentType"/>
521533
</actionGroup>

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

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,9 @@
179179
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
180180
<argument name="contentType" value="PageBuilderButtonsContentType"/>
181181
</actionGroup>
182+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
183+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
184+
</actionGroup>
182185
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage1">
183186
<argument name="contentType" value="PageBuilderButtonsContentType"/>
184187
</actionGroup>
@@ -475,6 +478,9 @@
475478
<actionGroup ref="dragContentTypeToStage" stepKey="dragButtonsOntoStage">
476479
<argument name="contentType" value="PageBuilderButtonsContentType"/>
477480
</actionGroup>
481+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
482+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
483+
</actionGroup>
478484
<!-- Select Inline Appearance -->
479485
<comment userInput="Select Inline Appearance" stepKey="CommentSelectInlineAppearance"/>
480486
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage1">
@@ -673,6 +679,9 @@
673679
<actionGroup ref="dragContentTypeToStage" stepKey="dragButtonsOntoStage1">
674680
<argument name="contentType" value="PageBuilderButtonsContentType"/>
675681
</actionGroup>
682+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
683+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
684+
</actionGroup>
676685
<actionGroup ref="addButton" stepKey="addButton"/>
677686
<!-- Edit 1st button -->
678687
<comment userInput="Edit 1st Button" stepKey="commentEditButton1"/>
@@ -699,7 +708,7 @@
699708
<argument name="contentTypeIndex" value="2"/>
700709
<argument name="dropZoneIndex" value="2"/>
701710
</actionGroup>
702-
<click selector="{{ButtonItemOnStage.base('1')}}" stepKey="clickButton1"/>
711+
<click selector="{{ButtonItemOnStage.openOptionsMenu('2')}}" stepKey="clickButton1"/>
703712
<waitForPageLoad stepKey="waitForPageLoad1"/>
704713
<dragAndDrop selector1="{{ButtonItemOnStage.moveHandle('2')}}" selector2="{{PageBuilderStage.contentTypeContainer(PageBuilderRowContentType.role, '2')}}" stepKey="dragAndDropButtonToRow"/>
705714
<waitForPageLoad stepKey="waitForPageLoad2"/>
@@ -709,10 +718,13 @@
709718
<seeElement selector="{{ButtonItemOnStage.buttonItemTextByButtonGroup('1', '2', PageBuilderButtonItemText_Second.value)}}" stepKey="seeButton2Stage2"/>
710719
<!-- Attempt To Move Button To Column -->
711720
<comment userInput="Attempt To Move Button To Column" stepKey="commentMoveButton2"/>
721+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu1">
722+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
723+
</actionGroup>
712724
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage3">
713725
<argument name="contentType" value="PageBuilderColumnContentType"/>
714726
</actionGroup>
715-
<click selector="{{ButtonItemOnStage.base('1')}}" stepKey="clickButton2"/>
727+
<click selector="{{ButtonItemOnStage.openOptionsMenu('2')}}" stepKey="clickButton2"/>
716728
<waitForPageLoad stepKey="waitForPageLoad3"/>
717729
<dragAndDrop selector1="{{ButtonItemOnStage.moveHandle('2')}}" selector2="{{PageBuilderStage.contentTypeContainer(PageBuilderColumnContentType.role, '2')}}" stepKey="dragAndDropButtonToColumn"/>
718730
<waitForPageLoad stepKey="waitForPageLoad4"/>
@@ -722,10 +734,13 @@
722734
<seeElement selector="{{ButtonItemOnStage.buttonItemTextByButtonGroup('1', '2', PageBuilderButtonItemText_Second.value)}}" stepKey="seeButton2Stage3"/>
723735
<!-- Attempt To Move Button To Tab -->
724736
<comment userInput="Attempt To Move Button To Tab" stepKey="commentMoveButton3"/>
737+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu2">
738+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
739+
</actionGroup>
725740
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage4">
726741
<argument name="contentType" value="PageBuilderTabsContentType"/>
727742
</actionGroup>
728-
<click selector="{{ButtonItemOnStage.base('1')}}" stepKey="clickButton3"/>
743+
<click selector="{{ButtonItemOnStage.openOptionsMenu('2')}}" stepKey="clickButton3"/>
729744
<waitForPageLoad stepKey="waitForPageLoad5"/>
730745
<dragAndDrop selector1="{{ButtonItemOnStage.moveHandle('2')}}" selector2="{{PageBuilderStage.contentTypeContainer(PageBuilderTabContentType.role, '1')}}" stepKey="dragAndDropButtonToTab"/>
731746
<waitForPageLoad stepKey="waitForPageLoad6"/>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,9 @@
235235
<actionGroup ref="dragContentTypeToStage" stepKey="dragContentTypeToStage">
236236
<argument name="contentType" value="PageBuilderButtonsContentType"/>
237237
</actionGroup>
238+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
239+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
240+
</actionGroup>
238241
<!-- Add 2nd Button -->
239242
<comment userInput="Add 2nd Button" stepKey="commentAddButton"/>
240243
<actionGroup ref="addButton" stepKey="addButton1"/>
@@ -248,6 +251,9 @@
248251
<seeNumberOfElements selector="{{ButtonItemOnStage.all}}" userInput="1" stepKey="seeButtonsStage2"/>
249252
<!-- Add Button Again -->
250253
<comment userInput="Add Button Again" stepKey="commentAddButtonAgain"/>
254+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu1">
255+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
256+
</actionGroup>
251257
<actionGroup ref="addButton" stepKey="addButton2"/>
252258
<seeNumberOfElements selector="{{ButtonItemOnStage.all}}" userInput="2" stepKey="seeButtonsStage3"/>
253259
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1411,6 +1411,9 @@
14111411
<argument name="searchResult" value="$$createCMSPageA.title$$"/>
14121412
</actionGroup>
14131413
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings1"/>
1414+
<actionGroup ref="unFocusOptionMenu" stepKey="unFocusOptionMenu">
1415+
<argument name="contentType" value="PageBuilderButtonItemContentType"/>
1416+
</actionGroup>
14141417
<!--Add image into PageBuilder-->
14151418
<comment userInput="Add image into PageBuilder" stepKey="addImageIntoPageBuilder"/>
14161419
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
@@ -1540,7 +1543,7 @@
15401543
<argument name="property" value="PageBuilderImageProperty_StageJPG"/>
15411544
</actionGroup>
15421545
<waitForElementVisible selector="{{ImageOnStage.imageSourceByIndex('1', PageBuilderImageProperty_StageJPG.fileName)}}" stepKey="seeImage1SourceOnStage"/>
1543-
<actionGroup ref="dragContentTypeToStage" stepKey="dragButtonsOntoStage">
1546+
<actionGroup ref="dragContentTypeToStage" stepKey="dragTextOntoStage">
15441547
<argument name="contentType" value="PageBuilderTextContentType"/>
15451548
</actionGroup>
15461549
<actionGroup ref="clickOutsideTextInlineEditing" stepKey="closeLiveEdit"/>

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

Lines changed: 49 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,21 @@
1010
.pagebuilder-content-type {
1111
.pagebuilder-button-item {
1212
font-size: 0;
13+
margin: 0 10px 10px 0;
1314
max-width: 100%;
1415
width: auto;
1516
z-index: auto;
16-
.pagebuilder-options {
17-
bottom: 0;
18-
left: calc(50% - 5px);
19-
transform: translate(-50%, -50%);
20-
li.pagebuilder-options-link {
21-
margin: 0;
22-
}
23-
}
17+
2418
[contenteditable=true] {
2519
display: inline-block;
2620
min-height: 18px;
2721
min-width: 20px;
2822
}
23+
24+
a {
25+
margin: 0;
26+
}
27+
2928
a[data-element='link'] {
3029
max-width: 100%;
3130
min-width: 0;
@@ -37,42 +36,60 @@
3736
}
3837
}
3938

40-
&.pagebuilder-content-type-active {
41-
.pagebuilder-button-primary {
42-
.button-item-drag-handle {
43-
color: rgba(255, 255, 255, .8);
44-
}
39+
.button-item-drag-handle {
40+
height: 100%;
41+
left: 1px;
42+
opacity: 0;
43+
position: absolute;
44+
top: 0;
45+
transition: all .3s;
46+
visibility: hidden;
47+
width: 14px;
48+
49+
&.disabled:before {
50+
color: @color-light-gray;
51+
cursor: not-allowed;
4552
}
4653

47-
.button-item-drag-handle {
54+
&.disabled:active:before {
55+
cursor: not-allowed;
56+
}
57+
58+
&:before {
59+
.abs-icon;
4860
color: @color-dark-gray0;
61+
content: @icon-gripper__content;
4962
cursor: move; /* fallback if grab cursor is unsupported */
5063
cursor: grab;
5164
cursor: -moz-grab;
5265
cursor: -webkit-grab;
53-
left: 0;
54-
margin-top: -(@pagebuilder-button__font-size/2);
66+
display: block;
67+
font-size: 16px;
5568
position: absolute;
5669
top: 50%;
70+
transform: translateY(-50%);
71+
}
72+
73+
&:active:before {
74+
cursor: grabbing;
75+
cursor: -moz-grabbing;
76+
cursor: -webkit-grabbing;
77+
}
78+
}
5779

58-
&:active {
59-
cursor: grabbing;
60-
cursor: -moz-grabbing;
61-
cursor: -webkit-grabbing;
62-
}
80+
.pagebuilder-button-primary .button-item-drag-handle:before {
81+
color: @color-white;
82+
opacity: .7;
83+
}
6384

64-
&:before {
65-
.abs-icon;
66-
content: @icon-gripper__content;
67-
display: inline-block;
68-
font-size: @pagebuilder-button__font-size;
69-
position: absolute;
70-
}
85+
&.focused {
86+
.button-item-drag-handle {
87+
opacity: 1;
88+
visibility: visible;
89+
}
7190

72-
&.disabled {
73-
color: rgba(221, 221, 221, .4);
74-
cursor: not-allowed;
75-
}
91+
.pagebuilder-options {
92+
.pagebuilder-options-visible;
7693
}
7794
}
7895
}

0 commit comments

Comments
 (0)