[MERGE] forward port branch saas-12.2 up to 9e74730a26b

2 files changed, 48 insertions, 14 deletions

diff --git a/addons/website_forum/static/src/js/website_forum.js b/addons/website_forum/static/src/js/website_forum.js
index 88dd7e222a7..832d29936ab 100644
--- a/addons/website_forum/static/src/js/website_forum.js
+++ b/addons/website_forum/static/src/js/website_forum.js
@@ -24,6 +24,9 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
         'click .vote_up:not(.karma_required), .vote_down:not(.karma_required)': '_onVotePostClick',
         'click .o_js_validation_queue a[href*="/validate"]': '_onValidationQueueClick',
         'click .accept_answer:not(.karma_required)': '_onAcceptAnswerClick',
+        'click .validate_answer [data-href]': '_onAcceptAnswerClick',
+        'mouseenter .validate_answer [data-href]': '_onRemoveValidAnswerMouse',
+        'mouseleave .validate_answer [data-href]': '_onRemoveValidAnswerMouse',
         'click .favourite_question': '_onFavoriteQuestionClick',
         'click .comment_delete': '_onDeleteCommentClick',
         'click .notification_close': '_onCloseNotificationClick',
@@ -350,6 +353,8 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
      */
     _onAcceptAnswerClick: function (ev) {
         ev.preventDefault();
+        var self = this;
+        var $acceptAnswerLinks = this.$('.accept_answer');
         var $link = $(ev.currentTarget);
         this._rpc({
             route: $link.data('href'),
@@ -368,19 +373,41 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
                     $link.parent().append($warning);
                 }
             } else {
+                $acceptAnswerLinks.removeClass('oe_answer_true')
+                                  .addClass('oe_answer_false');
                 $link.toggleClass('oe_answer_true', !!data)
                      .toggleClass('oe_answer_false', !data);
+
+                // TODO in master, review the utility of this function...
+                self._onCheckAnswerStatus(ev);
+
+                // If we are removing an accepted answer, reload the page as the
+                // design is quite different with or without an accepted answer.
+                if ($link.closest('.validate_answer').length) {
+                    window.location.reload();
+                }
             }
         });
-        this._onCheckAnswerStatus(ev);
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onRemoveValidAnswerMouse: function (ev) {
+        var hover = (ev.type === 'mouseenter');
+        $(ev.currentTarget).find('.fa')
+            .toggleClass('fa-times-circle text-danger', hover)
+            .toggleClass('fa-check-circle text-success', !hover);
     },
     /**
      * @private
      * @param {Event} ev
      */
     _onCheckAnswerStatus: function (ev) {
-        var $link = $(ev.currentTarget);
-        $link.toggleClass('text-success', !$link.hasClass('oe_answer_true'));
+        _.each(this.$('.accept_answer'), function (link) {
+            var $link = $(link);
+            $link.toggleClass('text-success', $link.hasClass('oe_answer_true'));
+        });
     },
     /**
      * @private
diff --git a/addons/website_forum/static/src/scss/website_forum.scss b/addons/website_forum/static/src/scss/website_forum.scss
index a5b0a4f1db4..59ed45536ef 100644
--- a/addons/website_forum/static/src/scss/website_forum.scss
+++ b/addons/website_forum/static/src/scss/website_forum.scss
@@ -47,16 +47,23 @@ $bronze: #eea91e;
     }
 
     .validate_answer {
-        @include o-position-absolute(0,0,0,0);
+        @include o-position-absolute(0, auto, 0, 0);
+        width: 4px;
         height: 100%;
-        .bg-success {
-            @include o-position-absolute(0,0,0,0);
-            height: 100%;
-            width: 4px;
+        z-index: 1; // On top of card content if an alert is displayed inside
+
+        > .bg-success {
+            @include o-position-absolute(0, 0, 0, 0);
         }
-        span {
-            @include o-position-absolute(10px,0,0,-9px);
+        > span {
+            @include o-position-absolute(10px, 50%);
+            transform: translateX(50%);
             font-size: 20px;
+
+            &[data-href] {
+                cursor: pointer;
+            }
+
             i {
                 padding: 2px 3px;
                 border-radius: 100%;
@@ -85,6 +92,10 @@ $bronze: #eea91e;
 
     .favourite_question {
         color: $gray-400 !important;
+
+        &.forum_favourite_question {
+            color: $gold !important;
+        }
     }
 
     .oe_grey {
@@ -186,10 +197,6 @@ img.o_forum_avatar_big {
     width: auto;
 }
 
-.forum_favourite_question {
-    color: $gold !important;
-}
-
 .o_forum_user_bio_expand {
     position: absolute;
     display: none;