diff --git a/ui/TODO.otl b/ui/TODO.otl index c77821a7..e20fea58 100755 --- a/ui/TODO.otl +++ b/ui/TODO.otl @@ -1,5 +1,5 @@ Priority work - [_] 73% Preview II + [_] 74% Preview II [X] 100% sorted images in ribbons [X] 100% stage I: position the promoted/demoted image correctly | and correct positioning on promote/demote @@ -58,7 +58,7 @@ Priority work [X] one (with zooming) [X] single image mode with zooming | ribbons are hidden - [_] 69% UI + [_] 72% UI [X] fix single image mode | need to center the image correctly... [X] 100% add screen buttons for all actions... @@ -73,7 +73,7 @@ Priority work [X] 100% control single-image mode animations [X] scroll [X] switch (no transition) - [_] 16% layout + [_] 33% layout [_] 50% tablet [_] stretch to full screen | NOTE: viewer 0% sizes may break things... @@ -82,9 +82,9 @@ Priority work | just like single image mode... [X] make bg color switching in all modes | black, white, gray - [_] 0% PC + [_] 50% PC [_] stretch to full screen - [_] hide buttons for keyboard actions + [X] hide buttons for keyboard actions [_] web | is this is the same as the above two? (with auto-select) [_] 0% settings/help screen diff --git a/ui/gallery-prototype.js b/ui/gallery-prototype.js index a08dbe96..0e03572f 100755 --- a/ui/gallery-prototype.js +++ b/ui/gallery-prototype.js @@ -8,6 +8,7 @@ var keys = { toggleSingleImageMode: [70, 13], // ???, Enter toggleSingleImageModeTransitions: [84], // t toggleBackgroundModes: [66], // b + toggleControls: [9], // tab close: [27, 88, 67], // ??? // zooming... @@ -116,6 +117,8 @@ function setupControlElements(){ $('.screen-button.fit-three').click(fitThreeImages) + $('.screen-button.show-controls').click(showControls) + $('.screen-button.settings').click(function(){alert('not implemented yet...')}) } @@ -251,6 +254,7 @@ function handleKeys(event){ : (fn(code, keys.toggleSingleImageModeTransitions) >= 0) ? toggleSingleImageModeTransitions() : (fn(code, keys.toggleBackgroundModes) >= 0) ? toggleBackgroundModes() + : (fn(code, keys.toggleControls) >= 0) ? toggleControls() // debug... : (fn(code, keys.toggleMarkers) >= 0) ? toggleMarkers() @@ -384,31 +388,38 @@ function setBackgroundMode(mode){ // this will toggle through background theems: none -> dark -> black function toggleBackgroundModes(){ - var mode = null - - // find a mode to set... - for(var i = 0; i < BACKGROUND_MODES.length-1; i++){ - // we found our mode... - if( $('.' + BACKGROUND_MODES[i]).length > 0 ){ - // set the next mode in list... - mode = BACKGROUND_MODES[i+1] - $('.viewer').addClass(mode) - break - } - } - // if no set modes are found, set the default... - if($('.' + BACKGROUND_MODES[BACKGROUND_MODES.length-1]).length == 0){ - $('.viewer').addClass(BACKGROUND_MODES[0]) - // remove all other modes... + var mode = getBackgroundMode() + // default -> first + if(mode == null){ + setBackgroundMode(BACKGROUND_MODES[0]) + // last -> default... + } else if(mode == BACKGROUND_MODES[BACKGROUND_MODES.length-1]){ + setBackgroundMode() + // next... } else { - var cur = BACKGROUND_MODES.indexOf(mode) - for(var i = 0; i < BACKGROUND_MODES.length; i++){ - if( i == cur ){ - continue - } - mode = BACKGROUND_MODES[i] - $('.' + mode).removeClass(mode) - } + setBackgroundMode(BACKGROUND_MODES[BACKGROUND_MODES.indexOf(mode)+1]) + } +} + + + +function showControls(){ + $('.hidden-controls').removeClass('hidden-controls') +} + + + +function hideControls(){ + $('.viewer').addClass('hidden-controls') +} + + + +function toggleControls(){ + if( $('.hidden-controls').length > 0 ){ + showControls() + } else { + hideControls() } } diff --git a/ui/gallery.css b/ui/gallery.css index 8c706bd0..929ce7fe 100755 --- a/ui/gallery.css +++ b/ui/gallery.css @@ -98,12 +98,14 @@ } -.controller { +.controller, .controller-mini { position: absolute; - height: 500px; + overflow: hidden; width: 50px; + height: 500px; + /* keep these on top of the normal elements but below the high * visibility 9000+ crowd... */ @@ -118,6 +120,15 @@ opacity: 0.5; } +.controller-mini { + width: 0px; +} + +.hidden-controls .controller-mini { + width: 25px; +} + + .controller.left { left: 0px; } @@ -125,6 +136,20 @@ right: 0px; } +.hidden-controls .controller.left { + width: 0px; +} +.hidden-controls .controller.right { + width: 0px; +} + +.controller-mini.left { + left: 0px; +} +.controller-mini.right { + right: 0px; +} + .screen-button { text-align: center; @@ -141,7 +166,8 @@ } -.next-image, .prev-image, .toggle-wide, .toggle-single, .zoom-in, .settings, .toggle-wide { +.controller-mini .screen-button { + height: 50%; } @@ -150,6 +176,7 @@ height: 10%; } + .toggle-single, .fit-three, .zoom-in, .zoom-out { height: 10%; } @@ -159,39 +186,6 @@ height: 5%; } -.promote { -} - - -.next-image { -} - - -.prev-image { -} - - -.demote { -} - - -.toggle-wide { -} - - -.toggle-single { -} - - -.zoom-in { -} - - -.zoom-out { -} - - - .container { position: relative; diff --git a/ui/gallery.html b/ui/gallery.html index b8da9d1f..5828a8de 100755 --- a/ui/gallery.html +++ b/ui/gallery.html @@ -76,6 +76,10 @@ $(document).ready(setup); loading... +
+
*
+
+
^
<
@@ -95,7 +99,10 @@ $(document).ready(setup);
- +
+
?
+
+
^
>
@@ -108,7 +115,8 @@ $(document).ready(setup);
- + +

diff --git a/ui/single-image-mode.css b/ui/single-image-mode.css index f270c76c..086d0d8f 100755 --- a/ui/single-image-mode.css +++ b/ui/single-image-mode.css @@ -4,7 +4,7 @@ } -.single-image-mode .controller { +.single-image-mode .controller, .single-image-mode .controller-mini { opacity: 0.2; }