From f34d7f4fabe3cd819ed17ea581915107afd00a7f Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Wed, 18 Dec 2019 15:08:08 +0000
Subject: [PATCH] [IMP] website: review structure snippets

This commit reviews a bunch structure snippets to streamline their use
and edition, namely:

Banner, Cover, Picture and Text-block snippets:
- Remove extraneous levels of edition (buttons, heading/text only
columns)

Picture snippet:
- make picture bigger

Three columns and comparison snippets:
- Make regular column options available on the cards
- Remove unwanted UI elements (card footer, button)

Cover snippet:
- Make title bold

It also consolidates the main colorpicker and the column colorpicker
into a single option as they did the same thing and allows inner content
to be dropped next to images in the Image - Text and Text - Image
snippets.

Part of https://github.com/odoo/odoo/pull/42937
task-2088157
task-2152184
---
 addons/website/static/src/scss/website.scss   |  5 ++
 .../src/snippets/s_three_columns/000.scss     |  4 +-
 .../static/src/snippets/s_title/000.scss      |  2 +-
 addons/website/views/snippets/s_banner.xml    | 15 ++----
 addons/website/views/snippets/s_carousel.xml  |  2 +-
 addons/website/views/snippets/s_cover.xml     | 18 +++----
 addons/website/views/snippets/s_picture.xml   | 14 ++---
 .../website/views/snippets/s_text_block.xml   | 10 ++--
 .../views/snippets/s_three_columns.xml        | 14 ++---
 addons/website/views/snippets/s_title.xml     | 25 +--------
 addons/website/views/snippets/snippets.xml    | 52 +++++++++----------
 11 files changed, 58 insertions(+), 103 deletions(-)

diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index be5a350092e..68a79f41a13 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -380,6 +380,11 @@ table.table_desc tr td {
     @extend .o_half_screen_height;
 }
 
+// Allows custom border radius without contents overflowing.
+.card {
+    overflow: hidden;
+}
+
 //
 // Snippets
 //
diff --git a/addons/website/static/src/snippets/s_three_columns/000.scss b/addons/website/static/src/snippets/s_three_columns/000.scss
index d0df614aede..24e5224ec87 100644
--- a/addons/website/static/src/snippets/s_three_columns/000.scss
+++ b/addons/website/static/src/snippets/s_three_columns/000.scss
@@ -1,5 +1,5 @@
-.s_three_columns {
-    .align-items-stretch .card {
+.s_three_columns:not([data-vcss]) {
+    .align-items-stretch > .card {
         height: 100%;
     }
 }
diff --git a/addons/website/static/src/snippets/s_title/000.scss b/addons/website/static/src/snippets/s_title/000.scss
index 12d932c630c..a4e76dcadd5 100644
--- a/addons/website/static/src/snippets/s_title/000.scss
+++ b/addons/website/static/src/snippets/s_title/000.scss
@@ -1,5 +1,5 @@
 
-.s_title {
+.s_title:not([data-vcss]) {
     .s_title_boxed {
         > * {
             display: inline-block;
diff --git a/addons/website/views/snippets/s_banner.xml b/addons/website/views/snippets/s_banner.xml
index e5f2f185656..3fecb67f084 100644
--- a/addons/website/views/snippets/s_banner.xml
+++ b/addons/website/views/snippets/s_banner.xml
@@ -7,17 +7,10 @@
         <div class="container">
             <div class="row s_nb_column_fixed">
                 <div class="col-lg-7 bg-white jumbotron rounded pt32 pb32" data-name="Box">
-                    <div class="row">
-                        <div class="col-lg-12 s_title s_col_no_bgcolor" data-name="Title">
-                            <h1 class="s_title_thin"><font style="font-size: 62px;"><b>Sell Online.</b> Easily.</font></h1>
-                        </div>
-                        <div class="col-lg-12 pt8 pb32 s_col_no_bgcolor" data-name="Text">
-                            <p class="lead">This is a simple hero unit, a simple jumbotron-style component <br/>for calling extra attention to featured content or information.</p>
-                        </div>
-                        <div class="col-lg-12 s_btn text-left pt16 pb16" data-name="Button">
-                            <a href="#" class="btn btn-epsilon rounded-circle">Do something</a>
-                        </div>
-                    </div>
+                    <h1 class="s_title_thin"><font style="font-size: 62px;">Sell Online. Easily.</font></h1>
+                    <p class="lead">This is a simple hero unit, a simple jumbotron-style component <br/>for calling extra attention to featured content or information.</p>
+                    <p class="lead"><br/></p>
+                    <a href="#" class="btn btn-epsilon rounded-circle">Do something</a>
                 </div>
             </div>
         </div>
diff --git a/addons/website/views/snippets/s_carousel.xml b/addons/website/views/snippets/s_carousel.xml
index a989b86d836..b02ae93f63c 100644
--- a/addons/website/views/snippets/s_carousel.xml
+++ b/addons/website/views/snippets/s_carousel.xml
@@ -18,7 +18,7 @@
                         <div class="row content">
                             <div class="carousel-content col-lg-7">
                                 <div class="s_title pb8" data-name="Title">
-                                    <h2 class="s_title_default"><font style="font-size: 62px;">Slide Title</font></h2>
+                                    <h2><font style="font-size: 62px;">Slide Title</font></h2>
                                 </div>
                                 <p class="lead">Use this snippet to presents your content in a slideshow-like format.<br/> Don't write about products or services here, write about solutions.</p>
                                 <div class="s_btn text-left pt16 pb16" data-name="Buttons">
diff --git a/addons/website/views/snippets/s_cover.xml b/addons/website/views/snippets/s_cover.xml
index d0d44be7498..6af1c8aac82 100644
--- a/addons/website/views/snippets/s_cover.xml
+++ b/addons/website/views/snippets/s_cover.xml
@@ -5,18 +5,12 @@
     <section class="s_cover parallax s_parallax_is_fixed bg-black-50 pt96 pb96" data-scroll-background-ratio="1">
         <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 0;"/>
         <div class="container">
-            <div class="row s_nb_column_fixed">
-                <div class="col-lg-12 s_title" data-name="Title">
-                    <h1 class="s_title_thin" style="font-size: 62px; text-align: center;">Catchy Headline</h1>
-                </div>
-                <div class="col-lg-12 s_text pt16 pb16" data-name="Text">
-                    <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>
-                </div>
-                <div class="col-lg-12 s_btn text-center pt16 pb16" data-name="Buttons">
-                    <a href="/aboutus" class="btn btn-delta rounded-circle">About us</a>
-                    <a href="/contactus" class="btn btn-primary rounded-circle">Contact us</a>
-                </div>
-            </div>
+            <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 href="/aboutus" class="btn btn-delta rounded-circle">About us</a>
+                <a href="/contactus" class="btn btn-primary rounded-circle">Contact us</a>
+            </p>
         </div>
     </section>
 </template>
diff --git a/addons/website/views/snippets/s_picture.xml b/addons/website/views/snippets/s_picture.xml
index 39109e5cbcd..05e3ed53cdf 100644
--- a/addons/website/views/snippets/s_picture.xml
+++ b/addons/website/views/snippets/s_picture.xml
@@ -4,17 +4,13 @@
 <template id="s_picture" name="Picture">
     <section class="s_picture bg-200 pt48 pb24">
         <div class="container">
+            <h2 class="s_title_thin" style="text-align: center;"><font style="font-size: 62px;">A punchy Headline</font></h2>
+            <p style="text-align: center;">Choose a vibrant image and write an inspiring paragraph about it.<br/> It does not have to be long, but it should reinforce your image.</p>
             <div class="row s_nb_column_fixed">
-                <div class="col-lg-12 s_title pt16 pb16">
-                    <h2 class="s_title_thin" style="text-align: center;"><font style="font-size: 62px;">A punchy Headline</font></h2>
-                </div>
-                <div class="col-lg-12 pt16 pb16">
-                    <p style="text-align: center;">Choose a vibrant image and write an inspiring paragraph about it.<br/> It does not have to be long, but it should reinforce your image.</p>
-                </div>
-                <div class="col-lg-8 offset-lg-2 pb24">
+                <div class="col-lg-10 offset-lg-1 pb24" style="text-align: center;">
                     <figure class="figure">
-                        <img src="/web/image/website.s_picture_default_image" class="figure-img img-fluid rounded img-thumbnail padding-large" alt="Odoo • A picture with a caption"/>
-                        <figcaption class="figure-caption py-3 text-center"><i class="fa fa-1x fa-picture-o mr-2"/>Add a caption to enhance the meaning of this image.</figcaption>
+                        <img src="/web/image/website.s_picture_default_image" class="figure-img img-thumbnail padding-large" alt="Odoo • A picture with a caption"/>
+                        <figcaption class="figure-caption py-3"><i class="fa fa-1x fa-picture-o mr-2"/>Add a caption to enhance the meaning of this image.</figcaption>
                     </figure>
                 </div>
             </div>
diff --git a/addons/website/views/snippets/s_text_block.xml b/addons/website/views/snippets/s_text_block.xml
index 7d908ec4040..d020d0b7e5a 100644
--- a/addons/website/views/snippets/s_text_block.xml
+++ b/addons/website/views/snippets/s_text_block.xml
@@ -4,13 +4,9 @@
 <template id="s_text_block" name="Text block">
     <section class="s_text_block pt32 pb32">
         <div class="container">
-            <div class="row">
-                <div class="col-lg-12 pt32 pb32">
-                    <p class="lead">A great way to catch your reader's attention is to tell a story. <br/>Everything you consider writing can be told as a story.</p>
-                    <p><b>Great stories have personality.</b> Consider telling a great story that provides personality. Writing a story with personality for potential clients will assists with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.</p>
-                    <p><b>Great stories are for everyone even when only written for just one person.</b> If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
-                </div>
-            </div>
+            <p class="lead">A great way to catch your reader's attention is to tell a story. <br/>Everything you consider writing can be told as a story.</p>
+            <p><b>Great stories have personality.</b> Consider telling a great story that provides personality. Writing a story with personality for potential clients will assists with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.</p>
+            <p><b>Great stories are for everyone even when only written for just one person.</b> If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
         </div>
     </section>
 </template>
diff --git a/addons/website/views/snippets/s_three_columns.xml b/addons/website/views/snippets/s_three_columns.xml
index 5757e223eeb..8db72fdb08f 100644
--- a/addons/website/views/snippets/s_three_columns.xml
+++ b/addons/website/views/snippets/s_three_columns.xml
@@ -2,11 +2,11 @@
 <odoo>
 
 <template id="s_three_columns" name="Columns">
-    <section class="s_three_columns bg-200 pt32 pb32">
+    <section class="s_three_columns bg-200 pt32 pb32" data-vcss="001">
         <div class="container">
             <div class="row d-flex align-items-stretch">
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
-                    <div class="card bg-white">
+                    <div class="card bg-white h-100">
                         <img class="card-img-top" src="/web/image/website.library_image_11" alt="Odoo - Sample 1 for three columns"/>
                         <div class="card-body">
                             <h3 class="card-title">Feature One</h3>
@@ -15,26 +15,20 @@
                     </div>
                 </div>
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
-                    <div class="card bg-white">
+                    <div class="card bg-white h-100">
                         <img class="card-img-top" src="/web/image/website.library_image_13" alt="Odoo - Sample 2 for three columns"/>
                         <div class="card-body">
                             <h3 class="card-title">Feature Two</h3>
                             <p class="card-text">To add a fourth column, reduce the size of these three columns using the right icon of each block. Then, duplicate one of the columns to create a new one as a copy.</p>
                         </div>
-                        <div class="card-footer">
-                            <i class="fa fa-info-circle mr-1"/> <small>Additional information</small>
-                        </div>
                     </div>
                 </div>
                 <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
-                    <div class="card bg-white">
+                    <div class="card bg-white h-100">
                         <img class="card-img-top" src="/web/image/website.library_image_07" alt="Odoo - Sample 3 for three columns"/>
                         <div class="card-body">
                             <h3 class="card-title">Feature Three</h3>
                             <p class="card-text">Delete the above image or replace it with a picture that illustrates your message. Click on the picture to change its <em>rounded corner</em> style.</p>
-                            <div class="s_btn text-left pb0 pt16" data-name="Button">
-                                <a href="#" class="btn btn-primary btn-sm">Learn more</a>
-                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/addons/website/views/snippets/s_title.xml b/addons/website/views/snippets/s_title.xml
index db2791be3c6..2fa68a763eb 100644
--- a/addons/website/views/snippets/s_title.xml
+++ b/addons/website/views/snippets/s_title.xml
@@ -2,34 +2,13 @@
 <odoo>
 
 <template id="s_title" name="Title">
-    <section class="s_title pt32 pb32">
+    <section class="s_title pt32 pb32" data-vcss="001">
         <div class="container">
-            <div class="row s_nb_column_fixed">
-                <div class="col-lg-12 s_title pt16 pb16" style="text-align: center;">
-                    <h1 class="s_title_default"><font style="font-size: 62px;">Your Site Title</font></h1>
-                </div>
-            </div>
+            <h1 style="text-align: center;"><font style="font-size: 62px;">Your Site Title</font></h1>
         </div>
     </section>
 </template>
 
-<template id="s_title_options" inherit_id="website.snippet_options">
-    <xpath expr="." position="inside">
-        <div data-selector=".s_title" data-target="[class*='s_title_']">
-            <we-select string="Typography">
-                <we-button data-select-class="s_title_boxed">Boxed</we-button>
-                <we-button data-select-class="s_title_lines">Line-On-Sides</we-button>
-                <we-button data-select-class="s_title_thin">Thin</we-button>
-                <we-button data-select-class="s_title_transparent">Transparent</we-button>
-                <we-button data-select-class="s_title_underlined">Underlined</we-button>
-                <we-button data-select-class="s_title_small_caps">Small Caps</we-button>
-                <we-divider/>
-                <we-button data-select-class="s_title_default">Default</we-button>
-            </we-select>
-        </div>
-    </xpath>
-</template>
-
 <template id="assets_snippet_s_title_css_000" inherit_id="website.assets_frontend">
     <xpath expr="//link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_title/000.scss"/>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index a7d49ff57b1..746129ed94a 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -102,16 +102,32 @@
     </xpath>
 </template>
 
+<template id="website.snippet_options_border">
+    <we-row string="Border" class="o_we_inline">
+        <we-colorpicker data-dependencies="border_width_opt"
+                        data-select-style="true" data-css-property="border-color" data-color-prefix="border-"/>
+        <we-input class="o_we_inline" data-name="border_width_opt"
+                  data-select-style="0" data-css-property="border-width"
+                  data-unit="px" data-extra-class="border"/>
+    </we-row>
+    <we-input string="Rounded" class="o_we_inline"
+              data-dependencies="border_width_opt"
+              data-select-style="0" data-css-property="border-radius"
+              data-unit="px" data-extra-class="rounded"/>
+</template>
+
 <template id="snippet_options">
     <t t-call="web_editor.snippet_options"/>
 
-    <!-- COLOR | .s_three_columns | .s_comparisons -->
+    <!-- COLOR, BORDER, SHADOW | .s_three_columns | .s_comparisons -->
     <div data-selector=".s_three_columns .row > div, .s_comparisons .row > div, .s_tabs .row > div"
          data-target=".card">
-        <we-colorpicker string="Color"
+        <we-colorpicker string="Background Color"
             data-select-style="true"
             data-css-property="background-color"
             data-color-prefix="bg-"/>
+        <t t-call="website.snippet_options_border"/>
+        <we-checkbox string="Shadow" data-select-class="shadow"/>
     </div>
 
     <!-- COLOR | .s_cards -->
@@ -232,7 +248,7 @@
                 <we-button data-background-type="cover">Cover</we-button>
                 <we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
             </we-select>
-            <we-button class="fa fa-fw fa-arrows" title="Background Position"
+            <we-button class="fa fa-fw fa-crosshairs" title="Background Position"
                        data-background-position-overlay="true" data-no-preview="true"/>
         </we-row>
         <we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
@@ -255,10 +271,10 @@
         </we-select>
     </div>
 
-    <!-- Color | Section -->
+    <!-- Background Color -->
     <div id="so_main_colorpicker"
-         data-selector="section, .carousel-item"
-         data-exclude=".parallax, .o_gallery .carousel-item">
+         data-selector="section, .carousel-item, section .row > div"
+         data-exclude=".parallax, .o_gallery .carousel-item, .s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
         <we-colorpicker string="Background Color"
             data-select-style="true"
             data-css-property="background-color"
@@ -274,28 +290,10 @@
             data-excluded="common, theme, custom"/>
     </div>
 
-    <!-- Color | Columns -->
-    <div data-selector="section .row > div"
-         data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
-        <we-colorpicker string="Background Color"
-            data-select-style="true"
-            data-css-property="background-color"
-            data-color-prefix="bg-"/>
-    </div>
-
+    <!-- Border | Columns -->
     <div data-selector="section .row > div"
         data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
-        <we-row string="Border" class="o_we_inline">
-            <we-colorpicker data-dependencies="border_width_opt"
-                            data-select-style="true" data-css-property="border-color" data-color-prefix="border-"/>
-            <we-input class="o_we_inline" data-name="border_width_opt"
-                      data-select-style="0" data-css-property="border-width"
-                      data-unit="px" data-extra-class="border"/>
-        </we-row>
-        <we-input string="Rounded" class="o_we_inline"
-                  data-dependencies="border_width_opt"
-                  data-select-style="0" data-css-property="border-radius"
-                  data-unit="px" data-extra-class="rounded"/>
+        <t t-call="website.snippet_options_border"/>
         <we-checkbox string="Shadow" data-select-class="shadow"/>
     </div>
 
@@ -316,7 +314,7 @@
     <t t-set="so_content_addition_selector" t-translation="off">blockquote, .s_btn, .s_card, .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_countdown, .s_chart</t>
     <div id="so_content_addition"
         t-att-data-selector="so_content_addition_selector"
-        t-attf-data-drop-near="p, h1, h2, h3, #{so_content_addition_selector}"
+        t-attf-data-drop-near="p, h1, h2, h3, .row > div > img, #{so_content_addition_selector}"
         data-drop-in=".content, nav"/>
 
     <div data-js="SnippetSave"