started experimenting with ribbon partitioning...

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

ui (gen4)/css/layout.less

@@ -884,6 +884,28 @@ stretching in width... */
 	margin-left: -15px;
 }
 
+.mark.partition {
+	width: 0px;
+	height: @image-tile-size + 20;
+
+	overflow: visible;
+
+	border-right: solid 5px yellow;
+
+	margin-top: -20px;
+	margin-bottom: -5px;
+	margin-left: 0px;
+}
+.mark.partition:after {
+	display: block;
+	position: absolute;
+	top: -8px;
+	left: 10px;
+	content: attr(text);
+
+	color: yellow;
+}
+
 
 /****************************************************** Image info ***/
 .inline-image-info {

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

@@ -19,7 +19,6 @@ var ribbons = require('ribbons')
 var core = require('features/core')
 var base = require('features/base')
 
-// widgets...
 var widget = require('lib/widget/widget')
 var browse = require('lib/widget/browse')
 var overlay = require('lib/widget/overlay')
@@ -779,6 +778,39 @@ var WidgetTestActions = actions.Actions({
 		})],
 
 
+	// XXX make this a toggler....
+	partitionByMonth: ['Test/',
+		function(){
+			var that = this
+
+			this.toggleImageSort('?') != 'Date' && this.sortImages('Date')
+
+			this.on('updateImage', function(_, gid){ this.placeMonthPartition(gid) })
+		}],
+	// XXX this should be .updateImage(..) in a real feature...
+	placeMonthPartition: ['Test/',
+		function(image){
+			var month = [
+				'January', 'February', 'March', 'April',
+				'May', 'June', 'July', 'August',
+				'September', 'October', 'November', 'December'
+			]
+
+			var gid = this.data.getImage(image)
+			var next = this.data.getImage(gid, 'next')
+
+			cur = this.images[gid]	
+			next = this.images[next]
+
+			if(cur && next && cur.birthtime.getMonth() != next.birthtime.getMonth()){
+				this.ribbons.getImageMarks(gid).filter('.partition').remove()
+				this.ribbons.getImage(gid)
+					.after(this.ribbons.setElemGID($('<div class="mark partition">'), gid)
+						.attr('text', month[next.birthtime.getMonth()]))
+			}
+		}],
+
+
 	// XXX this is just a test...
 	embededListerTest: ['Test/Lister test (embeded)/*',
 		function(path, make){

ui (gen4)/index.html

@@ -41,6 +41,7 @@ body {
 	background: black;
 }
 
+
 /*
 .image.current {
 	border-color: red;