[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)
This commit is contained in:
mcm-odoo
2019-09-03 15:02:10 +00:00
committed by Thibault Delavallée
parent 4cac01e124
commit 896f649285
2 changed files with 59 additions and 60 deletions
@@ -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();
}
});
},
@@ -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>