fixed single image mode...

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

ui/TODO.otl

@@ -1,5 +1,5 @@
 Priority work
-	[_] 64% Preview II
+	[_] 67% 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,16 +58,14 @@ Priority work
 				[X] one (with zooming)
 			[X] single image mode with zooming
 			| ribbons are hidden
-		[_] 18% UI
+		[_] 30% UI
-			[_] fix single image mode
+			[X] fix single image mode
 			| need to center the image correctly...
-			[_] 44% add screen buttons for all actions...
+			[_] 46% add screen buttons for all actions...
 				[X] navigation
 				[X] actions
 				[_] zooming
-				[_] 20% zoom presets
+				[_] 33% zoom presets
-					[_] in
-					[_] out
 					[_] single
 					[_] three
 					[X] wide
@@ -152,6 +150,9 @@ Priority work
 	[_] 0% Pre-Alpha
 		[_] 0% finalize UI logic
 			[_] unsorted images
+	[_] 0% Alpha
+	[_] 0% Beta
+	[_] 0% 1.0
 	
 
 Goals:
@@ -219,32 +220,42 @@ Goals:
 	all levels always browsable
 	make all the steps except the actual sorting implicit
 	| i.e. no jumping through hoops for the human...
+	use the same mechanism as used for sorting, for image selection
+	| this can be used for tagging, exhibitions, ...etc.
+		context
+		| a context consists of two things:
+		| - image selection (might be a product of another context, search or selection)
+		| - a way the levels are interpreted within this context
+		|
+		| default contexts: 
+		| - full view rating context
+		|   this incorporates ALL the archive and the levels are interpreted as ratings.
+		| - selection rating context
+		|   same as full view but only part of the archive is rated
+		|   XXX this will need to be merged correctly back into the archive...
+		| - selection context
+		|   this simply takes one set of images as input and shows a subset as output.
+		|
+		| contexts are persistent, much like a catalogue.
+		|
+		| a context can be cloned and re-used.
+		|
+		| contexts can be used to mark:
+		| - shoots
+		| - subjects
+		| - exhibitions/shows
+		| - portfolios
+		| - ...
 	
 
+[[controls.otl]]
 
-basic structure
-	[X] ribbons	
-	[X] images
-	[_] indicators
-	| show where the images came from...
-	
 
-[_] % basic control elements
-	[_] 77% touch zones / buttons
-		[X] next				DONE
-		[X] prev				DONE
-		[X] shift up			DONE
-		[X] shift down			DONE
-		[X] promote				DONE
-		[X] demote				DONE
-		[_] zoom in				~
-		[_] zoom out			~
-		[X] toggle single image	DONE
 
 [_] 38% features
 	[_] 55% views
 		[_] 60% ribbon-based view
-			[_] show all
+			[_] show all (very zoomed out view)
 			| might be good to not show any images here at all, just replace them with their average color
 			[X] show map
 			[X] fit to ribbon
@@ -266,6 +277,8 @@ basic structure
 		[_] crop
 		[_] rotate
 
+
+
 [_] 38% General ToDo
 	[_] 80% image sorting
 		[_] will affect:
@@ -297,9 +310,6 @@ basic structure
 		[_] position in ribbon
 
 
-[X] 100% refactoring:
-	[X] merge almost identical functions...
-
 
 [_] % ISSUES and BUGS:
 	[_] jumping on focus up/down...

ui/gallery.css

@@ -1,10 +1,5 @@
 .image {
-	/* new markup... */
 	float: left;
-	/* old markup...
-	position: relative;
-	display: inline-block;
-	 */
 
 	width: 350px;
 	height: 350px;
@@ -23,10 +18,12 @@
 	cursor: hand;
 }
 
+
 .mock-image {
 	background: blue;
 }
 
+
 .demo-buttons {
 	margin: 15px
 	border: groove 2px;
@@ -39,16 +36,21 @@
 	-ms-transition: all 0.2s ease;	
 	transition: all 0.2s ease;
 }
+
+
 .demo-buttons:hover {
 	opacity: 1;
 }
 
+
 .viewer {
 	width: 900px;
 	height: 500px;
 	border: solid blue 5px;
 	margin: 20px; 
 }
+
+
 .controller {
 	height: 500px;
 	width: 50px;
@@ -61,9 +63,8 @@
 	-ms-transition: all 0.2s ease;	
 	transition: all 0.2s ease;
 }
-.single-image-mode .controller {
+
-	opacity: 0.8;
+
-}
 .promote, .next-image, .prev-image, .demote, .toggle-wide, .toggle-single {
 	text-align: center;
 	vertical-align: middle;
@@ -71,31 +72,48 @@
 	height: 150px; 
 	background: gray;
 
-   -moz-user-select: none;
+	-moz-user-select: none;
-   -webkit-user-select: none;
+	-webkit-user-select: none;
-   -o-user-select: none;
+	-o-user-select: none;
-   -ms-user-select: none;
+	-ms-user-select: none;
-   user-select: none;
+	user-select: none;
 }
+
+
 .next-image, .prev-image, .toggle-wide, .toggle-single {
 	background: silver;
 }
+
+
 .toggle-wide, .toggle-single {
 	height:50px
 }
+
+
 .promote {
 }
+
+
 .next-image {
 }
+
+
 .prev-image {
 }
+
+
 .demote {
 }
+
+
 .toggle-wide {
 }
+
+
 .toggle-single {
 }
 
+
 .container {
 	position: relative;
 	overflow: hidden;
@@ -111,11 +129,10 @@
 	transition: all 0.2s ease;
 }
 
+
 .field {
 	position: relative;
 	overflow: visible;
-	/* XXX replace this with transform:scale(...) */
-	zoom: 1;
 	top: 0px;
 	left: 0px;
 	margin-top: 0px;
@@ -127,6 +144,7 @@
 	transition: all 0.2s ease;
 }
 
+
 .ribbon {
 	height: 360px;
 	/* XXX make this expand dynamically */
@@ -134,8 +152,7 @@
 	overflow: visible;
 	padding-top: 2px;
 	padding-bottom: 2px;
-	/*text-align: center;*/
+	opacity: 0.5;
-	opacity: 0.2;
 
 	-webkit-transition: all 0.2s ease;
 	-moz-transition: all 0.2s ease;
@@ -144,6 +161,8 @@
 	transition: all 0.2s ease;
 
 }
+
+
 .new-ribbon {
 	height: 0px;
 
@@ -154,16 +173,13 @@
 	transition: all 0.2s ease;
 }
 
+
 .current.image {
 	opacity: 1.0;
 }
 
-.current.ribbon {
-	/*
-	padding-top: 20px;
-	padding-bottom: 20px;
-	*/
 
+.current.ribbon {
 	opacity: 1.0;
 
 	-webkit-transition: all 0.2s ease;
@@ -173,54 +189,8 @@
 	transition: all 0.2s ease;
 }
 
+
 .current.ribbon .image {
 }
 
 
-/* single image theme (start everything with .single-image-mode) 
- *
- * XXX need to make this touch friendly...
- */
-.single-image-mode .container {
-	background: gray;
-}
-
-.single-image-mode .image {
-	opacity: 0.0;
-	/* XXX need to fix animation with this... */
-	position: absolute;
-	left: 0px;
-	/*
-	zoom: 120%;
-	*/
-}
-
-.single-image-mode .image:hover {
-	/*opacity: 0.5;*/
-	/* XXX need to fix animation with this... */
-	position: absolute;
-	left: 0px;
-}
-
-.single-image-mode .current.image:hover, .single-image-mode .current.image {
-	opacity: 1.0;
-	/* XXX need to fix animation with this... */
-	position: absolute;
-	left: 0px;
-}
-
-
-/* wide view mode */
-
-/* XXX not yet working correctly...
-.wide-view-mode {
-	transform: scale(0.2,0.2);
-	-ms-transform: scale(0.2,0.2);
-	-webkit-transform: scale(0.2,0.2);
-	-o-transform: scale(0.2,0.2);
-	-moz-transform: scale(0.2,0.2);
-}
-*/
-.wide-view-mode .field {
-}
-

ui/gallery.html

@@ -3,7 +3,11 @@
 -->
 
 <link rel="stylesheet" href="gallery.css">
+<link rel="stylesheet" href="single-image-mode.css">
+
 <link rel="stylesheet" href="markers.css">
+
+
 <script src="jquery.js"></script>
 <script src="jquery-ui-1.8.22.custom.min.js"></script>