YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #244 from YunoHost/app-progress-bars

Browse source 
[enh] Convert ascii progress bars to bootstrap progress bar
This commit is contained in:
Alexandre Aubin 2019-06-04 00:14:53 +02:00 committed by GitHub
commit 20617f6ac0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/css/style.less
View file

@ -550,6 +550,21 @@ input[type='radio'].nice-radio {
}
}
.messages .progress {
display:inline-block;
height:0.8em;
margin-bottom: 0;
width: 200px;
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 {

25
src/js/yunohost/helpers.js
View file

@ -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 progress-bar-striped active" 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);