Add a header with the date when it changes between messages

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

css/comments.css

@@ -190,3 +190,28 @@
 #commentsTabView .comment.grouped {
 	margin-top: -20px;
 }
+
+#commentsTabView .comment.showDate {
+	margin-top: 40px;
+	border-top: 1px solid #dbdbdb;
+	padding-top: 10px;
+}
+
+#commentsTabView .comment.showDate:before {
+	content: attr(data-date);
+
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%) translateY(-50%);
+	padding: 0 7px 0 7px;
+
+	text-align: center;
+
+	color: #878787;
+	background-color: #fff;
+}
+
+#commentsTabView .comment.showDate .authorRow {
+	display: block;
+}

js/views/chatview.js

@@ -154,6 +154,17 @@
 				$el.next().addClass('grouped');
 			}
 
+			// PHP timestamp is second-based; JavaScript timestamp is
+			// millisecond based.
+			model.set('date', new Date(model.get('timestamp') * 1000));
+
+			if (this._lastAddedMessageModel && !this._modelsHaveSameDate(this._lastAddedMessageModel, model)) {
+				// 'LL' formats a localized date including day of month, month
+				// name and year
+				$el.next().attr('data-date', OC.Util.formatDate(this._lastAddedMessageModel.get('date'), 'LL'));
+				$el.next().addClass('showDate');
+			}
+
 			// Keeping the model for the last added message is not only
 			// practical, but needed, as the models for previous messages are
 			// removed from the collection each time a new set of messages is
@@ -184,6 +195,14 @@
 			return Math.abs(model1.get('timestamp') - model2.get('timestamp')) <= secondsThreshold;
 		},
 
+		_modelsHaveSameDate: function(model1, model2) {
+			if (!model1 || !model2) {
+				return false;
+			}
+
+			return model1.get('date').toDateString() === model2.get('date').toDateString();
+		},
+
 		_postRenderItem: function($el) {
 			$el.find('.has-tooltip').tooltip();
 			$el.find('.avatar').each(function() {