From b293ccc7c3c5ca9a55092afd2e4a7b88c7b93fc8 Mon Sep 17 00:00:00 2001 From: Samuel Degueldre Date: Wed, 12 Feb 2020 10:54:27 +0000 Subject: [PATCH] [IMP] website, web_editor: option to add columns on snippet without any In the previous snippet cleanup, a lot of superfluous row > col were removed in favour of having the bare content directly in the section, this streamlines the interface and prevents having many useless UI elements. At the same time however, there are some snippets on which you might want columns so that you can pull the content off-center and give the block a background color independently of its containing section (namely: the cover, title and text-block snippets) this commit adds an option to add columns on those snippets (and remove those columns completely if they're no longer wanted) task-2120360 closes odoo/odoo#45712 X-original-commit: a44bfc4f7bba16d700650ecc2369fa1445ecbfb9 Signed-off-by: Quentin Smetz (qsm) --- .../static/src/js/editor/snippets.options.js | 46 +++++++++++++++---- addons/website/views/snippets/s_cover.xml | 2 +- .../website/views/snippets/s_text_block.xml | 2 +- addons/website/views/snippets/s_title.xml | 2 +- addons/website/views/snippets/snippets.xml | 3 +- 5 files changed, 41 insertions(+), 14 deletions(-) diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 1094906fe61..25bfb9ad6cd 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -1017,6 +1017,17 @@ options.registry.sizing_x = options.registry.sizing.extend({ }); options.registry.layout_column = options.Class.extend({ + /** + * @override + */ + start: function () { + // Needs to be done manually for now because _computeWidgetVisibility + // doesn't go through this option for buttons inside of a select. + // TODO: improve this. + this.$el.find('we-button[data-name="zero_cols_opt"]') + .toggleClass('d-none', !this.$target.is('.s_allow_columns')); + return this._super(...arguments); + }, //-------------------------------------------------------------------------- // Options @@ -1028,8 +1039,24 @@ options.registry.layout_column = options.Class.extend({ * @see this.selectClass for parameters */ selectCount: async function (previewMode, widgetValue, params) { + const previousNbColumns = this.$('> .row').children().length; + let $row = this.$('> .row'); + if (!$row.length) { + $row = this.$target.contents().wrapAll($('
')).parent().parent(); + } + const nbColumns = parseInt(widgetValue); - await this._updateColumnCount(nbColumns - this.$target.children().length); + await this._updateColumnCount($row, (nbColumns || 1) - $row.children().length); + // Yield UI thread to wait for event to bubble before activate_snippet is called. + // In this case this lets the select handle the click event before we switch snippet. + // TODO: make this more generic in activate_snippet event handler. + await new Promise(resolve => setTimeout(resolve)); + if (nbColumns === 0) { + $row.contents().unwrap().contents().unwrap(); + this.trigger_up('activate_snippet', {$snippet: this.$target}); + } else if (previousNbColumns === 0) { + this.trigger_up('activate_snippet', {$snippet: this.$('> .row').children().first()}); + } }, //-------------------------------------------------------------------------- @@ -1041,7 +1068,7 @@ options.registry.layout_column = options.Class.extend({ */ _computeWidgetState: function (methodName, params) { if (methodName === 'selectCount') { - return '' + this.$target.children().length; + return this.$('> .row').children().length; } return this._super(...arguments); }, @@ -1050,17 +1077,16 @@ options.registry.layout_column = options.Class.extend({ * last x columns. * * @private + * @param {jQuery} $row - the row in which to update the columns * @param {integer} count - positif to add, negative to remove */ - _updateColumnCount: async function (count) { + _updateColumnCount: async function ($row, count) { if (!count) { return; } - this.trigger_up('request_history_undo_record', {$target: this.$target}); - if (count > 0) { - var $lastColumn = this.$target.children().last(); + var $lastColumn = $row.children().last(); for (var i = 0; i < count; i++) { await new Promise(resolve => { this.trigger_up('clone_snippet', {$snippet: $lastColumn, onSuccess: resolve}); @@ -1068,23 +1094,23 @@ options.registry.layout_column = options.Class.extend({ } } else { var self = this; - for (const el of this.$target.children().slice(count)) { + for (const el of $row.children().slice(count)) { await new Promise(resolve => { self.trigger_up('remove_snippet', {$snippet: $(el), onSuccess: resolve}); }); } } - this._resizeColumns(); + this._resizeColumns($row.children()); this.trigger_up('cover_update'); }, /** * Resizes the columns so that they are kept on one row. * * @private + * @param {jQuery} $columns - the columns to resize */ - _resizeColumns: function () { - var $columns = this.$target.children(); + _resizeColumns: function ($columns) { const colsLength = $columns.length; var colSize = Math.floor(12 / colsLength) || 1; var colOffset = Math.floor((12 - colSize * colsLength) / 2); diff --git a/addons/website/views/snippets/s_cover.xml b/addons/website/views/snippets/s_cover.xml index 6af1c8aac82..d879a772f1d 100644 --- a/addons/website/views/snippets/s_cover.xml +++ b/addons/website/views/snippets/s_cover.xml @@ -4,7 +4,7 @@