Better grouping of chat messages

* timestamp is shown after 5 messages or 30 seconds
* author is shown after 20 messages or 1 hour

Signed-off-by: Joas Schilling <coding@schilljs.com>

css/chatview.scss

@@ -98,7 +98,7 @@
 
 #chatView .comment {
 	position: relative;
-	margin-bottom: 30px;
+	margin-bottom: 20px;
 	word-wrap: break-word;
 	overflow-wrap: break-word;
 }
@@ -200,10 +200,26 @@ body:not(#body-public) #chatView .comment .authorRow:not(.currentUser):not(.gues
 	 * example, when it uses two lines due to a limited width. */
 	margin-left: auto;
 	text-align: right;
+	display: inline-block;
+	vertical-align: top;
 }
 
-#chatView .comments li .message {
+#chatView .comment.systemMessage:not(.grouped) {
+	margin-top: -10px;
+}
+
+#chatView .comment:not(.systemMessage):not(.grouped):not(.same-author) .date {
+	margin-top: -32px;
+}
+
+#chatView .comment.grouped .date {
+	display: none;
+}
+
+#chatView .comments:not(.systemMessage) li .message {
 	padding-left: 40px;
+	display: inline-block;
+	width: calc(100% - 80px);
 }
 
 #chatView .comment .action {
@@ -239,12 +255,14 @@ body:not(#body-public) #chatView .comment .authorRow:not(.currentUser):not(.gues
 	box-shadow: 0 0 6px #f8b9b7;
 }
 
-#chatView .comment.grouped .authorRow {
+#chatView .comment.grouped .authorRow,
+#chatView .comment.same-author .authorRow {
 	display: none;
 }
 
-#chatView .comment.grouped {
-	margin-top: -20px;
+#chatView .comment.grouped,
+#chatView .comment.same-author {
+	margin-top: -15px;
 }
 
 #chatView .comment.showDate {
@@ -324,24 +342,7 @@ body:not(#body-public) #chatView .comment .authorRow:not(.currentUser):not(.gues
 	color: var(--color-main-text);
 }
 
-/* System messages have no author, so the author row only contains the date.
- * Instead of showing the date on its own row and the message below it the
- * message and the date are merged in a single row using flexboxes. */
-#chatView .comment.systemMessage {
-	display: flex;
-	flex-direction: row;
-}
-
-#chatView .comment.systemMessage .authorRow {
-	order: 1;
-	flex-grow: 0;
-	width: auto;
-	padding-left: 10px;
-}
-
 #chatView .comment.systemMessage .message {
-	order: 0;
-	flex-grow: 1;
 	color: var(--color-text-maxcontrast);
 }
 

js/views/chatview.js

@@ -31,7 +31,8 @@
 
 	var ChatView = Marionette.View.extend({
 
-		groupedMessages: 0,
+		temporaryNearMessages: 0,
+		sameAuthorMessages: 0,
 
 		className: 'chat',
 
@@ -425,13 +426,23 @@
 			this._virtualList.appendElement($el);
 
 			if (this._modelsHaveSameActor(this._lastAddedMessageModel, model) &&
-					this._modelsAreTemporaryNear(this._lastAddedMessageModel, model) &&
-					this.groupedMessages < 10) {
-				$el.addClass('grouped');
+				this._modelsAreTemporaryNear(this._lastAddedMessageModel, model, 3600) &&
+				this.sameAuthorMessages < 20
 
-				this.groupedMessages++;
+			) {
+				this.sameAuthorMessages++;
+				if (this._modelsAreTemporaryNear(this._lastAddedMessageModel, model) &&
+					this.temporaryNearMessages < 5) {
+					$el.addClass('grouped');
+
+					this.temporaryNearMessages++;
+				} else {
+					$el.addClass('same-author');
+					this.temporaryNearMessages = 0;
+				}
 			} else {
-				this.groupedMessages = 0;
+				this.sameAuthorMessages = 0;
+				this.temporaryNearMessages = 0;
 			}
 
 			// PHP timestamp is second-based; JavaScript timestamp is

js/views/templates.js

@@ -176,15 +176,15 @@ templates['chatview_comment'] = template({"1":function(container,depth0,helpers,
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isGuest : depth0),{"name":"if","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\">\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isNotSystemMessage : depth0),{"name":"if","hash":{},"fn":container.program(9, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "		<div class=\"date has-tooltip\" data-timestamp=\""
+    + "	</div>\n	<div class=\"contentRow\">\n		<div class=\"message\">"
+    + ((stack1 = ((helper = (helper = helpers.formattedMessage || (depth0 != null ? depth0.formattedMessage : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"formattedMessage","hash":{},"data":data}) : helper))) != null ? stack1 : "")
+    + "</div>\n		<div class=\"date has-tooltip\" data-timestamp=\""
     + alias4(((helper = (helper = helpers.timestamp || (depth0 != null ? depth0.timestamp : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"timestamp","hash":{},"data":data}) : helper)))
     + "\" title=\""
     + alias4(((helper = (helper = helpers.altDate || (depth0 != null ? depth0.altDate : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"altDate","hash":{},"data":data}) : helper)))
     + "\">"
     + alias4(((helper = (helper = helpers.date || (depth0 != null ? depth0.date : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"date","hash":{},"data":data}) : helper)))
-    + "</div>\n	</div>\n	<div class=\"message\">"
-    + ((stack1 = ((helper = (helper = helpers.formattedMessage || (depth0 != null ? depth0.formattedMessage : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"formattedMessage","hash":{},"data":data}) : helper))) != null ? stack1 : "")
-    + "</div>\n</li>\n";
+    + "</div>\n	</div>\n</li>\n";
 },"useData":true});
 templates['collectionsview'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     return "<div id=\"collectionsView\"></div>\n";

js/views/templates/chatview_comment.handlebars

@@ -4,7 +4,9 @@
 		<div class="avatar" data-user-id="{{#if isGuest}}{{else}}{{actorId}}{{/if}}" data-user-display-name="{{actorDisplayName}}"></div>
 		<div class="author">{{actorDisplayName}}</div>
 		{{/if}}
+	</div>
+	<div class="contentRow">
+		<div class="message">{{{formattedMessage}}}</div>
 		<div class="date has-tooltip" data-timestamp="{{timestamp}}" title="{{altDate}}">{{date}}</div>
 	</div>
-	<div class="message">{{{formattedMessage}}}</div>
 </li>