[IMP] website: add position top in cookie bar and fix a bug

Add position top in popup snippet and cookie bar.
Properly center content when full size and position center because
before this commit the content was at the top and not centered.

Part of https://github.com/odoo/odoo/pull/46503


task-2194309

closes odoo/odoo#46503

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

addons/website/static/src/scss/website.edit_mode.scss

@@ -154,5 +154,10 @@ table.editorbar-panel {
                left: $o-we-sidebar-width !important;
             }
         }
+        &.s_popup_fixed_top {
+            .s_popup_content {
+                top: var(--o-we-toolbar-height) !important;
+            }
+        }
     }
 }

addons/website/static/src/snippets/s_popup/000.scss

@@ -44,6 +44,7 @@
                 .modal-content {
                     height: 100%;
                     width: 100%;
+                    justify-content: center;
                 }
             }
             .s_popup_close {
@@ -56,11 +57,20 @@
     }
 
     &.s_popup_fixed {
+        &.s_popup_fixed_top {
+            .s_popup_content {
+                top: $o-navbar-height;
+            }
+        }
+        &:not(.s_popup_fixed_top) {
+            .s_popup_content {
+                bottom: 0;
+            }
+        }
         .s_popup_content {
             z-index: 1;
             position: fixed;
             right: 20px;
-            bottom: 0;
         }
         .modal-sm .s_popup_content {
             width: $modal-sm;

addons/website/static/src/snippets/s_popup/options.js

@@ -62,7 +62,9 @@ options.registry.SnippetPopup = options.Class.extend({
      */
     setLayout: function (previewMode, widgetValue, params) {
         const isModal = widgetValue === 'modal';
+        const isTop = widgetValue === 'fixedTop';
         this.$target.toggleClass('s_popup_fixed', !isModal);
+        this.$target.toggleClass('s_popup_fixed_top', isTop);
         this.$target.toggleClass('s_popup_center modal', isModal);
         this.$target.find('.s_popup_frame').toggleClass('modal-dialog modal-dialog-centered', isModal);
         this.$target.find('.s_popup_content').toggleClass('modal-content', isModal);
@@ -88,7 +90,32 @@ options.registry.SnippetPopup = options.Class.extend({
             case 'moveBlock':
                 return this.$target.closest('footer').length ? 'moveToFooter' : 'moveToBody';
             case 'setLayout':
-                return this.$target.hasClass('s_popup_center') ? 'modal' : 'fixed';
+                if (this.$target.hasClass('s_popup_center')) {
+                    return 'modal';
+                } else if (this.$target.hasClass('s_popup_fixed_top')) {
+                    return 'fixedTop';
+                }
+                return 'fixedBottom';
+        }
+        return this._super(...arguments);
+    },
+});
+
+options.registry.PopupContent = options.Class.extend({
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Enable bg-color only if "centered AND full-size".
+     * Visibility according to the size is managed by data-dependencies.
+     *
+     * @override
+     */
+    async _computeWidgetVisibility(widgetName, params) {
+        if (widgetName === 'popup_content_colorpicker_opt') {
+            return this.$target.closest('.s_popup_main').hasClass('s_popup_center');
         }
         return this._super(...arguments);
     },

addons/website/views/snippets/s_popup.xml

@@ -36,8 +36,9 @@
     <xpath expr="." position="inside">
         <div data-js="SnippetPopup" data-selector=".s_popup" data-target=".s_popup_main">
             <we-select string="Position">
+                <we-button data-set-layout="fixedTop" data-name="position_top">Top</we-button>
                 <we-button data-set-layout="modal" data-name="position_centered">Center</we-button>
-                <we-button data-set-layout="fixed" data-name="position_bottom">Bottom</we-button>
+                <we-button data-set-layout="fixedBottom" data-name="position_bottom">Bottom</we-button>
             </we-select>
             <we-select string="Size" data-apply-to=".s_popup_frame">
                 <we-button data-select-class="modal-sm">Small</we-button>
@@ -49,6 +50,14 @@
             <we-colorpicker string="Backdrop Color" data-select-style="true"
                 data-css-property="background-color" data-color-prefix="bg-" data-dependencies="position_centered"/>
         </div>
+        <div data-js="PopupContent" data-selector=".s_popup" data-target=".s_popup_content">
+            <we-colorpicker string="Background Color"
+                            data-select-style="true"
+                            data-css-property="background-color"
+                            data-color-prefix="bg-"
+                            data-name="popup_content_colorpicker_opt"
+                            data-dependencies="s_popup_size_full"/>
+        </div>
         <div data-js="SnippetPopup" data-selector=".s_popup" data-exclude="#website_cookies_bar" data-target=".s_popup_main">
             <we-colorpicker string="Text Color" data-select-style="true" data-css-property="color" data-color-prefix="text-"/>
             <we-select string="Display" data-attribute-name="display" data-attribute-default-value="always">