[IMP] website, *: make cover options always available

*: website_blog, website_event

It would make sense to be able to change the height of a cover or to
change the text alignment even if there's no backgroung-image.
Therefore, we're removing the background-image restriction for the
options of the cover snippet.

Part of https://github.com/odoo/odoo/pull/47933
task-2210733

closes odoo/odoo#47933

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

4 files changed, 32 insertions, 42 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index e698c503ace..9c405641cc7 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -2020,6 +2020,7 @@ options.registry.CoverProperties = options.Class.extend({
             this.$target.removeClass('o_record_has_cover');
         } else {
             this.$image.css('background-image', `url('${widgetValue}')`);
+            this.$target.addClass('o_record_has_cover');
             const $defaultSizeBtn = this.$el.find('.o_record_cover_opt_size_default');
             $defaultSizeBtn.click();
             $defaultSizeBtn.closest('we-select').click();
@@ -2084,10 +2085,8 @@ options.registry.CoverProperties = options.Class.extend({
      * @override
      */
     _computeWidgetVisibility: function (widgetName, params) {
-        const hasCover = this.$target.hasClass('o_record_has_cover');
         if (params.coverOptName) {
-            var notAllowed = (this.$target.data(`use_${params.coverOptName}`) !== 'True');
-            return (hasCover && !notAllowed);
+            return this.$target.data(`use_${params.coverOptName}`) === 'True';
         }
         return this._super(...arguments);
     },
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index dd342b4c0be..3bde97b34e4 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -614,9 +614,9 @@
             <t t-set="with_color_combinations" t-value="True"/>
         </t>
         <we-select string="Size" data-cover-opt-name="size">
-            <we-button data-select-class="o_record_has_cover o_full_screen_height">Full Screen</we-button>
-            <we-button class="o_record_cover_opt_size_default" data-select-class="o_record_has_cover o_half_screen_height">Half Screen</we-button>
-            <we-button data-select-class="o_record_has_cover cover_auto">Fit text</we-button>
+            <we-button data-select-class="o_full_screen_height">Full Screen</we-button>
+            <we-button class="o_record_cover_opt_size_default" data-select-class="o_half_screen_height">Half Screen</we-button>
+            <we-button data-select-class="cover_auto">Fit text</we-button>
         </we-select>
         <we-select string="Filter Intensity" data-cover-opt-name="filters">
             <we-button data-filter-value="0.0">None</we-button>
diff --git a/addons/website_blog/static/src/scss/website_blog.scss b/addons/website_blog/static/src/scss/website_blog.scss
index 1e31588e8b0..e3c9f58a223 100644
--- a/addons/website_blog/static/src/scss/website_blog.scss
+++ b/addons/website_blog/static/src/scss/website_blog.scss
@@ -138,12 +138,34 @@ $o-wblog-loader-size: 50px;
     // Blog Post Page Cover
     // ==============================================
     .o_wblog_post_page_cover {
-        // By default (no image defined), inner filters elements are hidden.
-        .o_record_cover_component {
-            display: none;
+
+        // Cover sizes
+        // ==============================================
+        &.cover_auto {
+            padding: 3rem 0;
+            // The actual height will always be 'auto'. The following
+            // min-height rule is set to trigger the page transition only.
+            min-height: 1px;
         }
 
-        // If a cover image is defined, show filters + adapt inner typography
+        // "Regular Cover" design sizes
+        // ==============================================
+        &.o_wblog_post_page_cover_regular {
+            &.o_full_screen_height {
+                min-height: 350px;
+            }
+
+            &.o_half_screen_height {
+                min-height: 250px;
+            }
+
+            &.cover_auto {
+                min-height: 150px;
+                padding: 0;
+            }
+        }
+
+        // If a cover image is defined, adapt inner typography
         &.o_record_has_cover {
             .o_record_cover_image:after {
                 content: "";
@@ -151,42 +173,15 @@ $o-wblog-loader-size: 50px;
                 @include o-position-absolute(0,0,50%,0);
                 @include o-wbblog-scrim-gradient(rgba(black, 0.5), transparent);
             }
-            .o_record_cover_component {
-                display: block;
-            }
 
             .o_wblog_post_title {
                 color: white;
             }
 
-            // Cover sizes
-            // ==============================================
-            &.cover_auto {
-                padding: 3rem 0;
-                // The actual height will always be 'auto'. The following
-                // min-height rule is set to trigger the page transition only.
-                min-height: 1px;
-            }
-
-            // "Regular Cover" design sizes
-            // ==============================================
             &.o_wblog_post_page_cover_regular {
                 .o_record_cover_image:after {
                     visibility: hidden;
                 }
-
-                &.o_full_screen_height {
-                    min-height: 350px;
-                }
-
-                &.o_half_screen_height {
-                    min-height: 250px;
-                }
-
-                &.cover_auto {
-                    min-height: 150px;
-                    padding: 0;
-                }
             }
         }
 
diff --git a/addons/website_event/static/src/scss/website_event.scss b/addons/website_event/static/src/scss/website_event.scss
index 09f45c1a8d9..479880ef1da 100644
--- a/addons/website_event/static/src/scss/website_event.scss
+++ b/addons/website_event/static/src/scss/website_event.scss
@@ -205,7 +205,7 @@
         z-index: 0;
 
         .o_record_cover_component {
-            display: none;
+            z-index: -1;
         }
         &.o_record_has_cover {
             .o_record_cover_image {
@@ -217,10 +217,6 @@
                     @include o-position-absolute(0,0,50%,0);
                 }
             }
-            .o_record_cover_component {
-                display: block;
-                z-index: -1;
-            }
             .o_wevent_event_title {
                 color: white;
             }