From 41527531b7b6f727e25a5a68aedb49609fbb1d3a Mon Sep 17 00:00:00 2001 From: xO-Tx Date: Mon, 3 Aug 2020 16:29:46 +0000 Subject: [PATCH] [IMP] web_editor, *: add snippets search filter *: website Add a search bar at the top of the "Blocks" tab to filter snippets. Part of https://github.com/odoo/odoo/pull/55272 task-2309832 closes odoo/odoo#55272 Signed-off-by: Quentin Smetz (qsm) Co-authored-by: qsm-odoo --- addons/web_editor/models/ir_qweb.py | 3 +- .../static/src/js/editor/snippets.editor.js | 50 ++++++++ .../static/src/scss/wysiwyg_snippets.scss | 32 ++++++ addons/web_editor/views/snippets.xml | 5 + .../static/src/js/editor/wysiwyg_multizone.js | 12 +- addons/website/views/snippets/snippets.xml | 108 +++++++++++++----- 6 files changed, 181 insertions(+), 29 deletions(-) diff --git a/addons/web_editor/models/ir_qweb.py b/addons/web_editor/models/ir_qweb.py index 5eceda7855f..4afd778aa71 100644 --- a/addons/web_editor/models/ir_qweb.py +++ b/addons/web_editor/models/ir_qweb.py @@ -68,10 +68,11 @@ class QWeb(models.AbstractModel): view_id = View.get_view_id(key) name = View.browse(view_id).name thumbnail = el.attrib.pop('t-thumbnail', "oe-thumbnail") - div = u'
' % ( + div = u'
' % ( escape(pycompat.to_text(name)), escape(pycompat.to_text(thumbnail)), escape(pycompat.to_text(view_id)), + escape(pycompat.to_text(el.findtext('keywords'))) ) return [self._append(ast.Str(div))] + self._compile_node(el, options) + [self._append(ast.Str(u'
'))] diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js index ea063eebe1f..cf42d973eba 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -809,6 +809,8 @@ var SnippetsMenu = Widget.extend({ 'click .o_we_invisible_entry': '_onInvisibleEntryClick', 'click #snippet_custom .o_delete_btn': '_onDeleteBtnClick', 'mousedown': '_onMouseDown', + 'input .o_snippet_search_filter_input': '_onSnippetSearchInput', + 'click .o_snippet_search_filter_reset': '_onSnippetSearchResetClick', }, custom_events: { 'activate_insertion_zones': '_onActivateInsertionZones', @@ -1728,6 +1730,37 @@ var SnippetsMenu = Widget.extend({ $snippet.toggleClass('o_disabled', !check); }); }, + /** + * @private + * @param {string} [search] + */ + _filterSnippets(search) { + const searchInputEl = this.el.querySelector('.o_snippet_search_filter_input'); + const searchInputReset = this.el.querySelector('.o_snippet_search_filter_reset'); + if (search !== undefined) { + searchInputEl.value = search; + } else { + search = searchInputEl.value; + } + search = search.toLowerCase(); + searchInputReset.classList.toggle('d-none', !search); + const strMatches = str => !search || str.toLowerCase().includes(search); + for (const panelEl of this.el.querySelectorAll('.o_panel')) { + let hasVisibleSnippet = false; + const panelTitle = panelEl.querySelector('.o_panel_header').textContent; + const isPanelTitleMatch = strMatches(panelTitle); + for (const snippetEl of panelEl.querySelectorAll('.oe_snippet')) { + const matches = (isPanelTitleMatch + || strMatches(snippetEl.getAttribute('name')) + || strMatches(snippetEl.dataset.oeKeywords || '')); + if (matches) { + hasVisibleSnippet = true; + } + snippetEl.classList.toggle('d-none', !matches); + } + panelEl.classList.toggle('d-none', !hasVisibleSnippet); + } + }, /** * @private * @param {Object} [options={}] @@ -1928,6 +1961,7 @@ var SnippetsMenu = Widget.extend({ $(this.customizePanel).append(content); } + this.$('.o_snippet_search_filter').toggleClass('d-none', tab !== this.tabs.BLOCKS); this.$('#o_scroll').toggleClass('d-none', tab !== this.tabs.BLOCKS); this.customizePanel.classList.toggle('d-none', tab === this.tabs.BLOCKS); @@ -2298,6 +2332,22 @@ var SnippetsMenu = Widget.extend({ _onUserValueWidgetClosing: function () { this.el.classList.remove('o_we_backdrop'); }, + /** + * Called when search input value changed -> adapts the snippets grid. + * + * @private + */ + _onSnippetSearchInput: function () { + this._filterSnippets(); + }, + /** + * Called on snippet search filter reset -> clear input field search. + * + * @private + */ + _onSnippetSearchResetClick: function () { + this._filterSnippets(''); + }, }); return { diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index e63929d9cb4..95bc9fec862 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -197,6 +197,38 @@ body.editor_enable.editor_has_snippets { } } + // Snippet filter input + .o_snippet_search_filter { + position: relative; + width: 100%; + padding: $o-we-sidebar-blocks-content-spacing; + + .o_snippet_search_filter_input { + width: 100%; + padding: $o-we-sidebar-content-field-clickable-spacing; + padding-right: 2em; + border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color; + background-color: $o-we-sidebar-content-field-input-bg; + color: inherit; + + &::placeholder { + color: $o-we-sidebar-content-field-control-item-color; + } + &:focus { + border-color: $o-we-sidebar-content-field-input-border-color; + outline: none; + } + } + .o_snippet_search_filter_reset { + @include o-position-absolute($o-we-sidebar-blocks-content-spacing, $o-we-sidebar-blocks-content-spacing, $o-we-sidebar-blocks-content-spacing); + display: flex; + justify-content: center; + align-items: center; + padding: 0 $o-we-sidebar-content-field-clickable-spacing; + cursor: pointer; + } + } + > #o_scroll, > .o_we_customize_panel { flex: 1 1 auto; height: 100%; diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml index 07294406467..2aa1d397879 100644 --- a/addons/web_editor/views/snippets.xml +++ b/addons/web_editor/views/snippets.xml @@ -13,6 +13,11 @@
+
+ + +
+
Custom
diff --git a/addons/website/static/src/js/editor/wysiwyg_multizone.js b/addons/website/static/src/js/editor/wysiwyg_multizone.js index 01162f16168..ce83b958703 100644 --- a/addons/website/static/src/js/editor/wysiwyg_multizone.js +++ b/addons/website/static/src/js/editor/wysiwyg_multizone.js @@ -244,13 +244,23 @@ snippetsEditor.Class.include({ */ toggleMegaMenuSnippets: function (show) { setTimeout(() => this._activateSnippet(false)); - this.$('#snippet_mega_menu').toggleClass('d-none', !show); + this._showMegaMenuSnippets = show; + this._filterSnippets(); }, //-------------------------------------------------------------------------- // Private //-------------------------------------------------------------------------- + /** + * @override + */ + _filterSnippets(search) { + this._super(...arguments); + if (!this._showMegaMenuSnippets) { + this.el.querySelector('#snippet_mega_menu').classList.add('d-none'); + } + }, /** * @override */ diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index 5f3f3a63bb2..171596ec5e7 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -23,21 +23,49 @@
Structure
- - - - - - - - - - - - - + + hero, jumbotron + + + hero, jumbotron + + + content + + + content + + + heading, h1 + + + content + + + statistics, stats, KPI + + + image, media, illustration + + + columns, description + + + big + + + promotion, characteristic, quality + + + masonry, grid + + + gallery, carousel + - + + gallery, carousel + @@ -47,19 +75,33 @@
Features
- - - - - + + pricing + + + organization, structure + + + CTA + + + customers, clients + + + common answers, common questions + - + + menu, pricing + - + + testimonials +
@@ -77,7 +119,9 @@ - + + celebration, launch +
@@ -86,18 +130,28 @@
Inner content
- + + separator, divider + - + + valuation, rank + - - + + chart, table, diagram, pie + + + evolution, growth + - + + cite +