pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website_slides: use progressbar from bootstrap to avoid too much code

Browse Source 
This commit replaces a widget with standard boostrap code: the progress bar
classes. Creating a widget was a little bit over engineered, and since the
progress animation is handle in CSS, this replacement does not cause any loss
of feature.

Commit linked to task ID 1942852 and PR #31394.
This commit is contained in:
jem-odoo
2019-02-26 16:13:19 +00:00
committed by Thibault Delavallée
parent 5d5810ace2
commit ed6bd2e9af
6 changed files with 16 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_slides/static/src/js/slides_course_fullscreen_player.js
+4 -5
View File
@@ -249,11 +249,10 @@ odoo.define('website_slides.fullscreen', function (require) {
}
});
},
_updateProgressbar: function (){
var self = this;
var completion = self.channelCompletion <= 100 ? self.channelCompletion : 100;
$('.o_wslides_fs_sidebar_progress_gauge').css('width', completion + "%" );
$('.o_wslides_progress_percentage').text(completion);
_updateProgressbar: function () {
var completion = _.min([this.channelCompletion, 100]);
this.$('.o_wslides_fs_sidebar_progressbar .progress-bar').css('width', completion + "%" );
this.$('.o_wslides_progress_percentage').text(completion);
},
/**
* @private
addons/website_slides/static/src/js/slides_course_progress_bar.js
-47
View File
@@ -1,47 +0,0 @@
odoo.define('website_slides.progress.bar', function (require) {
var sAnimations = require('website.content.snippets.animation');
var Widget = require('web.Widget');
var ProgressBar = Widget.extend({
/**
* @override
* @param {Object} el
* @param {number} channel_id
*/
init: function (el, completion) {
this._super(el);
this.completion = completion;
},
/**
* @override
*/
start: function () {
this._renderProgressBar();
return this._super.apply(this, arguments);
},
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
_renderProgressBar: function (ev) {
var self = this;
$('.oe_slide_js_progress_bar').css('width', (self.completion <= 100 ? self.completion : 100) + '%');
},
});
sAnimations.registry.websiteSlidesProgressBar = sAnimations.Class.extend({
selector: '.oe_slide_js_progress_bar',
/**
* @override
*/
start: function () {
var completion = parseInt($('.oe_slide_js_progress_bar').attr('channel_completion'));
var progressBar = new ProgressBar(this, completion);
progressBar.appendTo(".oe_slide_js_progress_bar");
return this._super.apply(this, arguments);
},
});
return ProgressBar;
});
addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
+2 -2
View File
@@ -97,7 +97,7 @@
padding-left: 20px;
}
.o_wslides_fs_sidebar_header{
.o_wslides_fs_sidebar_header {
height: 100px;
padding: 20px 0;
display: flex;
@@ -115,7 +115,7 @@
margin-right: 40px;
overflow: hidden;
}
.o_wslides_fs_sidebar_progress_gauge {
.progress-bar {
background-color: $primary;
height: 100%;
width: 0;
addons/website_slides/views/assets.xml
-1
View File
@@ -18,7 +18,6 @@
<script type="text/javascript" src="/website_slides/static/src/js/slides_slide_archive.js"/>
<script type="text/javascript" src="/website_slides/static/src/js/slides_slide_like.js"/>
<script type="text/javascript" src="/website_slides/static/src/js/slides_course_slides_list.js"/>
<script type="text/javascript" src="/website_slides/static/src/js/slides_course_progress_bar.js"/>
<script type="text/javascript" src="/website_slides/static/src/js/slides_course_fullscreen_player.js"/>
<script type="text/javascript" src="/website_slides/static/src/js/slides_course_join.js"/>
<script type="text/javascript" src="/website_slides/static/src/js/slides_course_quiz.js"/>
addons/website_slides/views/website_slides_templates_lesson.xml
+5 -2
View File
@@ -12,9 +12,12 @@
<div class="o_wslides_slide_header_container">
<div class="o_wslides_slide_header_box">
<a t-attf-href="/slides/#{slug(slide.channel_id)}" t-field="slide.channel_id.name"/>
<div t-if="slide.channel_id.channel_type == 'training'" class="d-flex align-items-end">
<div class="o_wslides_slide_progress_bar">
<div class="o_wslides_progress_gauge m-0 oe_slide_js_progress_bar" t-attf-channel_completion="#{slide.channel_id.completion}"/>
<div class="progress">
<div class="progress-bar" role="progressbar"
t-att-aria-valuenow="slide.channel_id.completion" aria-valuemin="0" aria-valuemax="100"
t-att-style="'width: %s' % (slide.channel_id.completion)"/>
</div>
<i class="fa fa-trophy ml-2 mb-0 p-0" style="font-size:1.8rem; color: #cdcdcd;"></i>
</div>
addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
+5 -3
View File
@@ -29,10 +29,12 @@
<span t-field="slide.channel_id.name"/>
</a>
<div class="o_wslides_slide_fs_progress_box">
<div class="o_wslides_fs_sidebar_progressbar">
<div class="o_wslides_fs_sidebar_progress_gauge oe_slide_js_progress_bar" t-attf-channel_completion="#{slide.channel_id.completion}"/>
<div class="progress o_wslides_fs_sidebar_progressbar">
<div class="progress-bar" role="progressbar"
t-att-aria-valuenow="slide.channel_id.completion" aria-valuemin="0" aria-valuemax="100"
t-att-style="'width: %s' % (slide.channel_id.completion)"/>
</div>
<span><span class="o_wslides_progress_percentage" t-esc="slide.channel_id.completion"/>%</span>
<div><span class="o_wslides_progress_percentage" t-esc="slide.channel_id.completion"/>%</div>
</div>
</div>
</li>