Merge pull request #714 from nextcloud/comments-layout

fix design details in comments sidebar
This commit is contained in:
Lukas Reschke 2016-08-18 11:04:20 +02:00 committed by GitHub
commit 5580a77bd7
3 changed files with 60 additions and 30 deletions

View File

@ -8,32 +8,55 @@
*
*/
#commentsTabView .emptycontent {
margin-top: 0;
}
#commentsTabView .newCommentForm {
position: relative;
margin-bottom: 20px;
}
#commentsTabView .newCommentForm .message {
width: 90%;
resize: vertical;
width: calc(100% - 81px); /* 36 (left margin) + 30 (right padding) + 15 (right padding of surrounding box) */
margin-left: 36px;
padding-right: 30px;
}
#commentsTabView .newCommentForm .submit {
position: absolute;
top: 1px;
right: 8px;
width: 30px;
margin: 0;
padding: 9px;
background-color: transparent;
border: none;
opacity: .3;
}
#commentsTabView .newCommentForm .submit:hover,
#commentsTabView .newCommentForm .submit:focus {
opacity: 1;
}
#commentsTabView .newCommentForm .submitLoading {
background-position: left;
}
#commentsTabView .comment {
margin-bottom: 30px;
}
#commentsTabView .comment .avatar {
width: 28px;
height: 28px;
line-height: 28px;
#commentsTabView .newCommentForm .cancel {
margin-right: 6px;
}
#commentsTabView .comment {
position: relative;
z-index: 1;
margin-bottom: 30px;
}
#commentsTabView .comment .avatar {
width: 32px;
height: 32px;
line-height: 32px;
}
#commentsTabView .comment.collapsed .message {
@ -80,17 +103,24 @@
}
#commentsTabView .comment .authorRow {
margin-bottom: 5px;
position: relative;
}
#commentsTabView .comment .author {
font-weight: bold;
#commentsTabView .comment .author,
#commentsTabView .comment .date {
opacity: .5;
}
#commentsTabView .comment .author {
margin-left: 5px;
}
#commentsTabView .comment .date {
position: absolute;
right: 0;
top: 5px;
}
#commentsTabView .comments li .message {
padding-left: 40px;
}
#commentsTabView .comment .action {

View File

@ -14,7 +14,8 @@
var TEMPLATE =
'<ul class="comments">' +
'</ul>' +
'<div class="empty hidden">{{emptyResultLabel}}</div>' +
'<div class="emptycontent hidden"><div class="icon-comment"></div>' +
'<p>{{emptyResultLabel}}</p></div>' +
'<input type="button" class="showMore hidden" value="{{moreLabel}}"' +
' name="show-more" id="show-more" />' +
'<div class="loading hidden" style="height: 50px"></div>';
@ -31,10 +32,10 @@
'{{/if}}' +
' </div>' +
' <form class="newCommentForm">' +
' <textarea class="message" placeholder="{{newMessagePlaceholder}}">{{{message}}}</textarea>' +
' <input class="submit" type="submit" value="{{submitText}}" />' +
' <input type="text" class="message" placeholder="{{newMessagePlaceholder}}" value="{{{message}}}"" />' +
' <input class="submit icon-confirm" type="submit" value="" />' +
'{{#if isEditMode}}' +
' <input class="cancel" type="button" value="{{cancelText}}" />' +
' <input class="cancel pull-right" type="button" value="{{cancelText}}" />' +
'{{/if}}' +
' <div class="submitLoading icon-loading-small hidden"></div>'+
' </form>' +
@ -113,7 +114,7 @@
avatarEnabled: this._avatarsEnabled,
actorId: currentUser.uid,
actorDisplayName: currentUser.displayName,
newMessagePlaceholder: t('comments', 'Type in a new comment...'),
newMessagePlaceholder: t('comments', 'New comment …'),
deleteTooltip: t('comments', 'Delete comment'),
submitText: t('comments', 'Post'),
cancelText: t('comments', 'Cancel')
@ -162,17 +163,17 @@
render: function() {
this.$el.html(this.template({
emptyResultLabel: t('comments', 'No other comments available'),
moreLabel: t('comments', 'More comments...')
emptyResultLabel: t('comments', 'No comments yet, start the conversation!'),
moreLabel: t('comments', 'More comments')
}));
this.$el.find('.comments').before(this.editCommentTemplate({}));
this.$el.find('.has-tooltip').tooltip();
this.$container = this.$el.find('ul.comments');
if (this._avatarsEnabled) {
this.$el.find('.avatar').avatar(OC.getCurrentUser().uid, 28);
this.$el.find('.avatar').avatar(OC.getCurrentUser().uid, 32);
}
this.delegateEvents();
this.$el.find('textarea').on('keydown input change', this._onTypeComment);
this.$el.find('.message').on('keydown input change', this._onTypeComment);
},
_formatItem: function(commentModel) {
@ -200,7 +201,7 @@
_onEndRequest: function(type) {
var fileInfoModel = this.model;
this._toggleLoading(false);
this.$el.find('.empty').toggleClass('hidden', !!this.collection.length);
this.$el.find('.emptycontent').toggleClass('hidden', !!this.collection.length);
this.$el.find('.showMore').toggleClass('hidden', !this.collection.hasMoreResults());
if (type !== 'REPORT') {
@ -238,7 +239,7 @@
if(this._avatarsEnabled) {
$el.find('.avatar').each(function() {
var $this = $(this);
$this.avatar($this.attr('data-username'), 28);
$this.avatar($this.attr('data-username'), 32);
});
}
},
@ -360,7 +361,7 @@
var currentUser = OC.getCurrentUser();
var $submit = $form.find('.submit');
var $loading = $form.find('.submitLoading');
var $textArea = $form.find('textarea');
var $textArea = $form.find('.message');
var message = $textArea.val().trim();
e.preventDefault();
@ -437,4 +438,3 @@
OCA.Comments.CommentsTabView = CommentsTabView;
})(OC, OCA);

View File

@ -328,12 +328,12 @@ describe('OCA.Comments.CommentsTabView tests', function() {
var $formRow = view.$el.find('.newCommentRow.comment[data-id=1]');
expect($formRow.length).toEqual(1);
$formRow.find('textarea').val('modified\nmessage');
$formRow.find('input').val('modified message');
$formRow.find('form').submit();
expect(saveStub.calledOnce).toEqual(true);
expect(saveStub.lastCall.args[0]).toEqual({
message: 'modified\nmessage'
message: 'modified message'
});
var model = view.collection.get(1);