[IMP] web_editor, website: make Big Boxes snippet able to use grid mode

The grid mode allows some snippets to move and resize their columns in
a grid. However, some of them were blocked because they don't look good
in this mode. This is the case of the Big Boxes snippet: because it
contains two blocks full of padding and since toggling the grid mode
removes this padding, it ended looking weird.

This commit allows the previously blocked Big Boxes snippet to toggle
the grid mode. More generally, this commit allows snippets having only
columns containing a background color to look good in grid mode by
keeping a more logical padding for them.

task-2973198

X-original-commit: a051922
Part-of: odoo#102525

Author: sobo-odoo

addons/web_editor/static/src/js/common/grid_layout_utils.js

@@ -134,14 +134,20 @@ function _placeColumns(columnEls, rowSize, rowGap, columnSize, columnGap) {
     let maxRowEnd = 0;
     const columnSpans = [];
     const columnCount = columnEls.length; // number of column in the grid.
+    const imageColumns = []; // array of boolean telling if it is a column with only an image.
+
+    // Checking if all the columns have a background color to take that into
+    // account when computing their size and padding (to make them look good).
+    const allBackgroundColor = [...columnEls].every(columnEl => columnEl.classList.contains('o_cc'));
+
     for (const columnEl of columnEls) {
         const style = window.getComputedStyle(columnEl);
         // Horizontal placement.
         const columnLeft = columnEl.offsetLeft;
         // Getting the width of the column.
         const paddingLeft = parseFloat(style.paddingLeft);
-        const width = parseFloat(columnEl.scrollWidth) - 2 * paddingLeft;
-        const columnSpan = Math.ceil((width + columnGap) / (columnSize + columnGap));
+        const width = parseFloat(columnEl.scrollWidth) - (allBackgroundColor ? 0 : 2 * paddingLeft);
+        const columnSpan = Math.round((width + columnGap) / (columnSize + columnGap));
         const columnStart = Math.round(columnLeft / (columnSize + columnGap)) + 1;
         const columnEnd = columnStart + columnSpan;
 
@@ -152,9 +158,9 @@ function _placeColumns(columnEls, rowSize, rowGap, columnSize, columnGap) {
         const paddingBottom = parseFloat(style.paddingBottom);
         const rowOffsetTop = Math.floor((paddingTop + rowGap) / (rowSize + rowGap));
         // Getting the height of the column.
-        const height = parseFloat(columnEl.scrollHeight) - paddingTop - paddingBottom;
+        const height = parseFloat(columnEl.scrollHeight) - (allBackgroundColor ? 0 : paddingTop + paddingBottom);
         const rowSpan = Math.ceil((height + rowGap) / (rowSize + rowGap));
-        const rowStart = Math.round(columnTop / (rowSize + rowGap)) + 1 + rowOffsetTop;
+        const rowStart = Math.round(columnTop / (rowSize + rowGap)) + 1 + (allBackgroundColor ? 0 : rowOffsetTop);
         const rowEnd = rowStart + rowSpan;
 
         columnEl.style.gridArea = `${rowStart} / ${columnStart} / ${rowEnd} / ${columnEnd}`;
@@ -179,6 +185,17 @@ function _placeColumns(columnEls, rowSize, rowGap, columnSize, columnGap) {
         columnSpans.push(columnSpan);
     }
 
+    // If all the columns have a background color, set their padding to the
+    // original padding of the first column.
+    if (allBackgroundColor) {
+        const style = window.getComputedStyle(columnEls[0]);
+        const paddingY = style.paddingTop;
+        const paddingX = style.paddingLeft;
+        const rowEl = columnEls[0].parentNode;
+        rowEl.style.setProperty('--grid-item-padding-y', paddingY);
+        rowEl.style.setProperty('--grid-item-padding-x', paddingX);
+    }
+
     // Removing padding and offset classes.
     for (const [i, columnEl] of [...columnEls].entries()) {
         const regex = /^(pt|pb|col-|offset-)/;

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -4443,7 +4443,7 @@ registry.sizing = SnippetOptionWidget.extend({
             // Hiding the move handle for some snippets so we can't drag them
             // and so we can't toggle the grid mode.
             const moveHandleEl = this.$overlay[0].querySelector('.o_move_handle');
-            const untoggleableColumns = '.s_masonry_block, .s_showcase, .s_features_grid, .s_website_form, .s_color_blocks_2';
+            const untoggleableColumns = '.s_masonry_block, .s_showcase, .s_features_grid, .s_website_form';
             const disableToggle = this.$target[0].closest(untoggleableColumns);
             moveHandleEl.classList.toggle('d-none', disableToggle || isMobileView);
 

addons/web_editor/static/src/scss/web_editor.frontend.scss

@@ -60,7 +60,7 @@
     > * {
         width: 100%;
         margin: 0;
-        padding: var(--grid-item-padding-y) var(--grid-item-padding-x);
+        padding: var(--grid-item-padding-y) var(--grid-item-padding-x) !important;
     }
 }
 

addons/web_editor/static/src/scss/wysiwyg_snippets.scss

@@ -2532,7 +2532,7 @@ we-button-group.o_grid {
 
 // Background grid.
 .o_we_background_grid {
-    padding: 0;
+    padding: 0 !important;
 }
 
 .o_we_cell {

addons/website/views/snippets/snippets.xml

@@ -477,7 +477,7 @@
     </div>
 
     <div data-js="layout_column"
-        data-selector="section.s_features_grid, section.s_color_blocks_2"
+        data-selector="section.s_features_grid"
         data-target="> *:has(> .row:not(.s_nb_column_fixed)), > .s_allow_columns">
         <we-select string="Columns" data-no-preview="true">
             <we-button data-select-count="0" data-name="zero_cols_opt">None</we-button>
@@ -493,7 +493,7 @@
     <div data-js="layout_column"
         data-selector="section"
         data-target="> *:has(> .row:not(.s_nb_column_fixed)), > .s_allow_columns"
-        data-exclude=".s_masonry_block, .s_features_grid, .s_color_blocks_2">
+        data-exclude=".s_masonry_block, .s_features_grid">
         <we-row>
             <we-button-group string="Layout" data-no-preview="true">
                 <we-button data-select-layout="grid" data-name="grid_mode">Grid</we-button>