[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>
This commit is contained in:
Robin Lejeune (role)
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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=""/>
|
||||
|
||||
Reference in New Issue
Block a user