mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 03:10:07 +00:00
added queued status messaging, added tips/descriotions for global and context status areas (not sure if it'll stay)...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
4930b816e7
commit
8ae8955825
@ -34,7 +34,8 @@ if(window.CEF_dumpJSON != null){
|
||||
// progress/notify action, removing it (string 'Error') from the arguments.
|
||||
//
|
||||
// Will return the original deferred.
|
||||
function statusNotify(prefix, loader){
|
||||
function statusNotify(prefix, loader, not_queued){
|
||||
var report = not_queued == true ? showStatus : showStatusQ
|
||||
if(loader == null){
|
||||
loader = prefix
|
||||
prefix = null
|
||||
@ -49,7 +50,7 @@ function statusNotify(prefix, loader){
|
||||
args.pop()
|
||||
return showErrorStatus(args.join(': '))
|
||||
}
|
||||
return showStatus(args.join(': '))
|
||||
return report(args.join(': '))
|
||||
})
|
||||
}
|
||||
|
||||
@ -238,7 +239,7 @@ function saveFileImages(name){
|
||||
$.each($.map(listDir(normalizePath(CACHE_DIR)), function(e){
|
||||
return IMAGES_DIFF_FILE_PATTERN.test(e) ? e : null
|
||||
}), function(i, e){
|
||||
showStatus('removeing:', e)
|
||||
showStatusQ('removeing:', e)
|
||||
removeFile(normalizePath(CACHE_DIR +'/'+ e))
|
||||
})
|
||||
IMAGES_UPDATED = []
|
||||
|
||||
@ -436,12 +436,18 @@ var KEYBOARD_CONFIG = {
|
||||
function(){
|
||||
event.preventDefault()
|
||||
//saveLocalStorage()
|
||||
showStatusQ('Saving: localStorage: Data.')
|
||||
saveLocalStorageData()
|
||||
showStatusQ('Saving: localStorage: Marks.')
|
||||
saveLocalStorageMarks()
|
||||
|
||||
showStatusQ('Saving: localStorage: Settings.')
|
||||
saveLocalStorageSettings()
|
||||
|
||||
showStatusQ('Saving: File: State.')
|
||||
saveFileState()
|
||||
|
||||
showStatusQ('Saving: Done.')
|
||||
})
|
||||
},
|
||||
Z: {
|
||||
|
||||
@ -635,12 +635,31 @@ body {
|
||||
display: none;
|
||||
}
|
||||
/* these are generic containers for indicators */
|
||||
.global-mode-indicators {
|
||||
.global-mode-indicators,
|
||||
.context-mode-indicators {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
height: 20px;
|
||||
width: auto;
|
||||
min-width: 300px;
|
||||
text-align: right;
|
||||
color: transparent;
|
||||
}
|
||||
.global-mode-indicators {
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
.global-mode-indicators .mode-tip,
|
||||
.context-mode-indicators .mode-tip {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.global-mode-indicators:hover,
|
||||
.context-mode-indicators:hover {
|
||||
color: silver;
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
}
|
||||
.global-mode-indicators > *,
|
||||
.context-mode-indicators > * {
|
||||
font-size: small;
|
||||
vertical-align: center;
|
||||
}
|
||||
@ -669,13 +688,8 @@ body {
|
||||
}
|
||||
/* context indicators */
|
||||
.context-mode-indicators {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
height: 20px;
|
||||
width: auto;
|
||||
font-size: small;
|
||||
vertical-align: center;
|
||||
}
|
||||
.context-mode-indicators > * {
|
||||
margin-left: 10px;
|
||||
|
||||
@ -588,16 +588,39 @@ body {
|
||||
|
||||
|
||||
/* these are generic containers for indicators */
|
||||
.global-mode-indicators {
|
||||
.global-mode-indicators,
|
||||
.context-mode-indicators {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
height: 20px;
|
||||
width: auto;
|
||||
min-width: 300px;
|
||||
text-align: right;
|
||||
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.global-mode-indicators {
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.global-mode-indicators .mode-tip,
|
||||
.context-mode-indicators .mode-tip {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.global-mode-indicators:hover,
|
||||
.context-mode-indicators:hover {
|
||||
color: gray;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.global-mode-indicators > *,
|
||||
.context-mode-indicators > * {
|
||||
font-size: small;
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
.global-mode-indicators>* {
|
||||
margin-left: 10px;
|
||||
}
|
||||
@ -608,6 +631,7 @@ body {
|
||||
height: @single-image-indicator-size;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* hide indicators in single image mode */
|
||||
.single-image-mode.viewer .global-mode-indicators {
|
||||
opacity: 0.5;
|
||||
@ -624,14 +648,9 @@ body {
|
||||
|
||||
/* context indicators */
|
||||
.context-mode-indicators {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
height: 20px;
|
||||
width: auto;
|
||||
|
||||
font-size: small;
|
||||
vertical-align: center;
|
||||
}
|
||||
.context-mode-indicators>* {
|
||||
margin-left: 10px;
|
||||
|
||||
46
ui/ui.js
46
ui/ui.js
@ -9,6 +9,10 @@
|
||||
var CURSOR_SHOW_THRESHOLD = 20
|
||||
var CURSOR_HIDE_TIMEOUT = 1000
|
||||
|
||||
var STATUS_QUEUE = []
|
||||
var STATUS_QUEUE_TIME = 200
|
||||
|
||||
|
||||
|
||||
|
||||
/*********************************************************************/
|
||||
@ -190,6 +194,46 @@ function showStatus(message){
|
||||
}
|
||||
|
||||
|
||||
// Same as showStatus(...) but queue the message so as to display it for
|
||||
// a meaningful amount of time...
|
||||
//
|
||||
// - This will print the first message right away.
|
||||
// - Each consecutive message if STATUS_QUEUE_TIME has not passed yet
|
||||
// will get queued.
|
||||
// - Once the STATUS_QUEUE_TIME has passed the next message is reported
|
||||
// and so on until the queue is empty.
|
||||
//
|
||||
// NOTE: for very a fast and large sequence of messages the reporting
|
||||
// may (will) take longer (significantly) than the actual "job"...
|
||||
// NOTE: this will delay the logging also...
|
||||
function showStatusQ(message){
|
||||
if(STATUS_QUEUE.length == 0){
|
||||
|
||||
// end marker...
|
||||
STATUS_QUEUE.push(0)
|
||||
|
||||
showStatus.apply(null, arguments)
|
||||
|
||||
function _printer(){
|
||||
// if queue is empty we have nothing to do...
|
||||
if(STATUS_QUEUE.length == 1){
|
||||
STATUS_QUEUE.pop()
|
||||
return
|
||||
}
|
||||
// if not empty show a status and repeat...
|
||||
showStatus.apply(null, STATUS_QUEUE.pop())
|
||||
setTimeout(_printer, STATUS_QUEUE_TIME)
|
||||
}
|
||||
|
||||
setTimeout(_printer, STATUS_QUEUE_TIME)
|
||||
|
||||
// queue not empty...
|
||||
} else {
|
||||
STATUS_QUEUE.splice(1, 0, Array.apply(Array, arguments))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Same as showStatus(...) but will always add 'Error: ' to the start
|
||||
// of the message
|
||||
//
|
||||
@ -230,6 +274,7 @@ function showGlobalIndicator(cls, text){
|
||||
if(c.length == 0){
|
||||
c = $('<div>')
|
||||
.addClass('global-mode-indicators')
|
||||
.append('<span class="mode-tip">Global status:</span>')
|
||||
.appendTo($('.viewer'))
|
||||
}
|
||||
return makeIndicator(text)
|
||||
@ -241,6 +286,7 @@ function showContextIndicator(cls, text){
|
||||
if(c.length == 0){
|
||||
c = $('<div>')
|
||||
.addClass('context-mode-indicators')
|
||||
.append('<span class="mode-tip">Context status:</span>')
|
||||
.appendTo($('.viewer'))
|
||||
}
|
||||
return makeIndicator(text)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user