L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-78341 core: Improve the progress bar style

Browse Source
This commit is contained in:
Brendan Heywood
2023-06-14 09:09:43 +10:00
parent 71c36d2de1
commit 73ed05ecf2
2 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/outputcomponents.php
+2 -1
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;
lib/templates/progress_bar.mustache
+24 -15
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');
}
});
})();