[REF] website(_sale)_slides(_survey): improve course management and creation

PURPOSE

Improve usability of course creation and management in frontend

SPECIFICATIONS

This commit improves various elements of the eLearning module:
  * the create 'new course' dialog has been improved with examples and
    improved placeholders;
  * allow to create tags directly from course creation modal. Using the
    add tag button after having created the course is not the only way of
    managing tags anymore;
  * the create 'new content' dialog has some explanations on the right side;
  * add a flag indicating which content has already been viewed in
    documentation;
  * changes the text/color of some buttons;

LINKS

Task ID-2241513
PR #55698

4 files changed, 70 insertions, 43 deletions

diff --git a/addons/website_slides/static/src/xml/slide_quiz_create.xml b/addons/website_slides/static/src/xml/slide_quiz_create.xml
index 6ec408926b9..6bd3480e774 100644
--- a/addons/website_slides/static/src/xml/slide_quiz_create.xml
+++ b/addons/website_slides/static/src/xml/slide_quiz_create.xml
@@ -68,10 +68,7 @@
     <t t-name="slide.quiz.create.buttons">
         <div>
             <a class="o_wslides_js_quiz_validate_question btn btn-primary text-white border" role="button">
-                <span>Save &amp; Close</span>
-            </a>
-            <a class="o_wslides_js_quiz_validate_question o_wslides_js_quiz_create_next btn btn-primary text-white border" role="button">
-                <span>Save &amp; New</span>
+                <span>Save</span>
             </a>
             <a class="o_wslides_js_quiz_cancel_question btn btn-light border" role="button">
                 <span>Cancel</span>
diff --git a/addons/website_slides/static/src/xml/website_slides_channel.xml b/addons/website_slides/static/src/xml/website_slides_channel.xml
index c6c95ebbf2b..80f0214856d 100644
--- a/addons/website_slides/static/src/xml/website_slides_channel.xml
+++ b/addons/website_slides/static/src/xml/website_slides_channel.xml
@@ -8,38 +8,44 @@
                 <input type="hidden" name="csrf_token" t-att-value="csrf_token"/>
                 <div class="form-group">
                     <label for="title" class="col-form-label">Title</label>
-                    <input type="text" class="form-control" name="name" id="title" placeholder="Course Title" required="1"/>
+                    <input type="text" class="form-control" name="name" id="title" placeholder="Computer Science for kids" required="1"/>
                     <p id="title-required" class="text-danger mt-1 mb-0 d-none">Please fill in this field</p>
                 </div>
                 <div class="form-group">
                     <label for="tag_ids" class="col-form-label">Tags</label>
                     <input type="text" class="form-control" name="tag_ids" id="tag_ids" placeholder="Tags"/>
                 </div>
-                <fieldset class="form-group">
-                    <label for="channel_type">Type</label>
-                    <div class="form-check">
-                      <input class="form-check-input" type="radio" name="channel_type" id="channel_type1" value="training" checked="checked"/>
-                      <span class="form-check-label" for="channel_type1">
-                            Training (with progress)
-                      </span>
+                <label for="channel_type">Choose a layout</label>
+                <div class="form-row">
+                    <div class="form-group col-6">
+                        <div class="form-check px-0">
+                            <input class="form-check-input d-none" type="radio" name="channel_type" id="channel_type1" value="training" checked="checked"/>
+                            <label for="channel_type1">
+                                <img class="w-100" src="/website_slides/static/src/img/channel-training-layout.png" alt="Training Layout"/>
+                            </label>
+                        </div>
                     </div>
-                    <div class="form-check">
-                      <input class="form-check-input" type="radio" name="channel_type" id="channel_type2" value="documentation"/>
-                      <span class="form-check-label" for="channel_type2">
-                            Documentation
-                      </span>
+                    <div class="form-group col-6">
+                        <div class="form-check px-0">
+                            <input class="form-check-input d-none" type="radio" name="channel_type" id="channel_type2" value="documentation"/>
+                            <label for="channel_type2">
+                                <img class="w-100" src="/website_slides/static/src/img/channel-documentation-layout.png" alt="Documentation Layout"/>
+                            </label>
+                        </div>
                     </div>
-                </fieldset>
+                </div>
                 <div class="form-group">
                     <label for="title">Description</label>
-                    <input type="text" class="form-control" name="description" id="description" placeholder="Write here a short description of your first course" />
+                    <textarea rows="2" class="form-control" name="description" id="description"
+                              placeholder="Common tasks for a computer scientist is asking the right questions and answering
+                              questions. In this course, you'll study those topics with activities about mathematics, science and logic." />
                 </div>
                 <div class="form-group">
                     <label id="communication-label">Review</label>
                     <div class="o_wslide_channel_communication_type">
                         <div class="form-check">
-                            <input class="form-check-input" type="checkbox" id="allow_comment" name="allow_comment"/>
-                            <span class="form-check-label" for="allow_comment">Allow review on Course</span>
+                            <input class="form-check-input" type="checkbox" id="allow_comment" name="allow_comment" checked="checked"/>
+                            <span class="form-check-label" for="allow_comment">Allow students to review your course</span>
                         </div>
                     </div>
                 </div>
diff --git a/addons/website_slides/static/src/xml/website_slides_unsubscribe.xml b/addons/website_slides/static/src/xml/website_slides_unsubscribe.xml
index 0c9d6a75414..c27c2b89402 100644
--- a/addons/website_slides/static/src/xml/website_slides_unsubscribe.xml
+++ b/addons/website_slides/static/src/xml/website_slides_unsubscribe.xml
@@ -14,7 +14,7 @@
             <div class="form-group row">
                 <div class="controls mt8 ml-3">
                     <input id="subscribed" name="subscribed" type="checkbox"/>
-                    <label for="subscribed" class="col-form-label font-weight-normal">Subscribe to get notified when a new content is added.</label>
+                    <label for="subscribed" class="col-form-label font-weight-normal">Be notified when a new content is added.</label>
                 </div>
             </div>
         </form>
diff --git a/addons/website_slides/static/src/xml/website_slides_upload.xml b/addons/website_slides/static/src/xml/website_slides_upload.xml
index 90697c20dc8..55f73d687b4 100644
--- a/addons/website_slides/static/src/xml/website_slides_upload.xml
+++ b/addons/website_slides/static/src/xml/website_slides_upload.xml
@@ -39,7 +39,7 @@
         Uploading template
     -->
     <t t-name="website.slide.upload.modal.uploading">
-        <div class="text-center" aria-hidden="true" role="status">
+        <div class="text-center" role="status">
             <div class="fa-3x">
                 <i class="fa fa-spinner fa-pulse"></i>
             </div>
@@ -88,17 +88,25 @@
         <div>
             <form class="clearfix">
                 <div class="row">
-                    <div id="o_wslides_js_slide_upload_left_column" class="col">
+                    <div id="o_wslides_js_slide_upload_left_column" class="col-md-6">
                         <div class="form-group">
                             <label for="upload" class="col-form-label">Choose a PDF or an Image</label>
-                            <input id="upload" name="file" class="form-control" accept="image/*,application/pdf" type="file" required="required"/>
+                            <input id="upload" name="file" class="form-control h-100" accept="image/*,application/pdf" type="file" required="required"/>
                         </div>
                         <canvas id="data_canvas" class="d-none"></canvas>
                         <t t-call="website.slide.upload.modal.common"/>
                     </div>
-                    <div id="o_wslides_js_slide_upload_preview_column" class="col-md-6 d-none">
-                        <div class="img-thumbnail">
-                            <div class="o_slide_preview">
+                    <div id="o_wslides_js_slide_upload_preview_column" class="col-md-6">
+                        <div class="img-thumbnail h-100">
+                            <div class="o_slide_tutorial p-3">
+                                <div class="h5">How to upload your PowerPoint Presentations or Word Documents?</div>
+                                <div class="mx-3 my-4">Save your presentations or documents as PDF files and upload them.</div>
+                                <div class="alert alert-warning" role="alert">
+                                    <i class="fa fa-info-circle pr-2"/>
+                                    Only JPG, PNG, PDF, files types are supported
+                                </div>
+                            </div>
+                            <div class="o_slide_preview d-none">
                                 <img src="/website_slides/static/src/img/document.png" id="slide-image" title="Content Preview" alt="Content Preview" class="img-fluid"/>
                             </div>
                         </div>
@@ -112,18 +120,15 @@
         <div>
             <form class="clearfix">
                 <div class="row">
-                    <div id="o_wslides_js_slide_upload_left_column" class="col">
-                        <div class="form-group">
-                            <label for="upload" class="col-form-label">Choose a Cover Image</label>
-                            <input id="upload" name="file" class="form-control" accept="image/*" type="file" required="required"/>
-                        </div>
+                    <div id="o_wslides_js_slide_upload_left_column" class="col-md-6">
                         <canvas id="data_canvas" class="d-none"></canvas>
                         <t t-call="website.slide.upload.modal.common"/>
                     </div>
-                    <div id="o_wslides_js_slide_upload_preview_column" class="col-md-6 d-none">
-                        <div class="img-thumbnail">
-                            <div class="o_slide_preview">
-                                <img src="/website_slides/static/src/img/document.png" id="slide-image" title="Content Preview" alt="Content Preview" class="img-fluid"/>
+                    <div id="o_wslides_js_slide_upload_preview_column" class="col-md-6">
+                        <div class="img-thumbnail h-100">
+                            <div class="o_slide_tutorial p-3">
+                                <div class="h5">How to create a Lesson as a Web Page?</div>
+                                <div class="mx-3 my-4">First, create your lesson, then edit it with the website builder. You'll be able to drop building blocks on your page and edit them.</div>
                             </div>
                         </div>
                     </div>
@@ -136,7 +141,7 @@
         <div>
             <form class="clearfix">
                 <div class="row">
-                    <div id="o_wslides_js_slide_upload_left_column" class="col">
+                    <div id="o_wslides_js_slide_upload_left_column" class="col-md-6">
                         <div class="form-group">
                             <label for="url" class="col-form-label">Youtube Link</label>
                             <input id="url" name="url" class="form-control" placeholder="Youtube Video URL" required="required"/>
@@ -144,9 +149,15 @@
                         <canvas id="data_canvas" class="d-none"></canvas>
                         <t t-call="website.slide.upload.modal.common"/>
                     </div>
-                    <div id="o_wslides_js_slide_upload_preview_column" class="col-md-6 d-none">
-                        <div class="img-thumbnail">
-                            <div class="o_slide_preview">
+                    <div id="o_wslides_js_slide_upload_preview_column" class="col-md-6">
+                        <div class="img-thumbnail h-100">
+                            <div class="o_slide_tutorial p-3">
+                                <div class="h5">How to upload your videos ?</div>
+                                <div class="mx-3 my-4">First, upload your videos on YouTube and mark them as <strong>unlisted</strong>. This way, they will be secured.</div>
+                                <div class="mx-3 my-4">What does <strong>unlisted</strong> means? The YouTube unlisted meaning is a video which can be viewed only by the users having the link to it. Your video will never come up in the search results nor on your channel.</div>
+                                <div class="mx-3 my-4"><a href="https://support.google.com/youtube/answer/157177" target="_blank" >Change video privacy settings</a></div>
+                            </div>
+                            <div class="o_slide_preview d-none">
                                 <img src="/website_slides/static/src/img/document.png" id="slide-image" title="Content Preview" alt="Content Preview" class="img-fluid"/>
                             </div>
                         </div>
@@ -159,8 +170,21 @@
     <t t-name="website.slide.upload.quiz">
         <div>
             <form class="clearfix">
-                <canvas id="data_canvas" class="d-none"></canvas>
-                <t t-call="website.slide.upload.modal.common"/>
+                <div class="row">
+                    <div id="o_wslides_js_slide_upload_left_column" class="col-md-6">
+                        <canvas id="data_canvas" class="d-none"></canvas>
+                        <t t-call="website.slide.upload.modal.common"/>
+                    </div>
+                    <div id="o_wslides_js_slide_upload_preview_column" class="col-md-6">
+                        <div class="img-thumbnail h-100">
+                            <div class="o_slide_tutorial p-3">
+                                <div class="h5">Test your students with small Quizzes</div>
+                                <div class="mx-3 my-4">With Quizzes you can keep your students focused and motivated by answering some questions and gaining some karma points</div>
+                                <img src="/website_slides/static/src/img/onboarding-quiz.png" title="Quiz Demo Data" class="img-fluid"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </form>
         </div>
     </t>