[IMP] website, website_link: improve frontend config screens

Following things are done in this commit:
1. changed some labeling and string for more readable and helpful to the user
2. added extra width to the text box
3. added publish/unpublish option for mobile view.
4. track page option auto-activated for any new page,event,job offer,course,
   blog.

task-2088546
closes #40085

Co-authored-by: jpr-odoo <jpr@openerp.com>

12 files changed, 57 insertions, 33 deletions

diff --git a/addons/website/models/website.py b/addons/website/models/website.py
index e99e0fd4e82..789b43708d4 100644
--- a/addons/website/models/website.py
+++ b/addons/website/models/website.py
@@ -303,6 +303,7 @@ class Website(models.Model):
                 'url': page_url,
                 'website_id': website.id,  # remove it if only one website or not?
                 'view_id': view.id,
+                'track': True,
             })
             result['view_id'] = view.id
         if add_menu:
diff --git a/addons/website/static/src/js/menu/new_content.js b/addons/website/static/src/js/menu/new_content.js
index 50d46e81221..918a840561d 100644
--- a/addons/website/static/src/js/menu/new_content.js
+++ b/addons/website/static/src/js/menu/new_content.js
@@ -267,7 +267,10 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
                         }).last();
                     if ($finalPosition) {
                         $el.fadeTo(400, 0, function () {
-                            $el.insertAfter($finalPosition);
+                            // if once installed, button disapeear, don't need to move it.
+                            if (!$el.hasClass('o_new_content_element_once')) {
+                                $el.insertAfter($finalPosition);
+                            }
                             // change style to use spinner
                             $i.removeClass()
                                 .addClass('fa fa-spin fa-spinner fa-pulse');
@@ -278,7 +281,9 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
                     }
 
                     self._install(moduleId).then(function () {
-                        window.location.href = window.location.origin + window.location.pathname + '?' + enableFlag;
+                        var origin = window.location.origin;
+                        var redirectURL = $el.find('a').data('url') || (window.location.pathname + '?' + enableFlag);
+                        window.location.href = origin + redirectURL;
                     }, function () {
                         $i.removeClass()
                             .addClass('fa fa-exclamation-triangle');
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 0027d792093..8ac07bc6ade 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -245,7 +245,7 @@ body .modal {
                 transition: 200ms;
                 display: inline-block;
                 padding: 23px 27px;
-                border: 2px dashed lighten(gray('600'), 30%);
+                border: 3px dashed lighten(gray('700'), 30%);
                 vertical-align: top;
                 cursor: pointer;
                 color: lighten(gray('600'), 30%);
diff --git a/addons/website/static/src/xml/track_page.xml b/addons/website/static/src/xml/track_page.xml
index 11311156ca7..2d4093dc0d2 100644
--- a/addons/website/static/src/xml/track_page.xml
+++ b/addons/website/static/src/xml/track_page.xml
@@ -7,7 +7,7 @@
 			<label class="o_switch" for="switch-track-page">
 				<input id="switch-track-page" type="checkbox"/>
 				<span/>
-				Track visitor
+				Track Visitor
 			</label>
 		</a>
 	</t>
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index 61528303768..d4193d7cbc2 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -11,10 +11,10 @@
                     <main class="modal-body">
                         <form role="form" t-att-id="id">
                             <div class="form-group row mb0">
-                                <label for="page-name" class="col-md-4 col-form-label">
+                                <label for="page-name" class="col-md-3 col-form-label">
                                     <t t-esc="field_name"/>:
                                 </label>
-                                <div class="col-md-8">
+                                <div class="col-md-9">
                                     <input t-if="field_type == 'input'" type="text" class="form-control" required="required"/>
                                     <textarea t-if="field_type == 'textarea'" class="form-control" required="required" rows="5"></textarea>
                                     <select t-if="field_type == 'select'" class="form-control"></select>
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index fb10bda8435..0a643c5de50 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -1,5 +1,19 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+    <!-- publish/unpublish button -->
+    <template id="website_publisher" name="Website Publisher">
+        <t groups="website.group_website_publisher" t-if="'website_published' in main_object.fields_get() and ('can_publish' not in main_object.fields_get() or main_object.can_publish)">
+            <li t-attf-class="js_publish_management #{extra_classes} #{main_object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-description="env['ir.model']._get(main_object._name).display_name" t-att-data-id="main_object.id" t-att-data-object="main_object._name" t-att-data-controller="publish_controller">
+                <label class="o_switch o_switch_danger js_publish_btn" for="id">
+                    <input type="checkbox" t-att-checked="main_object.website_published" id="id"/>
+                    <span/>
+                    <span class="css_publish">Unpublished</span>
+                    <span class="css_unpublish">Published</span>
+                </label>
+            </li>
+        </t>
+    </template>
+
     <!-- Front-end/Back-end integration -->
     <template id="user_navbar" inherit_id="website.layout" name="User Navbar">
         <xpath expr="//t[@t-set='html_data']" position="after">
@@ -54,22 +68,20 @@
                     </li>
                     <!-- Promote -->
                     <li class="dropdown" id="promote-menu">
-                        <a class="dropdown-toggle o-no-caret waves" data-toggle="dropdown" href="#">Promote</a>
+                        <a class="dropdown-toggle o-no-caret waves" data-toggle="dropdown" data-display="static" href="#">Promote</a>
                         <div class="dropdown-menu oe_promote_menu" role="menu">
                             <a role="menuitem" data-action="promote-current-page" href="#" title="Promote page on the web" class="dropdown-item">Optimize SEO</a>
                         </div>
                     </li>
+                    <t t-call="website.website_publisher">
+                        <t t-set="extra_classes" t-translation="off">d-block d-sm-block d-md-none</t>
+                    </t>
                 </ul>
 
                 <ul class="o_menu_systray d-none d-md-block" groups="website.group_website_publisher">
-                    <li t-if="'website_published' in main_object.fields_get() and ('can_publish' not in main_object.fields_get() or main_object.can_publish)" t-attf-class="js_publish_management #{main_object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-id="main_object.id" t-att-data-object="main_object._name" t-att-data-description="env['ir.model']._get(main_object._name).display_name" t-att-data-controller="publish_controller">
-                        <label class="o_switch o_switch_danger js_publish_btn" for="id">
-                            <input type="checkbox" t-att-checked="main_object.website_published" id="id"/>
-                            <span/>
-                            <span class="css_publish">Unpublished</span>
-                            <span class="css_unpublish">Published</span>
-                        </label>
-                    </li>
+                    <t t-call="website.website_publisher">
+                        <t t-set="extra_classes" t-value=""/>
+                    </t>
                     <!-- Mobile preview -->
                     <li class="o_mobile_preview" id="mobile-menu">
                         <a data-action="show-mobile-preview" href="#"><span title="Mobile preview" role="img" aria-label="Mobile preview" class="fa fa-mobile"/></a>
@@ -106,49 +118,55 @@
                                     <div groups="website.group_website_designer" class="col-md-4 mb8 o_new_content_element">
                                         <a href="#" data-action="new_page" aria-label="New page" title="New page">
                                             <i class="fa fa-file-o"/>
-                                            <p>New Page</p>
+                                            <p>Page</p>
                                         </a>
                                     </div>
                                     <div groups="base.group_system" name="module_website_blog" t-att-data-module-id="env.ref('base.module_website_blog').id" t-att-data-module-shortdesc="env.ref('base.module_website_blog').shortdesc" class="col-md-4 mb8 o_new_content_element">
                                         <a href="#" data-action="new_blog_post">
                                             <i class="fa fa-rss"/>
-                                            <p>New Blog Post</p>
+                                            <p>Blog Post</p>
                                         </a>
                                     </div>
                                     <div groups="base.group_system" name="module_website_event" t-att-data-module-id="env.ref('base.module_website_event').id" t-att-data-module-shortdesc="env.ref('base.module_website_event').shortdesc" class="col-md-4 mb8 o_new_content_element">
                                         <a href="#" data-action="new_event">
                                             <i class="fa fa-glass"/>
-                                            <p>New Event</p>
+                                            <p>Event</p>
                                         </a>
                                     </div>
-                                    <div groups="base.group_system" name="module_website_forum" t-att-data-module-id="env.ref('base.module_website_forum').id" t-att-data-module-shortdesc="env.ref('base.module_website_forum').shortdesc" class="col-md-4 mb8 o_new_content_element">
-                                        <a href="#" data-action="new_forum">
+                                    <div groups="base.group_system" name="module_website_forum"
+                                         t-att-data-module-id="env.ref('base.module_website_forum').id"
+                                         t-att-data-module-shortdesc="env.ref('base.module_website_forum').shortdesc"
+                                         class="col-md-4 mb8 o_new_content_element o_new_content_element_once">
+                                        <a href="#" data-url="/forum" data-action="new_forum">
                                             <i class="fa fa-comment"/>
-                                            <p>New Forum</p>
+                                            <p>Forum</p>
                                         </a>
                                     </div>
                                     <div groups="base.group_system" name="module_website_hr_recruitment" t-att-data-module-id="env.ref('base.module_website_hr_recruitment').id" t-att-data-module-shortdesc="env.ref('base.module_website_hr_recruitment').shortdesc" class="col-md-4 mb8 o_new_content_element">
                                         <a href="#">
                                             <i class="fa fa-briefcase"/>
-                                            <p>New Job Offer</p>
+                                            <p>Job Offer</p>
                                         </a>
                                     </div>
                                     <div groups="base.group_system" name="module_website_sale" t-att-data-module-id="env.ref('base.module_website_sale').id" t-att-data-module-shortdesc="env.ref('base.module_website_sale').shortdesc" class="col-md-4 mb8 o_new_content_element">
                                         <a href="#" data-action="new_product">
                                             <i class="fa fa-shopping-cart"/>
-                                            <p>New Product</p>
+                                            <p>Product</p>
                                         </a>
                                     </div>
                                     <div groups="base.group_system" name="module_website_slides" t-att-data-module-id="env.ref('base.module_website_slides').id" t-att-data-module-shortdesc="env.ref('base.module_website_slides').shortdesc" class="col-md-4 mb8 o_new_content_element">
                                         <a href="#" data-action="new_slide_channel">
                                             <i class="fa fa-graduation-cap"></i>
-                                            <p>New Course</p>
+                                            <p>Course</p>
                                         </a>
                                     </div>
-                                    <div groups="base.group_system" name="module_website_livechat" t-att-data-module-id="env.ref('base.module_website_livechat').id" t-att-data-module-shortdesc="env.ref('base.module_website_livechat').shortdesc" class="col-md-4 mb8 o_new_content_element">
-                                        <a href="#" data-action="new_channel">
+                                    <div groups="base.group_system" name="module_website_livechat"
+                                         t-att-data-module-id="env.ref('base.module_website_livechat').id"
+                                         t-att-data-module-shortdesc="env.ref('base.module_website_livechat').shortdesc"
+                                         class="col-md-4 mb8 o_new_content_element o_new_content_element_once">
+                                        <a href="#" data-url="/livechat" data-action="new_channel">
                                             <i class="fa fa-hashtag"/>
-                                            <p>New Livechat Channel</p>
+                                            <p>Livechat Widget</p>
                                         </a>
                                     </div>
                                 </div>
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index fee514306d0..e2f56337d46 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -213,7 +213,7 @@ list of filtered posts (by date or tag).
 
 <!-- ====== Blog Post Complete Layout ==========================================
 ============================================================================ -->
-<template id="website_blog.blog_post_complete" name="Blog Post">
+<template id="website_blog.blog_post_complete" name="Blog Post" track="1">
     <t t-call="website_blog.index">
 
         <!-- Check for active options: the stored value may be used in sub-templates too  -->
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index 3e56d9bc880..4a51e20b55a 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -413,7 +413,7 @@
 </template>
 
 <!-- Event - Description -->
-<template id="event_description_full" name="Event Description">
+<template id="event_description_full" name="Event Description" track="1">
     <t t-call="website_event.event_details">
         <section class="bg-200">
             <div class="container">
diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
index 257d415cadc..01adeeb47d7 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -78,7 +78,7 @@
     </t>
 </template>
 
-<template id="detail" name="Job Detail">
+<template id="detail" name="Job Detail" track="1">
     <t t-call="website.layout">
         <t t-set="additional_title">Job Detail</t>
         <div id="wrap" class="js_hr_recruitment">
diff --git a/addons/website_links/views/website_links_template.xml b/addons/website_links/views/website_links_template.xml
index 63d5606092c..56eb0fbeaf4 100644
--- a/addons/website_links/views/website_links_template.xml
+++ b/addons/website_links/views/website_links_template.xml
@@ -19,7 +19,7 @@
         <template id="share_page_menu" inherit_id="website.user_navbar">
             <xpath expr="//a[@data-action='promote-current-page']" position="after">
                 <a href="/r" id="o_website_links_share_page" class="dropdown-item">
-                    <span title="Track this page to count clicks">Track this Page</span>
+                    <span title="Track this page to count clicks">Link Tracker</span>
                 </a>
             </xpath>
 
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index 4f3df6fcb86..6f8887a8345 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -102,7 +102,7 @@
 
 
 <!-- Channel main template -->
-<template id='course_main' name="Course Main">
+<template id='course_main' name="Course Main" track="1">
     <t t-set="head">
         <t t-call-assets="web.pdf_js_lib" t-css="false"/>
         <script type="text/javascript" src="/website_slides/static/lib/pdfslidesviewer/PDFSlidesViewer.js"></script>
diff --git a/addons/website_slides/views/website_slides_templates_lesson.xml b/addons/website_slides/views/website_slides_templates_lesson.xml
index c71cffefb17..7ddaa1e97b3 100644
--- a/addons/website_slides/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson.xml
@@ -2,7 +2,7 @@
 <odoo><data>
 
 <!-- Slide: main template: detailed view -->
-<template id="slide_main" name="Slide Detailed View">
+<template id="slide_main" name="Slide Detailed View" track="1">
     <t t-set="body_classname" t-value="'o_wslides_body'"/>
     <t t-call="website.layout">
         <div id="wrap" class="wrap o_wslides_wrap">