Merge branch 'MDL-78341-progress-bar-style' of https://github.com/brendanheywood/moodle

This commit is contained in:
Andrew Nicols 2023-06-15 11:53:06 +08:00
commit af757274a1
No known key found for this signature in database
GPG Key ID: 6D1E3157C8CFBF14
3 changed files with 27 additions and 17 deletions

View File

@ -148,7 +148,7 @@ class url_finder {
}
$urls = array();
sort($tables); // Make it easier to see progress because they are ordered.
$numberoftables = count($tables);
$tablenumber = 0;
foreach ($tables as $table) {

View File

@ -5151,7 +5151,8 @@ class progress_bar implements renderable, templatable {
$estimatemsg = '';
if ($estimate != 0 && is_numeric($estimate)) {
$estimatemsg = format_time(round($estimate));
// Err on the conservative side and also avoid showing 'now' as the estimate.
$estimatemsg = format_time(ceil($estimate));
}
$this->percent = $percent;

View File

@ -25,21 +25,29 @@
"width": "500"
}
}}
<div id="{{id}}" class="row progressbar_container">
<div class="col-md-6 push-md-3">
<p id="{{id}}_status" class="text-xs-center"></p>
<progress id="{{id}}_bar" class="progress progress-striped progress-animated" value="0" max="100"></progress>
<p id="{{id}}_estimate" class="text-xs-center"></p>
<div id="{{id}}" class="progressbar_container mb-3">
<div class="progress">
<div id="{{id}}_bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-value="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
</div>
<div class="d-flex">
<div style="flex: 1 1 0; min-width: 0;">
<div id="{{id}}_status" class="text-truncate">&nbsp;</div>
</div>
<div class="text-right pl-3" style="flex: 0 0 content">
<span id="{{id}}_estimate" class="">&nbsp;</span>
<span id="{{id}}_percentage" class="d-inline-block" style="width: 3em">0%</span>
</div>
</div>
</div>
{{! We must not use the JS helper otherwise this gets executed too late. }}
<script type="text/javascript">
<script>
(function() {
var el = document.getElementById('{{id}}'),
progressBar = document.getElementById('{{id}}_bar'),
statusIndicator = document.getElementById('{{id}}_status'),
estimateIndicator = document.getElementById('{{id}}_estimate');
percentageIndicator = document.getElementById('{{id}}_percentage');
el.addEventListener('update', function(e) {
var msg = e.detail.message,
@ -47,17 +55,18 @@
estimate = e.detail.estimate;
statusIndicator.textContent = msg;
progressBar.setAttribute('value', Math.round(percent));
progressBar.style.width = percent.toFixed(1) + '%';
progressBar.setAttribute('value', percent.toFixed(1));
if (percent === 100) {
progressBar.classList.add('progress-success');
estimateIndicator.textContent = '100%';
progressBar.classList.add('bg-success');
progressBar.classList.remove('progress-bar-striped');
progressBar.classList.remove('progress-bar-animated');
percentageIndicator.textContent = '100%';
estimateIndicator.textContent = '';
} else {
if (estimate) {
estimateIndicator.textContent = estimate + ' - ' + percent + '%';
} else {
estimateIndicator.textContent = '' + percent + '%';
}
progressBar.classList.remove('progress-success');
estimateIndicator.textContent = estimate;
percentageIndicator.textContent = percent.toFixed(1) + '%';
progressBar.classList.remove('bg-success');
}
});
})();