From 83ea279b7aa72d5bca6d1b81eb337eb2cabf5aab Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Wed, 15 May 2019 21:39:19 +0200
Subject: [PATCH 1/2] Convert ascii progress bars to bootstrap progress bar

---
 src/css/style.less         |  7 +++++++
 src/js/yunohost/helpers.js | 25 +++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/css/style.less b/src/css/style.less
index e1496f71..c9e10ecd 100644
--- a/src/css/style.less
+++ b/src/css/style.less
@@ -550,6 +550,13 @@ input[type='radio'].nice-radio {
     }
 }
 
+.messages .progress {
+   display:inline-block;
+   height:0.8em;
+   margin-bottom: 0;
+   width: 200px;
+   border-radius: 5px;
+}
 
 /** custom badges **/
 .badge {
diff --git a/src/js/yunohost/helpers.js b/src/js/yunohost/helpers.js
index 260bde6a..a1890a07 100644
--- a/src/js/yunohost/helpers.js
+++ b/src/js/yunohost/helpers.js
@@ -35,10 +35,31 @@
 
             message = message.split("\n").join("<br />");
 
+            // If the message starts with a progress bar
+            progressbar = message.match(/^\[#*\+*\.*\] > /);
+            if (progressbar)
+            {
+                progressbar = progressbar[0];
+                // Remove the progress bar from the mesage
+                message = message.replace(progressbar,"");
+                // Compute percent
+                done = (progressbar.match(/#/g)||[]).length;
+                ongoing = (progressbar.match(/\+/g)||[]).length;
+                remaining = (progressbar.match(/\./g)||[]).length;
+                total = done + ongoing + remaining;
+                done = done * 100 / total;
+                ongoing = ongoing * 100 / total;
+                // Actually build the message with the progress bar
+                message = '<div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" style="width:'+done+'%"></div><div class="progress-bar" role="progressbar" style="width:'+ongoing+'%;"></div></div><p style="display: inline-block;">' + message + '</p>';
+            }
+            else
+            {
+                message = '<p>'+message+'</p>';
+            }
+
             // Add message
             $('#flashMessage .messages')
-                .prepend('<div class="alert alert-'+ level +'">'+
-                              '<p>'+ message +'</p></div>');
+                .prepend('<div class="alert alert-'+ level +'">'+message+'</div>');
 
             // Scroll to top to view new messages
             $('#flashMessage').scrollTop(0);

From 5d34b374dc3572b0a002e61fc7de5116b328a959 Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Fri, 17 May 2019 19:32:03 +0200
Subject: [PATCH 2/2] Improve progress bar display using strips for the
 'ongoing' part

---
 src/css/style.less         | 8 ++++++++
 src/js/yunohost/helpers.js | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/css/style.less b/src/css/style.less
index c9e10ecd..69d051bd 100644
--- a/src/css/style.less
+++ b/src/css/style.less
@@ -558,6 +558,14 @@ input[type='radio'].nice-radio {
    border-radius: 5px;
 }
 
+.messages .progress-bar-striped {
+    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent);
+}
+
+.messages .progress-bar.active {
+   animation-direction: reverse;
+}
+
 /** custom badges **/
 .badge {
     &.badge-default {
diff --git a/src/js/yunohost/helpers.js b/src/js/yunohost/helpers.js
index a1890a07..d572807a 100644
--- a/src/js/yunohost/helpers.js
+++ b/src/js/yunohost/helpers.js
@@ -50,7 +50,7 @@
                 done = done * 100 / total;
                 ongoing = ongoing * 100 / total;
                 // Actually build the message with the progress bar
-                message = '<div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" style="width:'+done+'%"></div><div class="progress-bar" role="progressbar" style="width:'+ongoing+'%;"></div></div><p style="display: inline-block;">' + message + '</p>';
+                message = '<div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" style="width:'+done+'%"></div><div class="progress-bar progress-bar-striped active" role="progressbar" style="width:'+ongoing+'%;"></div></div><p style="display: inline-block;">' + message + '</p>';
             }
             else
             {