diff --git a/ui/TODO.otl b/ui/TODO.otl index bb0c7320..75c53da2 100755 --- a/ui/TODO.otl +++ b/ui/TODO.otl @@ -114,7 +114,9 @@ Priority work [X] 100% actions [X] bug: shifting up to new ribbon pushes the current row down... | before starting on a fix, need to cleanup the code from old hacks and workarounds... - [_] 28% Preview II (optional features) + [_] 26% Preview II (optional features) + [_] make keyboeard handler mode-aware... + | this is needed to disable navigation keys in setup-mode, for example... [_] slideshow... [_] 50% serialization/deserialization [X] JSON loader/unloader diff --git a/ui/fullscreen.html b/ui/fullscreen.html index f921d5ce..8bc40ce3 100755 --- a/ui/fullscreen.html +++ b/ui/fullscreen.html @@ -74,7 +74,7 @@ function setup(){ // XXX get the timing right // XXX fire this when all is done, via an event... - $('.overlay').delay(500).fadeOut(700) + $('.splash').delay(500).fadeOut(700) } $(document).ready(setup); @@ -88,13 +88,19 @@ $(document).ready(setup);
-
+
ImageGrid
loading...
+
+
+
+
+
+
*
diff --git a/ui/gallery-prototype.js b/ui/gallery-prototype.js index 10dd9977..0afee2b2 100755 --- a/ui/gallery-prototype.js +++ b/ui/gallery-prototype.js @@ -113,21 +113,22 @@ ImageGrid.TYPE('toggle', function(obj){ }) + + function showInOverlay(obj){ // clean things up... - $('.overlay').children().remove() - - + $('.overlay .content').children().remove() // put it in the overlay... - $('.overlay').append(obj) - + $('.overlay .content').append(obj) // prepare the overlay... $('.overlay') .one('click', function(){ $('.overlay') - .fadeOut() - .children() - .remove() + .fadeOut(function(){ + $('.overlay .content') + .children() + .remove() + }) }) .fadeIn() return obj @@ -1026,10 +1027,10 @@ function toggleBackgroundModes(){ -//var toggleSingleImageModeTransitions = createCSSClassToggler('.viewer', 'no-single-image-transitions') +// XXX for some reason this is backwords... (says 'on' when it's off ans 'off' when on) ImageGrid.ACTION({ id: 'toggleSingleImageModeTransitions', - title: 'Single image mode transitions', + title: 'Disable single image mode transitions', doc: 'Toggle transitions in single image mode.', group: 'Mode: Single Image', type: 'toggle', @@ -1037,7 +1038,6 @@ ImageGrid.ACTION({ }) -//var toggleControls = createCSSClassToggler('.viewer', 'hidden-controls') ImageGrid.ACTION({ id: 'toggleControls', title: 'Keyboard interface', @@ -1048,7 +1048,6 @@ ImageGrid.ACTION({ }) -//var toggleTransitions = createCSSClassToggler('.viewer', 'transitions-enabled') ImageGrid.ACTION({ id: 'toggleTransitions', title: 'Global transitions', diff --git a/ui/gallery.css b/ui/gallery.css index 59374cbf..44166732 100755 --- a/ui/gallery.css +++ b/ui/gallery.css @@ -1,23 +1,44 @@ -.overlay { +.overlay, .splash { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; - overflow: auto; - + z-index: 9000; +} +.overlay { + display: none; +} +.splash { + color: gray; background-color: white; + opacity: 1.0; +} +.overlay .background, .overlay .content { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; color: gray; opacity: 1.0; - z-index: 9000; - text-align: center: } +.overlay .background { + background-color: white; + opacity: 0.5; + z-index: 9000; +} +.overlay .content { + overflow: auto; + opacity: 0.9; + z-index: 9010; +} -.overlay * { +.overlay *, .splash * { color: gray; } @@ -29,6 +50,7 @@ padding: 20px; margin: 5px; border: solid 1px silver; + background-color: white; } .options .option { @@ -253,15 +275,21 @@ /* dark background */ -.dark.viewer, .dark .overlay { +.dark.viewer, .dark .splash { background-color: rgb(32, 32, 32); } -.dark .overlay * { +.dark .overlay *, .dark .splash * { color: silver; } +.dark .overlay .options, .dark .overlay .background { + background-color: rgb(32, 32, 32); +} + + + .dark .screen-button { color: silver; @@ -278,14 +306,18 @@ /* black background */ -.black.viewer, .black .overlay { +.black.viewer, .black .splash { background-color: black; } -.black .overlay * { +.black .overlay *, .black .splash * { color: silver; } +.black .overlay .options, .black .overlay .background { + background-color: black; +} + .black .screen-button { color: white; diff --git a/ui/gallery.html b/ui/gallery.html index d8481aa7..abdaafe7 100755 --- a/ui/gallery.html +++ b/ui/gallery.html @@ -71,7 +71,7 @@ function setup(){ // XXX get the timing right // XXX fire this when all is done, via an event... - $('.overlay').delay(500).fadeOut(700) + $('.splash').delay(500).fadeOut(700) } $(document).ready(setup); @@ -83,13 +83,19 @@ $(document).ready(setup);
-
+
ImageGrid
- overlay... + loading...
+
+
+
+
+
+
*