diff --git a/ui/layout.css b/ui/layout.css index 690b7ff6..5bd4a45c 100755 --- a/ui/layout.css +++ b/ui/layout.css @@ -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; diff --git a/ui/layout.less b/ui/layout.less index af57cc55..930c7bef 100755 --- a/ui/layout.less +++ b/ui/layout.less @@ -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; diff --git a/ui/workers.js b/ui/workers.js index 91fff046..7c53d82b 100755 --- a/ui/workers.js +++ b/ui/workers.js @@ -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 = $('
') .appendTo($('.viewer')) } + // the progress bar widget... var progress = $('') .appendTo(container) + // progress state... var progress_state = $('') .appendTo(progress) + // the close button... + $('×') + .click(function(){ + $(this).remove() + WORKERS[name] + .dropQueue() + /* + .depleted(function(){ + delete WORKERS[name] + }) + */ + }) + .appendTo(progress) + var progress_bar = $('') .appendTo(progress)