Skip to content

Commit 1ea0cf2

Browse files
committed
PB-108 add grid lines when re-sizing
1 parent b2cdec5 commit 1ea0cf2

File tree

4 files changed

+44
-0
lines changed
  • app/code/Magento/PageBuilder/view/adminhtml/web

4 files changed

+44
-0
lines changed

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,28 @@
1919
height: 30px;
2020
z-index: 26;
2121
}
22+
23+
&.resizing {
24+
.pagebuilder-grid-size-indicator {
25+
z-index: 105;
26+
}
27+
28+
.resize-grid {
29+
opacity: 1;
30+
transition: .5s opacity;
31+
visibility: visible;
32+
}
33+
34+
.pagebuilder-options {
35+
display: none;
36+
}
37+
38+
.pagebuilder-content-type {
39+
.pagebuilder-empty {
40+
opacity: 0;
41+
}
42+
}
43+
}
2244

2345
> .element-children {
2446
display: flex;

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/column-line/preview.js

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/column-line/default/preview.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,14 @@
66
-->
77

88
<div class="pagebuilder-column-line pagebuilder-content-type"
9+
css="{'resizing': resizing}"
910
attr="data.main.attributes">
1011
<div class="column-drop-placeholder"
1112
afterRender="function (element) { bindColumnLineDropPlaceholder.call($data, element); }">
1213
</div>
14+
<div class="resize-grid" each="gridSizeArray">
15+
<div class="grid-line"></div>
16+
</div>
1317
<div class="resize-ghost" afterRender="function (element) { bindGhost.call($data, element); }"></div>
1418
<div class="drop-placeholder" afterRender="function (element) { bindDropPlaceholder.call($data, element); }"></div>
1519
<div class="move-placeholder" afterRender="function (element) { bindMovePlaceholder.call($data, element); }"></div>

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/column-line/preview.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
InitElementEventParamsInterface,
2828
} from "Magento_PageBuilder/js/content-type/column/column-events.types";
2929
import ColumnPreview from "Magento_PageBuilder/js/content-type/column/preview";
30+
import ColumnGroupPreview from "Magento_PageBuilder/js/content-type/column-group/preview";
3031
import {
3132
ContentTypeDroppedCreateEventParamsInterface,
3233
ContentTypeRemovedEventParamsInterface,
@@ -59,6 +60,7 @@ import {calculateDropPositions, DropPosition} from "./drag-and-drop";
5960
export default class Preview extends PreviewCollection {
6061
public contentType: ContentTypeCollectionInterface<ColumnLinePreview>;
6162
public resizing: KnockoutObservable<boolean> = ko.observable(false);
63+
public gridSizeArray: KnockoutObservableArray<any[]> = ko.observableArray([]);
6264
public element: JQuery;
6365
private dropPlaceholder: JQuery;
6466
private movePlaceholder: any;
@@ -123,6 +125,12 @@ export default class Preview extends PreviewCollection {
123125
}
124126
});
125127

128+
const parentPreview = this.contentType.parentContentType.preview as ColumnGroupPreview;
129+
this.gridSizeArray(parentPreview.gridSizeArray());
130+
parentPreview.gridSizeArray.subscribe((gridSize : Array<any>) => {
131+
this.gridSizeArray(gridSize);
132+
});
133+
126134
this.contentType.children.subscribe(
127135
_.debounce(
128136
this.removeIfEmpty.bind(this),
@@ -149,6 +157,7 @@ export default class Preview extends PreviewCollection {
149157
// Does the events parent match the previews column group?
150158
if (args.columnLine.id === this.contentType.id) {
151159
this.bindDraggable(args.column);
160+
152161
}
153162
});
154163
}

0 commit comments

Comments
 (0)