From 62985e8329c1098df4878be22bdfa4fe069b0152 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= <sobo@odoo.com>
Date: Tue, 10 Oct 2023 09:55:35 +0200
Subject: [PATCH] [REF] web_editor, website: remove duplicated grid/column
 options

When adding the grid options in commits [1] and [2], some of them have
been duplicated in order to cover the different use cases: grid-only,
columns-only and grid + columns. However, they should have been declared
only once and then called when needed.

This commit extracts the common options into views, to avoid duplicating
them.

[1]: https://github.com/odoo/odoo/commit/cc406afcea7bf5846233a9f97a4a8ac5f618f3ec
[2]: https://github.com/odoo/odoo/commit/85b352af319edec84407f2046cf795b4e5503460

task-3369695

Part-of: odoo/odoo#136683
---
 .../static/src/scss/wysiwyg_snippets.scss     |  4 --
 addons/website/views/snippets/snippets.xml    | 58 ++++++++++---------
 2 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 96a41587c49..c20c19a2c96 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -2603,10 +2603,6 @@ we-select.o_grid we-toggler {
     width: fit-content !important;
 }
 
-we-button-group.o_grid we-selection-items {
-    width: fit-content !important;
-}
-
 // Background grid.
 .o_we_background_grid {
     padding: 0 !important;
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index a0e147ce2b1..3634d4d7dfd 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -341,6 +341,28 @@
         data-allow-delete="true" data-fakem2m="true"/>
 </template>
 
+<!-- Column count option -->
+<template id="column_count_option">
+    <we-select t-att-string="not with_grid and 'Columns'" t-att-class="with_grid and 'o_grid'" data-no-preview="true" data-name="column_count_opt" t-att-data-dependencies="with_grid and 'normal_mode'">
+        <we-button data-select-count="0" data-name="zero_cols_opt">None</we-button>
+        <we-button data-select-count="1">1</we-button>
+        <we-button data-select-count="2">2</we-button>
+        <we-button data-select-count="3">3</we-button>
+        <we-button data-select-count="4">4</we-button>
+        <we-button data-select-count="5">5</we-button>
+        <we-button data-select-count="6">6</we-button>
+    </we-select>
+</template>
+
+<!-- Grid layout options -->
+<template id="grid_layout_options">
+    <we-button-group t-att-class="indent and 'o_we_sublevel_1'" string="Add Elements" data-no-preview="true" data-dependencies="grid_mode">
+        <we-button class="o_we_bg_brand_primary o_grid" data-add-element="image" title="Image" data-name="image">Image</we-button>
+        <we-button class="o_we_bg_brand_primary o_grid" data-add-element="text" title="Text" data-name="text">Text</we-button>
+        <we-button class="o_we_bg_brand_primary o_grid" data-add-element="button" title="Button" data-name="button">Button</we-button>
+    </we-button-group>
+</template>
+
 <template id="snippet_options" inherit_id="web_editor.snippet_options" primary="True">
     <!-- =================================================================== -->
     <!-- Modify generic snippet options                                      -->
@@ -519,26 +541,14 @@
     <div data-js="layout_column"
         data-selector="section.s_features_grid, section.s_process_steps"
         data-target="> *:has(> .row), > .s_allow_columns">
-        <we-select string="Columns" data-no-preview="true" data-name="column_count_opt">
-            <we-button data-select-count="0" data-name="zero_cols_opt">None</we-button>
-            <we-button data-select-count="1">1</we-button>
-            <we-button data-select-count="2">2</we-button>
-            <we-button data-select-count="3">3</we-button>
-            <we-button data-select-count="4">4</we-button>
-            <we-button data-select-count="5">5</we-button>
-            <we-button data-select-count="6">6</we-button>
-        </we-select>
+        <t t-call="website.column_count_option"/>
     </div>
 
     <!-- Grid only -->
     <div data-js="layout_column"
         data-selector="section.s_masonry_block"
         data-target="> *:has(> .row)">
-        <we-button-group class="o_grid" string="Add Elements" data-no-preview="true" data-dependencies="grid_mode">
-            <we-button class="o_we_bg_brand_primary o_grid" data-add-element="image" title="Image" data-name="image">Image</we-button>
-            <we-button class="o_we_bg_brand_primary o_grid" data-add-element="text" title="Text" data-name="text">Text</we-button>
-            <we-button class="o_we_bg_brand_primary o_grid" data-add-element="button" title="Button" data-name="button">Button</we-button>
-        </we-button-group>
+        <t t-call="website.grid_layout_options"/>
     </div>
 
     <!-- Grid and columns -->
@@ -551,21 +561,13 @@
                 <we-button data-select-layout="grid" data-name="grid_mode">Grid</we-button>
                 <we-button data-select-layout="normal" data-name="normal_mode">Cols</we-button>
             </we-button-group>
-            <we-select class="o_grid" data-no-preview="true" data-name="column_count_opt" data-dependencies="normal_mode">
-                <we-button data-select-count="0" data-name="zero_cols_opt">None</we-button>
-                <we-button data-select-count="1">1</we-button>
-                <we-button data-select-count="2">2</we-button>
-                <we-button data-select-count="3">3</we-button>
-                <we-button data-select-count="4">4</we-button>
-                <we-button data-select-count="5">5</we-button>
-                <we-button data-select-count="6">6</we-button>
-            </we-select>
+            <t t-call="website.column_count_option">
+                <t t-set="with_grid" t-value="True"/>
+            </t>
         </we-row>
-        <we-button-group class="o_grid o_we_sublevel_1" string="Add Elements" data-no-preview="true" data-dependencies="grid_mode">
-            <we-button class="o_we_bg_brand_primary o_grid" data-add-element="image" title="Image" data-name="image">Image</we-button>
-            <we-button class="o_we_bg_brand_primary o_grid" data-add-element="text" title="Text" data-name="text">Text</we-button>
-            <we-button class="o_we_bg_brand_primary o_grid" data-add-element="button" title="Button" data-name="button">Button</we-button>
-        </we-button-group>
+        <t t-call="website.grid_layout_options">
+            <t t-set="indent" t-value="True"/>
+        </t>
     </div>
 
     <!--  Vertical Alignment -->