diff --git a/addons/web_editor/static/src/js/common/column_layout_mixin.js b/addons/web_editor/static/src/js/common/column_layout_mixin.js index ba0a783a324..16ba5494712 100644 --- a/addons/web_editor/static/src/js/common/column_layout_mixin.js +++ b/addons/web_editor/static/src/js/common/column_layout_mixin.js @@ -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"); } }, /** diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index a4913c70b1f..e5b78194baa 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -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; + }, }); /** diff --git a/addons/web_editor/static/src/scss/web_editor.frontend.scss b/addons/web_editor/static/src/scss/web_editor.frontend.scss index b5655ea15bb..b7103b224d1 100644 --- a/addons/web_editor/static/src/scss/web_editor.frontend.scss +++ b/addons/web_editor/static/src/scss/web_editor.frontend.scss @@ -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) { diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 0eb1e7ddfc9..5c0702c5080 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -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, diff --git a/addons/website/static/tests/tours/website_update_column_count.js b/addons/website/static/tests/tours/website_update_column_count.js index ea67c5612bf..947f3203df8 100644 --- a/addons/website/static/tests/tours/website_update_column_count.js +++ b/addons/website/static/tests/tours/website_update_column_count.js @@ -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, }, ]);