From f89fce45014bfa98bf4a9daf764e312772a2a541 Mon Sep 17 00:00:00 2001 From: Pierre-Yves Dufays Date: Thu, 3 Mar 2022 11:34:04 +0000 Subject: [PATCH] [IMP] portal[_rating],website_slides: improve star filtering interface The implementation seemed buggy as you had to click twice on a rating to activate the filter; this fixes the problem. It also improves a bit the interface: - by allowing to click on another rating directly without having to deactivate first the current filter - by replacing "Remove Selection" by a red fa-times - by adding a spinner on the messages zone while the messages are loading when the connection is slow (the spinner appears only after half a second if the server doesn't response in the meantime) - by setting some minimal heights to avoid seeing the footer moving when switching from course to review and when changing the star filter (which change the number of message displayed) Technical notes: The double click problem was caused by an update of the view when the rating filter is changed. When re-clicking on the same rating the view was not re-rendered and the change (selection) in the view were kept. To solve that problem we have implemented the selection directly in the view and the css. As it doesn't rely anymore on changes performed in javascript in the dom, the re-render of the view after fetching the data from the server reflect the selection done by the user. Task-2754954 closes odoo/odoo#85757 Signed-off-by: Thibault Delavallee (tde) --- addons/portal/static/src/js/portal_chatter.js | 2 +- .../static/src/js/portal_chatter.js | 41 ++++++++------- .../static/src/scss/portal_rating.scss | 21 +++++--- .../static/src/xml/portal_chatter.xml | 12 +++++ .../static/src/xml/portal_tools.xml | 51 ++++++++++--------- .../static/src/scss/website_slides.scss | 4 ++ 6 files changed, 78 insertions(+), 53 deletions(-) diff --git a/addons/portal/static/src/js/portal_chatter.js b/addons/portal/static/src/js/portal_chatter.js index ed2e70ea43a..26f404e5a0d 100644 --- a/addons/portal/static/src/js/portal_chatter.js +++ b/addons/portal/static/src/js/portal_chatter.js @@ -278,7 +278,7 @@ var PortalChatter = publicWidget.Widget.extend({ _onChangeDomain: function () { var self = this; - this.messageFetch().then(function () { + return this.messageFetch().then(function () { var p = self._currentPage; self.set('pager', self._pager(p)); }); diff --git a/addons/portal_rating/static/src/js/portal_chatter.js b/addons/portal_rating/static/src/js/portal_chatter.js index d9107a2b24c..c57b4faa179 100644 --- a/addons/portal_rating/static/src/js/portal_chatter.js +++ b/addons/portal_rating/static/src/js/portal_chatter.js @@ -18,8 +18,8 @@ var qweb = core.qweb; PortalChatter.include({ events: _.extend({}, PortalChatter.prototype.events, { // star based control - 'click .o_website_rating_select': '_onClickStarDomain', - 'click .o_website_rating_select_text': '_onClickStarDomainReset', + 'click .o_website_rating_table_row': '_onClickStarDomain', + 'click .o_website_rating_selection_reset': '_onClickStarDomainReset', // publisher comments 'click .o_wrating_js_publisher_comment_btn': '_onClickPublisherComment', 'click .o_wrating_js_publisher_comment_edit': '_onClickPublisherComment', @@ -235,6 +235,25 @@ PortalChatter.include({ // Handlers //-------------------------------------------------------------------------- + /** + * Show a spinner and hide messages during loading. + * + * @override + * @returns {Promise} + */ + _onChangeDomain: function () { + const spinnerDelayed = setTimeout(()=> { + this.$('.o_portal_chatter_messages_loading').removeClass('d-none'); + this.$('.o_portal_chatter_messages').addClass('d-none'); + }, 500); + return this._super.apply(this, arguments).finally(()=>{ + clearTimeout(spinnerDelayed); + // Hide spinner and show messages + this.$('.o_portal_chatter_messages_loading').addClass('d-none'); + this.$('.o_portal_chatter_messages').removeClass('d-none'); + }); + }, + /** * @private * @param {MouseEvent} ev @@ -242,19 +261,7 @@ PortalChatter.include({ _onClickStarDomain: function (ev) { var $tr = this.$(ev.currentTarget); var num = $tr.data('star'); - if ($tr.css('opacity') === '1') { - this.set('rating_value', num); - this.$('.o_website_rating_select').css({ - 'opacity': 0.5, - }); - this.$('.o_website_rating_select_text[data-star="' + num + '"]').css({ - 'visibility': 'visible', - 'opacity': 1, - }); - this.$('.o_website_rating_select[data-star="' + num + '"]').css({ - 'opacity': 1, - }); - } + this.set('rating_value', num); }, /** * @private @@ -264,10 +271,6 @@ PortalChatter.include({ ev.stopPropagation(); ev.preventDefault(); this.set('rating_value', false); - this.$('.o_website_rating_select_text').css('visibility', 'hidden'); - this.$('.o_website_rating_select').css({ - 'opacity': 1, - }); }, /** diff --git a/addons/portal_rating/static/src/scss/portal_rating.scss b/addons/portal_rating/static/src/scss/portal_rating.scss index 82c35d07d71..fb219896e71 100644 --- a/addons/portal_rating/static/src/scss/portal_rating.scss +++ b/addons/portal_rating/static/src/scss/portal_rating.scss @@ -11,7 +11,7 @@ $o-w-rating-star-color: #FACC2E; } /* progress bars */ - table.o_website_rating_progress_table { + table.o_website_rating_table { width: 100%; overflow: visible; @@ -19,13 +19,10 @@ $o-w-rating-star-color: #FACC2E; min-width: 50px; white-space: nowrap; } - .o_website_rating_select[style*="opacity: 1"] { - cursor: pointer; - } .o_website_rating_table_progress{ min-width: 120px; > .progress { - margin-bottom: 5px; + margin-bottom: 2px; margin-left: 5px; margin-right: 5px; } @@ -39,12 +36,14 @@ $o-w-rating-star-color: #FACC2E; font-size: $font-size-sm; } .o_website_rating_table_reset { - .o_website_rating_select_text { - visibility: hidden; + .o_website_rating_selection_reset { + color: $red; } } + .o_website_rating_table_row:not(o_website_rating_table_row_selected) { + cursor: pointer; + } } - } /* Star Widget */ @@ -86,3 +85,9 @@ $o-w-rating-star-color: #FACC2E; .o_rating_popup_composer_label { color: color-yiq(white); } + +.o_portal_rating_chatter_messages { + /* Goal of min-height: push the footer out of the screen (in most use-case) to avoid seeing it moving when switching + the star filter when there are few messages */ + min-height: 40vh; +} diff --git a/addons/portal_rating/static/src/xml/portal_chatter.xml b/addons/portal_rating/static/src/xml/portal_chatter.xml index 031e4831e4e..b9931c8fdc6 100644 --- a/addons/portal_rating/static/src/xml/portal_chatter.xml +++ b/addons/portal_rating/static/src/xml/portal_chatter.xml @@ -16,6 +16,9 @@ + + this.attr('class', this.attr("class") + ' o_portal_rating_chatter_messages'); + @@ -43,6 +46,15 @@ + +
+
+ +
+
+