From ab976b256c075897cfcf0bb36322a96ffdba6e76 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Fri, 13 Sep 2013 21:51:58 +0400 Subject: [PATCH] added ribbon indicator + broken crop modes... Signed-off-by: Alex A. Naanou --- ui/TODO.otl | 6 ++--- ui/base.js | 8 +++++-- ui/layout.css | 44 ++++++++++++++++++++++++++++++++++-- ui/layout.less | 52 +++++++++++++++++++++++++++++++++++++++++-- ui/setup.js | 13 +++++++++++ ui/ui.js | 60 +++++++++++++++++++++++++++++++++++++++++++------- 6 files changed, 166 insertions(+), 17 deletions(-) diff --git a/ui/TODO.otl b/ui/TODO.otl index 341c729a..946a3017 100755 --- a/ui/TODO.otl +++ b/ui/TODO.otl @@ -94,7 +94,7 @@ Roadmap [_] 28% Gen 3 current todo - [_] 56% High priority + [_] 57% High priority [_] 33% mormalize ribbons -- top-align sorted chunks [X] basic mechanics | splitData(...) @@ -197,8 +197,6 @@ Roadmap | centerView() fixes this, but only for the current image... [_] BUG: sometimes images.json folder is created... | can't repeat this yet, and seen only once... - [_] add indicator to ribbon up/down navigation in full screen... - | this might be a number or some kind of animation... [_] rework the marks.js/modes.js to enable multi-level ribbon cropping... [_] 0% full archive index [_] segmented loading of images and data @@ -324,6 +322,8 @@ Roadmap [_] remove extra and repetitive actions [_] caching config [_] side-by side view... + [X] add indicator to ribbon up/down navigation in full screen... + | this might be a number or some kind of animation... [X] BUG: scaling #2 in single image mode fits image to screen on wide screens [X] BUG: cropping in cropped mode will not save the whole data... [X] 100% BUG: sometimes the previews are not updated... diff --git a/ui/base.js b/ui/base.js index a9b9a1ef..1f76fdd6 100755 --- a/ui/base.js +++ b/ui/base.js @@ -765,7 +765,9 @@ function prevRibbon(){ target = next.length > 0 ? next : target } } - return centerView(focusImage(target)) + var res = centerView(focusImage(target)) + $('.viewer').trigger('focusedPrevRibbon', [getRibbonIndex()]) + return res } function nextRibbon(){ var cur = getImage() @@ -783,7 +785,9 @@ function nextRibbon(){ } } - return centerView(focusImage(target)) + var res = centerView(focusImage(target)) + $('.viewer').trigger('focusedNextRibbon', [getRibbonIndex()]) + return res } diff --git a/ui/layout.css b/ui/layout.css index 2c31b40e..39a84007 100644 --- a/ui/layout.css +++ b/ui/layout.css @@ -982,6 +982,30 @@ button:hover { color: gray; display: inline-block; } +.ribbon-indicator { + display: none; + position: absolute; + top: 10px; + left: 15px; + color: white; + font-size: 42px; + font-weight: bold; + font-style: italic; + text-shadow: black 0.1em 0.1em 0.6em; + opacity: 0.1; +} +.flashing-ribbon-indicator { + display: inline-block; +} +.single-image-mode.marks-visible.viewer .ribbon-indicator { + display: inline-block; +} +.ribbon-indicator:hover:after { + display: inline-block; + content: "ribbon number"; + font-size: 14px; + opacity: 0.8; +} /********************************************** Mode: single image ***/ .single-image-mode.viewer .image { background-color: transparent; @@ -1014,6 +1038,16 @@ button:hover { .light.viewer .ribbon-set:empty:after { color: gray; } +.light.viewer .ribbon-indicator { + color: silver; + text-shadow: none; + opacity: 0.3; +} +.light.viewer .ribbon-indicator:hover:after { + color: gray; + text-shadow: none; + opacity: 0.8; +} .gray.viewer, .gray.viewer .overlay-block .background { background: #333; @@ -1021,7 +1055,7 @@ button:hover { .gray.viewer .overlay-block .dialog { background: #555; } -.light.viewer .overlay-block:hover .background:after { +.gray.viewer .overlay-block:hover .background:after { color: silver; opacity: 0.4; } @@ -1032,10 +1066,16 @@ button:hover { .dark.viewer .overlay-block .dialog { background: #333; } -.light.viewer .overlay-block:hover .background:after { +.dark.viewer .overlay-block:hover .background:after { color: gray; opacity: 0.4; } +.dark.viewer .ribbon-indicator { + opacity: 0.2; +} +.dark.viewer .ribbon-indicator:hover:after { + opacity: 0.8; +} .large.viewer:not(.single-image-mode) .current.image { border-width: 3px; } diff --git a/ui/layout.less b/ui/layout.less index b773fd0f..d0a404db 100755 --- a/ui/layout.less +++ b/ui/layout.less @@ -1004,6 +1004,35 @@ button:hover { } +.ribbon-indicator { + display: none; + position: absolute; + top: 10px; + left: 15px; + + color: white; + font-size: 42px; + font-weight: bold; + font-style: italic; + text-shadow: black 0.1em 0.1em 0.6em; + + opacity: 0.1; +} +.flashing-ribbon-indicator { + display: inline-block; +} +.single-image-mode.marks-visible.viewer .ribbon-indicator { + display: inline-block; +} +.ribbon-indicator:hover:after { + display: inline-block; + content: "ribbon number"; + font-size: 14px; + + opacity: 0.8; +} + + /********************************************** Mode: single image ***/ @@ -1041,6 +1070,18 @@ button:hover { .light.viewer .ribbon-set:empty:after { color: gray; } +.light.viewer .ribbon-indicator { + color: silver; + text-shadow: none; + + opacity: 0.3; +} +.light.viewer .ribbon-indicator:hover:after { + color: gray; + text-shadow: none; + + opacity: 0.8; +} .gray.viewer, .gray.viewer .overlay-block .background { @@ -1049,7 +1090,7 @@ button:hover { .gray.viewer .overlay-block .dialog { background: #555; } -.light.viewer .overlay-block:hover .background:after { +.gray.viewer .overlay-block:hover .background:after { color: silver; opacity: 0.4; } @@ -1061,10 +1102,17 @@ button:hover { .dark.viewer .overlay-block .dialog { background: #333; } -.light.viewer .overlay-block:hover .background:after { +.dark.viewer .overlay-block:hover .background:after { color: gray; opacity: 0.4; } +.dark.viewer .ribbon-indicator { + opacity: 0.2; +} +.dark.viewer .ribbon-indicator:hover:after { + opacity: 0.8; +} + .large.viewer:not(.single-image-mode) .current.image { diff --git a/ui/setup.js b/ui/setup.js index e0e883fe..c97a3bfd 100755 --- a/ui/setup.js +++ b/ui/setup.js @@ -346,6 +346,19 @@ function setupDataBindings(viewer){ }) // info... + .on('focusingImage', + function(){ + showRibbonIndicator() + }) + .on([ + 'focusedNextRibbon', + 'focusedPrevRibbon' + ].join(' '), + function(){ + if(toggleSingleImageMode('?') == 'on'){ + flashRibbonIndicator() + } + }) .on([ 'focusingImage', 'togglingMark' diff --git a/ui/ui.js b/ui/ui.js index 690cf828..9fd44c58 100755 --- a/ui/ui.js +++ b/ui/ui.js @@ -115,6 +115,46 @@ function flashIndicator(direction){ } +function showRibbonIndicator(){ + var cls = '.ribbon-indicator' + var indicator = $(cls) + + if(indicator.length == 0){ + indicator = $('
') + .addClass(cls.replace('.', '')) + .appendTo($('.viewer')) + } + + var r = getRibbonIndex() + + // get the base ribbon... + // XXX add a real base ribbon index... + var base = 0 + + var r = r == base ? r+'*' : r + return indicator.text(r) +} + +function flashRibbonIndicator(){ + var indicator = showRibbonIndicator() + var cls = '.flashing-ribbon-indicator' + + var flashing_indicator = $(cls) + + if(flashing_indicator.length == 0){ + flashing_indicator = indicator + .clone() + .addClass(cls.replace('.', '')) + .appendTo($('.viewer')) + } + + return flashing_indicator + .show() + .delay(100) + .fadeOut(300) +} + + // Update an info element // // align can be: @@ -775,7 +815,6 @@ function formDialog(root, message, config, btn, cls){ var _alert = alert function alert(){ var message = Array.apply(null, arguments).join(' ') - //return formDialog(null, String(message), {}, 'OK', 'alert') return formDialog(null, String(message), {}, false, 'alert') } @@ -987,6 +1026,8 @@ function showImageInfo(){ '

"'+ name +'"

'+ ''+ + // basic info... + ''+ ''+ ''+ ''+ @@ -1005,18 +1046,21 @@ function showImageInfo(){ ''), // NOTE: without a save button, there will be no way to accept the // form on a touch-only device... - {}, 'Save', 'showImageInfoDialog') + {}, 'OK', 'showImageInfoDialog') // save the form data... .done(function(_, form){ // comment... - var comment = form.find('.comment').html().replace(/
/ig, '\n') - if(comment.trim() == ''){ - delete data.comment - } else { - data.comment = comment + var ncomment = form.find('.comment').html() + if(ncomment != comment){ + ncomment = ncomment.replace(/
/ig, '\n') + if(ncomment.trim() == ''){ + delete data.comment + } else { + data.comment = ncomment + } + IMAGES_UPDATED.push(gid) } - IMAGES_UPDATED.push(gid) // XXX tags... // XXX
GID: '+ gid +'
Path: "'+ data.path +'"
Orientation: '+ orientation +'°'+flipped+'