minor tweaking...

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

ui/base.js

@@ -864,6 +864,9 @@ var _ccw = {
 	270: 180,
 }
 
+// NOTE: this works only on loaded images, if something more global is
+// 		needed, then one should write a GID based version (data.js)
+// 		XXX do we need a GID based version?
 function rotateImage(direction, image){
 	var r_table = direction == 'left' ? _cw : _ccw
 	image = image == null ? getImage() : $(image)
@@ -920,6 +923,10 @@ function setImageFlipState(image, state){
 // direction can be:
 // 	- 'vertical'
 // 	- 'horizontal'
+//
+// NOTE: this works only on loaded images, if something more global is
+// 		needed, then one should write a GID based version (data.js)
+// 		XXX do we need a GID based version?
 function flipImage(direction, image){
 	image = image == null ? getImage() : $(image)
 	image.each(function(i, e){
@@ -950,6 +957,25 @@ function flipHorizontal(image){
 
 
 
+/***************************************************** Image reset ***/
+
+// NOTE: this works only on loaded images, if something more global is
+// 		needed, then one should write a GID based version (data.js)
+// 		XXX do we need a GID based version?
+function resetToOriginalImage(image){
+	image = image == null ? getImage() : $(image)
+
+	image.each(function(i, e){
+		$(e).removeAttr('flipped orientation')
+	})
+
+	$('.viewer').trigger('resetToOriginalImage' + direction.capitalize(), [image])
+	
+	return image
+}
+
+
+
 /********************************************************* Zooming ***/
 
 function fitNImages(n){

ui/data.js

@@ -764,9 +764,7 @@ function updateImage(image, gid, size){
 		})
 
 	// flip...
-	if(img_data.flipped != null){
+	setImageFlipState(image, img_data.flipped == null ? [] : img_data.flipped)
-		setImageFlipState(image, img_data.flipped)
-	}
 
 	// marks...
 	if(MARKED.indexOf(gid) != -1){

ui/layout.css

@@ -2,6 +2,16 @@
 * 
 **********************************************************************/
 /********************************************************** Mixins ***/
+/********************************************************* utility ***/
+.expanding-text .hidden {
+  display: none;
+}
+.expanding-text:hover .shown {
+  display: none;
+}
+.expanding-text:hover .hidden {
+  display: inline;
+}
 /*********************************************************************/
 body {
   font-family: sans-serif;
@@ -303,41 +313,6 @@ body {
 	right: -15px;
 }
 */
-/*.marks-visible.viewer:not(.single-image-mode):after {*/
-/*
-.marks-visible.viewer:after {
-	display: block;
-	position: absolute;
-	content: "";
-	font-size: 0pt;
-
-	top: 10px;
-	right: 10px;
-	width: 10px;
-	height: 10px;
-
-	border: solid 2px blue;
-	border-radius: 50%;
-	background: blue;
-}
-.marked-only-view.viewer:after {
-	display: block;
-	position: absolute;
-	content: "";
-	font-size: 0pt;
-	top: 10px;
-	right: 10px;
-	width: 10px;
-	height: 10px;
-
-	border: solid 2px blue;
-	border-radius: 50%;
-	background: transparent;
-}
-.marked-only-view.marks-visible.viewer:after {
-	background: blue;
-}
-*/
 /* XXX should we use opacity??? */
 .marked-only-view.viewer:not(.marks-visible) .image:not(.marked) {
   opacity: 0.3;
@@ -567,9 +542,6 @@ body {
   padding-left: 10px;
   padding-right: 10px;
   box-sizing: border-box;
-  white-space: nowrap;
-  /*overflow: hidden;*/
-
   background: black;
   color: white;
   opacity: 0.6;
@@ -667,6 +639,7 @@ body {
   height: 20px;
   width: auto;
   font-size: small;
+  vertical-align: center;
 }
 .global-mode-indicators > * {
   margin-left: 10px;
@@ -698,6 +671,7 @@ body {
   height: 20px;
   width: auto;
   font-size: small;
+  vertical-align: center;
 }
 .context-mode-indicators > * {
   margin-left: 10px;
@@ -715,6 +689,8 @@ body {
 .context-mode-indicators .current-image-marked {
   display: none;
   color: blue;
+  height: 20px;
+  vertical-align: center;
 }
 .global-mode-indicators .marked-only-visible .shown,
 .global-mode-indicators .marks-visible .shown,
@@ -725,13 +701,15 @@ body {
 .global-mode-indicators .marks-visible:after,
 .context-mode-indicators .current-image-marked:after {
   display: inline-block;
-  width: 10px;
+  width: 6px;
-  height: 10px;
+  height: 6px;
   border-radius: 50%;
   content: "";
   background-color: blue;
   border: solid 2px blue;
   margin-left: 5px;
+  margin-top: 3px;
+  top: 50%;
 }
 .marks-visible.viewer .global-mode-indicators .marks-visible {
   display: inline-block;
@@ -844,15 +822,5 @@ body {
   padding-right: 0px;
   padding-left: 0px;
 }
-/********************************************************* utility ***/
-.expanding-text .hidden {
-  display: none;
-}
-.expanding-text:hover .shown {
-  display: none;
-}
-.expanding-text:hover .hidden {
-  display: inline;
-}
 /**********************************************************************
 * vim:set spell ft=css :                                             */

ui/layout.less

@@ -39,6 +39,18 @@
 
 
 
+/********************************************************* utility ***/
+.expanding-text .hidden {
+	display: none;
+}
+.expanding-text:hover .shown {
+	display: none;
+}
+.expanding-text:hover .hidden {
+	display: inline;
+}
+
+
 /*********************************************************************/
 
 
@@ -311,42 +323,6 @@ body {
 */
 
 
-/*.marks-visible.viewer:not(.single-image-mode):after {*/
-/*
-.marks-visible.viewer:after {
-	display: block;
-	position: absolute;
-	content: "";
-	font-size: 0pt;
-
-	top: 10px;
-	right: 10px;
-	width: 10px;
-	height: 10px;
-
-	border: solid 2px blue;
-	border-radius: 50%;
-	background: blue;
-}
-.marked-only-view.viewer:after {
-	display: block;
-	position: absolute;
-	content: "";
-	font-size: 0pt;
-	top: 10px;
-	right: 10px;
-	width: 10px;
-	height: 10px;
-
-	border: solid 2px blue;
-	border-radius: 50%;
-	background: transparent;
-}
-.marked-only-view.marks-visible.viewer:after {
-	background: blue;
-}
-*/
-
 /* XXX should we use opacity??? */
 .marked-only-view.viewer:not(.marks-visible) .image:not(.marked) {
 	opacity: 0.3;
@@ -608,6 +584,7 @@ body {
 	width: auto;
 
 	font-size: small;
+	vertical-align: center;
 }
 .global-mode-indicators>* {
 	margin-left: 10px;
@@ -641,6 +618,7 @@ body {
 	width: auto;
 
 	font-size: small;
+	vertical-align: center;
 }
 .context-mode-indicators>* {
 	margin-left: 10px;
@@ -660,6 +638,8 @@ body {
 .context-mode-indicators .current-image-marked {
 	display: none;
 	color: blue;
+	height: 20px;
+	vertical-align: center;
 }
 .global-mode-indicators .marked-only-visible .shown,
 .global-mode-indicators .marks-visible .shown,
@@ -670,13 +650,16 @@ body {
 .global-mode-indicators .marks-visible:after,
 .context-mode-indicators .current-image-marked:after {
 	display: inline-block;
-	width: 10px;
+	width: 6px;
-	height: 10px;
+	height: 6px;
 	border-radius: 50%;
 	content: "";
 	background-color: blue;
 	border: solid 2px blue;
 	margin-left: 5px;
+
+	margin-top: 3px;
+	top: 50%;
 }
 .marks-visible.viewer .global-mode-indicators .marks-visible {
 	display: inline-block;
@@ -806,19 +789,5 @@ body {
 
 
 
-/********************************************************* utility ***/
-.expanding-text .hidden {
-	display: none;
-}
-.expanding-text:hover .shown {
-	display: none;
-}
-.expanding-text:hover .hidden {
-	display: inline;
-}
-
-
-
-
 /**********************************************************************
 * vim:set spell ft=css :                                             */

ui/setup.js

@@ -192,14 +192,25 @@ function setupDataBindings(viewer){
 				var gid = getImageGID(img) 
 				var flip = getImageFlipState(img)
 
-				// change the image orientation status and add to 
-				// updated list...
 				IMAGES[gid].flipped = flip
 				if(IMAGES_UPDATED.indexOf(gid) == -1){
 					IMAGES_UPDATED.push(gid)
 				}
 			})
 		})
+		.on('resetToOriginalImage', function(evt, image){
+			$(image).each(function(i, e){
+				var img = $(this)
+				var gid = getImageGID(img) 
+
+				IMAGES[gid].flipped = null
+				IMAGES[gid].orientation = 0
+
+				if(IMAGES_UPDATED.indexOf(gid) == -1){
+					IMAGES_UPDATED.push(gid)
+				}
+			})
+		})
 
 
 		// marks...