зеркало из https://github.com/nextcloud/spreed.git
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>
This commit is contained in:
Родитель
290b00bf68
Коммит
57a65b24f5
|
@ -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
|
||||
|
|
Загрузка…
Ссылка в новой задаче