[MERGE] website, *: fix some snippet options

* web_editor

See sub-commits for details.

closes odoo/odoo#27969

5 files changed, 21 insertions, 20 deletions

diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js
index 2c06743b361..0edc1adb9b9 100644
--- a/addons/web_editor/static/src/js/widgets/widgets.js
+++ b/addons/web_editor/static/src/js/widgets/widgets.js
@@ -1466,7 +1466,7 @@ var LinkDialog = Dialog.extend({
                 var $btn = $(btn);
                 var color = $btn.css('background-color');
                 if (_.contains(colors, color)) {
-                    $btn.remove();
+                    $btn.hide(); // Not remove to be able to edit buttons with those styles
                 } else {
                     colors.push(color);
                 }
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 11fa94cd010..648d76b2aec 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -122,7 +122,7 @@ html[data-browser^="msie"] div.media_iframe_video iframe {
 }
 
 @include media-breakpoint-down(sm) {
-    img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
+    img, .media_iframe_video, span.fa, i.fa {
         transform: none !important;
     }
 }
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 56119c33e11..f50b653ab2e 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -159,7 +159,6 @@ options.registry.carousel = options.Class.extend({
     onBuilt: function () {
         this.id = 'myCarousel' + new Date().getTime();
         this.$target.attr('id', this.id);
-        this.$target.find('[data-slide]').attr('data-cke-saved-href', '#' + this.id);
         this.$target.find('[data-target]').attr('data-target', '#' + this.id);
         this._rebindEvents();
     },
@@ -210,7 +209,7 @@ options.registry.carousel = options.Class.extend({
         var index = $active.index();
         this.$('.carousel-control-prev, .carousel-control-next, .carousel-indicators').removeClass('d-none');
         this.$indicators.append('<li data-target="#' + this.id + '" data-slide-to="' + cycle + '"></li>');
-        var $clone = this.$('.carousel-item:first').clone(true);
+        var $clone = $active.clone(true);
         $clone.removeClass('active').insertAfter($active);
         _.defer(function () {
             self.$target.carousel().carousel(++index);
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index bdf752325ba..09946969873 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -266,6 +266,10 @@ table.table_desc tr td {
     }
 }
 
+// Jumbotron
+.jumbotron {
+    border-radius: 0;
+}
 
 //
 // Snippets
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index eaea0a4bcea..09711661bc9 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -78,7 +78,7 @@
         <span class="s_parallax_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
         <div class="container">
             <div class="row s_nb_column_fixed">
-                <div class="col-lg-7 bg-white jumbotron pt32 pb32" data-name="Box">
+                <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>
@@ -1003,7 +1003,7 @@
     </div>
 
     <!-- STYLES | .s_rating -->
-    <div data-selector=".s_rating [class*='col-lg-']">
+    <div data-selector=".s_rating > div">
         <div class="dropdown-submenu">
             <a tabindex="-1" href="#" class="dropdown-item">Icon</a>
             <div class="dropdown-menu" role="menu">
@@ -1081,7 +1081,7 @@
                 <a href="#" class="dropdown-item" role="menuitem" data-select-class="slide">Slide</a>
                 <a href="#" class="dropdown-item" role="menuitem" data-select-class="carousel-fade slide">Fade</a>
                 <div class="dropdown-divider"/>
-                <a href="#" class="dropdown-item" role="menuitem" data-select-class="s_carousel_no_transition">None</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-select-class="">None</a>
             </div>
         </div>
         <div class="dropdown-submenu">
@@ -1278,35 +1278,33 @@
 
     <!-- Color | Columns -->
     <div data-js="colorpicker"
-        data-selector="section [class*='col-lg-']"
-        data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor > [class*='col-lg-'], .o_gallery [class*='col-lg-']">
+        data-selector="section .row > div"
+        data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
         <div class="dropdown-submenu">
             <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Background Color</a>
             <div class="dropdown-menu" role="menu"/>
         </div>
     </div>
 
-    <div data-selector="section [class*='col-lg-']"
-        data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor > [class*='col-lg-'], .o_gallery [class*='col-lg-']">
+    <div data-selector="section .row > div"
+        data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
         <div class="dropdown-submenu">
             <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-magic"/>Styles</a>
             <div class="dropdown-menu" role="menu">
-                <a href="#" class="dropdown-item" role="menuitem" data-select-class="border">Border</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-select-class="rounded">Rounded</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-select-class="shadow">Shadow</a>
-                <div class="dropdown-divider"/>
-                <a href="#" class="dropdown-item" role="menuitem" data-select-class="">None</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-toggle-class="border">Border</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-toggle-class="rounded">Rounded</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-toggle-class="shadow">Shadow</a>
             </div>
         </div>
     </div>
 
     <div data-js="sizing_y"
-        data-selector="section, .row > [class*='col-lg-'], :not(.o_gallery > .container) > .carousel, .parallax, .s_hr, .s_btn"/>
+        data-selector="section, .row > div, :not(.o_gallery > .container) > .carousel, .parallax, .s_hr, .s_btn"/>
 
     <div data-js="sizing_x"
-        data-selector=".row > [class*='col-lg-']"
-        data-drop-near=".row > [class*='col-lg-']"
-        data-exclude=".s_col_no_resize > [class*='col-lg-']">
+        data-selector=".row > div"
+        data-drop-near=".row > div"
+        data-exclude=".s_col_no_resize.row > div">
     </div>
 
     <div id="so_snippet_addition"