Merge pull request #714 from nextcloud/comments-layout
fix design details in comments sidebar
This commit is contained in:
Lukas Reschke
GitHub
commit
5580a77bd7
|
|
@ -8,37 +8,60 @@
|
|||
*
|
||||
*/
|
||||
|
||||
#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 {
|
||||
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
|
||||
white-space: -webkit-pre-wrap; /*Chrome & Safari */
|
||||
white-space: -webkit-pre-wrap; /*Chrome & Safari */
|
||||
white-space: -pre-wrap; /* Opera 4-6 */
|
||||
white-space: -o-pre-wrap; /* Opera 7 */
|
||||
white-space: pre-wrap; /* css-3 */
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue