From c90ab7b6646b603dcd0a49387b5eeba60ce17f59 Mon Sep 17 00:00:00 2001 From: Tioneb88 Date: Tue, 13 Apr 2021 11:55:36 +0000 Subject: [PATCH] [IMP] website: add templates for masonry snippet Add an option in the masonry snippet's allowing to choose among multiple templates for the snippet layout. The usability of the snippet also has been reviewed (restrict the ability to control background on deeper boxes). Also reviewed the bg-200 use on boxes and replaced them with a preset as otherwise it seems buggy to not be able to remove the bg-200 by selecting a preset (other than hitting the trash icon in the colorpicker). Part of https://github.com/odoo/odoo/pull/67361 task-2463033 closes odoo/odoo#67361 Signed-off-by: Quentin Smetz (qsm) Co-authored-by: smottet Co-authored-by: qsm-odoo --- addons/website/__manifest__.py | 1 + addons/website/data/website_data.xml | 6 + .../masonry_template_alternate_image_text.svg | 45 +++ .../masonry_template_alternate_text_image.svg | 44 +++ ...nry_template_alternate_text_image_text.svg | 29 ++ .../masonry_template_alternate_texts.svg | 26 ++ .../masonry_template_default.svg | 37 ++ .../masonry_template_image_texts_image.svg | 36 ++ .../masonry_template_images.svg | 24 ++ .../masonry_template_mosaic.svg | 55 +++ .../masonry_template_reversed.svg | 37 ++ .../masonry_template_texts_image_texts.svg | 39 +++ .../src/snippets/s_masonry_block/options.js | 99 ++++++ .../views/snippets/s_masonry_block.xml | 316 ++++++++++++++++-- addons/website/views/snippets/snippets.xml | 13 +- 15 files changed, 777 insertions(+), 30 deletions(-) create mode 100644 addons/website/static/src/img/snippets_options/masonry_template_alternate_image_text.svg create mode 100644 addons/website/static/src/img/snippets_options/masonry_template_alternate_text_image.svg create mode 100644 addons/website/static/src/img/snippets_options/masonry_template_alternate_text_image_text.svg create mode 100644 addons/website/static/src/img/snippets_options/masonry_template_alternate_texts.svg create mode 100644 addons/website/static/src/img/snippets_options/masonry_template_default.svg create mode 100644 addons/website/static/src/img/snippets_options/masonry_template_image_texts_image.svg create mode 100644 addons/website/static/src/img/snippets_options/masonry_template_images.svg create mode 100644 addons/website/static/src/img/snippets_options/masonry_template_mosaic.svg create mode 100644 addons/website/static/src/img/snippets_options/masonry_template_reversed.svg create mode 100644 addons/website/static/src/img/snippets_options/masonry_template_texts_image_texts.svg create mode 100644 addons/website/static/src/snippets/s_masonry_block/options.js diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py index 789e297edc5..7770777f606 100644 --- a/addons/website/__manifest__.py +++ b/addons/website/__manifest__.py @@ -174,6 +174,7 @@ 'website/static/src/snippets/s_facebook_page/options.js', 'website/static/src/snippets/s_image_gallery/options.js', 'website/static/src/snippets/s_countdown/options.js', + 'website/static/src/snippets/s_masonry_block/options.js', 'website/static/src/snippets/s_popup/options.js', 'website/static/src/snippets/s_product_catalog/options.js', 'website/static/src/snippets/s_chart/options.js', diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml index 5f4b5b2ad44..4e614ee14f7 100644 --- a/addons/website/data/website_data.xml +++ b/addons/website/data/website_data.xml @@ -776,6 +776,12 @@ url /website/static/src/img/snippets_demo/s_masonry_block_1.jpg + + + s_masonry_block_default_image_2.jpg + url + /website/static/src/img/snippets_demo/s_cover.jpg + s_media_list_default_image_1.jpg diff --git a/addons/website/static/src/img/snippets_options/masonry_template_alternate_image_text.svg b/addons/website/static/src/img/snippets_options/masonry_template_alternate_image_text.svg new file mode 100644 index 00000000000..57c4406d9f5 --- /dev/null +++ b/addons/website/static/src/img/snippets_options/masonry_template_alternate_image_text.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/website/static/src/img/snippets_options/masonry_template_alternate_text_image.svg b/addons/website/static/src/img/snippets_options/masonry_template_alternate_text_image.svg new file mode 100644 index 00000000000..3b96357e8ee --- /dev/null +++ b/addons/website/static/src/img/snippets_options/masonry_template_alternate_text_image.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/website/static/src/img/snippets_options/masonry_template_alternate_text_image_text.svg b/addons/website/static/src/img/snippets_options/masonry_template_alternate_text_image_text.svg new file mode 100644 index 00000000000..4a603044b80 --- /dev/null +++ b/addons/website/static/src/img/snippets_options/masonry_template_alternate_text_image_text.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/website/static/src/img/snippets_options/masonry_template_alternate_texts.svg b/addons/website/static/src/img/snippets_options/masonry_template_alternate_texts.svg new file mode 100644 index 00000000000..5911b6a50ba --- /dev/null +++ b/addons/website/static/src/img/snippets_options/masonry_template_alternate_texts.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/website/static/src/img/snippets_options/masonry_template_default.svg b/addons/website/static/src/img/snippets_options/masonry_template_default.svg new file mode 100644 index 00000000000..dafa27f6df5 --- /dev/null +++ b/addons/website/static/src/img/snippets_options/masonry_template_default.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/website/static/src/img/snippets_options/masonry_template_image_texts_image.svg b/addons/website/static/src/img/snippets_options/masonry_template_image_texts_image.svg new file mode 100644 index 00000000000..d5d29510504 --- /dev/null +++ b/addons/website/static/src/img/snippets_options/masonry_template_image_texts_image.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/website/static/src/img/snippets_options/masonry_template_images.svg b/addons/website/static/src/img/snippets_options/masonry_template_images.svg new file mode 100644 index 00000000000..7be2c0394a6 --- /dev/null +++ b/addons/website/static/src/img/snippets_options/masonry_template_images.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/website/static/src/img/snippets_options/masonry_template_mosaic.svg b/addons/website/static/src/img/snippets_options/masonry_template_mosaic.svg new file mode 100644 index 00000000000..64c55638eb1 --- /dev/null +++ b/addons/website/static/src/img/snippets_options/masonry_template_mosaic.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/website/static/src/img/snippets_options/masonry_template_reversed.svg b/addons/website/static/src/img/snippets_options/masonry_template_reversed.svg new file mode 100644 index 00000000000..d064c03d946 --- /dev/null +++ b/addons/website/static/src/img/snippets_options/masonry_template_reversed.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/website/static/src/img/snippets_options/masonry_template_texts_image_texts.svg b/addons/website/static/src/img/snippets_options/masonry_template_texts_image_texts.svg new file mode 100644 index 00000000000..a2ea025e33b --- /dev/null +++ b/addons/website/static/src/img/snippets_options/masonry_template_texts_image_texts.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/website/static/src/snippets/s_masonry_block/options.js b/addons/website/static/src/snippets/s_masonry_block/options.js new file mode 100644 index 00000000000..281730e6e81 --- /dev/null +++ b/addons/website/static/src/snippets/s_masonry_block/options.js @@ -0,0 +1,99 @@ +/** @odoo-module */ + +import options from 'web_editor.snippets.options'; + +options.registry.MasonryLayout = options.Class.extend({ + custom_events: Object.assign({}, options.Class.prototype.custom_events, { + 'user_value_widget_opening': '_onWidgetOpening', + }), + + /** + * @constructor + */ + async start() { + this.containerEl = this.$target.find('> .container, > .container-fluid, > .o_container_small')[0]; + this._templates = {}; + return this._super(...arguments); + }, + + //-------------------------------------------------------------------------- + // Options + //-------------------------------------------------------------------------- + + /** + * Changes the masonry snippet layout. + * + * @see this.selectClass for parameters + */ + async selectMasonryTemplate(previewMode, widgetValue, params) { + await this._templatesLoading; + + if (previewMode === 'reset') { + if (!this.beforePreviewNodes) { + // FIXME should not be necessary: only needed because we have a + // strange 'reset' sent after a non-preview + return; + } + + // Empty the container and restore the original content + while (this.containerEl.lastChild) { + this.containerEl.removeChild(this.containerEl.lastChild); + } + for (const node of this.beforePreviewNodes) { + this.containerEl.appendChild(node); + } + this.beforePreviewNodes = null; + return; + } + + if (!this.beforePreviewNodes) { + // We are about the apply a template on non-previewed content, + // save that content's nodes. + this.beforePreviewNodes = [...this.containerEl.childNodes]; + } + // Empty the container and add the template content + while (this.containerEl.lastChild) { + this.containerEl.removeChild(this.containerEl.lastChild); + } + this.containerEl.insertAdjacentHTML('beforeend', this._templates[widgetValue]); + + if (!previewMode) { + // The original content to keep saved has to be retrieved just + // before the preview (if we save it now, we might miss other items + // added by other options or custo). + this.beforePreviewNodes = null; + } + }, + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {OdooEvent} ev + */ + _onWidgetOpening(ev) { + if (this._templatesLoading || ev.target.getName() !== 'masonry_template_opt') { + return; + } + const templateParams = ev.target.getMethodsParams('selectMasonryTemplate'); + const proms = templateParams.possibleValues.map(async xmlid => { + if (!xmlid) { + return; + } + // TODO should be better and retrieve all rendering in one RPC (but + // those ~10 RPC are only done once per edit mode if masonry snippet + // option is opened, so I guess this is acceptable). + this._templates[xmlid] = await this._rpc({ + model: 'ir.ui.view', + method: 'render_public_asset', + args: [`${xmlid}`, {}], + kwargs: { + context: this.options.context, + }, + }); + }); + this._templatesLoading = Promise.all(proms); + }, +}); diff --git a/addons/website/views/snippets/s_masonry_block.xml b/addons/website/views/snippets/s_masonry_block.xml index acf0afc3a83..16455d90d0a 100644 --- a/addons/website/views/snippets/s_masonry_block.xml +++ b/addons/website/views/snippets/s_masonry_block.xml @@ -1,37 +1,305 @@ - + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index 847f2eac97f..f3f90733fe3 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -440,7 +440,8 @@
+ data-target="> *:has(> .row:not(.s_nb_column_fixed)), > .s_allow_columns" + data-exclude=".s_masonry_block"> None 1 @@ -474,7 +475,7 @@ - + @@ -504,14 +505,14 @@
+ data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div, .s_masonry_block .s_col_no_resize">
+ data-exclude=".s_col_no_resize.row > div, .s_masonry_block .s_col_no_resize"> @@ -519,12 +520,12 @@
+ data-exclude="section:has(> .carousel), .s_image_gallery .carousel-item, .s_col_no_resize.row > div, .s_col_no_resize"/>
+ data-exclude=".s_col_no_resize.row > div, .s_col_no_resize"/> section, .parallax, .s_popup