From 73ed05ecf23b4efea0290d6a61d284cd4e43e564 Mon Sep 17 00:00:00 2001
From: Brendan Heywood <brendan@catalyst-au.net>
Date: Wed, 24 May 2023 19:00:07 +1000
Subject: [PATCH] MDL-78341 core: Improve the progress bar style

---
 lib/outputcomponents.php            |  3 ++-
 lib/templates/progress_bar.mustache | 39 ++++++++++++++++++-----------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/lib/outputcomponents.php b/lib/outputcomponents.php
index 672c71299b0..adb09b605ae 100644
--- a/lib/outputcomponents.php
+++ b/lib/outputcomponents.php
@@ -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;
diff --git a/lib/templates/progress_bar.mustache b/lib/templates/progress_bar.mustache
index 56f8212d8f8..82f9cfcb38d 100644
--- a/lib/templates/progress_bar.mustache
+++ b/lib/templates/progress_bar.mustache
@@ -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');
         }
     });
 })();