Merge branch 'master' of github.com:sharelatex/web-sharelatex

services/web/app/views/layout.jade

@@ -9,6 +9,7 @@ html(itemscope, itemtype='http://schema.org/Product')
 		- else
 			title= 'Online LaTeX Editor ShareLaTeX - ' +title
 		link(rel='stylesheet', href='/stylesheets/mainStyle.css?fingerprint='+fingerprint('/stylesheets/mainStyle.css'))
+		link(href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css",rel="stylesheet")
 
 		meta(itemprop="name" ,content="ShareLaTeX - Real Time Online LaTeX Collaborative Editor in Your Browser")
 		meta(itemprop="description", content="Online LaTeX editor for collaborative editing, great for Maths or Sciences. You don't need to install LaTeX so it's great for beginners too.")

services/web/app/views/templates.jade

@@ -267,7 +267,6 @@
 		.box
 			.page-header
 				h2 Share Publicly
-			link(href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css",rel="stylesheet")
 			div.share-button
 				a.btn.btn-twitter.btn-large(href="#")
 					i.icon-twitter
@@ -443,14 +442,16 @@
 		.track-changes-diff-editor
 
 	script(type='text/template')#changeListItemTemplate
-		div(class='change-selectors')
+		div.track-changes-date-header {{ day }}
+
+		div.change-selectors
 			div.range
 			input(type="radio",name="fromVersion").change-selector-from
 			input(type="radio",name="toVersion").change-selector-to
 
-		div(class='change-description')
+		div.change-description
+			div.change-time {{time}}
 			div.changed-docs {{docs}}
-			div.change-date {{date}}
 			div {{{users}}}
 
 	script(type='text/template')#changeListItemUserTemplate

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

@@ -5,12 +5,12 @@ define [
 ], (moment)->
 
 	moment.lang "en", calendar:
-		lastDay : '[Yesterday at] h:mm a'
-		sameDay : '[Today at] h:mm a'
-		nextDay : '[Tomorrow at] h:mm a'
-		lastWeek : "Do MMM YYYY, h:mm a"
-		nextWeek : "Do MMM YYYY, h:mm a"
-		sameElse : 'Do MMM YYYY, h:mm a'
+		lastDay : '[Yesterday]'
+		sameDay : '[Today]'
+		nextDay : '[Tomorrow]'
+		lastWeek : "ddd, Do MMM YY"
+		nextWeek : "ddd, Do MMM YY"
+		sameElse : 'ddd, Do MMM YY'
 
 	ChangeListView = Backbone.View.extend
 		template: $("#changeListTemplate").html()
@@ -42,7 +42,8 @@ define [
 
 		addItem: (model) ->
 			index = @collection.indexOf(model)
-			view = new ChangeListItemView(model : model)
+			previousModel = @collection.models[index - 1]
+			view = new ChangeListItemView(model : model, previousModel: previousModel)
 			@itemViews.push view
 			elementAtIndex = @$(".change-list").children()[index]
 			view.$el.insertBefore(elementAtIndex)
@@ -191,12 +192,22 @@ define [
 				else
 					docNames.push "deleted"
 			data = {
-				date: moment(parseInt(@model.get("end_ts"), 10)).calendar()
+				day: moment(parseInt(@model.get("end_ts"), 10)).calendar()
+				time: moment(parseInt(@model.get("end_ts"), 10)).format("h:mm a")
 				users: userHtml.join("")
 				docs: docNames.join(", ")
 			}
 
 			@$el.html Mustache.to_html(@templates.item, data)
+
+			if @options.previousModel?
+				prevDate = @options.previousModel.get("end_ts")
+				date     = @model.get("end_ts")
+				if not moment(prevDate).isSame(date, "day")
+					@$el.addClass("first-in-day")
+			else
+				@$el.addClass("first-in-day")
+
 			return this
 
 		onClick: (e) ->

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

@@ -123,6 +123,14 @@
 			-ms-user-select: none;
 			-moz-user-select: none;
 			-webkit-user-select: none;
+			.track-changes-date-header {
+				border-bottom: 1px solid #ccc;
+				padding: 2px;
+				font-weight: bold;
+				text-align: center;
+				height: 19px;
+				display: none;
+			}
 			.change-selectors {
 				.change-selector-from {
 					position: absolute;
@@ -153,9 +161,12 @@
 				color: #666;
 				text-transform: capitalize;
 			}
-			.change-date {
-				margin-top: 2px;
+			.change-time {
+				float: right;
+				color: #666;
 				font-size: 12px;
+				display: inline-block;
+				padding-right: 6px;
 			}
 			.color-square {
 				display: inline-block;
@@ -214,6 +225,23 @@
 				display: block;
 			}
 		}
+		li.first-in-day {
+			.track-changes-date-header {
+				display: block;
+			}
+			.change-selectors {
+				.change-selector-to {
+					top: 28px;
+				}
+			}
+		}
+		li.first-in-day.selected-change-to {
+			.change-selectors {
+				.range {
+					top: 33px;
+				}
+			}
+		}
 	}
 	ul.change-list.hover-state {
 		li {
@@ -252,5 +280,12 @@
 				}
 			}
 		}
+		li.first-in-day.hover-selected-to {
+			.change-selectors {
+				.range {
+					top: 33px;
+				}
+			}
+		}
 	}
 }