Skip to content

Commit fa58664

Browse files
thjo-odooabd-msyukyu-odoo
thjo-odoo
authored and
abd-msyukyu-odoo
committed
[FIX] change col-lg to col-md
1 parent 97fd045 commit fa58664

File tree

15 files changed

+147
-71
lines changed

15 files changed

+147
-71
lines changed

‎addons/html_builder/static/src/builder.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export class Builder extends Component {
8282
{
8383
Plugins: this.props.Plugins,
8484
...this.props.config,
85+
mobileBreakpoint: this.props.config.mobileBreakpoint ?? "lg",
8586
onChange: ({ isPreviewing }) => {
8687
if (!isPreviewing) {
8788
this.state.canUndo = this.editor.shared.history.canUndo();

‎addons/html_builder/static/src/core/builder_overlay/builder_overlay.js

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@ export const sizingGrid = {
2424
};
2525

2626
export class BuilderOverlay {
27-
constructor(overlayTarget, { iframe, overlayContainer, history, hasOverlayOptions, next }) {
27+
constructor(
28+
overlayTarget,
29+
{ iframe, overlayContainer, history, hasOverlayOptions, next, mobileBreakpoint = "lg" }
30+
) {
2831
this.history = history;
2932
this.next = next;
3033
this.hasOverlayOptions = hasOverlayOptions;
@@ -43,6 +46,7 @@ export class BuilderOverlay {
4346
`.e:not(.o_grid_handle), .w:not(.o_grid_handle)`
4447
);
4548
this.gridHandles = this.handlesWrapperEl.querySelectorAll(".o_grid_handle");
49+
this.mobileBreakpoint = mobileBreakpoint;
4650

4751
this.initHandles();
4852
this.initSizing();
@@ -91,7 +95,7 @@ export class BuilderOverlay {
9195
}
9296

9397
if (this.overlayTarget.parentNode?.classList.contains("row")) {
94-
const isMobile = isMobileView(this.overlayTarget);
98+
const isMobile = isMobileView(this.overlayTarget, this.mobileBreakpoint);
9599
const isGridOn = this.overlayTarget.classList.contains("o_grid_item");
96100
const isGrid = !isMobile && isGridOn;
97101
// Hiding/showing the correct resize handles if we are in grid mode
@@ -222,7 +226,7 @@ export class BuilderOverlay {
222226
}
223227

224228
getSizingXConfig() {
225-
const resolutionModifier = this.isMobile ? "" : "lg-";
229+
const resolutionModifier = this.isMobile ? "" : `${this.mobileBreakpoint}-`;
226230
const rowWidth = this.overlayTarget.closest(".row").getBoundingClientRect().width;
227231
const valuesE = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
228232
const valuesW = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
@@ -241,7 +245,7 @@ export class BuilderOverlay {
241245
}
242246

243247
onResizeX(compass, initialClasses, currentIndex) {
244-
const resolutionModifier = this.isMobile ? "" : "lg-";
248+
const resolutionModifier = this.isMobile ? "" : `${this.mobileBreakpoint}-`;
245249
// (?!\S): following char cannot be a non-space character
246250
const offsetRegex = new RegExp(`(?:^|\\s+)offset-${resolutionModifier}(\\d{1,2})(?!\\S)`);
247251
const colRegex = new RegExp(`(?:^|\\s+)col-${resolutionModifier}(\\d{1,2})(?!\\S)`);
@@ -268,16 +272,18 @@ export class BuilderOverlay {
268272

269273
// Add/remove the `offset-lg-0` class when needed.
270274
if (this.isMobile && offset === 0) {
271-
this.overlayTarget.classList.remove("offset-lg-0");
275+
this.overlayTarget.classList.remove(`offset-${this.mobileBreakpoint}-0`);
272276
} else {
273277
const className = this.overlayTarget.className;
274-
const hasDesktopClass = !!className.match(/(^|\s+)offset-lg-\d{1,2}(?!\S)/);
278+
const hasDesktopClass = !!className.match(
279+
new RegExp(`(^|\\s+)offset-${this.mobileBreakpoint}-\\d{1,2}(?!\\S)`)
280+
);
275281
const hasMobileClass = !!className.match(/(^|\s+)offset-\d{1,2}(?!\S)/);
276282
if (
277283
(this.isMobile && offset > 0 && !hasDesktopClass) ||
278284
(!this.isMobile && offset === 0 && hasMobileClass)
279285
) {
280-
this.overlayTarget.classList.add("offset-lg-0");
286+
this.overlayTarget.classList.add(`offset-${this.mobileBreakpoint}-0`);
281287
}
282288
}
283289
} else if (initialOffset > 0) {
@@ -318,12 +324,12 @@ export class BuilderOverlay {
318324
cssProperty: "grid-row-end",
319325
},
320326
w: {
321-
classes: valuesW.map((v) => "g-col-lg-" + (columnEnd - v)),
327+
classes: valuesW.map((v) => `g-col-${this.mobileBreakpoint}-` + (columnEnd - v)),
322328
values: valuesW.map((v) => (gridProp.columnSize + gridProp.columnGap) * (v - 1)),
323329
cssProperty: "grid-column-start",
324330
},
325331
e: {
326-
classes: valuesE.map((v) => "g-col-lg-" + (v - columnStart)),
332+
classes: valuesE.map((v) => `g-col-${this.mobileBreakpoint}-` + (v - columnStart)),
327333
values: valuesE.map((v) => (gridProp.columnSize + gridProp.columnGap) * (v - 1)),
328334
cssProperty: "grid-column-end",
329335
},
@@ -389,7 +395,11 @@ export class BuilderOverlay {
389395

390396
if (compass === "w" || compass === "e") {
391397
const numberColumns = style.gridColumnEnd - style.gridColumnStart;
392-
this.replaceSizingClass(/\s*(g-col-lg-)([0-9-]+)/g, `g-col-lg-${numberColumns}`);
398+
399+
this.replaceSizingClass(
400+
new RegExp(`\\s*(g-col-${this.mobileBreakpoint}-)([0-9-]+)`, "g"),
401+
`g-col-${this.mobileBreakpoint}-${numberColumns}`
402+
);
393403
}
394404
}
395405

@@ -473,7 +483,7 @@ export class BuilderOverlay {
473483

474484
const handleEl = ev.currentTarget;
475485
const isGridHandle = handleEl.classList.contains("o_grid_handle");
476-
this.isMobile = isMobileView(this.overlayTarget);
486+
this.isMobile = isMobileView(this.overlayTarget, this.mobileBreakpoint);
477487

478488
// If we are in grid mode, add a background grid and place it in front
479489
// of the other elements.

‎addons/html_builder/static/src/core/builder_overlay/builder_overlay_plugin.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ export class BuilderOverlayPlugin extends Plugin {
9898
history: this.dependencies.history,
9999
hasOverlayOptions: checkElement(option.element, {}) && option.hasOverlayOptions,
100100
next: this.dependencies.operation.next,
101+
mobileBreakpoint: this.config.mobileBreakpoint,
101102
});
102103
this.overlays.push(overlay);
103104
this.overlayContainer.append(overlay.overlayElement);

‎addons/html_builder/static/src/core/grid_layout/grid_layout_plugin.js

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export class GridLayoutPlugin extends Plugin {
5959

6060
const buttons = [];
6161
this.overlayTarget = target;
62-
if (!isMobileView(this.overlayTarget)) {
62+
if (!isMobileView(this.overlayTarget, this.config.mobileBreakpoint)) {
6363
buttons.push(
6464
{
6565
class: "o_send_back oi",
@@ -123,7 +123,11 @@ export class GridLayoutPlugin extends Plugin {
123123
*/
124124
adjustGridItem(el) {
125125
const gridItemEl = el.closest(".o_grid_item");
126-
if (gridItemEl && gridItemEl !== el && !isMobileView(gridItemEl)) {
126+
if (
127+
gridItemEl &&
128+
gridItemEl !== el &&
129+
!isMobileView(gridItemEl, this.config.mobileBreakpoint)
130+
) {
127131
const rowEl = gridItemEl.parentElement;
128132
const { rowGap, rowSize } = getGridProperties(rowEl);
129133
const { rowStart, rowEnd } = getGridItemProperties(gridItemEl);
@@ -195,7 +199,7 @@ export class GridLayoutPlugin extends Plugin {
195199
// The columns move handles are not visible in mobile view to prevent
196200
// dragging them.
197201
const isColumn = targetEl.parentElement?.classList.contains("row");
198-
if (isColumn && isMobileView(targetEl)) {
202+
if (isColumn && isMobileView(targetEl, this.config.mobileBreakpoint)) {
199203
return false;
200204
}
201205
return true;
@@ -225,7 +229,7 @@ export class GridLayoutPlugin extends Plugin {
225229
// Toggle the grid mode if it is not already on.
226230
if (!isRowInGridMode) {
227231
const preserveSelection = this.dependencies.selection.preserveSelection;
228-
toggleGridMode(containerEl, preserveSelection);
232+
toggleGridMode(containerEl, preserveSelection, this.config.infix);
229233
}
230234
const gridItemProps = getGridItemProperties(columnEl);
231235

@@ -275,7 +279,13 @@ export class GridLayoutPlugin extends Plugin {
275279
// grid item and store its dimensions.
276280
if (!columnEl.classList.contains("o_grid_item")) {
277281
const { columnWidth, columnHeight } = dragState;
278-
const spans = convertColumnToGrid(rowEl, columnEl, columnWidth, columnHeight);
282+
const spans = convertColumnToGrid(
283+
rowEl,
284+
columnEl,
285+
columnWidth,
286+
columnHeight,
287+
this.config.mobileBreakpoint
288+
);
279289
dragState.columnSpan = spans.columnSpan;
280290
dragState.rowSpan = spans.rowSpan;
281291
}
@@ -380,7 +390,7 @@ export class GridLayoutPlugin extends Plugin {
380390
resizeGrid(rowEl);
381391
} else if (columnEl.classList.contains("o_grid_item")) {
382392
// Case when dropping a grid item in a non-grid dropzone.
383-
convertToNormalColumn(columnEl);
393+
convertToNormalColumn(columnEl, this.config.mobileBreakpoint);
384394
}
385395
}
386396

@@ -399,7 +409,13 @@ export class GridLayoutPlugin extends Plugin {
399409
// grid item and store its dimensions.
400410
if (!columnEl.classList.contains("o_grid_item")) {
401411
const { columnWidth, columnHeight } = dragState;
402-
const spans = convertColumnToGrid(rowEl, columnEl, columnWidth, columnHeight);
412+
const spans = convertColumnToGrid(
413+
rowEl,
414+
columnEl,
415+
columnWidth,
416+
columnHeight,
417+
this.config.mobileBreakpoint
418+
);
403419
dragState.columnSpan = spans.columnSpan;
404420
dragState.rowSpan = spans.rowSpan;
405421
}
@@ -417,7 +433,7 @@ export class GridLayoutPlugin extends Plugin {
417433
resizeGrid(rowEl);
418434
} else if (columnEl.classList.contains("o_grid_item")) {
419435
// Case when a grid item is dropped near a non-grid dropzone.
420-
convertToNormalColumn(columnEl);
436+
convertToNormalColumn(columnEl, this.config.mobileBreakpoint);
421437
}
422438
}
423439

‎addons/html_builder/static/src/core/move_plugin.js

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ import {
99
import { isElementInViewport, isMobileView } from "@html_builder/utils/utils";
1010
import { scrollTo } from "@html_builder/utils/scrolling";
1111

12-
export function getVisibleSibling(target, direction) {
12+
export function getVisibleSibling(target, direction, infix = "lg") {
1313
const siblingEls = [...target.parentNode.children];
1414
const visibleSiblingEls = siblingEls.filter(
1515
(el) => window.getComputedStyle(el).display !== "none"
1616
);
1717
const targetMobileOrder = target.style.order;
1818
// On mobile, if the target has a mobile order (which is independent
1919
// from desktop), consider these orders instead of the DOM order.
20-
if (targetMobileOrder && isMobileView(target)) {
20+
if (targetMobileOrder && isMobileView(target, infix)) {
2121
visibleSiblingEls.sort((a, b) => parseInt(a.style.order) - parseInt(b.style.order));
2222
}
2323
const targetIndex = visibleSiblingEls.indexOf(target);
@@ -95,7 +95,7 @@ export class MovePlugin extends Plugin {
9595
const columnEls = [...rowEl.children];
9696
const orderedColumnEls = columnEls.filter((el) => el.style.order);
9797
if (orderedColumnEls.length && orderedColumnEls.length !== columnEls.length) {
98-
removeMobileOrders(orderedColumnEls);
98+
removeMobileOrders(orderedColumnEls, this.config.mobileBreakpoint);
9999
}
100100
}
101101
}
@@ -121,8 +121,16 @@ export class MovePlugin extends Plugin {
121121
const isVertical =
122122
this.overlayTarget.matches(this.verticalMove.selector) &&
123123
!this.overlayTarget.matches(this.verticalMove.exclude);
124-
const previousSiblingEl = getVisibleSibling(this.overlayTarget, "prev");
125-
const nextSiblingEl = getVisibleSibling(this.overlayTarget, "next");
124+
const previousSiblingEl = getVisibleSibling(
125+
this.overlayTarget,
126+
"prev",
127+
this.config.mobileBreakpoint
128+
);
129+
const nextSiblingEl = getVisibleSibling(
130+
this.overlayTarget,
131+
"next",
132+
this.config.mobileBreakpoint
133+
);
126134

127135
if (previousSiblingEl) {
128136
const direction = isVertical ? "up" : "left";
@@ -188,11 +196,11 @@ export class MovePlugin extends Plugin {
188196
}
189197

190198
// Remove all the mobile orders in the new snippet.
191-
removeMobileOrders(parentEl.children);
199+
removeMobileOrders(parentEl.children, this.config.mobileBreakpoint);
192200
}
193201

194202
areArrowsHidden() {
195-
const isMobile = isMobileView(this.overlayTarget);
203+
const isMobile = isMobileView(this.overlayTarget, this.config.mobileBreakpoint);
196204
const isGridItem = this.overlayTarget.classList.contains("o_grid_item");
197205
const siblingsEl = [...this.overlayTarget.parentNode.children];
198206
const visibleSiblingEl = siblingsEl.find(
@@ -210,7 +218,7 @@ export class MovePlugin extends Plugin {
210218
* @param {String} direction "prev" or "next"
211219
*/
212220
onMoveClick(direction) {
213-
const isMobile = isMobileView(this.overlayTarget);
221+
const isMobile = isMobileView(this.overlayTarget, this.config.mobileBreakpoint);
214222
let hasMobileOrder = !!this.overlayTarget.style.order;
215223
const parentEl = this.overlayTarget.parentNode;
216224
const siblingEls = parentEl.children;
@@ -221,14 +229,18 @@ export class MovePlugin extends Plugin {
221229
// mobile view, the mobile order is reset.
222230
const isColumn = parentEl.classList.contains("row");
223231
if (isMobile && isColumn && !hasMobileOrder) {
224-
addMobileOrders(siblingEls);
232+
addMobileOrders(siblingEls, this.config.mobileBreakpoint);
225233
hasMobileOrder = true;
226234
} else if (!isMobile && hasMobileOrder) {
227-
removeMobileOrders(siblingEls);
235+
removeMobileOrders(siblingEls, this.config.mobileBreakpoint);
228236
hasMobileOrder = false;
229237
}
230238

231-
const siblingEl = getVisibleSibling(this.overlayTarget, direction);
239+
const siblingEl = getVisibleSibling(
240+
this.overlayTarget,
241+
direction,
242+
this.config.mobileBreakpoint
243+
);
232244
if (hasMobileOrder) {
233245
// Swap the mobile orders.
234246
const currentOrder = this.overlayTarget.style.order;

‎addons/html_builder/static/src/core/remove_plugin.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,8 +129,12 @@ export class RemovePlugin extends Plugin {
129129

130130
// Get the parent and the previous and next visible siblings.
131131
let parentEl = toRemoveEl.parentElement;
132-
const previousSiblingEl = getVisibleSibling(toRemoveEl, "prev");
133-
const nextSiblingEl = getVisibleSibling(toRemoveEl, "next");
132+
const previousSiblingEl = getVisibleSibling(
133+
toRemoveEl,
134+
"prev",
135+
this.config.mobileBreakpoint
136+
);
137+
const nextSiblingEl = getVisibleSibling(toRemoveEl, "next", this.config.mobileBreakpoint);
134138
if (parentEl.matches(".o_editable:not(body)")) {
135139
// If we target the editable, we want to reset the selection to the
136140
// body. If the editable has options, we do not want to show them.

‎addons/html_builder/static/src/core/select_number_column.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,12 @@ export class SelectNumberColumn extends BaseOptionComponent {
1212
const columnEls = editingElement.querySelector(":scope > .row")?.children;
1313
return {
1414
isCustomColumn:
15-
columnEls && areColsCustomized(columnEls, isMobileView(editingElement)),
15+
columnEls &&
16+
areColsCustomized(
17+
columnEls,
18+
isMobileView(editingElement, this.config.mobileBreakpoint),
19+
this.config.mobileBreakpoint
20+
),
1621
canHaveZeroColumns: editingElement.matches(".s_allow_columns"),
1722
};
1823
});

‎addons/html_builder/static/src/core/visibility_plugin.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export class VisibilityPlugin extends Plugin {
2424
// really hidden, and remove it from the ones that are in fact visible,
2525
// depending on if we are in mobile preview or not, so the DOM is
2626
// consistent.
27-
const isMobilePreview = isMobileView(this.editable);
27+
const isMobilePreview = isMobileView(this.editable, this.config.mobileBreakpoint);
2828
this.editable.querySelectorAll(deviceInvisibleSelector).forEach((invisibleEl) => {
2929
const isMobileHidden = invisibleEl.matches(".o_snippet_mobile_invisible");
3030
const isDesktopHidden = invisibleEl.matches(".o_snippet_desktop_invisible");
@@ -134,7 +134,7 @@ export class VisibilityPlugin extends Plugin {
134134
considerDeviceVisibility &&
135135
editingEl.matches(".o_snippet_mobile_invisible, .o_snippet_desktop_invisible")
136136
) {
137-
const isMobilePreview = isMobileView(editingEl);
137+
const isMobilePreview = isMobileView(editingEl, this.config.mobileBreakpoint);
138138
const isMobileHidden = editingEl.classList.contains("o_snippet_mobile_invisible");
139139
show = isMobilePreview !== isMobileHidden;
140140
}

‎addons/html_builder/static/src/plugins/background_option/background_shape_option_plugin.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -370,7 +370,7 @@ class ToggleBgShapeAction extends BaseAnimationAction {
370370
}
371371
// Only show on mobile by default if toggled from mobile
372372
// view.
373-
const showOnMobile = isMobileView(editingElement);
373+
const showOnMobile = isMobileView(editingElement, this.config.mobileBreakpoint);
374374
this.createShapeContainer(editingElement, shapeToSelect);
375375
const applyShapeParams = {
376376
shape: shapeToSelect,

0 commit comments

Comments
 (0)