From 896f649285c0a643f2648eb2270891b2e1315a8a Mon Sep 17 00:00:00 2001
From: mcm-odoo <mcm@odoo.com>
Date: Fri, 30 Aug 2019 09:43:06 +0000
Subject: [PATCH] [IMP] website_slides: improve "New content" modal

Upload new course content should be revamped

  * general layout: https://drive.google.com/a/odoo.com/file/d/1zbNO0Vg1262ijkXA6pwSuenMI0h4NsPm/view?usp=drivesdk
  * remove picture tab;
  * display as two column with preview on right on change of picture
    or document;

Task 2049640 (website slides back2basics and fiximp)
---
 .../static/src/js/slides_upload.js            |  14 +++
 .../static/src/xml/website_slides_upload.xml  | 105 ++++++++----------
 2 files changed, 59 insertions(+), 60 deletions(-)

diff --git a/addons/website_slides/static/src/js/slides_upload.js b/addons/website_slides/static/src/js/slides_upload.js
index 37c6245d191..83d24d8a447 100644
--- a/addons/website_slides/static/src/js/slides_upload.js
+++ b/addons/website_slides/static/src/js/slides_upload.js
@@ -350,6 +350,15 @@ var SlideUploadDialog = Dialog.extend({
             }
         };
     },
+    /**
+     * Show the preview/right column and resize the modal
+     * @private
+     */
+    _showPreviewColumn: function() {
+        this.$('#o_wslides_js_slide_upload_left_column').removeClass('col').addClass('col-md-6');
+        this.$('#o_wslides_js_slide_upload_preview_column').removeClass('d-none');
+        this.$modal.find('.modal-dialog').addClass('modal-lg');
+    },
     /**
      * @private
      */
@@ -389,6 +398,8 @@ var SlideUploadDialog = Dialog.extend({
         } else {
             this.set_title(_t("Upload a document"));
         }
+
+        this.$modal.find('.modal-dialog').removeClass('modal-lg');
     },
     _onChangeCanSubmitForm: function (ev) {
         if (this.get('can_submit_form')) {
@@ -426,6 +437,7 @@ var SlideUploadDialog = Dialog.extend({
             }
             buffer = buffer.split(',')[1];
             self.file.data = buffer;
+            self._showPreviewColumn();
         });
 
         if (file.type === 'application/pdf') {
@@ -478,6 +490,7 @@ var SlideUploadDialog = Dialog.extend({
                                 self.set('can_submit_form', true);
                             }
                             loaded = true;
+                            self._showPreviewColumn();
                         });
                     });
                 });
@@ -510,6 +523,7 @@ var SlideUploadDialog = Dialog.extend({
                 self._formSetFieldValue('description', data.description);
 
                 self.isValidUrl = true;
+                self._showPreviewColumn();
             }
         });
     },
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 d790242a96f..16a41cb3c66 100644
--- a/addons/website_slides/static/src/xml/website_slides_upload.xml
+++ b/addons/website_slides/static/src/xml/website_slides_upload.xml
@@ -58,28 +58,25 @@
         Slide Type common form part template
     -->
     <t t-name="website.slide.upload.modal.common">
-        <div class="form-group row">
-            <label for="name" class="col-form-label col-md-3">Title</label>
-            <div class="col-md-9">
-                <input id="name" name="name" placeholder="Title" class="form-control" required="required"/>
-            </div>
+        <div class="form-group">
+            <label for="name" class="col-form-label">Title</label>
+            <input id="name" name="name" placeholder="Title" class="form-control" required="required"/>
         </div>
-        <div t-if="!widget.defaultCategoryID" class="form-group row">
-            <label for="category_id" class="col-form-label col-md-3">Category</label>
-            <div class="controls col-md-9">
-                <input class="form-control" id="category_id"/>
-            </div>
+        <div t-if="!widget.defaultCategoryID" class="form-group">
+            <label for="category_id" class="col-form-label">Section</label>
+            <input class="form-control" id="category_id"/>
         </div>
-        <div class="form-group row">
-            <label for="tag_ids" class="col-form-label col-md-3">Tags</label>
-            <div class="controls col-md-9">
-                <input id="tag_ids" name="tag_ids" type="hidden"/>
-            </div>
+        <div class="form-group">
+            <label for="tag_ids" class="col-form-label">Tags</label>
+            <input id="tag_ids" name="tag_ids" type="hidden"/>
         </div>
-        <div class="form-group row">
-            <label for="duration" class="col-form-label col-md-3">Completion Time (minutes)</label>
-            <div class="col-md-9">
+        <div class="form-group">
+            <label for="duration" class="col-form-label">Duration</label>
+            <div class="input-group">
                 <input type="number" id="duration" name="duration" placeholder="Estimated slide completion time" class="form-control"/>
+                    <div class="input-group-prepend">
+                    <span class="input-group-text">Minutes</span>
+                </div>
             </div>
         </div>
     </t>
@@ -90,27 +87,23 @@
     <t t-name="website.slide.upload.modal.presentation">
         <div>
             <form class="clearfix">
-                <div class="form-group row">
-                    <div class="col-md-4">
+                <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 PDF or an Image</label>
+                            <input id="upload" name="file" class="form-control" 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">
                                 <img src="/website_slides/static/src/img/document.png" id="slide-image" title="Content Preview" alt="Content Preview" class="img-fluid"/>
                             </div>
                         </div>
                     </div>
-                    <div class="col-md-8">
-                        <ul class="list-group">
-                            <li class="list-group-item">
-                                <h5 class="list-group-item-heading">
-                                    <label for="upload" class="col-form-label">PDF or Image File</label>
-                                </h5>
-                                <input id="upload" name="file" class="form-control" accept="image/*,application/pdf" type="file" required="required"/>
-                            </li>
-                        </ul>
-                    </div>
                 </div>
-                <canvas id="data_canvas" class="d-none"></canvas>
-                <t t-call="website.slide.upload.modal.common"/>
             </form>
         </div>
     </t>
@@ -118,27 +111,23 @@
     <t t-name="website.slide.upload.modal.webpage">
         <div>
             <form class="clearfix">
-                <t t-call="website.slide.upload.modal.common"/>
-                <div class="form-group row">
-                    <div class="col-md-4">
+                <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>
+                        <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>
                         </div>
                     </div>
-                    <div class="col-md-8">
-                        <ul class="list-group">
-                            <li class="list-group-item">
-                                <h5 class="list-group-item-heading">
-                                    <label for="upload" class="col-form-label">Cover Image File</label>
-                                </h5>
-                                <input id="upload" name="file" class="form-control" accept="image/*" type="file" required="required" data-prevent-onchange="1"/>
-                            </li>
-                        </ul>
-                    </div>
                 </div>
-                <canvas id="data_canvas" class="d-none"></canvas>
             </form>
         </div>
     </t>
@@ -146,27 +135,23 @@
     <t t-name="website.slide.upload.modal.video">
         <div>
             <form class="clearfix">
-                <div class="form-group row">
-                    <div class="col-md-4">
+                <div class="row">
+                    <div id="o_wslides_js_slide_upload_left_column" class="col">
+                        <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"/>
+                        </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">
                                 <img src="/website_slides/static/src/img/document.png" id="slide-image" title="Content Preview" alt="Content Preview" class="img-fluid"/>
                             </div>
                         </div>
                     </div>
-                    <div class="col-md-8">
-                        <ul class="list-group">
-                            <li class="list-group-item">
-                                <h5 class="list-group-item-heading">
-                                    <label for="url" class="col-form-label">Youtube Link</label>
-                                </h5>
-                                <input id="url" name="url" class="form-control" placeholder="Youtube Video URL" required="required"/>
-                            </li>
-                        </ul>
-                    </div>
                 </div>
-                <canvas id="data_canvas" class="d-none"></canvas>
-                <t t-call="website.slide.upload.modal.common"/>
             </form>
         </div>
     </t>