From ff9a77c4be86a3ba9208fc5a84c685bbad5552e6 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Fri, 1 Oct 2021 14:43:41 +0000
Subject: [PATCH] [FIX] mass_mailing, web(site,_editor): restore original
 website options

Commit [1] copied a lot of website snippet options into mass mailing.
Some were moved to web_editor and xpathed to be used in both without
duplicating code. Sadly that is not without side effects and it was
therefore decided to duplicate them instead so they can live separate
lives in the future.

[1] https://github.com/odoo/odoo/commit/4f7cd33d0fd69ee5984d0968233ffc73d7751030

Part-of: odoo/odoo#77724
---
 .../snippets_options/content_width_full.svg   |   0
 .../snippets_options/content_width_normal.svg |   0
 .../snippets_options/content_width_small.svg  |   0
 .../mass_mailing/views/snippets/s_alert.xml   |   4 +-
 addons/mass_mailing/views/snippets/s_hr.xml   |   2 +-
 addons/mass_mailing/views/snippets_themes.xml |  84 ++++++++++---
 addons/web_editor/views/snippets.xml          | 113 ------------------
 .../snippets_options/content_width_full.svg   |   9 ++
 .../snippets_options/content_width_normal.svg |  12 ++
 .../snippets_options/content_width_small.svg  |  11 ++
 .../src/img/snippets_options/shadow_in.svg    |   0
 .../src/img/snippets_options/shadow_out.svg   |   0
 .../static/src/js/editor/snippets.options.js  |   1 -
 addons/website/static/src/scss/website.scss   |  26 ++++
 .../static/src/scss/website.wysiwyg.scss      |   8 ++
 addons/website/views/snippets/s_alert.xml     |   4 +-
 .../website/views/snippets/s_blockquote.xml   |   2 +-
 addons/website/views/snippets/s_hr.xml        |   2 +-
 .../views/snippets/s_image_gallery.xml        |   2 +-
 .../website/views/snippets/s_media_list.xml   |   4 +-
 .../views/snippets/s_product_catalog.xml      |   2 +-
 addons/website/views/snippets/snippets.xml    |  85 ++++++++-----
 22 files changed, 199 insertions(+), 172 deletions(-)
 rename addons/{web_editor => mass_mailing}/static/src/img/snippets_options/content_width_full.svg (100%)
 rename addons/{web_editor => mass_mailing}/static/src/img/snippets_options/content_width_normal.svg (100%)
 rename addons/{web_editor => mass_mailing}/static/src/img/snippets_options/content_width_small.svg (100%)
 create mode 100644 addons/website/static/src/img/snippets_options/content_width_full.svg
 create mode 100644 addons/website/static/src/img/snippets_options/content_width_normal.svg
 create mode 100644 addons/website/static/src/img/snippets_options/content_width_small.svg
 rename addons/{web_editor => website}/static/src/img/snippets_options/shadow_in.svg (100%)
 rename addons/{web_editor => website}/static/src/img/snippets_options/shadow_out.svg (100%)

diff --git a/addons/web_editor/static/src/img/snippets_options/content_width_full.svg b/addons/mass_mailing/static/src/img/snippets_options/content_width_full.svg
similarity index 100%
rename from addons/web_editor/static/src/img/snippets_options/content_width_full.svg
rename to addons/mass_mailing/static/src/img/snippets_options/content_width_full.svg
diff --git a/addons/web_editor/static/src/img/snippets_options/content_width_normal.svg b/addons/mass_mailing/static/src/img/snippets_options/content_width_normal.svg
similarity index 100%
rename from addons/web_editor/static/src/img/snippets_options/content_width_normal.svg
rename to addons/mass_mailing/static/src/img/snippets_options/content_width_normal.svg
diff --git a/addons/web_editor/static/src/img/snippets_options/content_width_small.svg b/addons/mass_mailing/static/src/img/snippets_options/content_width_small.svg
similarity index 100%
rename from addons/web_editor/static/src/img/snippets_options/content_width_small.svg
rename to addons/mass_mailing/static/src/img/snippets_options/content_width_small.svg
diff --git a/addons/mass_mailing/views/snippets/s_alert.xml b/addons/mass_mailing/views/snippets/s_alert.xml
index 6f634e3345e..e9813e386e5 100644
--- a/addons/mass_mailing/views/snippets/s_alert.xml
+++ b/addons/mass_mailing/views/snippets/s_alert.xml
@@ -13,7 +13,7 @@
 </template>
 
 <template id="s_alert_options" inherit_id="mass_mailing.snippet_options">
-    <xpath expr="//t[@t-call='web_editor.snippet_options_width']" position="before">
+    <xpath expr="//div[@id='so_width']" position="before">
         <div data-selector=".s_alert" data-js="Alert">
             <we-select string="Type" data-apply-to=".fa.s_alert_icon" data-trigger="alert_colorpicker_opt">
                 <we-button data-select-class="fa-user-circle" data-trigger-value="primary">Primary</we-button>
@@ -26,7 +26,7 @@
         </div>
     </xpath>
     <!-- Keep those options in separate xpath for options order -->
-    <xpath expr="//t[@t-call='web_editor.snippet_options_width']" position="after">
+    <xpath expr="//div[@id='so_width']" position="after">
         <div data-selector=".s_alert">
             <we-select string="Size">
                 <we-button data-select-class="s_alert_sm">Small</we-button>
diff --git a/addons/mass_mailing/views/snippets/s_hr.xml b/addons/mass_mailing/views/snippets/s_hr.xml
index 85f3936c085..da434e10fca 100644
--- a/addons/mass_mailing/views/snippets/s_hr.xml
+++ b/addons/mass_mailing/views/snippets/s_hr.xml
@@ -10,7 +10,7 @@
 <template id="s_hr_options" inherit_id="mass_mailing.snippet_options">
     <xpath expr="." position="inside">
         <div data-selector=".s_hr" data-target="hr">
-            <t t-call="web_editor.snippet_options_border_line_widgets">
+            <t t-call="mass_mailing.snippet_options_border_line_widgets">
                 <t t-set="label">Border</t>
                 <t t-set="direction" t-value="'top'"/>
             </t>
diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index 447ce98aec9..25e97209b64 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -771,6 +771,47 @@
     </a>
 </template>
 
+<!-- Border -->
+<template id="snippet_options_border_line_widgets">
+    <we-row t-att-string="label">
+        <we-input data-name="border_width_opt"
+                t-att-data-apply-to="apply_to"
+                data-select-style="0"
+                t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}width"
+                data-unit="px"
+                t-att-data-extra-class="with_bs_class and 'border'"
+                t-att-data-variable="width_variable"/>
+        <we-select t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}style"
+                data-dependencies="border_width_opt"
+                t-att-data-apply-to="apply_to"
+                t-att-data-variable="style_variable">
+            <we-button title="Solid" data-select-style="solid"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/></we-button>
+            <we-button title="Dashed" data-select-style="dashed"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/></we-button>
+            <we-button title="Dotted" data-select-style="dotted"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/></we-button>
+            <we-button title="Double" data-select-style="double"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/></we-button>
+        </we-select>
+        <we-colorpicker data-dependencies="border_width_opt"
+                        t-att-data-apply-to="apply_to"
+                        data-select-style="true"
+                        t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}color"
+                        data-color-prefix="border-"
+                        t-att-data-color="color_variable"/>
+    </we-row>
+</template>
+
+<template id="snippet_options_border_widgets">
+    <t t-call="mass_mailing.snippet_options_border_line_widgets">
+        <t t-set="label">Border</t>
+        <t t-set="with_bs_class" t-value="True"/>
+    </t>
+    <we-input string="Round Corners"
+            t-att-data-apply-to="apply_to"
+            t-att-data-dependencies="not so_rounded_no_dependencies and 'border_width_opt,bg_color_opt'"
+            data-select-style="0" data-css-property="border-radius"
+            data-unit="px" data-extra-class="rounded"
+            t-att-data-variable="radius_variable"/>
+</template>
+
 <!-- Snippet themes Options -->
 <template id="snippet_options">
     <t t-call="web_editor.snippet_options"/>
@@ -780,7 +821,7 @@
     <div data-js="Box"
          data-selector=".row > div"
          data-exclude=".o_mail_wrapper_td, .s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div">
-        <t t-call="web_editor.snippet_options_border_widgets"/>
+        <t t-call="mass_mailing.snippet_options_border_widgets"/>
     </div>
     <div data-js="layout_column"
         data-selector=".o_mail_snippet_general"
@@ -810,28 +851,41 @@
     </div>
 
     <!-- H-ALIGN -->
-    <t t-call="web_editor.snippet_options_text_align">
-        <t t-set="selector" t-value="'.s_text_highlight'"/>
-    </t>
+    <div id="so_text_align" data-selector=".s_text_highlight">
+        <we-button-group string="Alignment">
+            <we-button title="Left" data-select-class="text-left"><i class="fa fa-fw fa-align-left"/></we-button>
+            <we-button title="Center" data-select-class="text-center"><i class="fa fa-fw fa-align-center"/></we-button>
+            <we-button title="Right" data-select-class="text-right"><i class="fa fa-fw fa-align-right"/></we-button>
+        </we-button-group>
+    </div>
 
-    <t t-call="web_editor.snippet_options_width">
-        <t t-set="selector" t-value="'.s_alert, .s_blockquote, .s_text_highlight'"/>
-    </t>
+    <div id="so_width" data-selector=".s_alert, .s_blockquote, .s_text_highlight">
+        <we-select string="Width">
+            <we-button data-select-class="w-25">25%</we-button>
+            <we-button data-select-class="w-50">50%</we-button>
+            <we-button data-select-class="w-75">75%</we-button>
+            <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
+        </we-select>
+    </div>
 
-    <t t-call="web_editor.snippet_options_block_align">
-        <t t-set="selector" t-value="'.s_alert, .s_blockquote, .s_text_highlight'"/>
-    </t>
+    <div id="so_block_align" data-selector=".s_alert, .s_blockquote, .s_text_highlight">
+        <we-button-group string="Alignment" data-dependencies="!so_width_100">
+            <we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
+            <we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
+            <we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
+        </we-button-group>
+    </div>
 
     <div data-js="BodyWidth" data-selector=".o_layout" data-target=".o_mail_wrapper" data-no-check="true">
         <we-button-group string="Body Width">
             <we-button data-select-class="o_mail_small"
-                        data-img="/web_editor/static/src/img/snippets_options/content_width_small.svg"
+                        data-img="/mass_mailing/static/src/img/snippets_options/content_width_small.svg"
                         title="Small"/>
             <we-button data-select-class="o_mail_regular"
-                        data-img="/web_editor/static/src/img/snippets_options/content_width_normal.svg"
+                        data-img="/mass_mailing/static/src/img/snippets_options/content_width_normal.svg"
                         title="Regular"/>
             <we-button data-select-class=""
-                        data-img="/web_editor/static/src/img/snippets_options/content_width_full.svg"
+                        data-img="/mass_mailing/static/src/img/snippets_options/content_width_full.svg"
                         title="Full"/>
         </we-button-group>
     </div>
@@ -911,7 +965,7 @@
             data-no-transparency="true"
             data-css-property="background-color"
             data-color-prefix="bg-"/>
-        <t t-call="web_editor.snippet_options_border_widgets">
+        <t t-call="mass_mailing.snippet_options_border_widgets">
             <t t-set="so_rounded_no_dependencies" t-value="True"/>
         </t>
     </div>
@@ -919,7 +973,7 @@
     <div data-js="Box"
          data-selector=".o_mail_block_discount2"
          data-target="table">
-        <t t-call="web_editor.snippet_options_border_widgets">
+        <t t-call="mass_mailing.snippet_options_border_widgets">
         </t>
     </div>
 
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 1a84dedf112..9b2a2b79b9f 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -366,119 +366,6 @@
     </t>
 </template>
 
-<!-- H-ALIGN -->
-<template id="snippet_options_text_align">
-    <div id="so_text_align" t-att-data-selector="selector">
-        <we-button-group string="Alignment">
-            <we-button title="Left" data-select-class="text-left"><i class="fa fa-fw fa-align-left"/></we-button>
-            <we-button title="Center" data-select-class="text-center"><i class="fa fa-fw fa-align-center"/></we-button>
-            <we-button title="Right" data-select-class="text-right"><i class="fa fa-fw fa-align-right"/></we-button>
-        </we-button-group>
-    </div>
-</template>
-
-<template id="snippet_options_width">
-    <div id="so_width" t-att-data-selector="selector">
-        <we-select string="Width">
-            <we-button data-select-class="w-25">25%</we-button>
-            <we-button data-select-class="w-50">50%</we-button>
-            <we-button data-select-class="w-75">75%</we-button>
-            <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
-        </we-select>
-    </div>
-</template>
-
-<template id="snippet_options_block_align">
-    <div id="so_block_align" t-att-data-selector="selector">
-        <we-button-group string="Alignment" data-dependencies="!so_width_100">
-            <we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
-            <we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
-            <we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
-        </we-button-group>
-    </div>
-</template>
-
-<!-- Stretch section -->
-<template id="snippet_options_container_width">
-    <we-button-group string="Content Width">
-        <we-button data-select-class="o_container_small"
-                    data-img="/web_editor/static/src/img/snippets_options/content_width_small.svg"
-                    title="Small"/>
-        <we-button data-select-class="container"
-                    data-img="/web_editor/static/src/img/snippets_options/content_width_normal.svg"
-                    title="Regular"/>
-        <we-button data-select-class="container-fluid"
-                    data-img="/web_editor/static/src/img/snippets_options/content_width_full.svg"
-                    title="Full"/>
-    </we-button-group>
-</template>
-
-<template id="snippet_options_border_line_widgets">
-    <we-row t-att-string="label">
-        <we-input data-name="border_width_opt"
-                  t-att-data-apply-to="apply_to"
-                  data-select-style="0"
-                  t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}width"
-                  data-unit="px"
-                  t-att-data-extra-class="with_bs_class and 'border'"
-                  t-att-data-variable="width_variable"/>
-        <we-select t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}style"
-                   data-dependencies="border_width_opt"
-                   t-att-data-apply-to="apply_to"
-                   t-att-data-variable="style_variable">
-            <we-button title="Solid" data-select-style="solid"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/></we-button>
-            <we-button title="Dashed" data-select-style="dashed"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/></we-button>
-            <we-button title="Dotted" data-select-style="dotted"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/></we-button>
-            <we-button title="Double" data-select-style="double"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/></we-button>
-        </we-select>
-        <we-colorpicker data-dependencies="border_width_opt"
-                        t-att-data-apply-to="apply_to"
-                        data-select-style="true"
-                        t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}color"
-                        data-color-prefix="border-"
-                        t-att-data-color="color_variable"/>
-    </we-row>
-</template>
-
-<template id="snippet_options_border_widgets">
-    <t t-call="web_editor.snippet_options_border_line_widgets">
-        <t t-set="label">Border</t>
-        <t t-set="with_bs_class" t-value="True"/>
-    </t>
-    <we-input string="Round Corners"
-              t-att-data-apply-to="apply_to"
-              t-att-data-dependencies="not so_rounded_no_dependencies and 'border_width_opt,bg_color_opt'"
-              data-select-style="0" data-css-property="border-radius"
-              data-unit="px" data-extra-class="rounded"
-              t-att-data-variable="radius_variable"/>
-</template>
-
-<template id="snippet_options_shadow_widgets">
-    <we-button-group string="Shadow" data-shadow-class="shadow" t-att-data-variable="shadow_variable">
-        <we-button data-set-shadow="">None</we-button>
-        <we-button data-set-shadow="outset"
-                   data-img="/web_editor/static/src/img/snippets_options/shadow_out.svg"
-                   data-name="shadow_active_opt"
-                   title="Outset"/>
-        <we-button data-set-shadow="inset"
-                   data-img="/web_editor/static/src/img/snippets_options/shadow_in.svg"
-                   data-name="shadow_inset_opt"
-                   title="Inset"/>
-    </we-button-group>
-    <we-multi data-css-property="box-shadow" data-dependencies="shadow_active_opt, shadow_inset_opt" t-att-data-variable="shadow_variable">
-        <we-colorpicker string="⌙ Color" data-select-style="" data-css-compatible=""/>
-        <we-row string="⌙ Offset (X, Y)">
-            <we-input data-select-style="" data-unit="px"/>
-            <we-input data-select-style="" data-unit="px"/>
-        </we-row>
-        <we-input string="⌙ Blur" data-select-style="" data-unit="px"/>
-        <we-input string="⌙ Spread" data-select-style="" data-unit="px"/>
-        <!-- Inset parameter always hidden (as controlled above) but needed -->
-        <!-- for the we-multi widget to work properly. -->
-        <we-checkbox data-name="fake_inset_shadow_opt" data-select-style="inset"/>
-    </we-multi>
-</template>
-
 <!-- options (data-selector, data-drop-in, data-drop-near, data-js to link js object ) -->
 <template id="snippet_options">
     <!-- t-field -->
diff --git a/addons/website/static/src/img/snippets_options/content_width_full.svg b/addons/website/static/src/img/snippets_options/content_width_full.svg
new file mode 100644
index 00000000000..4620dce4d03
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/content_width_full.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g fill="#FFF" class="3_buttons_copy_2" transform="translate(-228 -7)">
+      <g class="content_width_full" transform="translate(228 7)">
+        <path d="M23 0v8H0V0h23zm-5 1v2.5h-3v1h3V7l3-3-3-3zM5 1L2 4l3 3V4.5h3v-1H5V1z" class="o_graphic"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/content_width_normal.svg b/addons/website/static/src/img/snippets_options/content_width_normal.svg
new file mode 100644
index 00000000000..2a6b08a8fe0
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/content_width_normal.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g class="3_buttons_copy_2" transform="translate(-185 -7)">
+      <g class="content_width_normal" transform="translate(185 7)">
+        <rect width="23" height="8" class="spacer"/>
+        <rect width="13" height="8" x="5" fill="#FFF" class="o_graphic"/>
+        <polygon fill="#D8D8D8" points="2 0 2 8 3 8 3 0" class="o_subdle"/>
+        <polygon fill="#D8D8D8" points="20 0 20 8 21 8 21 0" class="o_subdle"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/content_width_small.svg b/addons/website/static/src/img/snippets_options/content_width_small.svg
new file mode 100644
index 00000000000..f52d357bf14
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/content_width_small.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="8" viewBox="0 0 23 8">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g fill="#FFF" class="3_buttons_copy_2" transform="translate(-141 -7)">
+      <g class="content_width_small" transform="translate(141 7)">
+        <rect width="7" height="8" x="8" class="o_graphic"/>
+        <polygon fill-rule="nonzero" points="3 1 6 4 3 7 3 4.5 0 4.5 0 3.5 3 3.5" class="o_graphic"/>
+        <polygon fill-rule="nonzero" points="20 1 17 4 20 7 20 4.5 23 4.5 23 3.5 20 3.5" class="o_graphic"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/web_editor/static/src/img/snippets_options/shadow_in.svg b/addons/website/static/src/img/snippets_options/shadow_in.svg
similarity index 100%
rename from addons/web_editor/static/src/img/snippets_options/shadow_in.svg
rename to addons/website/static/src/img/snippets_options/shadow_in.svg
diff --git a/addons/web_editor/static/src/img/snippets_options/shadow_out.svg b/addons/website/static/src/img/snippets_options/shadow_out.svg
similarity index 100%
rename from addons/web_editor/static/src/img/snippets_options/shadow_out.svg
rename to addons/website/static/src/img/snippets_options/shadow_out.svg
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 409048d6bf1..c27b5086c94 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -6,7 +6,6 @@ const {ColorpickerWidget} = require('web.Colorpicker');
 const config = require('web.config');
 var core = require('web.core');
 var Dialog = require('web.Dialog');
-const dom = require('web.dom');
 const weUtils = require('web_editor.utils');
 var options = require('web_editor.snippets.options');
 const wLinkPopoverWidget = require('@website/js/widgets/link_popover_widget')[Symbol.for("default")];
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 32c0549a730..73a5ff9a5ae 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -350,6 +350,13 @@ font[class*='bg-'] {
         background: transparent;
     }
 }
+// Smaller container
+.o_container_small {
+    @extend .container;
+    @include media-breakpoint-up(lg) {
+        max-width: map-get($container-max-widths, md);
+    }
+}
 
 // Buttons
 .btn {
@@ -464,6 +471,25 @@ table.table_desc tr td {
     border-radius: 0;
 }
 
+.o_full_screen_height {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    min-height: 100vh !important;
+}
+.o_half_screen_height {
+    @extend .o_full_screen_height;
+    min-height: 55vh !important;
+}
+
+// TODO remove cover_full and cover_mid classes (kept for compatibility for now)
+.cover_full {
+    @extend .o_full_screen_height;
+}
+.cover_mid {
+    @extend .o_half_screen_height;
+}
+
 // Allows custom border radius without contents overflowing.
 .card {
     overflow: hidden;
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index 87e12a9bc4b..b05b48a4f59 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -237,6 +237,14 @@ $i: 1;
 }
 
 // SNIPPET OPTIONS
+.o_we_border_preview {
+    display: inline-block;
+    width: 999px;
+    max-width: 100%;
+    margin-bottom: 2px;
+    border-width: 4px;
+    border-bottom: none !important;
+}
 
 .pac-container { // google map autosuggestion
     z-index: $zindex-modal-backdrop; // > $o-we-zindex
diff --git a/addons/website/views/snippets/s_alert.xml b/addons/website/views/snippets/s_alert.xml
index 038d7850c73..400977a4eaf 100644
--- a/addons/website/views/snippets/s_alert.xml
+++ b/addons/website/views/snippets/s_alert.xml
@@ -11,7 +11,7 @@
 </template>
 
 <template id="s_alert_options" inherit_id="website.snippet_options">
-    <xpath expr="//t[@t-call='web_editor.snippet_options_width']" position="before">
+    <xpath expr="//div[@id='so_width']" position="before">
         <div data-selector=".s_alert" data-js="Alert">
             <we-select string="Type" data-apply-to=".fa.s_alert_icon" data-trigger="alert_colorpicker_opt">
                 <we-button data-select-class="fa-user-circle" data-trigger-value="primary">Primary</we-button>
@@ -24,7 +24,7 @@
         </div>
     </xpath>
     <!-- Keep those options in separate xpath for options order -->
-    <xpath expr="//t[@t-call='web_editor.snippet_options_width']" position="after">
+    <xpath expr="//div[@id='so_width']" position="after">
         <div data-selector=".s_alert">
             <we-select string="Size">
                 <we-button data-select-class="s_alert_sm">Small</we-button>
diff --git a/addons/website/views/snippets/s_blockquote.xml b/addons/website/views/snippets/s_blockquote.xml
index 94bb623c07b..2e5d74b38d3 100644
--- a/addons/website/views/snippets/s_blockquote.xml
+++ b/addons/website/views/snippets/s_blockquote.xml
@@ -37,7 +37,7 @@
 
         <!-- Shadow -->
         <div data-js="Box" data-selector=".s_blockquote" data-target=".s_blockquote_content">
-            <t t-call="web_editor.snippet_options_shadow_widgets"/>
+            <t t-call="website.snippet_options_shadow_widgets"/>
         </div>
 
         <!-- Border Color -->
diff --git a/addons/website/views/snippets/s_hr.xml b/addons/website/views/snippets/s_hr.xml
index c42b3fa44ba..adaac74fd41 100644
--- a/addons/website/views/snippets/s_hr.xml
+++ b/addons/website/views/snippets/s_hr.xml
@@ -10,7 +10,7 @@
 <template id="s_hr_options" inherit_id="website.snippet_options">
     <xpath expr="." position="inside">
         <div data-selector=".s_hr" data-target="hr">
-            <t t-call="web_editor.snippet_options_border_line_widgets">
+            <t t-call="website.snippet_options_border_line_widgets">
                 <t t-set="label">Border</t>
                 <t t-set="direction" t-value="'top'"/>
             </t>
diff --git a/addons/website/views/snippets/s_image_gallery.xml b/addons/website/views/snippets/s_image_gallery.xml
index 5f56197a393..e2e36c12851 100644
--- a/addons/website/views/snippets/s_image_gallery.xml
+++ b/addons/website/views/snippets/s_image_gallery.xml
@@ -114,7 +114,7 @@
                 <we-button data-select-class="s_image_gallery_show_indicators">Squared Miniatures</we-button>
                 <we-button data-select-class="s_image_gallery_show_indicators s_image_gallery_indicators_rounded">Rounded Miniatures</we-button>
             </we-select>
-            <t t-call="web_editor.snippet_options_border_widgets">
+            <t t-call="website.snippet_options_border_widgets">
                 <t t-set="apply_to" t-valuef="img"/>
                 <t t-set="so_rounded_no_dependencies" t-value="true"/>
             </t>
diff --git a/addons/website/views/snippets/s_media_list.xml b/addons/website/views/snippets/s_media_list.xml
index 7f7ca5648b5..76e3499783d 100644
--- a/addons/website/views/snippets/s_media_list.xml
+++ b/addons/website/views/snippets/s_media_list.xml
@@ -65,8 +65,8 @@
             <t t-set="with_gradients" t-value="True"/>
         </t>
         <div data-js="Box" data-selector=".s_media_list_item" data-target="&gt; .row">
-            <t t-call="web_editor.snippet_options_border_widgets"/>
-            <t t-call="web_editor.snippet_options_shadow_widgets"/>
+            <t t-call="website.snippet_options_border_widgets"/>
+            <t t-call="website.snippet_options_shadow_widgets"/>
         </div>
         <div data-selector=".s_media_list_item" data-target="&gt; .row">
             <we-button-group string="Layout">
diff --git a/addons/website/views/snippets/s_product_catalog.xml b/addons/website/views/snippets/s_product_catalog.xml
index 1b90bf25bf4..127818b818c 100644
--- a/addons/website/views/snippets/s_product_catalog.xml
+++ b/addons/website/views/snippets/s_product_catalog.xml
@@ -83,7 +83,7 @@
     <xpath expr="." position="inside">
         <div data-js="ProductCatalog" data-selector=".s_product_catalog">
             <we-checkbox string="Descriptions" data-toggle-description="true" data-no-preview="true"/>
-            <t t-call="web_editor.snippet_options_border_line_widgets">
+            <t t-call="website.snippet_options_border_line_widgets">
                 <t t-set="label">&#8985; Separator</t>
                 <t t-set="direction" t-value="'top'"/>
                 <t t-set="apply_to" t-value="'.s_product_catalog_dish_description'"/>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index fb9fc2f349a..5e43e150cc6 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -241,7 +241,6 @@
     </xpath>
 </template>
 
-<!-- TODO: remove this template -->
 <template id="snippet_options_border_line_widgets">
     <we-row t-att-string="label">
         <we-input data-name="border_width_opt"
@@ -269,7 +268,6 @@
     </we-row>
 </template>
 
-<!-- TODO: remove this template -->
 <template id="snippet_options_border_widgets">
     <t t-call="website.snippet_options_border_line_widgets">
         <t t-set="label">Border</t>
@@ -283,7 +281,6 @@
               t-att-data-variable="radius_variable"/>
 </template>
 
-<!-- TODO: remove this template -->
 <template id="snippet_options_shadow_widgets">
     <we-button-group string="Shadow" data-shadow-class="shadow" t-att-data-variable="shadow_variable">
         <we-button data-set-shadow="">None</we-button>
@@ -335,18 +332,6 @@
 <template id="snippet_options">
     <t t-call="web_editor.snippet_options"/>
 
-    <div data-js="ContainerWidth" data-selector="section, .s_carousel .carousel-item, s_quotes_carousel .carousel-item"
-        data-exclude="[data-snippet] :not(.oe_structure) > [data-snippet]" data-target="> .container, > .container-fluid, > .o_container_small">
-        <t t-call="web_editor.snippet_options_container_width"/>
-    </div>
-    <div data-option-name="minHeight" data-selector="section" data-exclude="section .row > div *">
-        <we-button-group string="Height">
-            <we-button data-name="minheight_auto_opt" data-select-class="" title="Fit content">Auto</we-button>
-            <we-button data-select-class="o_half_screen_height" title="Half screen">50%</we-button>
-            <we-button data-select-class="o_full_screen_height" title="Full screen">100%</we-button>
-        </we-button-group>
-    </div>
-
     <!-- COLOR, BORDER, SHADOW | .s_three_columns | .s_comparisons -->
     <div data-js="Box"
          data-selector=".s_three_columns .row > div, .s_comparisons .row > div"
@@ -355,10 +340,10 @@
             data-select-style="true"
             data-css-property="background-color"
             data-color-prefix="bg-"/>
-        <t t-call="web_editor.snippet_options_border_widgets">
+        <t t-call="website.snippet_options_border_widgets">
             <t t-set="so_rounded_no_dependencies" t-value="True"/>
         </t>
-        <t t-call="web_editor.snippet_options_shadow_widgets"/>
+        <t t-call="website.snippet_options_shadow_widgets"/>
     </div>
 
     <!-- COLOR | .s_cards -->
@@ -370,17 +355,30 @@
     </div>
 
     <!-- H-ALIGN -->
-    <t t-call="web_editor.snippet_options_text_align">
-        <t t-set="selector" t-value="'.s_share, .s_text_highlight'"/>
-    </t>
+    <div id="so_text_align" data-selector=".s_share, .s_text_highlight">
+        <we-button-group string="Alignment">
+            <we-button title="Left" data-select-class="text-left"><i class="fa fa-fw fa-align-left"/></we-button>
+            <we-button title="Center" data-select-class="text-center"><i class="fa fa-fw fa-align-center"/></we-button>
+            <we-button title="Right" data-select-class="text-right"><i class="fa fa-fw fa-align-right"/></we-button>
+        </we-button-group>
+    </div>
 
-    <t t-call="web_editor.snippet_options_width">
-        <t t-set="selector" t-value="'.s_alert, .s_card, .s_blockquote, .s_text_highlight'"/>
-    </t>
+    <div id="so_width" data-selector=".s_alert, .s_card, .s_blockquote, .s_text_highlight">
+        <we-select string="Width">
+            <we-button data-select-class="w-25">25%</we-button>
+            <we-button data-select-class="w-50">50%</we-button>
+            <we-button data-select-class="w-75">75%</we-button>
+            <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
+        </we-select>
+    </div>
 
-    <t t-call="web_editor.snippet_options_block_align">
-        <t t-set="selector" t-value="'.s_alert, .s_card, .s_blockquote, .s_text_highlight'"/>
-    </t>
+    <div id="so_block_align" data-selector=".s_alert, .s_card, .s_blockquote, .s_text_highlight">
+        <we-button-group string="Alignment" data-dependencies="!so_width_100">
+            <we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
+            <we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
+            <we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
+        </we-button-group>
+    </div>
 
     <!-- Carousel | .s_carousel | .s_quotes_carousel -->
     <!-- Dedicated colorpicker so that there is not 3 level of
@@ -513,8 +511,8 @@
     <div data-js="Box"
          data-selector="section .row > div"
          data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div, .s_masonry_block .s_col_no_resize">
-        <t t-call="web_editor.snippet_options_border_widgets"/>
-        <t t-call="web_editor.snippet_options_shadow_widgets"/>
+        <t t-call="website.snippet_options_border_widgets"/>
+        <t t-call="website.snippet_options_shadow_widgets"/>
     </div>
 
     <!-- Mobile display options -->
@@ -657,14 +655,14 @@
          data-target="nav"
          data-no-check="true"
          groups="website.group_website_designer">
-        <t t-call="web_editor.snippet_options_border_widgets">
+        <t t-call="website.snippet_options_border_widgets">
             <t t-set="so_rounded_no_dependencies" t-value="True"/>
             <t t-set="width_variable" t-value="'menu-border-width'"/>
             <t t-set="style_variable" t-value="'menu-border-style'"/>
             <t t-set="color_variable" t-value="'menu-border-color'"/>
             <t t-set="radius_variable" t-value="'menu-border-radius'"/>
         </t>
-        <t t-call="web_editor.snippet_options_shadow_widgets">
+        <t t-call="website.snippet_options_shadow_widgets">
             <t t-set="shadow_variable" t-value="'menu-box-shadow'"/>
         </t>
     </div>
@@ -938,8 +936,8 @@
          data-target="#footer"
          data-no-check="true"
          groups="website.group_website_designer">
-        <t t-call="web_editor.snippet_options_border_widgets"/>
-        <t t-call="web_editor.snippet_options_shadow_widgets"/>
+        <t t-call="website.snippet_options_border_widgets"/>
+        <t t-call="website.snippet_options_shadow_widgets"/>
     </div>
 
     <!-- Scroll to Top -->
@@ -1069,8 +1067,31 @@
         </we-select>
     </div>
 
+    <!-- Stretch section -->
+    <div data-js="ContainerWidth" data-selector="section, .s_carousel .carousel-item, s_quotes_carousel .carousel-item"
+        data-exclude="[data-snippet] :not(.oe_structure) > [data-snippet]" data-target="> .container, > .container-fluid, > .o_container_small">
+        <we-button-group string="Content Width">
+            <we-button data-select-class="o_container_small"
+                       data-img="/website/static/src/img/snippets_options/content_width_small.svg"
+                       title="Small"/>
+            <we-button data-select-class="container"
+                       data-img="/website/static/src/img/snippets_options/content_width_normal.svg"
+                       title="Regular"/>
+            <we-button data-select-class="container-fluid"
+                       data-img="/website/static/src/img/snippets_options/content_width_full.svg"
+                       title="Full"/>
+        </we-button-group>
+    </div>
+
     <!-- Scroll to next section button (only for full height) -->
     <div data-js="ScrollButton" data-selector="section" data-exclude="[data-snippet] :not(.oe_structure) > [data-snippet]">
+        <!-- Min height of section -->
+        <we-button-group string="Height" data-show-scroll-button="">
+            <we-button data-name="minheight_auto_opt" data-select-class="" title="Fit content">Auto</we-button>
+            <we-button data-select-class="o_half_screen_height" title="Half screen">50%</we-button>
+            <we-button data-select-class="o_full_screen_height" title="Full screen" data-name="full_height_opt" data-show-scroll-button="true">100%</we-button>
+        </we-button-group>
+
         <we-checkbox string="Scroll down button"
                      data-toggle-button="true"
                      data-no-preview="true"