Skip to content

Commit 2ff9391

Browse files
omiroshnichenkoomiroshnichenko
authored
Merge pull request #640 from yolouiese/636-responsive-breakpoint-switcher
#636: Responsive breakpoint switcher - move storefront mobile layout to admin area and viewport button icons and styling
2 parents 073b3ee + 47cefe8 commit 2ff9391

File tree

61 files changed

+558
-258
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+558
-258
lines changed

‎app/code/Magento/PageBuilder/Component/Form/Element/Wysiwyg.php

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
use Magento\Framework\App\ObjectManager;
1111
use Magento\Framework\Data\FormFactory;
12+
use Magento\Framework\View\Asset\Repository;
1213
use Magento\Framework\View\Element\UiComponent\ContextInterface;
1314
use Magento\Ui\Component\Wysiwyg\ConfigInterface;
1415
use Magento\Catalog\Api\CategoryAttributeRepositoryInterface;
@@ -25,6 +26,11 @@
2526
*/
2627
class Wysiwyg extends \Magento\Ui\Component\Form\Element\Wysiwyg
2728
{
29+
/**
30+
* @var Repository
31+
*/
32+
private $assetRepo;
33+
2834
/**
2935
* WYSIWYG Constructor
3036
*
@@ -40,6 +46,7 @@ class Wysiwyg extends \Magento\Ui\Component\Form\Element\Wysiwyg
4046
* @param PageBuilderConfig|null $pageBuilderConfig
4147
* @param bool $overrideSnapshot
4248
* @param ViewConfigInterface $viewConfig
49+
* @param Repository $assetRepo
4350
* @SuppressWarnings(PHPMD.CyclomaticComplexity)
4451
* @SuppressWarnings(PHPMD.ExcessiveParameterList)
4552
* @SuppressWarnings(PHPMD.NPathComplexity)
@@ -57,9 +64,11 @@ public function __construct(
5764
array $config = [],
5865
PageBuilderConfig $pageBuilderConfig = null,
5966
bool $overrideSnapshot = false,
60-
ViewConfigInterface $viewConfig = null
67+
ViewConfigInterface $viewConfig = null,
68+
Repository $assetRepo = null
6169
) {
6270
$viewConfig = $viewConfig ?: ObjectManager::getInstance()->get(ViewConfigInterface::class);
71+
$this->assetRepo = $assetRepo ?: ObjectManager::getInstance()->get(Repository::class);
6372
$wysiwygConfigData = isset($config['wysiwygConfigData']) ? $config['wysiwygConfigData'] : [];
6473

6574
// If a dataType is present we're dealing with an attribute
@@ -92,6 +101,7 @@ public function __construct(
92101
'Magento_PageBuilder',
93102
'breakpoints'
94103
);
104+
$wysiwygConfigData = $this->processBreakpointsIcons($wysiwygConfigData);
95105

96106
if ($overrideSnapshot) {
97107
$pageBuilderConfig = $pageBuilderConfig ?: ObjectManager::getInstance()->get(PageBuilderConfig::class);
@@ -116,4 +126,24 @@ public function __construct(
116126

117127
parent::__construct($context, $formFactory, $wysiwygConfig, $components, $data, $config);
118128
}
129+
130+
/**
131+
* Process viewport icon paths
132+
*
133+
* @param array $wysiwygConfigData
134+
* @return array
135+
*/
136+
private function processBreakpointsIcons(array $wysiwygConfigData): array
137+
{
138+
if ($wysiwygConfigData && isset($wysiwygConfigData['viewports'])) {
139+
foreach ($wysiwygConfigData['viewports'] as $breakpoint => $attributes) {
140+
if (isset($attributes['icon'])) {
141+
$wysiwygConfigData['viewports'][$breakpoint]['icon'] = $this->assetRepo->getUrl(
142+
$attributes['icon']
143+
);
144+
}
145+
}
146+
}
147+
return $wysiwygConfigData;
148+
}
119149
}

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderBannerSection/BannerOnBackendSection.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
<element name="backgroundColorElement" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-color:')]" parameterized="true"/>
4343
<element name="noBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][not(contains(@style,'background-color:'))]" parameterized="true"/>
4444
<element name="backgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-image: url(') and contains(@style,'{{backgroundImage}}')]" parameterized="true"/>
45-
<element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][not(contains(@style,'background-image:'))]" parameterized="true"/>
45+
<element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{bannerIndex}}]//div[@data-element='wrapper'][contains(@style,'background-image: none')]" parameterized="true"/>
4646
<!-- Content Configuration -->
4747
<element name="contentJS" type="text" selector="document.querySelectorAll('[data-content-type=banner] div.inline-wysiwyg')[{{contentIndex}} - 1]" parameterized="true"/>
4848
<element name="textArea" type="text" selector="(//div[contains(@class,'pagebuilder-banner')])[{{bannerIndex}}]//textarea[contains(@class,'inline-wysiwyg-textarea')]" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderColumnSection/ColumnOnBackendSection.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
<element name="backgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-column') and contains(@class,'pagebuilder-content-type')])[{{arg1}}][contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
4444
<element name="noBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-column') and contains(@class,'pagebuilder-content-type')])[{{arg1}}][not(contains(@style,'background-color:'))]" parameterized="true"/>
4545
<element name="backgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-column') and contains(@class,'pagebuilder-content-type')])[{{arg1}}][contains(@style,'background-image: url(') and contains(@style,'{{arg2}}')]" parameterized="true"/>
46-
<element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-column') and contains(@class,'pagebuilder-content-type')])[{{arg1}}][not(contains(@style,'background-image:'))]" parameterized="true"/>
46+
<element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-column') and contains(@class,'pagebuilder-content-type')])[{{arg1}}][contains(@style,'background-image: none')]" parameterized="true"/>
4747
<!-- Advanced Configuration -->
4848
<element name="alignment" type="button" selector="((//div[contains(@class, 'pagebuilder-column-group')])[{{arg1}}]/descendant::div[contains(@class, 'pagebuilder-content-type') and contains(@class, 'pagebuilder-column')])[{{arg2}}][contains(@style, 'text-align: {{arg3}};')]" parameterized="true"/>
4949
<element name="border" type="button" selector="((//div[contains(@class, 'pagebuilder-column-group')])[{{arg1}}]/descendant::div[contains(@class, 'pagebuilder-content-type') and contains(@class, 'pagebuilder-column')])[{{arg2}}][contains(@style, 'border-style: {{arg3}};')]" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderRowSection/RowOnStageSection.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
<element name="backgroundColorElement" type="button" parameterized="true" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-color:')]"/>
3131
<element name="noBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][not(contains(@style,'background-color:'))]" parameterized="true"/>
3232
<element name="backgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-image: url(') and contains(@style,'{{arg2}}')]" parameterized="true"/>
33-
<element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][not(contains(@style,'background-image:'))]" parameterized="true"/>
33+
<element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-image: none')]" parameterized="true"/>
3434
<element name="backgroundPosition" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-position: {{arg2}};')]" parameterized="true"/>
3535
<element name="backgroundSize" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-size: {{arg2}};')]" parameterized="true"/>
3636
<element name="backgroundRepeat" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-row')])[{{arg1}}][contains(@style,'background-repeat: {{arg2}};')]" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderSliderSection/SlideOnBackendSection.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
<element name="backgroundColor" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][contains(@style,'background-color: {{backgroundColor}};')]" parameterized="true"/>
4242
<element name="noBackgroundColor" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][not(contains(@style,'background-color:'))]" parameterized="true"/>
4343
<element name="backgroundImage" type="text" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][contains(@style,'background-image: url(') and contains(@style,'{{backgroundImage}}')]" parameterized="true"/>
44-
<element name="noBackgroundImage" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][not(contains(@style,'background-image:'))]" parameterized="true"/>
44+
<element name="noBackgroundImage" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][contains(@style,'background-image: none')]" parameterized="true"/>
4545
<element name="backgroundPosition" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][contains(@style,'background-position: {{backgroundPosition}};')]" parameterized="true"/>
4646
<element name="backgroundSize" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][contains(@style,'background-size: {{backgroundSize}};')]" parameterized="true"/>
4747
<element name="backgroundRepeat" type="button" selector="(//div[@data-content-type='slide'])[{{slideIndex}}]//div[@data-element='wrapper'][contains(@style,'background-repeat: {{backgroundRepeat}};')]" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderTabsSection/TabOnStageSection.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,6 @@
5757
<element name="backgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-tab-item')])[{{arg1}}][contains(@style,'background-color: {{arg2}};')]" parameterized="true"/>
5858
<element name="noBackgroundColor" type="button" selector="(//div[contains(@class,'pagebuilder-tab-item')])[{{arg1}}][not(contains(@style,'background-color:'))]" parameterized="true"/>
5959
<element name="backgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-tab-item')])[{{arg1}}][contains(@style,'background-image: url(') and contains(@style,'{{arg2}}')]" parameterized="true"/>
60-
<element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-tab-item')])[{{arg1}}][not(contains(@style,'background-image:'))]" parameterized="true"/>
60+
<element name="noBackgroundImage" type="button" selector="(//div[contains(@class,'pagebuilder-tab-item')])[{{arg1}}][contains(@style,'background-image: none')]" parameterized="true"/>
6161
</section>
6262
</sections>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBackgroundFormAttributeTest/BackgroundImageInvalidFileSizeTest.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
</before>
2828
<after>
2929
<actionGroup ref="NavigateToMediaGalleryActionGroup" stepKey="navigateToMediaGallery"/>
30+
<waitForPageLoad stepKey="waitForPageLoad"/>
3031
<actionGroup ref="NavigateToMediaFolderActionGroup" stepKey="NavigateToFolder">
3132
<argument name="FolderName" value="{{PageBuilderBackgroundImage_JPG.path}}"/>
3233
</actionGroup>

‎app/code/Magento/PageBuilder/etc/view.xml

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@
2828
<var name="label">Desktop</var>
2929
<var name="stage">true</var>
3030
<var name="default">true</var>
31-
<!-- TODO: add button icons /-->
31+
<var name="class">desktop-switcher</var>
32+
<var name="icon">Magento_PageBuilder::css/images/switcher/switcher-desktop.svg</var>
3233
<var name="conditions">
3334
<var name="min-width">1024px</var>
3435
</var>
@@ -59,7 +60,8 @@
5960
<var name="mobile">
6061
<var name="label">Mobile</var>
6162
<var name="stage">true</var>
62-
<!-- TODO: add button icons /-->
63+
<var name="class">mobile-switcher</var>
64+
<var name="icon">Magento_PageBuilder::css/images/switcher/switcher-mobile.svg</var>
6365
<var name="conditions">
6466
<var name="max-width">768px</var>
6567
<var name="min-width">640px</var>

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/images/switcher/switcher-desktop.svg

Lines changed: 8 additions & 0 deletions
Loading

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/images/switcher/switcher-mobile.svg

Lines changed: 8 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)