From 73317cb9d1966f9d51b4b2ef0bebdbc95e532df7 Mon Sep 17 00:00:00 2001
From: "Robin Lejeune (role)" <role@odoo.com>
Date: Tue, 20 Jun 2023 12:53:38 +0000
Subject: [PATCH] [IMP] web_editor, website: use consistent margins on buttons

Commit [1] added a margin-bottom on buttons within snippets to make some
breathing space when several buttons follow each other and appear on
multiple lines on mobile.
However, buttons added by the customer do not have a margin, which
causes misalignment when they add it next to a prebuilt button.

This commit checks that whenever a user adds a new button, if any of its
direct siblings is a button, the newly added button and its button
siblings get an appropriate margin-bottom.
It also reverts commit [1] and removes the `mb-2` class on the button in
`s_text_cover.xml` from commit [2], as it is not needed anymore with
this new behavior.

task-3369604

[1]: https://github.com/odoo/odoo/commit/075e915
[2]: https://github.com/odoo/odoo/commit/5ac340b

closes odoo/odoo#125824

Related: odoo/design-themes#680
Signed-off-by: Benjamin Vray (bvr) <bvr@odoo.com>
---
 .../static/src/js/wysiwyg/widgets/link.js     | 43 ++++++++++++++++++-
 addons/website/views/snippets/s_banner.xml    |  2 +-
 .../views/snippets/s_call_to_action.xml       |  2 +-
 addons/website/views/snippets/s_carousel.xml  |  4 +-
 .../views/snippets/s_color_blocks_2.xml       |  4 +-
 .../website/views/snippets/s_comparisons.xml  |  6 +--
 addons/website/views/snippets/s_cover.xml     |  2 +-
 .../website/views/snippets/s_image_text.xml   |  2 +-
 .../website/views/snippets/s_media_list.xml   |  2 +-
 addons/website/views/snippets/s_popup.xml     |  2 +-
 addons/website/views/snippets/s_showcase.xml  |  2 +-
 .../website/views/snippets/s_text_cover.xml   |  2 +-
 .../website/views/snippets/s_text_image.xml   |  2 +-
 13 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
index 76a8438d952..32f0ba20662 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
@@ -1,6 +1,8 @@
 /** @odoo-module **/
 
 import * as OdooEditorLib from "@web_editor/js/editor/odoo-editor/src/OdooEditor";
+import { _t } from "@web/core/l10n/translation";
+import { isVisible } from "@web/core/utils/ui";
 import weUtils from "@web_editor/js/common/utils";
 import {
     Component,
@@ -15,7 +17,6 @@ import {
 const getDeepRange = OdooEditorLib.getDeepRange;
 const getInSelection = OdooEditorLib.getInSelection;
 const EMAIL_REGEX = OdooEditorLib.EMAIL_REGEX;
-import { _t } from "@web/core/l10n/translation";
 
 /**
  * Allows to customize link content and style.
@@ -133,6 +134,15 @@ export class Link extends Component {
                 }
             }
         }
+        // When multiple buttons follow each other, they may break on 2 lines
+        // or more on mobile, so they need a margin-bottom.
+        if (data.classes.split(" ").includes("btn")) {
+            const closestButtonSiblingEls = this._getDirectButtonSiblings(this.linkEl);
+            if (closestButtonSiblingEls.length) {
+                data.classes += " mb-2";
+                closestButtonSiblingEls.forEach(btnEl => btnEl.classList.add("mb-2"));
+            }
+        }
         if (['btn-custom', 'btn-outline-custom', 'btn-fill-custom'].some(className =>
             data.classes.includes(className)
         )) {
@@ -552,16 +562,45 @@ export class Link extends Component {
         const allBtnColorPrefixes = /(^|\s+)(bg|text|border)(-[a-z0-9_-]*)?/gi;
         const allBtnClassSuffixes = /(^|\s+)btn(-[a-z0-9_-]*)?/gi;
         const allBtnShapes = /\s*(rounded-circle|flat)\s*/gi;
+        const btnMarginBottom = /(?<!\S)mb-2(?!\S)/i;
         this.state.className = this.state.iniClassName
             .replace(allBtnColorPrefixes, ' ')
             .replace(allBtnClassSuffixes, ' ')
-            .replace(allBtnShapes, ' ');
+            .replace(allBtnShapes, " ")
+            .replace(btnMarginBottom, " ");
         this.state.className += ' ' + keptClasses.join(' ');
         // 'o_submit' class will force anchor to be handled as a button in linkdialog.
         if (/(?:s_website_form_send|o_submit)/.test(this.state.className)) {
             this.state.isButton = true;
         }
     }
+    /**
+     * Returns an array of the buttons which are the closest non empty
+     * previousSibling and/or nextSibling.
+     *
+     * @param {HTMLElement} el
+     * @returns {HTMLElement[]}
+     */
+    _getDirectButtonSiblings(el) {
+        return ["previous", "next"].reduce((buttonSiblingsEls, side) => {
+            let siblingNode = el[`${side}Sibling`];
+            while (siblingNode) {
+                // If the node is an empty text node, or if it is a <br> tag or
+                // an invisible element, it is not taken into account.
+                if ((siblingNode.nodeType === 3 && !!siblingNode.textContent.match(/^\s*$/)) ||
+                        (siblingNode.nodeType === 1 &&
+                        (siblingNode.nodeName === "BR" || !isVisible(siblingNode)))) {
+                    siblingNode = siblingNode[`${side}Sibling`];
+                    continue;
+                }
+                if (siblingNode.nodeType === 1 && siblingNode.classList.contains("btn")) {
+                    buttonSiblingsEls.push(siblingNode);
+                }
+                break;
+            }
+            return buttonSiblingsEls;
+        }, []);
+    }
 
     //--------------------------------------------------------------------------
     // Handlers
diff --git a/addons/website/views/snippets/s_banner.xml b/addons/website/views/snippets/s_banner.xml
index 7cc6a07de67..fd7dfda7f2a 100644
--- a/addons/website/views/snippets/s_banner.xml
+++ b/addons/website/views/snippets/s_banner.xml
@@ -9,7 +9,7 @@
                 <div class="col-lg-6 jumbotron rounded o_cc o_cc1 pt32 pb32" data-name="Box">
                     <h1><font style="font-size: 62px;">Sell Online. Easily.</font></h1>
                     <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
-                    <a t-att-href="cta_btn_href" class="btn btn-primary mb-2"><t t-esc="cta_btn_text">Contact Us</t></a>
+                    <a t-att-href="cta_btn_href" class="btn btn-primary"><t t-esc="cta_btn_text">Contact Us</t></a>
                 </div>
             </div>
         </div>
diff --git a/addons/website/views/snippets/s_call_to_action.xml b/addons/website/views/snippets/s_call_to_action.xml
index 4b610066860..10f0e240177 100644
--- a/addons/website/views/snippets/s_call_to_action.xml
+++ b/addons/website/views/snippets/s_call_to_action.xml
@@ -11,7 +11,7 @@
                 </div>
                 <div class="col-lg-3 pt8">
                     <p style="text-align: right;">
-                        <a t-att-href="cta_btn_href" class="btn btn-primary btn-lg mb-2"><t t-esc="cta_btn_text">Contact us</t></a>
+                        <a t-att-href="cta_btn_href" class="btn btn-primary btn-lg"><t t-esc="cta_btn_text">Contact us</t></a>
                     </p>
                 </div>
             </div>
diff --git a/addons/website/views/snippets/s_carousel.xml b/addons/website/views/snippets/s_carousel.xml
index 8476fb8afe4..e87a6db88a1 100644
--- a/addons/website/views/snippets/s_carousel.xml
+++ b/addons/website/views/snippets/s_carousel.xml
@@ -21,7 +21,7 @@
                                  <h2><font style="font-size: 62px;">Slide Title</font></h2>
                                 <p class="lead">Use this snippet to presents your content in a slideshow-like format. Don't write about products or services here, write about solutions.</p>
                                 <p>
-                                    <a href="/contactus" class="btn btn-primary mb-2">Contact us</a>
+                                    <a href="/contactus" class="btn btn-primary">Contact us</a>
                                 </p>
                             </div>
                         </div>
@@ -37,7 +37,7 @@
                                     <hr class="w-25 mx-auto" style="border-top-width: 1px; border-top-style: solid;"/>
                                 </div>
                                 <p class="lead">Storytelling is powerful.<br/> It draws readers in and engages them.</p>
-                                <p><a href="/" class="btn btn-primary mb-2">Start your journey</a></p>
+                                <p><a href="/" class="btn btn-primary">Start your journey</a></p>
                             </div>
                         </div>
                     </div>
diff --git a/addons/website/views/snippets/s_color_blocks_2.xml b/addons/website/views/snippets/s_color_blocks_2.xml
index cb8ef1e9b3e..3fec376dac2 100644
--- a/addons/website/views/snippets/s_color_blocks_2.xml
+++ b/addons/website/views/snippets/s_color_blocks_2.xml
@@ -9,13 +9,13 @@
                     <i class="fa fa-shield fa-5x m-3"/>
                     <h2>A color block</h2>
                     <p>Color blocks are a simple and effective way to <b>present and highlight your content</b>. Choose an image or a color for the background. You can even resize and duplicate the blocks to create your own layout. Add images or icons to customize the blocks.</p>
-                    <a href="#" class="btn btn-primary mb-2">More Details</a>
+                    <a href="#" class="btn btn-primary">More Details</a>
                 </div>
                 <div class="col-lg-6 o_cc o_cc5 text-center">
                     <i class="fa fa-cube fa-5x m-3"/>
                     <h2>Another color block</h2>
                     <p>Color blocks are a simple and effective way to <b>present and highlight your content</b>. Choose an image or a color for the background. You can even resize and duplicate the blocks to create your own layout. Add images or icons to customize the blocks.</p>
-                    <a href="#" class="btn btn-primary mb-2">More Details</a>
+                    <a href="#" class="btn btn-primary">More Details</a>
                 </div>
             </div>
         </div>
diff --git a/addons/website/views/snippets/s_comparisons.xml b/addons/website/views/snippets/s_comparisons.xml
index 02b9bb54b2f..30ca1432e43 100644
--- a/addons/website/views/snippets/s_comparisons.xml
+++ b/addons/website/views/snippets/s_comparisons.xml
@@ -24,7 +24,7 @@
                         </ul>
                         <div class="card-footer">
                             <p><i>Instant setup, satisfied or reimbursed.</i></p>
-                            <a href="/contactus" class="btn btn-primary mb-2">Order now</a>
+                            <a href="/contactus" class="btn btn-primary">Order now</a>
                         </div>
                     </div>
                 </div>
@@ -47,7 +47,7 @@
                         </ul>
                         <div class="card-footer">
                             <p><i>Instant setup, satisfied or reimbursed.</i></p>
-                            <a href="/contactus" class="btn btn-primary mb-2">Start now</a>
+                            <a href="/contactus" class="btn btn-primary">Start now</a>
                         </div>
                     </div>
                 </div>
@@ -70,7 +70,7 @@
                         </ul>
                         <div class="card-footer">
                             <p><i>Instant setup, satisfied or reimbursed.</i></p>
-                            <a href="/contactus" class="btn btn-primary mb-2">Contact us</a>
+                            <a href="/contactus" class="btn btn-primary">Contact us</a>
                         </div>
                     </div>
                 </div>
diff --git a/addons/website/views/snippets/s_cover.xml b/addons/website/views/snippets/s_cover.xml
index 0afcd95aef1..17f17da2b22 100644
--- a/addons/website/views/snippets/s_cover.xml
+++ b/addons/website/views/snippets/s_cover.xml
@@ -9,7 +9,7 @@
             <h1 style="text-align: center;"><font style="font-size: 62px; font-weight: bold;">Catchy Headline</font></h1>
             <p class="lead" style="text-align: center;">Write one or two paragraphs describing your product, services or a specific feature.<br/> To be successful your content needs to be useful to your readers.</p>
             <p style="text-align: center;">
-                <a t-att-href="cta_btn_href" class="btn btn-primary mb-2"><t t-esc="cta_btn_text">Contact us</t></a>
+                <a t-att-href="cta_btn_href" class="btn btn-primary"><t t-esc="cta_btn_text">Contact us</t></a>
             </p>
         </div>
     </section>
diff --git a/addons/website/views/snippets/s_image_text.xml b/addons/website/views/snippets/s_image_text.xml
index ee8dedf8f95..cea17f74a41 100644
--- a/addons/website/views/snippets/s_image_text.xml
+++ b/addons/website/views/snippets/s_image_text.xml
@@ -12,7 +12,7 @@
                     <h2>Section Subtitle</h2>
                     <p>Write one or two paragraphs describing your product or services. To be successful your content needs to be useful to your readers.</p>
                     <p>Start with the customer – find out what they want and give it to them.</p>
-                    <p><a href="#" class="btn btn-primary mb-2">Discover more</a></p>
+                    <p><a href="#" class="btn btn-primary">Discover more</a></p>
                 </div>
             </div>
         </div>
diff --git a/addons/website/views/snippets/s_media_list.xml b/addons/website/views/snippets/s_media_list.xml
index 176c1a165bb..0c200cf1561 100644
--- a/addons/website/views/snippets/s_media_list.xml
+++ b/addons/website/views/snippets/s_media_list.xml
@@ -13,7 +13,7 @@
                         <div class="col-lg-8 s_media_list_body">
                             <h3>Media heading</h3>
                             <p>Use this snippet to build various types of components that feature a left- or right-aligned image alongside textual content. Duplicate the element to create a list that fits your needs.</p>
-                            <a href="#" class="btn btn-primary mb-2">Discover</a>
+                            <a href="#" class="btn btn-primary">Discover</a>
                         </div>
                     </div>
                 </div>
diff --git a/addons/website/views/snippets/s_popup.xml b/addons/website/views/snippets/s_popup.xml
index f710d37f917..a786683475d 100644
--- a/addons/website/views/snippets/s_popup.xml
+++ b/addons/website/views/snippets/s_popup.xml
@@ -17,7 +17,7 @@
                                 <div class="col-lg-10 offset-lg-1 text-center o_cc o_cc1 jumbotron pt48 pb48">
                                     <h2><font style="font-size: 62px;">Win $20</font></h2>
                                     <p class="lead">Check out now and get $20 off your first order.</p>
-                                    <a href="#" class="btn btn-primary mb-2">New customer</a>
+                                    <a href="#" class="btn btn-primary">New customer</a>
                                 </div>
                             </div>
                         </div>
diff --git a/addons/website/views/snippets/s_showcase.xml b/addons/website/views/snippets/s_showcase.xml
index 4aab5d166ee..88f6da5e1cb 100644
--- a/addons/website/views/snippets/s_showcase.xml
+++ b/addons/website/views/snippets/s_showcase.xml
@@ -49,7 +49,7 @@
         </div>
         <div class="container text-lg-center">
             <p><br/></p>
-            <a href="#" class="btn btn-primary mb-2">Discover all the features</a>
+            <a href="#" class="btn btn-primary">Discover all the features</a>
         </div>
     </section>
 </template>
diff --git a/addons/website/views/snippets/s_text_cover.xml b/addons/website/views/snippets/s_text_cover.xml
index fc1dd862a80..eaa76f5fc97 100644
--- a/addons/website/views/snippets/s_text_cover.xml
+++ b/addons/website/views/snippets/s_text_cover.xml
@@ -8,7 +8,7 @@
                 <div class="o_colored_level o_cc o_cc_1 col-lg-4 pt160 pb160 px-5">
                     <h1><span style="font-size: 62px;">Sell Online. <br/>Easily.</span></h1>
                     <p class="lead">Write one or two paragraphs describing your product, services or a specific feature. To be successful your content needs to be useful to your readers.</p>
-                    <a t-att-href="cta_btn_href" class="btn btn-primary mb-2"><t t-esc="cta_btn_text">Contact us</t></a>
+                    <a t-att-href="cta_btn_href" class="btn btn-primary"><t t-esc="cta_btn_text">Contact us</t></a>
                 </div>
                 <div class="o_not_editable pt160 pb160 oe_img_bg col-lg-8 d-none d-md-block" style="background-image: url('/web/image/website.s_text_cover_default_image'); background-position: 100% 0;"/>
             </div>
diff --git a/addons/website/views/snippets/s_text_image.xml b/addons/website/views/snippets/s_text_image.xml
index 779a747d780..efbee3b12a2 100644
--- a/addons/website/views/snippets/s_text_image.xml
+++ b/addons/website/views/snippets/s_text_image.xml
@@ -9,7 +9,7 @@
                     <h2>A Section Subtitle</h2>
                     <p>Write one or two paragraphs describing your product or services. To be successful your content needs to be useful to your readers.</p>
                     <p>Start with the customer – find out what they want and give it to them.</p>
-                    <p><a href="#" class="btn btn-primary mb-2">Learn more</a></p>
+                    <p><a href="#" class="btn btn-primary">Learn more</a></p>
                 </div>
                 <div class="col-lg-6 pt16 pb16">
                     <img src="/web/image/website.s_text_image_default_image" class="img img-fluid mx-auto" alt=""/>