reworked metadata view, now a bit more consize...

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

ui (gen4)/css/experimenting.css

@@ -525,11 +525,19 @@ body {
 
 /* metadata view */
 /* remove preview text and center image... */
+.metadata-view .item.index {
+	text-align: center;
+}
 .metadata-view .item.preview {
 	text-align: center;
 	opacity: 1;
 }
+.metadata-view .index .text,
 .metadata-view .preview .text {
+	float: initial;
+}
+.metadata-view .index .text:first-child,
+.metadata-view .preview .text:first-child {
 	left: 50%;
 	display: none;
 }
@@ -542,7 +550,13 @@ body {
 	font-style: italic;
 }
 .metadata-view .text+.text+.text {
-	margin-left: 0.5em;
+	margin-left: 1em;
+}
+.metadata-view small span {
+	opacity: 0.7;
+}
+.metadata-view small small {
+	opacity: 0.5;
 }
 
 

ui (gen4)/features/metadata.js

@@ -384,36 +384,64 @@ var MetadataUIActions = actions.Actions({
 					// preview...
 					make(['Preview:', this.updatePreview()], 
 						{ cls: 'preview' })
-					make.Separator()
-
-					// essentials...
-					make(['$GID: ', image])
 					// NOTE: these are 1-based and not 0-based...
-					make(['Index: ',
+					make(['Position: ', 
+						$('<small>')
+							.addClass('text')
+							.css({
+								whiteSpace: 'pre',
+							})
+							.html([
 								// ribbon...
 								that.data.getImageOrder('ribbon', image) + 1
 									+'/'+ 
 									that.data.getImages(image).len
-							+ 'R',
+									+ '<small>R</small>',
-						// crop...
 								...((that.crop_stack && that.crop_stack.len > 0) ?
+									// crop...
 									[that.data.getImageOrder('loaded', image) + 1
 										+'/'+ 
 										that.data.getImages('loaded').len
-							+ 'C']
+										+ '<small>C</small>']
-							: []),
 									// global...
-						that.data.getImageOrder(image) + 1
+									: [that.data.getImageOrder(image) + 1
 										+'/'+ 
 										that.data.getImages('all').len
-							+ 'G', ])
+										+ '<small>G</small>']),
-					make(['Ribbon:',
+								// ribbon...
-						that.data.getRibbonOrder(image) + 1
+								'<span>R:</span>'+
+									(that.data.getRibbonOrder(image) + 1)
 									+'/'+
-						Object.keys(that.data.ribbons).length])
+									Object.keys(that.data.ribbons).length,
-
+							].join('   ')) ],
+						{ cls: 'index' })
 					make.Separator()
 
+					// comment...
+					make.Editable(['$Comment: ', 
+						function(){ 
+							return data && data.comment || '' }], 
+						{
+							start_on: 'open',
+							edit_text: 'last',
+							multiline: true,
+							reset_on_commit: false,
+							editdone: function(evt, value){
+								if(value.trim() == ''){
+									return }
+								data = that.images[image] = that.images[image] || {}
+								data.comment = value
+								// mark image as changed...
+								that.markChanged 
+									&& that.markChanged('images', [image])
+							},
+						}) 
+					make.Separator()
+
+					// gid...
+					make(['$GID: ', image])
+
+
 					if(data){
 						// some abstractions...
 						var _basename = typeof(path) != 'undefined' ?
@@ -450,26 +478,6 @@ var MetadataUIActions = actions.Actions({
 								{disabled: true})
 					}
 
-					// comment...
-					make.Editable(['$Comment: ', 
-						function(){ 
-							return data && data.comment || '' }], 
-						{
-							start_on: 'open',
-							edit_text: 'last',
-							multiline: true,
-							reset_on_commit: false,
-							editdone: function(evt, value){
-								if(value.trim() == ''){
-									return }
-								data = that.images[image] = that.images[image] || {}
-								data.comment = value
-								// mark image as changed...
-								that.markChanged 
-									&& that.markChanged('images', [image])
-							},
-						}) 
-
 					// get other sections...
 					that.callSortedAction('metadataSection', make, image, data, mode)
 				}, {

ui (gen4)/features/tags.js

@@ -711,6 +711,7 @@ var TagUIActions = actions.Actions({
 		function(make, gid, image){
 			var that = this
 
+			make.Separator()
 			make(['$Tags:', 
 				function(){
 					return that.data.getTags(gid).join(', ') }],