flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-30 19:00:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ui/layout.css
View File

@ -1186,6 +1186,13 @@ progress:not(value)::-webkit-progress-bar {
*/ */
.progress-container { .progress-container {
position: absolute; position: absolute;
top: 20px;
margin: 5px;
padding: 2px;
}
.progress-container:hover {
border-radius: 5px;
background: rgba(0, 0, 0, 0.8);
} }
.progress-container:empty { .progress-container:empty {
display: none; display: none;
@ -1195,6 +1202,20 @@ progress:not(value)::-webkit-progress-bar {
font-size: 10px; font-size: 10px;
margin: 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 { .progress-bar progress {
display: block; display: block;
width: 300px; width: 300px;

21
ui/layout.less
View File

@ -1235,6 +1235,13 @@ progress:not(value)::-webkit-progress-bar {
.progress-container { .progress-container {
position: absolute; position: absolute;
top: 20px;
margin: 5px;
padding: 2px;
}
.progress-container:hover {
border-radius: 5px;
background: rgba(0,0,0,0.8);
} }
.progress-container:empty { .progress-container:empty {
display: none; display: none;
@ -1244,6 +1251,20 @@ progress:not(value)::-webkit-progress-bar {
font-size: 10px; font-size: 10px;
margin: 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 { .progress-bar progress {
display: block; display: block;
width: 300px; width: 300px;

17
ui/workers.js
View File

@ -23,15 +23,32 @@ function getWorkerQueue(name, pool_size, no_auto_start, no_progress){
// XXX experimental -- STUB... // XXX experimental -- STUB...
if(!no_progress){ if(!no_progress){
// widget container...
var container = $('.progress-container') var container = $('.progress-container')
if(container.length == 0){ if(container.length == 0){
container = $('<div class="progress-container"/>') container = $('<div class="progress-container"/>')
.appendTo($('.viewer')) .appendTo($('.viewer'))
} }
// the progress bar widget...
var progress = $('<div class="progress-bar">'+name+'</div>') var progress = $('<div class="progress-bar">'+name+'</div>')
.appendTo(container) .appendTo(container)
// progress state...
var progress_state = $('<span class="state"/>') var progress_state = $('<span class="state"/>')
.appendTo(progress) .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+'"/>') var progress_bar = $('<progress id="'+name+'"/>')
.appendTo(progress) .appendTo(progress)