MDL-67048 progressbar: use bootstrap component to fix invert colors

This commit is contained in:
Adrian Perez 2019-11-05 22:30:13 +01:00
parent 01aa126848
commit a40cb785b0
5 changed files with 13 additions and 48 deletions

View File

@ -445,18 +445,27 @@ M.form_dndupload.init = function(Y, options) {
if (dispfilename.length > 50) { if (dispfilename.length > 50) {
dispfilename = dispfilename.substr(0, 49)+'…'; dispfilename = dispfilename.substr(0, 49)+'…';
} }
var progressouter = this.container.create('<span>'+dispfilename+': <span class="dndupload-progress-outer"><span class="dndupload-progress-inner">&nbsp;</span></span><br /></span>'); var progressouter = this.container.create(dispfilename +
var progressinner = progressouter.one('.dndupload-progress-inner'); '<div class="progress">' +
' <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">' +
' <span class="sr-only"></span>' +
' </div>' +
'</div>');
var progressinner = progressouter.one('.progress-bar');
var progressinnertext = progressinner.one('.sr-only');
var progresscontainer = this.container.one('.dndupload-progressbars'); var progresscontainer = this.container.one('.dndupload-progressbars');
progresscontainer.appendChild(progressouter); progresscontainer.appendChild(progressouter);
this.progressbars[filename] = { this.progressbars[filename] = {
progressouter: progressouter, progressouter: progressouter,
progressinner: progressinner progressinner: progressinner,
progressinnertext: progressinnertext
}; };
} }
this.progressbars[filename].progressinner.setStyle('width', percent + '%'); this.progressbars[filename].progressinner.setStyle('width', percent + '%');
this.progressbars[filename].progressinner.setAttribute('aria-valuenow', percent);
this.progressbars[filename].progressinnertext.setContent(percent + '% ' + M.util.get_string('complete', 'moodle'));
} }
}; };

View File

@ -817,7 +817,7 @@ class page_requirements_manager {
array('dndenabled_inbox', 'moodle'), array('fileexists', 'moodle'), array('maxbytesfile', 'error'), array('dndenabled_inbox', 'moodle'), array('fileexists', 'moodle'), array('maxbytesfile', 'error'),
array('sizegb', 'moodle'), array('sizemb', 'moodle'), array('sizekb', 'moodle'), array('sizeb', 'moodle'), array('sizegb', 'moodle'), array('sizemb', 'moodle'), array('sizekb', 'moodle'), array('sizeb', 'moodle'),
array('maxareabytesreached', 'moodle'), array('serverconnection', 'error'), array('maxareabytesreached', 'moodle'), array('serverconnection', 'error'),
array('changesmadereallygoaway', 'moodle') array('changesmadereallygoaway', 'moodle'), array('complete', 'moodle')
)); ));
break; break;
} }

View File

@ -550,23 +550,6 @@ span.editinstructions {
padding: .3em; padding: .3em;
} }
.dndupload-progress-outer {
background-color: $progress-bg;
@include border-radius($progress-border-radius);
@include box-shadow($progress-box-shadow);
display: block;
width: 100%;
height: $spacer-y;
margin-bottom: $spacer-y;
}
.dndupload-progress-inner {
background-color: $progress-bar-color;
@include border-left-radius($progress-border-radius);
display: inline-block;
height: $spacer-y;
}
.dndupload-hidden { .dndupload-hidden {
display: none; display: none;
} }

View File

@ -13127,18 +13127,6 @@ span.editinstructions {
margin-top: .2em; margin-top: .2em;
padding: .3em; } padding: .3em; }
.dndupload-progress-outer {
background-color: #e9ecef;
display: block;
width: 100%;
height: 1rem;
margin-bottom: 1rem; }
.dndupload-progress-inner {
background-color: #fff;
display: inline-block;
height: 1rem; }
.dndupload-hidden { .dndupload-hidden {
display: none; } display: none; }

View File

@ -13384,21 +13384,6 @@ span.editinstructions {
margin-top: .2em; margin-top: .2em;
padding: .3em; } padding: .3em; }
.dndupload-progress-outer {
background-color: #e9ecef;
border-radius: 0.25rem;
display: block;
width: 100%;
height: 1rem;
margin-bottom: 1rem; }
.dndupload-progress-inner {
background-color: #fff;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
display: inline-block;
height: 1rem; }
.dndupload-hidden { .dndupload-hidden {
display: none; } display: none; }