Show consistent colors for different users

services/web/app/views/templates.jade

@@ -436,7 +436,9 @@
 
 		div(class='change-description')
 			div(class='change-date') {{date}} 
-			div(class='change-name') {{name}}
+			div(class='change-name')
+				div.color-square(style="background-color: hsl({{hue}}, 100%, 70%);")
+				span {{name}}
 
 	script(type='text/template')#changeListTemplate
 		ul.change-list.nav.nav-pills.nav-stacked

services/web/public/coffee/models/User.coffee

@@ -7,6 +7,29 @@ define [
 			email = @get("email").trim().toLowerCase()
 			hash = CryptoJS.MD5(email)
 			return "//www.gravatar.com/avatar/#{hash}.jpg?size=#{size}&d=mm"
+
+		OWNER_HUE: 200
+		hue: () ->
+			if window.user.id == @get("id")
+				hue = @OWNER_HUE
+			else
+				hash = CryptoJS.MD5(@get("id"))
+				hue = parseInt(hash.toString().slice(0,8), 16) % 320
+				# Avoid 20 degrees either side of the owner
+				if hue > @OWNER_HUE - 20
+					hue = hue + 40
+			return hue
+
+		name: () ->
+			parts = []
+			first_name = @get("first_name")
+			if first_name? and first_name.length > 0
+				parts.push first_name
+			last_name = @get("last_name")
+			if last_name? and last_name.length > 0
+				parts.push last_name
+			return parts.join(" ")
+
 	}, {
 		findOrBuild : (id, attributes) ->
 			model = @find id

services/web/public/coffee/track-changes/ChangeListView.coffee

@@ -126,6 +126,7 @@ define [
 		
 		modelView: ->
 			modelView = {
+				hue:  @model.get("user").hue()
 				date: moment(parseInt(@model.get("end_ts"), 10)).calendar()
 				name: @model.get("user").get("first_name") + " " + @model.get("user").get("last_name")
 			}

services/web/public/coffee/track-changes/DiffView.coffee

@@ -69,12 +69,12 @@ define [
 			markerFrontLayer = @aceEditor.renderer.$markerFront
 			lineHeight = @aceEditor.renderer.lineHeight
 			if entry.i? or entry.d?
-				hue = 200
+				hue = entry.meta.user.hue()
 				if entry.i?
 					@_addMarkerWithCustomStyle session, markerBackLayer, range, "deleted-change-background", false, """
 						background-color : hsl(#{hue}, 70%, 85%);
 					"""
-					tag = "Added by #{entry.meta.user.email}"
+					tag = "Added by #{entry.meta.user.name()}"
 				if entry.d?
 					@_addMarkerWithCustomStyle session, markerBackLayer, range, "deleted-change-background", false, """
 						background-color : hsl(#{hue}, 70%, 95%);
@@ -83,7 +83,7 @@ define [
 						height: #{Math.round(lineHeight/2) - 1}px;
 						border-bottom: 2px solid hsl(#{hue}, 70%, 40%);
 					"""
-					tag = "Deleted by #{entry.meta.user.email}"
+					tag = "Deleted by #{entry.meta.user.name()}"
 
 				tag += " on #{entry.meta.end_ts}"
 				@_addNameTag session, id, range, tag, """

services/web/public/coffee/track-changes/models/Diff.coffee

@@ -1,6 +1,13 @@
 define [
+	"models/User"
 	"libs/backbone"
-], ()->
+], (User) ->
 	Diff = Backbone.Model.extend
 		url: () ->
 			"/project/#{@get("project_id")}/doc/#{@get("doc_id")}/diff?from=#{@get("from")}&to=#{@get("to")}"
+
+		parse: (diff) ->
+			for entry in diff.diff
+				if entry.meta? and entry.meta.user?
+					entry.meta.user = User.findOrBuild(entry.meta.user.id, entry.meta.user)
+			return diff

services/web/public/stylesheets/less/trackchanges.less

@@ -80,6 +80,13 @@
 				font-size: 0.9em;
 				color: #666;
 			}
+			.color-square {
+				display: inline-block;
+				height: 10px;
+				width: 10px;
+				margin-right: 4px;
+				margin-bottom: -1px;
+			}
 			&:hover {
 				background-color: #eaeaea;
 			}