diff --git a/ui/files.js b/ui/files.js index bbb3dc2e..45b52c75 100755 --- a/ui/files.js +++ b/ui/files.js @@ -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 = [] diff --git a/ui/keybindings.js b/ui/keybindings.js index 2efe892f..e9275305 100755 --- a/ui/keybindings.js +++ b/ui/keybindings.js @@ -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: { diff --git a/ui/layout.css b/ui/layout.css index 4d4fefe4..3a0c41e1 100644 --- a/ui/layout.css +++ b/ui/layout.css @@ -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; diff --git a/ui/layout.less b/ui/layout.less index 525cac5d..af17a55f 100755 --- a/ui/layout.less +++ b/ui/layout.less @@ -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; diff --git a/ui/ui.js b/ui/ui.js index cf6ad069..778bf0c5 100755 --- a/ui/ui.js +++ b/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 = $('
') .addClass('global-mode-indicators') + .append('Global status:') .appendTo($('.viewer')) } return makeIndicator(text) @@ -241,6 +286,7 @@ function showContextIndicator(cls, text){ if(c.length == 0){ c = $('
') .addClass('context-mode-indicators') + .append('Context status:') .appendTo($('.viewer')) } return makeIndicator(text)