' % (
+ 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 @@