Skip to content

Commit 4ab403d

Browse files
hannahnidahannahnida
committed
#557: User access Row action panel with 2+ level nesting - Added new styles for Row affordance
1 parent 981eebb commit 4ab403d

File tree

6 files changed

+112
-80
lines changed

6 files changed

+112
-80
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@
3232
@color-pagebuilder-dark-gray: #534d49;
3333
@color-pagebuilder-lighter-gray: #e0e0e0;
3434
@color-pagebuilder-light-gray: #f8f3eb;
35+
@color-pagebuilder-silver: #acacac;
36+
@color-pagebuilder-light-silver: #c5c5c5;
3537
@color-pagebuilder-darker-gray: #2b2625;
3638
@color-pagebuilder-darkest-gray: #1c1918;
3739
@color-pagebuilder-blue: #1473e6;

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@
2828

2929
&.pagebuilder-content-type-active:hover:not(.no-system-border) {
3030
.pagebuilder-system-border-hover;
31+
32+
&.pagebuilder-content-type-affordance {
33+
box-shadow: 0 0 0 1px @color-pagebuilder-light-silver;
34+
}
3135
}
3236

3337
&.type-container {
@@ -183,6 +187,24 @@
183187
}
184188
}
185189

190+
.pagebuilder-content-type-affordance {
191+
border: 15px solid @color-gray98;
192+
box-shadow: 0 0 0 1px rgba(197, 197, 197, 0.34); //#ebebeb
193+
padding: 0;
194+
195+
> .pagebuilder-content-type.type-container.pagebuilder-row {
196+
box-shadow: none;
197+
}
198+
199+
> .pagebuilder-display-label {
200+
background-color: @color-gray98;
201+
color: @color-pagebuilder-silver;
202+
line-height: 13px;
203+
padding: 1px 0 0;
204+
transform: translate(-50%, -15px);
205+
}
206+
}
207+
186208
.no-user-select {
187209
-khtml-user-select: none;
188210
-moz-user-select: none;

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,7 @@
5353
}
5454
}
5555

56-
.pagebuilder-content-type.pagebuilder-row {
57-
margin-bottom: 10px;
56+
.pagebuilder-row.type-container {
5857
min-height: inherit;
5958
transition: min-height .3s ease-in-out;
6059

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/contained/preview.html

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,33 +8,36 @@
88
<div attr="data.main.attributes"
99
ko-style="data.main.style"
1010
css="data.main.css">
11-
<div class="pagebuilder-content-type type-container pagebuilder-row children-min-height"
12-
attr="data.inner.attributes"
13-
ko-style="data.inner.style"
14-
css="Object.assign(data.inner.css(), {
15-
'empty-container': contentType.children().length == 0,
16-
'jarallax': data.inner.attributes()['data-enable-parallax'] == 1 || data.inner.attributes()['data-background-type'] == 'video'
17-
})"
18-
event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
19-
afterRender="initParallax">
20-
<div if="data.video_overlay.attributes()['data-video-overlay-color']"
21-
class="video-overlay"
22-
attr="data.video_overlay.attributes"
23-
ko-style="data.video_overlay.style" />
24-
<render args="getOptions().template"/>
25-
<div class="element-children content-type-container" each="contentType.getChildren()" ko-style="data.container.style" css="getChildrenCss()" attr="{id: contentType.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
26-
<if args="$parent.isContainer()">
27-
<div class="pagebuilder-drop-indicator"></div>
28-
</if>
29-
<div class="pagebuilder-content-type-wrapper" template="{ name: preview.template, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }" css="{'pagebuilder-content-type-hidden': !preview.display()}"></div>
30-
<if args="$parent.isContainer() && $index() === $parent.contentType.getChildren()().length - 1">
31-
<div class="pagebuilder-drop-indicator"></div>
32-
</if>
33-
</div>
11+
<div class="pagebuilder-content-type pagebuilder-content-type-affordance"
12+
ko-style="Object.keys(data.inner.style()).filter(key => key.startsWith('margin')).reduce((obj, key) => {obj[key] = data.inner.style()[key];return obj;}, {});"
13+
event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
3414
<div class="pagebuilder-display-label"
3515
text="function () { return displayLabel().toUpperCase(); }()"></div>
36-
<div class="pagebuilder-empty-container empty-placeholder"
37-
css="placeholderCss()"
38-
translate="'Drag content types or columns here'"/>
16+
<div class="pagebuilder-content-type no-system-border type-container pagebuilder-row children-min-height"
17+
attr="data.inner.attributes"
18+
ko-style="Object.keys(data.inner.style()).filter(key => !key.startsWith('margin')).reduce((obj, key) => {obj[key] = data.inner.style()[key];return obj;}, {});"
19+
css="Object.assign(data.inner.css(), {
20+
'empty-container': contentType.children().length == 0,
21+
'jarallax': data.inner.attributes()['data-enable-parallax'] == 1 || data.inner.attributes()['data-background-type'] == 'video'
22+
})"
23+
afterRender="initParallax">
24+
<div if="data.video_overlay.attributes()['data-video-overlay-color']"
25+
class="video-overlay"
26+
attr="data.video_overlay.attributes"
27+
ko-style="data.video_overlay.style" />
28+
<render args="getOptions().template"/>
29+
<div class="element-children content-type-container" each="contentType.getChildren()" ko-style="data.container.style" css="getChildrenCss()" attr="{id: contentType.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
30+
<if args="$parent.isContainer()">
31+
<div class="pagebuilder-drop-indicator"></div>
32+
</if>
33+
<div class="pagebuilder-content-type-wrapper" template="{ name: preview.template, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }" css="{'pagebuilder-content-type-hidden': !preview.display()}"></div>
34+
<if args="$parent.isContainer() && $index() === $parent.contentType.getChildren()().length - 1">
35+
<div class="pagebuilder-drop-indicator"></div>
36+
</if>
37+
</div>
38+
<div class="pagebuilder-empty-container empty-placeholder"
39+
css="placeholderCss()"
40+
translate="'Drag content types or columns here'"/>
41+
</div>
3942
</div>
4043
</div>

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-bleed/preview.html

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,35 @@
55
*/
66
-->
77

8-
<div class="pagebuilder-content-type type-container pagebuilder-row children-min-height"
9-
attr="data.main.attributes"
10-
ko-style="data.main.style"
11-
css="Object.assign(data.main.css(), {
12-
'empty-container': contentType.children().length == 0,
13-
'jarallax': data.main.attributes()['data-enable-parallax'] == 1 || data.main.attributes()['data-background-type'] == 'video'
14-
})"
15-
event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
16-
afterRender="initParallax">
17-
<div if="data.video_overlay.attributes()['data-video-overlay-color']"
18-
class="video-overlay"
19-
attr="data.video_overlay.attributes"
20-
ko-style="data.video_overlay.style" />
21-
<render args="getOptions().template"/>
22-
<div class="element-children content-type-container" each="contentType.getChildren()" ko-style="data.container.style" css="getChildrenCss()" attr="{id: contentType.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
23-
<if args="$parent.isContainer()">
24-
<div class="pagebuilder-drop-indicator"></div>
25-
</if>
26-
<div class="pagebuilder-content-type-wrapper" template="{ name: preview.template, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }" css="{'pagebuilder-content-type-hidden': !preview.display()}"></div>
27-
<if args="$parent.isContainer() && $index() === $parent.contentType.getChildren()().length - 1">
28-
<div class="pagebuilder-drop-indicator"></div>
29-
</if>
30-
</div>
8+
<div class="pagebuilder-content-type pagebuilder-content-type-affordance"
9+
ko-style="Object.keys(data.main.style()).filter(key => key.startsWith('margin')).reduce((obj, key) => {obj[key] = data.main.style()[key];return obj;}, {});"
10+
event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
3111
<div class="pagebuilder-display-label"
3212
text="function () { return displayLabel().toUpperCase(); }()"></div>
33-
<div class="pagebuilder-empty-container empty-placeholder"
34-
css="placeholderCss()"
35-
translate="'Drag content types or columns here'"/>
13+
<div class="pagebuilder-content-type type-container no-system-border pagebuilder-row children-min-height"
14+
attr="data.main.attributes"
15+
ko-style="Object.keys(data.main.style()).filter(key => !key.startsWith('margin')).reduce((obj, key) => {obj[key] = data.main.style()[key];return obj;}, {});"
16+
css="Object.assign(data.main.css(), {
17+
'empty-container': contentType.children().length == 0,
18+
'jarallax': data.main.attributes()['data-enable-parallax'] == 1 || data.main.attributes()['data-background-type'] == 'video'
19+
})"
20+
afterRender="initParallax">
21+
<div if="data.video_overlay.attributes()['data-video-overlay-color']"
22+
class="video-overlay"
23+
attr="data.video_overlay.attributes"
24+
ko-style="data.video_overlay.style" />
25+
<render args="getOptions().template"/>
26+
<div class="element-children content-type-container" each="contentType.getChildren()" ko-style="data.container.style" css="getChildrenCss()" attr="{id: contentType.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
27+
<if args="$parent.isContainer()">
28+
<div class="pagebuilder-drop-indicator"></div>
29+
</if>
30+
<div class="pagebuilder-content-type-wrapper" template="{ name: preview.template, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }" css="{'pagebuilder-content-type-hidden': !preview.display()}"></div>
31+
<if args="$parent.isContainer() && $index() === $parent.contentType.getChildren()().length - 1">
32+
<div class="pagebuilder-drop-indicator"></div>
33+
</if>
34+
</div>
35+
<div class="pagebuilder-empty-container empty-placeholder"
36+
css="placeholderCss()"
37+
translate="'Drag content types or columns here'"/>
38+
</div>
3639
</div>

‎app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-width/preview.html

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,35 @@
55
*/
66
-->
77

8-
<div class="pagebuilder-content-type type-container pagebuilder-row children-min-height"
9-
attr="data.main.attributes"
10-
ko-style="data.main.style"
11-
css="Object.assign(data.main.css(), {
12-
'empty-container': contentType.children().length == 0,
13-
'jarallax': data.main.attributes()['data-enable-parallax'] == 1 || data.main.attributes()['data-background-type'] == 'video'
14-
})"
15-
event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
16-
afterRender="initParallax">
17-
<div if="data.video_overlay.attributes()['data-video-overlay-color']"
18-
class="video-overlay"
19-
attr="data.video_overlay.attributes"
20-
ko-style="data.video_overlay.style" />
21-
<render args="getOptions().template"/>
22-
<div class="element-children content-type-container" each="contentType.getChildren()" ko-style="data.container.style" css="getChildrenCss()" attr="{id: contentType.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
23-
<if args="$parent.isContainer()">
24-
<div class="pagebuilder-drop-indicator"></div>
25-
</if>
26-
<div class="pagebuilder-content-type-wrapper" template="{ name: preview.template, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }" css="{'pagebuilder-content-type-hidden': !preview.display()}"></div>
27-
<if args="$parent.isContainer() && $index() === $parent.contentType.getChildren()().length - 1">
28-
<div class="pagebuilder-drop-indicator"></div>
29-
</if>
30-
</div>
8+
<div class="pagebuilder-content-type pagebuilder-content-type-affordance"
9+
ko-style="Object.keys(data.main.style()).filter(key => key.startsWith('margin')).reduce((obj, key) => {obj[key] = data.main.style()[key];return obj;}, {});"
10+
event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
3111
<div class="pagebuilder-display-label"
3212
text="function () { return displayLabel().toUpperCase(); }()"></div>
33-
<div class="pagebuilder-empty-container empty-placeholder"
34-
css="placeholderCss()"
35-
translate="'Drag content types or columns here'"/>
13+
<div class="pagebuilder-content-type type-container no-system-border pagebuilder-row children-min-height"
14+
attr="data.main.attributes"
15+
ko-style="Object.keys(data.main.style()).filter(key => !key.startsWith('margin')).reduce((obj, key) => {obj[key] = data.main.style()[key];return obj;}, {});"
16+
css="Object.assign(data.main.css(), {
17+
'empty-container': contentType.children().length == 0,
18+
'jarallax': data.main.attributes()['data-enable-parallax'] == 1 || data.main.attributes()['data-background-type'] == 'video'
19+
})"
20+
afterRender="initParallax">
21+
<div if="data.video_overlay.attributes()['data-video-overlay-color']"
22+
class="video-overlay"
23+
attr="data.video_overlay.attributes"
24+
ko-style="data.video_overlay.style" />
25+
<render args="getOptions().template"/>
26+
<div class="element-children content-type-container" each="contentType.getChildren()" ko-style="data.container.style" css="getChildrenCss()" attr="{id: contentType.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
27+
<if args="$parent.isContainer()">
28+
<div class="pagebuilder-drop-indicator"></div>
29+
</if>
30+
<div class="pagebuilder-content-type-wrapper" template="{ name: preview.template, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }" css="{'pagebuilder-content-type-hidden': !preview.display()}"></div>
31+
<if args="$parent.isContainer() && $index() === $parent.contentType.getChildren()().length - 1">
32+
<div class="pagebuilder-drop-indicator"></div>
33+
</if>
34+
</div>
35+
<div class="pagebuilder-empty-container empty-placeholder"
36+
css="placeholderCss()"
37+
translate="'Drag content types or columns here'"/>
38+
</div>
3639
</div>

0 commit comments

Comments
 (0)