[IMP] website_forum: improve forum promenade

This commit makes some slight visual changes to the forum pages, to
improve their readability:

forum index page:
----------------

In the sidebar, the title of the 'Posts' link is renamed to 'All Posts'
and the 'View all' link is aligned on the left, close to the 'Tags'
title. Links to posts already visited are lightened by 50%, making them
difficult to read. They are now lightened to 25%.

tags page:
----------

In this page, the user can choose to follow or stop following a
particular tag. Followed and unfollowed tags have a different style,
allowing the user to distinguish between them. But the style is updated
on the server side. This commit ensures that this visual update takes
place on the front-end following the user's action.

post creation page:
------------------

2 additional tips are added at the bottom of the description block: "Use
'/' to insert images, Select text to format it". Also, the option to
create a new tag is displayed last in the tag selection list, to limit
the creation of duplicate tags.

post consultation page:
----------------------

When the user accesses the page, the background of the question block is
highlighted in 'info color' for 2 seconds. The vertical/horizontal
spacing of certain elements has been reduced: between the post title and
the tag list, the favorite icon and the follow icon... View and reply
counters have been shifted to the right. The opacity of voting buttons
has been increased. The tooltip for the 'Edit your answer' button has
been removed, and the option of converting a reply into a comment has
been added inside the dropdown for additional actions.

Finally, the 'Answer' buttons are renamed 'Reply'. The button at the bottom of
the page get a 'primary color' outline. The 'fa-reply' icon is
replaced, as in this context the 'Reply' button looked more like a link
back to the previous page.

task-3859111

Part-of: odoo#163002

addons/website_forum/static/src/js/tours/website_forum.js

@@ -39,8 +39,8 @@
         auto: true,
     },
     {
-        trigger: "a:contains(\"Answer\").collapsed",
-        content: _t("Click to answer."),
+        trigger: "a:contains(\"Reply\").collapsed",
+        content: _t("Click to reply."),
         position: "bottom",
     },
     {

addons/website_forum/static/src/js/website_forum.js

@@ -18,6 +18,7 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
         'click .karma_required': '_onKarmaRequiredClick',
         'mouseenter .o_js_forum_tag_follow': '_onTagFollowBoxMouseEnter',
         'mouseleave .o_js_forum_tag_follow': '_onTagFollowBoxMouseLeave',
+        "click .o_js_forum_tag_follow": "_onTagFollowClick",
         'mouseenter .o_forum_user_info': '_onUserInfoMouseEnter',
         'mouseleave .o_forum_user_info': '_onUserInfoMouseLeave',
         'mouseleave .o_forum_user_bio_expand': '_onUserBioExpandMouseLeave',
@@ -78,6 +79,7 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
                     }
                 }
             },
+            createSearchChoicePosition: "bottom",
             formatResult: function (term) {
                 if (term.isNew) {
                     return '<span class="badge bg-primary">New</span> ' + escape(term.text);
@@ -303,6 +305,16 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
     _onTagFollowBoxMouseLeave: function (ev) {
         $(ev.currentTarget).find('.o_forum_tag_follow_box').stop().fadeOut().css('display', 'none');
     },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onTagFollowClick: function (ev) {
+        const closestBtn = ev.target.closest("button");
+        if (closestBtn) {
+            ev.currentTarget.querySelector(".o_js_forum_tag_link").classList.toggle("text-muted");
+        }
+    },
     /**
      * @private
      * @param {Event} ev

addons/website_forum/static/src/scss/website_forum.scss

@@ -77,7 +77,7 @@ $-forum-sidebar-width: map-get($container-max-widths, sm) / 2;
     }
 
     .o_wforum_index_entry_title a:visited span {
-        color:  lighten($body-color, 50%);
+        color:  lighten($body-color, 25%);
     }
 
     .btn[aria-expanded="true"] {
@@ -115,7 +115,7 @@ $-forum-sidebar-width: map-get($container-max-widths, sm) / 2;
             max-height: 100%;
 
             &.o_expand {
-                .o_wforum_expand_toggle {
+                .o_wforum_expand_toggle::before {
                     content:'\f066';
                 }
 
@@ -168,8 +168,25 @@ $-forum-sidebar-width: map-get($container-max-widths, sm) / 2;
         }
     }
 
-    textarea.o_wysiwyg_loader + .note-editor {
-        border: 0;
+    textarea.o_wysiwyg_loader {
+        // Prevent background display inside the wysiwyg loader
+        background: none !important;
+        + .note-editor {
+            border: 0;
+        }
+    }
+
+    .o_wforum_question > .post_content_wrapper {
+        animation: fade-out-background-color 2s ease-in-out;
+    }
+
+    @keyframes fade-out-background-color {
+        0% {
+            background-color: $info;
+        }
+        100% {
+            background-color: transparent;
+        }
     }
 
     .o_wforum_answer {

addons/website_forum/static/tests/tours/website_forum_question.js

@@ -37,8 +37,8 @@ registry.category("web_tour.tours").add('forum_question', {
         trigger: ".modal-header button.btn-close",
     },
     {
-        trigger: "a:contains(\"Answer\").collapsed",
-        content: "Click to answer.",
+        trigger: "a:contains(\"Reply\").collapsed",
+        content: "Click to reply.",
         position: "bottom",
     },
     {

addons/website_forum/views/forum_forum_templates.xml

@@ -93,7 +93,22 @@
                     <textarea name="content" required="required" id="content" class="form-control o_wysiwyg_loader" t-att-data-karma="forum.karma_editor">
                         <t t-out="question_content"/>
                     </textarea>
-                    <span class="form-text d-inline small text-muted"><i class="fa fa-lightbulb-o"></i> Tip: consider adding an example. </span>
+                    <div class="d-flex">
+                        <span class="form-text small text-muted me-1"><i class="fa fa-lightbulb-o"></i> Tip:</span>
+                        <div class="carousel slide" data-bs-ride="carousel">
+                            <div class="carousel-inner">
+                                <div class="carousel-item active">
+                                    <span class="form-text small text-muted d-block">consider adding an example.</span>
+                                </div>
+                                <div class="carousel-item">
+                                    <span class="form-text small text-muted d-block">use '/' to insert images.</span>
+                                </div>
+                                <div class="carousel-item">
+                                    <span class="form-text small text-muted d-block">select text to format it.</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="row mb-2">
@@ -167,7 +182,22 @@
                 <label t-else="" class="form-label col-lg-2">Your Answer</label>
                 <div class="col">
                     <textarea name="content" id="content" required="required" class="form-control o_wysiwyg_loader" t-att-data-karma="forum.karma_editor" t-out="post.content"/>
-                    <span t-if="not is_answer" class="form-text d-inline small text-muted"><i class="fa fa-lightbulb-o"/> Tip: consider adding an example. </span>
+                    <div t-if="not is_answer" class="d-flex mb-2">
+                        <span class="form-text small text-muted me-1"><i class="fa fa-lightbulb-o"></i> Tip:</span>
+                        <div class="carousel slide" data-bs-ride="carousel">
+                            <div class="carousel-inner">
+                                <div class="carousel-item active">
+                                    <span class="form-text small text-muted d-block">consider adding an example.</span>
+                                </div>
+                                <div class="carousel-item">
+                                    <span class="form-text small text-muted d-block">use '/' to insert images.</span>
+                                </div>
+                                <div class="carousel-item">
+                                    <span class="form-text small text-muted d-block">select text to format it.</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <input type="hidden" name="karma" t-att-value="user.karma" id="karma"/>
@@ -234,8 +264,9 @@
                         <t t-set="icons_design" t-value="True"/>
                         <t t-set="div_class" t-value="'d-inline'"/>
                         <t t-set="btn_classes" t-value="'px-2'"/>
+                        <t t-set="follow_btn_classes" t-value="'opacity-50'"/>
                     </t>
-                    <a t-attf-class="#{ 'disabled' if len(tag.post_ids) == 0  else '' } btn-link #{ 'text-dark fw-bold' if tag.message_is_follower else '' }"
+                    <a t-attf-class="#{ 'disabled' if len(tag.post_ids) == 0  else '' } o_js_forum_tag_link btn-link #{ '' if tag.message_is_follower else 'text-muted' }"
                        t-attf-href="/forum/#{ slug(forum) }/tag/#{ slug(tag) }/questions?#{ keep_query(filters='tag') }">
                         <t t-out="tag.name"/>&amp;nbsp;
                         <span class="small">(<t t-out="tag.posts_count"/>)</span>

addons/website_forum/views/forum_forum_templates_layout.xml

@@ -51,7 +51,7 @@
                         </span>
                         <a t-elif="uid" type="button" aria-label="Favorite"
                             t-attf-data-href="/forum/#{slug(question.forum_id)}/question/#{slug(question)}/toggle_favourite"
-                            t-attf-class="o_wforum_favourite_toggle btn btn-lg #{ 'opacity-50' if not question.user_favourite else '' } opacity-hover-100 px-1">
+                            t-attf-class="o_wforum_favourite_toggle btn btn-lg #{ 'opacity-50' if not question.user_favourite else '' } opacity-hover-100 p-0">
                             <i t-attf-class="position-relative fa #{'o_wforum_gold fa-star ' if question.user_favourite else 'fa-star-o '}"
                                 data-bs-toggle="tooltip"
                                 data-bs-placement="top"
@@ -60,7 +60,7 @@
                         <t t-if="question.state == 'active'" t-call="website_forum.follow">
                             <t t-set="object" t-value="question"/>
                             <t t-set="icons_design" t-value="True"/>
-                            <t t-set="btn_classes" t-value="'btn-lg opacity-50 opacity-100-hover' "/>
+                            <t t-set="btn_classes" t-value="'opacity-50 opacity-100-hover' "/>
                         </t>
                     </div>
                 </div>
@@ -287,7 +287,7 @@
         <t t-set="location" t-valuef="#{ _forum_path }#{ ('/tag/' + slug(tag) + '/questions') if (tag and not tags) else '' }?"/>
         <!-- All Posts -->
         <a t-attf-class="nav-link my-1 py-1 #{ 'rounded text-bg-light disabled' if request.httprequest.path ==  _forum_path and no_filters and not any([my, queue_type, tags]) else 'text-reset' }" t-att-href="location">
-            <i t-attf-class="fa fa-list fa-fw #{ 'opacity-50' if request.httprequest.path != _forum_path or my or queue_type else '' }"/> Posts
+            <i t-attf-class="fa fa-list fa-fw #{ 'opacity-50' if request.httprequest.path != _forum_path or my or queue_type else '' }"/> All Posts
         </a>
         <t t-if="uid">
             <!-- My Posts -->
@@ -327,8 +327,8 @@
     </div>
     <div t-if="forum and forum.tag_most_used_ids" class="o_wforum_sidebar_section pt-3">
         <div class="d-flex align-items-center px-3 pb-1 fw-bold">Tags
-            <a class="ms-auto px-0 fw-normal" t-att-href="_forum_path + '/tag'">
-                <small>View all</small>
+            <a class="ms-2 px-0 fw-normal" t-att-href="_forum_path + '/tag'">
+                <small>(View all)</small>
             </a>
         </div>
         <a t-foreach="forum.tag_most_used_ids" t-as="tag"

addons/website_forum/views/forum_forum_templates_post.xml

@@ -162,7 +162,13 @@
 </template>
 
 <template id="post_stats">
-    <div class="d-flex">
+    <div t-if="question.tag_ids" class="o_wforum_index_entry_tags ms-0">
+        <a  t-foreach="question.tag_ids" t-as="question_tag"
+            t-attf-href="/forum/#{slug(question_tag.forum_id)}/tag/#{slug(question_tag)}/questions?#{keep_query(filters='tag')}"
+            t-attf-class="badge text-bg-secondary #{'ms-1' if not question_tag_first else ''} fw-normal"
+            t-field="question_tag.name"/>
+    </div>
+    <div class="ms-auto d-flex">
         <div>
             <span t-if="question.child_count" class="small">
                 <t t-out="question.child_count or 0"/>
@@ -172,7 +178,7 @@
                 </span>
             </span>
         </div>
-        <div class="ms-3">
+        <div class="mx-3">
             <span t-if="question.views" class="small">
                 <t t-out="question.views or 0"/>
                 <span class="text-muted">
@@ -182,12 +188,6 @@
             </span>
         </div>
     </div>
-    <div t-if="question.tag_ids" class="o_wforum_index_entry_tags ms-3">
-        <a t-foreach="question.tag_ids" t-as="question_tag"
-            t-attf-href="/forum/#{slug(question_tag.forum_id)}/tag/#{slug(question_tag)}/questions?#{keep_query(filters='tag')}"
-            t-attf-class="badge text-bg-secondary #{'ms-1' if not question_tag_first else ''} fw-normal"
-            t-field="question_tag.name"/>
-    </div>
 </template>
 
 <!-- Specific Post Layout -->
@@ -265,12 +265,12 @@
                 </section>
                 <!-- Write Answer -->
                 <div t-if="uid and not question.uid_has_answered and question.can_answer and question.state == 'active' and question.active != False" class="d-flex mt-3">
-                    <a t-attf-class="btn btn-link collapsed #{ 'karma_required text-muted' if not question.can_answer else '' }#{ ' disabled' if forum.has_pending_post else ''} text-decoration-none"
+                    <a t-attf-class="btn btn-outline-primary collapsed #{ 'karma_required text-muted' if not question.can_answer else '' }#{ ' disabled' if forum.has_pending_post else ''} text-decoration-none"
                         t-att-data-karma="question.forum_id.karma_answer"
                         data-bs-toggle="collapse"
                         data-bs-target=".answer_collapse"
                         href="#">
-                        <i class="fa fa-reply me-1"/>Answer
+                        <i class="fa fa-reply me-1"/>Reply
                     </a>
                 </div>
                 <t t-if="question.state != 'close' and question.active != False and question.can_answer and forum">
@@ -307,14 +307,14 @@
         t-attf-data-id="#{post_type}-#{post_id.id}"
         t-attf-id="#{post_type}-#{post_id.id}"
         t-att-data-state="post_id.state">
-            <div class="d-flex flex-column col-auto pe-2 pe-lg-3">
+            <div class="d-flex flex-column col-auto">
                 <t t-call="website_forum.author_box">
                     <t t-set="object" t-value="post_id"/>
                     <t t-set="show_image" t-value="True"/>
                 </t>
                 <div t-attf-class="align-self-center flex-grow-1 mt-2 border-start opacity-50 #{ 'border-success' if post_id.is_correct else '' }"/>
             </div>
-            <div class="post_content_wrapper col">
+            <div t-attf-class="post_content_wrapper col ps-2 ps-lg-3 #{ 'rounded' if post_type == 'question' else '' }">
                 <header class="o_wforum_post_header d-flex align-items-center mb-1">
                     <t t-call="website_forum.author_box">
                         <t t-set="object" t-value="post_id"/>
@@ -385,44 +385,38 @@
                     <div class="d-flex align-items-center ms-auto">
                         <t t-if="post_id == question">
                             <t t-set="user_answer" t-value="uid and post_id.child_ids.filtered(lambda a: a.create_uid.id == uid)"/>
-                            <div t-if="not user_answer and uid and question.can_answer and question.state == 'active' and question.active != False" class="d-flex ms-auto me-2">
-                                <a t-attf-class="btn btn-link collapsed #{ 'karma_required text-muted' if not question.can_answer else '' }#{ 'disabled' if forum.has_pending_post else '' } text-decoration-none"
+                            <div t-if="not user_answer and uid and question.can_answer and question.state == 'active' and question.active != False" class="d-flex ms-auto">
+                                <a t-attf-class="btn opacity-50 opacity-100-hover collapsed #{ 'karma_required text-muted' if not question.can_answer else '' }#{ 'disabled' if forum.has_pending_post else '' } text-decoration-none"
                                     t-att-data-karma="question.forum_id.karma_answer"
                                     data-bs-toggle="collapse" data-bs-target=".answer_collapse"
                                     href="#"
                                 >
-                                    <i class="fa fa-reply me-1"/>Answer
+                                    <i class="fa fa-reply me-1"/>Reply
                                 </a>
                             </div>
                             <a t-if="user_answer" class="btn btn-sm btn-primary"
-                                t-att-title="question.forum_id.mode == 'questions' and edit_answer_title"
-                                data-bs-toggle="tooltip" data-bs-placement="top"
                                 t-attf-href="#answer-#{user_answer.id}"
                             >
                                 View my answer <i class="oi oi-arrow-right ms-1"/>
                             </a>
                         </t>
                         <div class="d-flex ms-auto me-2" t-if="post_id == answer and post_id.create_uid.id == uid">
-                            <t t-set="edit_answer_title">You are only allowed one answer</t>
-
                             <a class="btn btn-sm btn-outline-primary"
-                                t-att-title="question.forum_id.mode == 'questions' and edit_answer_title"
-                                data-bs-toggle="tooltip" data-bs-placement="top"
                                 t-attf-href="/forum/#{slug(forum)}/question/#{slug(question)}/edit_answer">
                                 <i class="fa fa-pencil"/>
                                 Edit<span class="d-none d-lg-inline"> your answer</span>
                             </a>
                         </div>
                         <t t-if="post_id.state == 'active' and post_id.active != False">
-                            <a t-attf-class="btn #{ 'd-none ' if not uid else '' }#{'karma_required opacity-25' if not post_id.can_comment else 'opacity-50 opacity-100-hover'}"
+                            <a t-attf-class="btn px-2 #{ 'd-none ' if not uid else '' }#{'karma_required opacity-25' if not post_id.can_comment else 'opacity-50 opacity-100-hover'}"
                                t-att-data-karma="{post_id.karma_comment if not post_id.can_comment else 0}"
                                t-att-data-bs-toggle="'collapse' if post_id.can_comment else None"
                                t-attf-href="##{ _answer_comment_collapse_uid if post_id == answer else _question_comment_collapse_uid}"
                             >
                                 <i t-attf-class="fa fa-comment #{ 'karma_required' if not post_id.can_comment else ''}" title="Comment" data-bs-toggle="tooltip" data-bs-placement="top" />
                             </a>
                             <div class="dropdown">
-                                <a type="button" class="btn opacity-50 opacity-100-hover" data-bs-toggle="dropdown">
+                                <a type="button" class="btn opacity-50 opacity-100-hover px-2" data-bs-toggle="dropdown">
                                     <i class="fa fa-share-alt" data-bs-toggle="tooltip" data-bs-placement="top" title="Share"/>
                                 </a>
                                 <div class="dropdown-menu css_editable_mode_hidden">
@@ -458,7 +452,7 @@
 </template>
 
 <template id="post_dropdown">
-    <a class="btn opacity-50 opacity-100-hover" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <a class="btn opacity-50 opacity-100-hover px-2" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <i class="fa fa-ellipsis-h"  data-bs-toggle="tooltip" data-bs-placement="top" title="More"/>
     </a>
     <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuLink">
@@ -501,6 +495,13 @@
                 <t t-set="karma" t-value="post_id.forum_id.karma_moderate if not post_id.can_moderate else 0"/>
             </t>
         </t>
+        <t t-else="" t-call="website_forum.link_button">
+            <t t-set="url" t-valuef="/forum/#{slug(forum)}/post/#{slug(post_id)}/convert_to_comment"/>
+            <t t-set="label">Convert to Comment</t>
+            <t t-set="inDropdown" t-value="True"/>
+            <t t-set="icon" t-valuef="fa-comment fa-fw"/>
+            <t t-set="karma" t-value="post_id.karma_comment_convert if not post_id.can_comment_convert else 0"/>
+        </t>
         <t t-if="post_id.active" t-call="website_forum.link_button">
             <t t-set="url" t-value="'/forum/' + slug(forum) +'/question/' + slug(post_id) + '/delete'"/>
             <t t-set="label">Delete</t>