height (cookies bar)
min-height: $o-font-size-base * $o-line-height-base;
diff --git a/addons/website/static/src/snippets/s_popup/001.scss b/addons/website/static/src/snippets/s_popup/001.scss
new file mode 100644
index 00000000000..af92f1b8c42
--- /dev/null
+++ b/addons/website/static/src/snippets/s_popup/001.scss
@@ -0,0 +1,66 @@
+.s_popup[data-vcss='001'] {
+ .modal-content {
+ min-height: $font-size-lg * 2;
+ border: 0;
+ border-radius: 0;
+ box-shadow: $modal-content-box-shadow-sm-up;
+ }
+
+ // Close icon
+ .s_popup_close {
+ z-index: $zindex-modal;
+ @include o-position-absolute(0, 0);
+ width: $font-size-lg * 2;
+ height: $font-size-lg * 2;
+ line-height: $font-size-lg * 2;
+ @include o-bg-color(color-yiq(o-color('primary')), o-color('primary'), $with-extras: false);
+ box-shadow: $box-shadow-sm;
+ cursor: pointer;
+ font-size: $font-size-lg;
+ text-align: center;
+ }
+
+ // Size option - Full
+ .s_popup_size_full {
+ padding: 0 !important;
+ max-width: 100%;
+
+ > .modal-content {
+ // Use the backdrop color as background-color
+ background-color: transparent;
+ box-shadow: none;
+ border-radius: 0;
+ }
+ }
+
+ // Position option - Middle
+ .s_popup_middle .modal-dialog {
+ align-items: center;
+ }
+
+ // Position option - Top/Bottom
+ .s_popup_top,
+ .s_popup_bottom {
+ .modal-dialog {
+ margin-right: 0;
+ &:not(.s_popup_size_full) {
+ padding: $spacer !important;
+ }
+ }
+ }
+ .s_popup_top .modal-dialog {
+ align-items: flex-start;
+ }
+ .s_popup_bottom .modal-dialog {
+ align-items: flex-end;
+ }
+
+ // No backdrop
+ .s_popup_no_backdrop {
+ pointer-events: none;
+
+ .modal-content {
+ pointer-events: auto;
+ }
+ }
+}
diff --git a/addons/website/static/src/snippets/s_popup/options.js b/addons/website/static/src/snippets/s_popup/options.js
index c667d8adc59..f31c00d3419 100644
--- a/addons/website/static/src/snippets/s_popup/options.js
+++ b/addons/website/static/src/snippets/s_popup/options.js
@@ -10,13 +10,26 @@ options.registry.SnippetPopup = options.Class.extend({
start: function () {
// Note: the link are excluded here so that internal modal buttons do
// not close the popup as we want to allow edition of those buttons.
- this.$target.find('.js_close_popup:not(a, .btn)').on('click', ev => {
+ this.$target.on('click.SnippetPopup', '.js_close_popup:not(a, .btn)', ev => {
ev.stopPropagation();
this.onTargetHide();
this.trigger_up('snippet_option_visibility_update', {show: false});
});
+ this.$target.on('shown.bs.modal.SnippetPopup', () => {
+ this.trigger_up('snippet_option_visibility_update', {show: true});
+ });
+ this.$target.on('hidden.bs.modal.SnippetPopup', () => {
+ this.trigger_up('snippet_option_visibility_update', {show: false});
+ });
return this._super(...arguments);
},
+ /**
+ * @override
+ */
+ destroy: function () {
+ this._super(...arguments);
+ this.$target.off('.SnippetPopup');
+ },
/**
* @override
*/
@@ -33,14 +46,26 @@ options.registry.SnippetPopup = options.Class.extend({
* @override
*/
onTargetShow: async function () {
- this.$target.removeClass('d-none');
+ this.$target.modal('show');
+ $(document.body).children('.modal-backdrop:last').addClass('d-none');
},
/**
* @override
*/
onTargetHide: async function () {
- this.$target.addClass('d-none');
+ return new Promise(resolve => {
+ const timeoutID = setTimeout(() => {
+ this.$target.off('hidden.bs.modal.popup_on_target_hide');
+ resolve();
+ }, 500);
+ this.$target.one('hidden.bs.modal.popup_on_target_hide', () => {
+ clearTimeout(timeoutID);
+ resolve();
+ });
+ this.$target.modal('hide');
+ });
},
+
//--------------------------------------------------------------------------
// Options
//--------------------------------------------------------------------------
@@ -56,18 +81,11 @@ options.registry.SnippetPopup = options.Class.extend({
this.$target.closest('.s_popup').prependTo($container.find('.oe_structure:o_editable').first());
},
/**
- * Switch layout from modal <--> a sticky div
- *
* @see this.selectClass for parameters
*/
- 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);
+ setBackdrop(previewMode, widgetValue, params) {
+ const color = widgetValue ? 'var(--black-50)' : '';
+ this.$target[0].style.setProperty('background-color', color, 'important');
},
//--------------------------------------------------------------------------
@@ -89,33 +107,6 @@ options.registry.SnippetPopup = options.Class.extend({
switch (methodName) {
case 'moveBlock':
return this.$target.closest('footer').length ? 'moveToFooter' : 'moveToBody';
- case 'setLayout':
- 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);
},
diff --git a/addons/website/static/src/xml/website.cookies_bar.xml b/addons/website/static/src/xml/website.cookies_bar.xml
index 8f43ccb3698..1f43786926b 100644
--- a/addons/website/static/src/xml/website.cookies_bar.xml
+++ b/addons/website/static/src/xml/website.cookies_bar.xml
@@ -1,74 +1,66 @@
+ Respecting your privacy is our priority.
+
We use cookies to provide you a better user experience.
+-