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>
This commit is contained in:
Daniel Calviño Sánchez 2018-01-09 14:51:44 +01:00
Родитель 290b00bf68
Коммит 57a65b24f5
4 изменённых файлов: 47 добавлений и 6 удалений

Просмотреть файл

@ -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;

Просмотреть файл

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

Просмотреть файл

@ -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() {

Просмотреть файл

@ -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