[FIX] web_editor, website: fix columns mobile orders
This follows [commit 1], which introduced a way to separately reorder columns on mobile and desktop. This commit replaces the custom mobile order classes with the Bootstrap `.order-x` classes. It also ensures those orders are not used for mass mailing in case the editor composes their email on a small window. The reorder would indeed not have any effect for the end users in such a case. [commit 1]: https://github.com/odoo/odoo/commit/710d000f1872fd99b41d52ec3d6923756bba7cba task-3576046 closes odoo/odoo#140362 Signed-off-by: Arthur Detroux (ard) <ard@odoo.com>
This commit is contained in:
Robin Lejeune (role)
@@ -31,10 +31,10 @@ export const ColumnLayoutMixin = {
|
||||
*
|
||||
* @private
|
||||
* @param {HTMLElement} el
|
||||
* @returns {Array|null} class match ["o_we_mobile_order_XX", "XX"]
|
||||
* @returns {Array|null} class match ["order-XX", "XX"]
|
||||
*/
|
||||
_getItemMobileOrder(el) {
|
||||
return el.className.match(/\bo_we_mobile_order_([0-9]+)\b/);
|
||||
return el.className.match(/\border-([0-9]+)\b/);
|
||||
},
|
||||
/**
|
||||
* Gets the first item, whether it has a mobile order class or not.
|
||||
@@ -45,7 +45,7 @@ export const ColumnLayoutMixin = {
|
||||
* @returns {HTMLElement} first HTMLElement in order
|
||||
*/
|
||||
_getFirstItem(columnEls, isMobile) {
|
||||
return isMobile && [...columnEls].find(el => el.classList.contains("o_we_mobile_order_0"))
|
||||
return isMobile && [...columnEls].find(el => el.classList.contains("order-0"))
|
||||
|| columnEls[0];
|
||||
},
|
||||
/**
|
||||
@@ -56,8 +56,8 @@ export const ColumnLayoutMixin = {
|
||||
*/
|
||||
_addMobileOrders(columnEls) {
|
||||
for (let i = 0; i < columnEls.length; i++) {
|
||||
const mobileOrderClass = `o_we_mobile_order_${i}`;
|
||||
columnEls[i].classList.add(mobileOrderClass);
|
||||
const mobileOrderClass = `order-${i}`;
|
||||
columnEls[i].classList.add(mobileOrderClass, "order-lg-0");
|
||||
}
|
||||
},
|
||||
/**
|
||||
|
||||
@@ -5659,7 +5659,7 @@ registry.SnippetMove = SnippetOptionWidget.extend(ColumnLayoutMixin, {
|
||||
cloneEls.forEach((el, i) => {
|
||||
if (i > 0) {
|
||||
const newMobileOrder = siblingEls.length - cloneEls.length + i;
|
||||
el.classList.replace(mobileOrder[0], `o_we_mobile_order_${newMobileOrder}`);
|
||||
el.classList.replace(mobileOrder[0], `order-${newMobileOrder}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -5678,8 +5678,7 @@ registry.SnippetMove = SnippetOptionWidget.extend(ColumnLayoutMixin, {
|
||||
[...this.$target[0].parentElement.children].forEach(el => {
|
||||
const elOrder = parseInt(this._getItemMobileOrder(el)[1]);
|
||||
if (elOrder > targetOrder) {
|
||||
el.classList.replace(`o_we_mobile_order_${elOrder}`,
|
||||
`o_we_mobile_order_${elOrder - 1}`);
|
||||
el.classList.replace(`order-${elOrder}`, `order-${elOrder - 1}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -5695,7 +5694,7 @@ registry.SnippetMove = SnippetOptionWidget.extend(ColumnLayoutMixin, {
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
moveSnippet: function (previewMode, widgetValue, params) {
|
||||
const isMobile = weUtils.isMobileView(this.$target[0]);
|
||||
const isMobile = this._isMobile();
|
||||
const isNavItem = this.$target[0].classList.contains('nav-item');
|
||||
const $tabPane = isNavItem ? $(this.$target.find('.nav-link')[0].hash) : null;
|
||||
const moveLeftOrRight = ["move_left_opt", "move_right_opt"].includes(params.name);
|
||||
@@ -5727,7 +5726,7 @@ registry.SnippetMove = SnippetOptionWidget.extend(ColumnLayoutMixin, {
|
||||
}
|
||||
if (mobileOrder) {
|
||||
for (const el of siblingEls) {
|
||||
el.className = el.className.replace(/\bo_we_mobile_order_[0-9]+\b/, "");
|
||||
el.className = el.className.replace(/\border(-lg)?-[0-9]+\b/g, "");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -5780,7 +5779,7 @@ registry.SnippetMove = SnippetOptionWidget.extend(ColumnLayoutMixin, {
|
||||
if (moveLeftOrRight && isMobileView && this._getItemMobileOrder(this.$target[0])) {
|
||||
const firstOrLast = widgetName === "move_left_opt" ? "0" :
|
||||
this.$target[0].parentElement.children.length - 1;
|
||||
return !this.$target[0].classList.contains(`o_we_mobile_order_${firstOrLast}`);
|
||||
return !this.$target[0].classList.contains(`order-${firstOrLast}`);
|
||||
}
|
||||
const firstOrLastChild = moveUpOrLeft ? ":first-child" : ":last-child";
|
||||
return !this.$target.is(firstOrLastChild);
|
||||
@@ -5796,11 +5795,17 @@ registry.SnippetMove = SnippetOptionWidget.extend(ColumnLayoutMixin, {
|
||||
_swapMobileOrders(widgetValue, siblingEls) {
|
||||
const targetMobileOrder = this._getItemMobileOrder(this.$target[0]);
|
||||
const orderModifier = widgetValue === "prev" ? -1 : 1;
|
||||
const newOrderClass = `o_we_mobile_order_${parseInt(targetMobileOrder[1]) + orderModifier}`;
|
||||
const newOrderClass = `order-${parseInt(targetMobileOrder[1]) + orderModifier}`;
|
||||
const comparedEl = [...siblingEls].find(el => el.classList.contains(newOrderClass));
|
||||
this.$target[0].classList.replace(targetMobileOrder[0], newOrderClass);
|
||||
comparedEl.classList.replace(newOrderClass, targetMobileOrder[0]);
|
||||
},
|
||||
/**
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
_isMobile() {
|
||||
return false;
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
|
||||
@@ -32,14 +32,6 @@
|
||||
transform: scale(-1);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
@for $i from 0 through 12 {
|
||||
.o_we_mobile_order_#{$i} {
|
||||
order: $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// GRID LAYOUT
|
||||
.o_grid_mode {
|
||||
@include media-breakpoint-down(lg) {
|
||||
|
||||
@@ -4179,6 +4179,15 @@ options.registry.layout_column.include({
|
||||
},
|
||||
});
|
||||
|
||||
options.registry.SnippetMove.include({
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
_isMobile() {
|
||||
return wUtils.isMobile(this);
|
||||
},
|
||||
});
|
||||
|
||||
export default {
|
||||
UrlPickerUserValueWidget: UrlPickerUserValueWidget,
|
||||
FontFamilyPickerUserValueWidget: FontFamilyPickerUserValueWidget,
|
||||
|
||||
@@ -80,10 +80,10 @@ wTourUtils.clickOnSnippet({
|
||||
content: "Change the orders of the 2nd and 3rd items",
|
||||
trigger: "iframe .o_overlay_move_options [data-name='move_right_opt']",
|
||||
}, {
|
||||
content: "Check that the 1st item now has a class .o_we_mobile_order_0" +
|
||||
"and that .o_we_mobile_order_1 is set on the 3rd item, and .o_we_mobile_order_2 on the 2nd",
|
||||
trigger: `${columnsSnippetRow}:has(.o_we_mobile_order_0:first-child)`,
|
||||
extra_trigger: `${columnsSnippetRow}:has(.o_we_mobile_order_2:nth-child(2) + .o_we_mobile_order_1:nth-child(3))`,
|
||||
content: "Check that the 1st item now has a class .order-0.order-lg-0" +
|
||||
"and that .order-1.order-lg-0 is set on the 3rd item, and .order-2.order-lg-0 on the 2nd",
|
||||
trigger: `${columnsSnippetRow}:has(.order-0.order-lg-0:first-child)`,
|
||||
extra_trigger: `${columnsSnippetRow}:has(.order-2.order-lg-0:nth-child(2) + .order-1.order-lg-0:nth-child(3))`,
|
||||
isCheck: true,
|
||||
}, {
|
||||
content: "Toggle desktop view",
|
||||
@@ -96,7 +96,7 @@ wTourUtils.clickOnSnippet({
|
||||
trigger: `${columnCountOptSelector} we-button[data-select-count='6']`,
|
||||
}, {
|
||||
content: "Check that each item has a different mobile order from 0 to 5",
|
||||
trigger: `${columnsSnippetRow}${[0, 1, 2, 3, 4, 5].map(n => `:has(.o_we_mobile_order_${n})`).join("")}`,
|
||||
trigger: `${columnsSnippetRow}${[0, 1, 2, 3, 4, 5].map(n => `:has(.order-${n}.order-lg-0)`).join("")}`,
|
||||
isCheck: true,
|
||||
}, {
|
||||
content: "Click on the 6th item",
|
||||
@@ -111,8 +111,8 @@ wTourUtils.clickOnSnippet({
|
||||
content: "Change the orders of the 5th and 6th items to override the mobile orders",
|
||||
trigger: "iframe .o_overlay_move_options [data-name='move_left_opt']",
|
||||
}, {
|
||||
content: "Check that there are no .o_we_mobile_order_X classes anymore",
|
||||
trigger: `${columnsSnippetRow}:not(:has(.o_we_mobile_order_0))`,
|
||||
content: "Check that there are no .order-X classes anymore",
|
||||
trigger: `${columnsSnippetRow}:not(:has(.order-0)):not(:has(.order-lg-0))`,
|
||||
isCheck: true,
|
||||
},
|
||||
]);
|
||||
|
||||
Reference in New Issue
Block a user