made the index indicator a bit more functional...

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

ui (gen4)/css/layout.css

@@ -1163,7 +1163,7 @@ stretching in width... */
   padding-right: 10px;
   box-sizing: border-box;
   background: black;
-  color: white;
+  color: silver;
   opacity: 0.6;
 }
 .overlay-info:hover {
@@ -1198,6 +1198,10 @@ stretching in width... */
 .overlay-info.minimal .full-only {
   display: none;
 }
+/* space elements... */
+.overlay-info > :not(:first-child) {
+  margin-left: 10px;
+}
 /* XXX REUSE: this is the same as selected/bookmarked image markers... */
 .overlay-info .marked,
 .overlay-info .marked:after,
@@ -1208,8 +1212,8 @@ stretching in width... */
   content: "";
   font-size: 0pt;
   border: none;
-  margin: 4px;
+  margin-top: 4px;
-  margin-right: 10px;
+  margin-bottom: 4px;
   width: 10px;
   height: 10px;
   box-shadow: 2px 2px 20px -2px rgba(0, 0, 0, 0.7);
@@ -1259,6 +1263,15 @@ stretching in width... */
 .overlay-info .bookmarked:not(.on):after {
   background: gray;
 }
+/* image index status element */
+.overlay-info .index.global:after {
+  content: "G";
+  opacity: 0.7;
+  font-size: small;
+}
+.overlay-info .index.global:hover:after {
+  content: "Global";
+}
 /*************************************************** Global status ***/
 .global-status {
   display: block;

ui (gen4)/css/layout.less

@@ -1027,7 +1027,7 @@ stretching in width... */
 	box-sizing: border-box;
 
 	background: black;
-	color: white;
+	color: silver;
 
 	opacity: 0.6;
 }
@@ -1062,6 +1062,13 @@ stretching in width... */
 	display: none;
 }
 
+
+/* space elements... */
+.overlay-info>:not(:first-child) {
+	margin-left: 10px;
+}
+
+
 /* XXX REUSE: this is the same as selected/bookmarked image markers... */
 .overlay-info .marked,
 .overlay-info .marked:after,
@@ -1073,8 +1080,9 @@ stretching in width... */
 	font-size: 0pt;
 	border: none;
 
-	margin: 4px;
+	margin-top: 4px;
-	margin-right: 10px;
+	margin-bottom: 4px;
+	//margin-right: 10px;
 
 	width: 10px;
 	height: 10px;
@@ -1126,6 +1134,17 @@ stretching in width... */
 	background: gray;
 }
 
+/* image index status element */
+.overlay-info .index.global:after {
+	content: "G";
+	opacity: 0.7;
+
+	font-size: small;
+}
+.overlay-info .index.global:hover:after {
+	content: "Global";
+}
+
 
 
 /*************************************************** Global status ***/

ui (gen4)/features/ui-status.js

@@ -90,20 +90,56 @@ var ImageStateIndicatorActions = actions.Actions({
 	// XXX make this visible to the user???
 	// XXX is this too complex???
 	__state_indicator_elements__: {
+		// XXX make position editable...
+		// 		- edit position on click
+		// 		- goto position on enter/blur (blur with value)
+		// 		- cancel on esc/blur (blur with no value)
+		// 		- treat index depending on mode (global/ribbon)
 		index: function(action, container, elem, gid){
+			var that = this
 			// construct...
 			if(action == 'make'){
 				return $('<span>').addClass(elem)
+					// XXX might be a good idea to make this an input...
+					.append($('<span>')
+						.addClass('position')
+						.click(function(){
+							// XXX enter edit mode -> select contents...
+							// XXX might be a good idea to live select 
+							// 		the indexed image... (???)
+							//$(this)
+							//	.prop('contenteditable', true)
+							// XXX
+						}))
+					.append($('<span>')
+						.addClass('length')
+						// toggle index state...
+						.click(function(){
+							$(this).parent()
+								.toggleClass('global')
+							that.updateStateIndicators()
+						}))
 
 			// update...
 			} else if(action == 'update'){
-				// XXX how do we pass a custom gid to here???
+				gid = gid || this.current
-				var gid = this.current
+
-				container.find('.'+elem)
+				var c = container.find('.'+elem)
-					.text(
+
-						(this.data.getImageOrder('ribbon', gid)+1) 
+				// global index...
-						+'/'+ 
+				if(c.hasClass('global')){
-						this.data.getImages(gid).len)
+					c.find('.position')
+						.text(this.data.getImageOrder(gid)+1)
+					c.find('.length')
+						.text('/'+ this.data.length)
+
+				// ribbon index...
+				} else {
+					c.find('.position')
+						.text(this.data.getImageOrder('ribbon', gid)+1)
+					c.find('.length')
+						.text('/'+ this.data.getImages(gid).len)
+				}
 
 			// remove...
 			} else if(action == 'remove'){