Reverse chat layout

Before chat messages were shown from newest to oldest, with the new
message input above the list of messages. Now the layout can be chosen,
either the previous one or the reversed one, from oldest to newest with
the new message input below the list of messages.

The new reversed layout is the default one, and probably the old one
will not be used anywhere in the future... but for the time being I kept
the old one too just in case.

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

css/comments.scss

@@ -8,6 +8,11 @@
  *
  */
 
+#commentsTabView .comments,
+#commentsTabView .emptycontent {
+	flex-grow: 1;
+}
+
 #commentsTabView .emptycontent {
 	margin-top: 0;
 }
@@ -77,6 +82,15 @@
 	overflow-wrap: break-word;
 }
 
+#commentsTabView.oldestOnTopLayout .comment {
+	margin-top: 30px;
+	margin-bottom: 0;
+}
+
+#commentsTabView.oldestOnTopLayout .comment:first-child {
+	margin-top: 0;
+}
+
 #commentsTabView .comment .avatar,
 .atwho-view-ul * .avatar{
 	width: 32px;
@@ -206,6 +220,10 @@
 	margin-top: -20px;
 }
 
+#commentsTabView.oldestOnTopLayout .comment.grouped {
+	margin-top: 10px;
+}
+
 #commentsTabView .comment.showDate {
 	margin-top: 40px;
 	border-top: 1px solid #dbdbdb;

css/style.scss

@@ -153,7 +153,9 @@
 
 	display: flex;
 	flex-direction: column;
+}
 
+#app-content-wrapper #commentsTabView .comment:first-child {
 	padding-top: 15px;
 }
 

js/app.js

@@ -512,7 +512,7 @@
 			this._chatView = new OCA.SpreedMe.Views.ChatView({
 				collection: this._messageCollection,
 				id: 'commentsTabView',
-				className: 'chat'
+				oldestOnTopLayout: true
 			});
 
 			this._messageCollection.listenTo(roomChannel, 'leaveCurrentCall', function() {

js/views/chatview.js

@@ -59,11 +59,17 @@
 
 	var ChatView = Marionette.View.extend({
 
+		className: function() {
+			return 'chat' + (this._oldestOnTopLayout? ' oldestOnTopLayout': '');
+		},
+
 		events: {
 			'submit .newCommentForm': '_onSubmitComment',
 		},
 
-		initialize: function() {
+		initialize: function(options) {
+			this._oldestOnTopLayout = ('oldestOnTopLayout' in options)? options.oldestOnTopLayout: true;
+
 			this.listenTo(this.collection, 'reset', this.render);
 			this.listenTo(this.collection, 'add', this._onAddModel);
 		},
@@ -97,7 +103,11 @@
 		onRender: function() {
 			delete this._lastAddedMessageModel;
 
-			this.$el.find('.comments').before(this.addCommentTemplate({}));
+			if (this._oldestOnTopLayout) {
+				this.$el.find('.emptycontent').after(this.addCommentTemplate({}));
+			} else {
+				this.$el.find('.comments').before(this.addCommentTemplate({}));
+			}
 			this.$el.find('.has-tooltip').tooltip({container: this._tooltipContainer});
 			this.$container = this.$el.find('ul.comments');
 			// FIXME handle guest users
@@ -159,13 +169,19 @@
 			var $el = $(this.commentTemplate(this._formatItem(model)));
 			if (!_.isUndefined(options.at) && collection.length > 1) {
 				this.$container.find('li').eq(options.at).before($el);
+			} else if (this._oldestOnTopLayout) {
+				this.$container.append($el);
 			} else {
 				this.$container.prepend($el);
 			}
 
 			if (this._modelsHaveSameActor(this._lastAddedMessageModel, model) &&
 					this._modelsAreTemporaryNear(this._lastAddedMessageModel, model)) {
-				$el.next().addClass('grouped');
+				if (this._oldestOnTopLayout) {
+					$el.addClass('grouped');
+				} else {
+					$el.next().addClass('grouped');
+				}
 			}
 
 			// PHP timestamp is second-based; JavaScript timestamp is
@@ -175,8 +191,13 @@
 			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');
+				if (this._oldestOnTopLayout) {
+					$el.attr('data-date', OC.Util.formatDate(model.get('date'), 'LL'));
+					$el.addClass('showDate');
+				} else {
+					$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