Merge pull request #561 from nextcloud/reverse-chat-layout

Reverse chat layout

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;
 }
 
@@ -760,10 +762,11 @@ video {
 }
 
 /* The header element contains the header div; as the header div uses a fixed
-   position the header element has no height, so it must be explicitly set to
-   prevent #app-content-wrapper from overlapping with the header element */
-#body-public header {
-	height: 45px;
+   position the header element has no height, and as #app-content-wrapper uses a
+   "100%" height its contents must be padded to prevent them from overlapping
+   with the header element */
+#body-public #app-content-wrapper {
+	padding-top: 45px;
 }
 
 /* make blue header bar transparent in shared room */
@@ -968,24 +971,32 @@ video {
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
+
+	flex-grow: 1;
 }
 
 #app-sidebar .tabsContainer {
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
+
+	flex-grow: 1;
 }
 
 #app-sidebar .tab {
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
+
+	flex-grow: 1;
 }
 
 #app-sidebar #commentsTabView {
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
+
+	flex-grow: 1;
 }
 
 #app-sidebar .comments {

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