cleanup...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui/TODO.otl

@@ -58,7 +58,7 @@ Priority work
 				[X] one (with zooming)
 			[X] single image mode with zooming
 			| ribbons are hidden
-		[_] 66% UI
+		[_] 69% UI
 			[X] fix single image mode
 			| need to center the image correctly...
 			[X] 100% add screen buttons for all actions...
@@ -73,14 +73,14 @@ Priority work
 			[X] 100% control single-image mode animations
 				[X] scroll
 				[X] switch (no transition)
-			[_] 0% layout
-				[_] 0% tablet
+			[_] 16% layout
+				[_] 50% tablet
 					[_] stretch to full screen
 					| NOTE: viewer 0% sizes may break things...
 					[_] restrict to horizontal / do a different vertical layout
-					[_] make buttons semi-transparent and same color as bg in all modes
+					[X] make buttons semi-transparent and same color as bg in all modes
 					| just like single image mode...
-					[_] make bg color switching in all modes
+					[X] make bg color switching in all modes
 					| black, white, gray
 				[_] 0% PC
 					[_] stretch to full screen

ui/gallery.css

@@ -24,15 +24,16 @@
 	background-color: white;
 	color: gray;
 
-	/* XXX put a logo here */
-	font-weight: bold;
-	font-size: 24pt;
-
-	opacity: 0.9;
+	opacity: 1.0;
 
 	z-index: 9000;
 }
 
+.loading * {
+	color: gray;
+}
+
+
 
 .image {
 	float: left;
@@ -283,6 +284,11 @@
 }
 
 
+.dark .loading * {
+	color: silver;
+}
+
+
 .dark .screen-button {
 	color: silver;
 }
@@ -302,6 +308,10 @@
 	background-color: black;
 }
 
+.black .loading * {
+	color: silver;
+}
+
 
 .black .screen-button {
 	color: white;

ui/gallery.html

@@ -30,6 +30,9 @@ function setup(){
 	// initial state (default)...
 	setDefaultInitialState()
 
+	// XXX
+	//setBackgroundMode('dark')
+
 	// setup event handlers...
 	setupKeyboard()
 	setupGestures()
@@ -52,7 +55,9 @@ function setup(){
 	// set the default position and init...
 	$('.current.image').click()
 
-	$('.loading').delay(200).fadeOut(400)
+	// XXX get the timing right
+	// XXX fire this when all is done, via an event...
+	$('.loading').delay(500).fadeOut(700)
 }
 $(document).ready(setup);
 
@@ -67,7 +72,8 @@ $(document).ready(setup);
 	<div class="loading">
 		<!-- XXX replace this with a background-image logo... -->
 		<table width="100%" height="100%"><tr><td align="center" valign="middle">
-			ImageGrid
+			<big><b>ImageGrid</b></big><br>
+			<small><i>loading...</i></small>
 		</td></tr></table>
 	</div>
 	<div class="controller left">