added close button to progress indicators and some style changes...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2014-01-23 07:26:45 +04:00
parent dc178652a8
commit b64bbba033
3 changed files with 59 additions and 0 deletions

View File

@ -1186,6 +1186,13 @@ progress:not(value)::-webkit-progress-bar {
*/
.progress-container {
position: absolute;
top: 20px;
margin: 5px;
padding: 2px;
}
.progress-container:hover {
border-radius: 5px;
background: rgba(0, 0, 0, 0.8);
}
.progress-container:empty {
display: none;
@ -1195,6 +1202,20 @@ progress:not(value)::-webkit-progress-bar {
font-size: 10px;
margin: 10px;
}
.progress-bar .close {
display: none;
}
.progress-bar:hover .close {
position: absolute;
display: inline-block;
right: 10px;
}
.progress-bar .close:hover {
position: absolute;
display: inline-block;
color: red;
cursor: hand;
}
.progress-bar progress {
display: block;
width: 300px;

View File

@ -1235,6 +1235,13 @@ progress:not(value)::-webkit-progress-bar {
.progress-container {
position: absolute;
top: 20px;
margin: 5px;
padding: 2px;
}
.progress-container:hover {
border-radius: 5px;
background: rgba(0,0,0,0.8);
}
.progress-container:empty {
display: none;
@ -1244,6 +1251,20 @@ progress:not(value)::-webkit-progress-bar {
font-size: 10px;
margin: 10px;
}
.progress-bar .close {
display: none;
}
.progress-bar:hover .close {
position: absolute;
display: inline-block;
right: 10px;
}
.progress-bar .close:hover {
position: absolute;
display: inline-block;
color: red;
cursor: hand;
}
.progress-bar progress {
display: block;
width: 300px;

View File

@ -23,15 +23,32 @@ function getWorkerQueue(name, pool_size, no_auto_start, no_progress){
// XXX experimental -- STUB...
if(!no_progress){
// widget container...
var container = $('.progress-container')
if(container.length == 0){
container = $('<div class="progress-container"/>')
.appendTo($('.viewer'))
}
// the progress bar widget...
var progress = $('<div class="progress-bar">'+name+'</div>')
.appendTo(container)
// progress state...
var progress_state = $('<span class="state"/>')
.appendTo(progress)
// the close button...
$('<span class="close">&times;</span>')
.click(function(){
$(this).remove()
WORKERS[name]
.dropQueue()
/*
.depleted(function(){
delete WORKERS[name]
})
*/
})
.appendTo(progress)
var progress_bar = $('<progress id="'+name+'"/>')
.appendTo(progress)