[MERGE] forward port branch saas-12.3 up to 752b2553c6f

3 files changed, 52 insertions, 15 deletions

diff --git a/addons/website_forum/static/src/js/website_forum.js b/addons/website_forum/static/src/js/website_forum.js
index 43768144f82..f80ef36009c 100644
--- a/addons/website_forum/static/src/js/website_forum.js
+++ b/addons/website_forum/static/src/js/website_forum.js
@@ -25,6 +25,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',
@@ -355,6 +358,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'),
@@ -373,19 +378,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 018bf679e8a..cae56912df5 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;
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index f971c068f8e..95c1b46df41 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -846,7 +846,10 @@
         <div class="card-body">
             <div t-if="answer.is_correct" class="validate_answer">
                 <div class="bg-success"></div>
-                <span title="Question has accepted answer" role="img" aria-label="Question has accepted answer"><i class="fa fa-check-circle text-success bg-white"/></span>
+                <span title="Question has accepted answer" role="img" aria-label="Question has accepted answer"
+                      t-attf-data-href="/forum/#{slug(question.forum_id)}/post/#{slug(answer)}/toggle_correct">
+                    <i class="fa fa-check-circle text-success bg-white"/>
+                </span>
             </div>
             <div class="row">
                 <div class="col-1">