From 830395e49ae65cf95d9f15d0857fe93b7339decd Mon Sep 17 00:00:00 2001
From: "Tiffany Chang (tic)" <tic@odoo.com>
Date: Mon, 23 Dec 2019 16:21:45 +0000
Subject: [PATCH] [IMP] website_slides,portal_rating: update UX

Minor updates to improve user useability of website_slides primarily with
clearer wording and more intuitive displays/display interactions. Primary
purpose is for onboarding wow.

Related to:

closes odoo/odoo#42030

Task: 2070662
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
---
 .../static/src/xml/portal_rating_composer.xml |  3 ---
 addons/website_forum/views/forum.xml          | 16 +++++++-----
 .../static/src/scss/website_profile.scss      | 10 ++++---
 addons/website_slides/models/slide_channel.py |  2 +-
 .../src/js/slides_course_fullscreen_player.js | 17 +++++++-----
 .../static/src/scss/website_slides.scss       | 11 +++++---
 .../views/slide_channel_views.xml             |  2 ++
 .../views/website_slides_templates_course.xml | 26 +++++++++----------
 .../website_slides_templates_homepage.xml     |  2 +-
 ...ite_slides_templates_lesson_fullscreen.xml |  4 +--
 .../models/slide_channel.py                   |  2 +-
 .../views/forum_views.xml                     |  2 +-
 .../views/website_slides_forum_templates.xml  |  8 +++---
 .../views/website_slides_templates.xml        |  4 +--
 14 files changed, 60 insertions(+), 49 deletions(-)

diff --git a/addons/portal_rating/static/src/xml/portal_rating_composer.xml b/addons/portal_rating/static/src/xml/portal_rating_composer.xml
index e4f58c3ec81..af6f022e04b 100644
--- a/addons/portal_rating/static/src/xml/portal_rating_composer.xml
+++ b/addons/portal_rating/static/src/xml/portal_rating_composer.xml
@@ -11,9 +11,6 @@
                     <t t-set="val" t-value="widget.rating_avg || 0"/>
                     <t t-set="inline_mode" t-value="true"/>
                 </t>
-                <t t-if="widget.rating_total">
-                   <small>(<t t-esc="widget.rating_total"/> ratings)</small>
-                </t>
             </div>
             <button t-if="widget.options['display_composer']" type="button" class="btn btn-sm btn-primary mx-3" data-toggle="modal" data-target="#ratingpopupcomposer">
                 <t t-if="widget.options['display_composer']">
diff --git a/addons/website_forum/views/forum.xml b/addons/website_forum/views/forum.xml
index 5f093d909c7..ea0889cd5b3 100644
--- a/addons/website_forum/views/forum.xml
+++ b/addons/website_forum/views/forum.xml
@@ -47,13 +47,15 @@
                         </group>
                         <notebook>
                             <page name="options" string="Options">
-                              <group string="Order" name="group_order">
-                                <field name="default_order"/>
-                                <label for="relevancy_post_vote" string="Relevance Computation" groups="base.group_no_one" attrs="{'invisible':[('default_order','!=','relevancy desc')]}"/>
-                                <div groups="base.group_no_one" class="o_row" attrs="{'invisible':[('default_order','!=','relevancy desc')]}">
-                                    (votes - 1) ** <field name="relevancy_post_vote"/> / (days + 2) ** <field name="relevancy_time_decay"/>
-                                </div>
-                              </group>
+                                <group>
+                                    <group string="Order" name="group_order">
+                                        <field name="default_order"/>
+                                        <label for="relevancy_post_vote" string="Relevance Computation" groups="base.group_no_one" attrs="{'invisible':[('default_order','!=','relevancy desc')]}"/>
+                                        <div groups="base.group_no_one" class="o_row" attrs="{'invisible':[('default_order','!=','relevancy desc')]}">
+                                            (votes - 1) ** <field name="relevancy_post_vote"/> / (days + 2) ** <field name="relevancy_time_decay"/>
+                                        </div>
+                                    </group>
+                                </group>
                             </page>
                             <page name="karma_gains" string="Karma Gains">
                                 <group name="karma_gain_details">
diff --git a/addons/website_profile/static/src/scss/website_profile.scss b/addons/website_profile/static/src/scss/website_profile.scss
index 60a47bc7bc8..15bde7dd4dd 100644
--- a/addons/website_profile/static/src/scss/website_profile.scss
+++ b/addons/website_profile/static/src/scss/website_profile.scss
@@ -56,9 +56,13 @@ $owprofile-color-bg: mix($body-bg, #efeff4);
             line-height: $line-height-base;
             @include o-hover-text-color(rgba(white, 0.8), white);
 
-            &, &:hover {
-                border-color: #875A7B;
-                background: transparent;
+            & {
+                border-color: transparent;
+            }
+    
+            &:hover {
+                border-color: transparent;
+                background: #3d2938;
             }
 
             &.active {
diff --git a/addons/website_slides/models/slide_channel.py b/addons/website_slides/models/slide_channel.py
index b46df1f68e1..fe5d298e5eb 100644
--- a/addons/website_slides/models/slide_channel.py
+++ b/addons/website_slides/models/slide_channel.py
@@ -74,7 +74,7 @@ class ChannelUsersRelation(models.Model):
 class Channel(models.Model):
     """ A channel is a container of slides. """
     _name = 'slide.channel'
-    _description = 'Slide Channel'
+    _description = 'Course'
     _inherit = [
         'mail.thread', 'rating.mixin',
         'image.mixin',
diff --git a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
index ef317465bbc..152916ce436 100644
--- a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
+++ b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
@@ -441,9 +441,7 @@ odoo.define('website_slides.fullscreen', function (require) {
         start: function (){
             var self = this;
             this.on('change:slide', this, this._onChangeSlide);
-            if  (config.device.size_class > config.device.SIZES.MD) {
-                this._toggleSidebar();
-            }
+            this._toggleSidebar();
             return this._super.apply(this, arguments).then(function () {
                 return self._onChangeSlide(); // trigger manually once DOM ready, since slide content is not rendered server side
             });
@@ -605,10 +603,12 @@ odoo.define('website_slides.fullscreen', function (require) {
         // Handlers
         //--------------------------------------------------------------------------
         /**
-         * Method called whenever the user changes slides.
-         * When the current slide is changed, it will autoimatically update the widget
-         * and allow it to fetch the content if needs be, render it, update the url and set the
-         * slide as "completed" if its type makes it necessary
+         * Triggered whenever the user changes slides.
+         * When the current slide is changed, widget will be automatically updated
+         * and allowed to: fetch the content if needed, render it, update the url,
+         * and set slide as "completed" according to its type requirements. In
+         * mobile case (i.e. limited screensize), sidebar will be toggled since 
+         * sidebar will block most or all of new slide visibility.
          *
          * @private
          */
@@ -619,6 +619,9 @@ odoo.define('website_slides.fullscreen', function (require) {
             return this._fetchSlideContent().then(function() { // render content
                 var websiteName = document.title.split(" | ")[1]; // get the website name from title
                 document.title =  (websiteName) ? slide.name + ' | ' + websiteName : slide.name;
+                if  (config.device.size_class < config.device.SIZES.MD) {
+                    self._toggleSidebar(); // hide sidebar when small device screen
+                }
                 return self._renderSlide();
             }).then(function() {
                 if (slide._autoSetDone && !session.is_website_user) {  // no useless RPC call
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 9f393d85124..b6a87ef61ca 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -210,7 +210,7 @@ $o-wslides-fs-side-width: 300px;
 }
 
 @mixin o-wslides-tabs($tab-active-color: $o-wslides-color-bg) {
-    margin-top: ($o-wslides-tabs-height * -1) + 0.05rem;
+    margin-top: ($o-wslides-tabs-height * -1);
     border-bottom: 0;
 
     .nav-link {
@@ -219,9 +219,12 @@ $o-wslides-fs-side-width: 300px;
         line-height: $line-height-base;
         @include o-hover-text-color(rgba(white, 0.8), white);
 
-        &, &:hover {
-            border-color: #875A7B;
-            background: transparent;
+        & {
+            border-color: transparent;
+        }
+
+        &:hover {
+            background: #3d2938;
         }
 
         &.active {
diff --git a/addons/website_slides/views/slide_channel_views.xml b/addons/website_slides/views/slide_channel_views.xml
index fba36295292..a0922b398fe 100644
--- a/addons/website_slides/views/slide_channel_views.xml
+++ b/addons/website_slides/views/slide_channel_views.xml
@@ -68,6 +68,8 @@
                                         <field name="slide_type" attrs="{'invisible': [('slide_type', '=', 'category')]}"/>
                                         <field name="completion_time" attrs="{'invisible': [('slide_type', '=', 'category')]}" string="Duration" widget="float_time"/>
                                         <field name="total_views" attrs="{'invisible': [('slide_type', '=', 'category')]}"/>
+                                        <field name="is_preview" string="Preview"/>
+                                        <field name="is_published" string="Published"/>
                                         <field name="is_category" invisible="1"/>
                                         <control>
                                             <create name="add_slide_section" string="Add Section" context="{'default_is_category': True}"/>
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index 32a439fef0e..4f3df6fcb86 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -175,18 +175,18 @@
                         <!-- Training Content -->
                         <div class="col-12 col-md-8 col-lg-9">
                             <ul class="nav nav-tabs o_wslides_nav_tabs flex-nowrap" role="tablist" id="profile_extra_info_tablist">
-                                <li class="nav-item o_wslides_course_header_nav_home_training">
-                                    <a t-att-class="'nav-link %s' % ('active' if active_tab == 'home' else '')" 
-                                        id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="home" 
+                                <li class="nav-item">
+                                    <a t-att-class="'nav-link %s' % ('active' if active_tab == 'home' else '')"
+                                        id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="home"
                                         t-att-aria-selected="'true' if active_tab == 'home' else 'false'">
                                         <i class="fa fa-home"/> Course
                                     </a>
                                 </li>
-                                <li t-if="channel.allow_comment" class="nav-item">
-                                    <a t-att-class="'nav-link %s' % ('active' if active_tab == 'review' else '')" 
-                                        id="review-tab" data-toggle="pill" href="#review" role="tab" aria-controls="review" 
+                                <li t-if="channel.allow_comment" class="nav-item o_wslides_course_header_nav_review_training">
+                                    <a t-att-class="'nav-link %s' % ('active' if active_tab == 'review' else '')"
+                                        id="review-tab" data-toggle="pill" href="#review" role="tab" aria-controls="review"
                                         t-att-aria-selected="'true' if active_tab == 'review' else 'false'">
-                                        Review
+                                        Reviews<t t-if="rating_count"> (<t t-esc="rating_count"/>)</t>
                                     </a>
                                 </li>
                             </ul>
@@ -215,7 +215,7 @@
                         <div class="row">
                             <div class="col-12 col-md-8 offset-md-4 col-lg-9 offset-lg-3">
                                 <ul class="nav nav-tabs o_wslides_nav_tabs o_wslides_doc_nav_tabs flex-nowrap" role="tablist" id="profile_extra_info_tablist">
-                                    <li class="nav-item o_wslides_course_header_nav_home_documentation">
+                                    <li class="nav-item">
                                         <a t-att-class="'nav-link %s' % ('active' if active_tab == 'home' else '')"
                                             id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="home"
                                             t-att-aria-selected="'true' if active_tab == 'home' else 'false'">
@@ -223,11 +223,11 @@
                                             Course
                                         </a>
                                     </li>
-                                    <li t-if="channel.allow_comment" class="nav-item">
+                                    <li t-if="channel.allow_comment" class="nav-item o_wslides_course_header_nav_review_documentation">
                                         <a t-att-class="'nav-link %s' % ('active' if active_tab == 'review' else '')"
                                             id="review-tab" data-toggle="pill" href="#review" role="tab" aria-controls="review"
                                             t-att-aria-selected="'true' if active_tab == 'review' else 'false'">
-                                            Review
+                                            Reviews<t t-if="rating_count"> (<t t-esc="rating_count"/>)</t>
                                         </a>
                                     </li>
                                 </ul>
@@ -420,6 +420,9 @@
         </div>
 
         <div class="d-flex flex-row">
+            <a name="o_wslides_list_slide_add_quizz" t-if="channel.can_upload and not slide.question_ids" t-attf-href="/slides/slide/#{slug(slide)}?quiz_quick_create">
+                <span class="badge badge-light badge-hide border font-weight-normal px-2 py-1 m-1"><i class="fa fa-plus mr-1"/>Add Quiz</span>
+            </a>
             <a t-if="channel.can_upload" href="#">
                 <span t-att-data-slide-id="slide.id" t-attf-class="o_wslides_js_slide_toggle_is_preview badge #{'badge-success py-1' if slide.is_preview else 'badge-light badge-hide border'} font-weight-normal px-2 m-1">Free preview</span>
             </a>
@@ -431,9 +434,6 @@
                 <i t-attf-class="fa fa-fw #{'fa-check' if channel_progress[slide.id].get('completed') else 'fa-flag'}"/>
                 <t t-esc="channel_progress[slide.id].get('quiz_karma_won', 0) if channel_progress[slide.id].get('completed') else channel_progress[slide.id].get('quiz_karma_gain', 0)"/> xp
             </span>
-            <a name="o_wslides_list_slide_add_quizz" t-if="channel.can_upload and not slide.question_ids" t-attf-href="/slides/slide/#{slug(slide)}?quiz_quick_create">
-                <span class="badge badge-light badge-hide border font-weight-normal px-2 py-1 m-1"><i class="fa fa-plus mr-1"/>Add Quiz</span>
-            </a>
             <span class="badge badge-danger font-weight-normal px-2 py-1 m-1" t-if="not slide.website_published">Unpublished</span>
         </div>
 
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index 212e41b3d3c..cdb9fe3a6ee 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -121,7 +121,7 @@
                                     <div class="col-12 col-sm-6 col-lg-12 d-flex align-items-center">
                                         <t t-call="website_slides.slides_home_user_achievements_small"/>
                                     </div>
-                                    <div class="col-12 col-md-7 col-lg-12 pl-md-5 pl-lg-0 mt-lg-4">
+                                    <div class="col-12 col-md-7 col-lg-12 pl-md-5 pl-lg-0 mt-lg-4 mb-3">
                                         <t t-call="website_slides.slides_home_achievements_small"/>
                                     </div>
                                     <div class="col-12 col-sm-6 col-lg-12 pl-md-5 pl-lg-0 mt-lg-4">
diff --git a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
index 715c6237e6f..1eb17f650a2 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
@@ -26,10 +26,10 @@
                 </div>
                 <div class="d-flex ml-auto">
                     <a class="d-flex align-items-center px-3 o_wslides_fs_exit_fullscreen" t-attf-href="/slides/slide/#{slug(slide)}">
-                        <i class="fa fa-sign-out d-md-none"/><span class="d-none d-md-inline-block ml-1">Exit Fullscreen</span>
+                        <i class="fa fa-sign-out"/><span class="d-none d-md-inline-block ml-1">Exit Fullscreen</span>
                     </a>
                     <a class="d-flex align-items-center px-3" t-attf-href="/slides/#{slug(slide.channel_id)}">
-                        <i class="fa fa-home d-md-none"/><span class="d-none d-md-inline-block ml-1">Back to course</span>
+                        <i class="fa fa-home"/><span class="d-none d-md-inline-block ml-1">Back to course</span>
                     </a>
                 </div>
             </div>
diff --git a/addons/website_slides_forum/models/slide_channel.py b/addons/website_slides_forum/models/slide_channel.py
index fd8a23d142a..3406ed95ee6 100644
--- a/addons/website_slides_forum/models/slide_channel.py
+++ b/addons/website_slides_forum/models/slide_channel.py
@@ -11,7 +11,7 @@ class Channel(models.Model):
     forum_total_posts = fields.Integer('Number of active forum posts', related="forum_id.total_posts")
 
     _sql_constraints = [
-        ('forum_uniq', 'unique (forum_id)', "Only one forum per slide channel!"),
+        ('forum_uniq', 'unique (forum_id)', "Only one course per forum!"),
     ]
 
     def action_redirect_to_forum(self):
diff --git a/addons/website_slides_forum/views/forum_views.xml b/addons/website_slides_forum/views/forum_views.xml
index 216e473d524..08c05b7bba5 100644
--- a/addons/website_slides_forum/views/forum_views.xml
+++ b/addons/website_slides_forum/views/forum_views.xml
@@ -51,4 +51,4 @@
         <field name="view_id" ref="forum_post_view_graph_slides"/>
         <field name="domain">[('forum_id.slide_channel_ids', '!=', 'False')]</field>
     </record>
-</odoo>
\ No newline at end of file
+</odoo>
diff --git a/addons/website_slides_forum/views/website_slides_forum_templates.xml b/addons/website_slides_forum/views/website_slides_forum_templates.xml
index 3569a76f359..0275835ab2a 100644
--- a/addons/website_slides_forum/views/website_slides_forum_templates.xml
+++ b/addons/website_slides_forum/views/website_slides_forum_templates.xml
@@ -11,15 +11,15 @@
                                     t-att-class="'nav-link o_wprofile_navlink'" style="border-left: 0px">
                                     <i class="fa fa-home"/> Course</a>
                             </li>
-                            <li class="nav-item">
-                                <a t-att-href="'/forum/%s' % (slug(forum))" t-att-class="'nav-link active o_wprofile_navlink'" style="border-left: 0px">Forum</a>
-                            </li>
                             <li t-if="forum.slide_channel_id.allow_comment" class="nav-item">
                                 <a t-att-href="'/slides/%s?active_tab=review' % (slug(forum.slide_channel_id))"
                                     t-att-class="'nav-link o_wprofile_navlink'" style="border-left: 0px">
-                                    Review
+                                    Reviews<t t-if="forum.slide_channel_id.rating_count"> (<t t-esc="forum.slide_channel_id.rating_count"/>)</t>
                                 </a>
                             </li>
+                            <li class="nav-item">
+                                <a t-att-href="'/forum/%s' % (slug(forum))" t-att-class="'nav-link active o_wprofile_navlink'" style="border-left: 0px">Forum</a>
+                            </li>
                         </ul>
                     </div>
                 </div>
diff --git a/addons/website_slides_forum/views/website_slides_templates.xml b/addons/website_slides_forum/views/website_slides_templates.xml
index 93c5f9809a9..ea17a3b88b2 100644
--- a/addons/website_slides_forum/views/website_slides_templates.xml
+++ b/addons/website_slides_forum/views/website_slides_templates.xml
@@ -2,14 +2,14 @@
 <odoo><data>
     <template id='course_main' inherit_id="website_slides.course_main">
     <!-- Channel (training) main template: add link to forum -->
-    <xpath expr="//li[hasclass('o_wslides_course_header_nav_home_training')]" position="after">
+    <xpath expr="//li[hasclass('o_wslides_course_header_nav_review_training')]" position="after">
         <li class="nav-item" t-if="channel.forum_id">
             <a t-att-href="'/forum/%s' % (slug(channel.forum_id))"
                 t-att-class="'nav-link'" target="new">Forum</a>
         </li>
     </xpath>
     <!-- Channel (documentation) main template: add link to forum -->
-    <xpath expr="//li[hasclass('o_wslides_course_header_nav_home_documentation')]" position="after">
+    <xpath expr="//li[hasclass('o_wslides_course_header_nav_review_documentation')]" position="after">
             <li class="nav-item" t-if="channel.forum_id">
                 <a t-att-href="'/forum/%s' % (slug(channel.forum_id))"
                     t-att-class="'nav-link'" target="new">Forum</a>