fix design details in comments sidebar
This commit is contained in:
parent
ce0604bd06
commit
efd1cf57da
|
@ -8,13 +8,35 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
#commentsTabView .emptycontent {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
#commentsTabView .newCommentForm {
|
#commentsTabView .newCommentForm {
|
||||||
|
position: relative;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#commentsTabView .newCommentForm .message {
|
#commentsTabView .newCommentForm .message {
|
||||||
width: 90%;
|
width: 76%;
|
||||||
resize: vertical;
|
margin-left: 32px;
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#commentsTabView .newCommentForm .submit {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
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 {
|
#commentsTabView .newCommentForm .submitLoading {
|
||||||
|
@ -22,18 +44,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#commentsTabView .comment {
|
#commentsTabView .comment {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#commentsTabView .comment .avatar {
|
#commentsTabView .comment .avatar {
|
||||||
width: 28px;
|
width: 32px;
|
||||||
height: 28px;
|
height: 32px;
|
||||||
line-height: 28px;
|
line-height: 32px;
|
||||||
}
|
|
||||||
|
|
||||||
#commentsTabView .comment {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#commentsTabView .comment.collapsed .message {
|
#commentsTabView .comment.collapsed .message {
|
||||||
|
@ -80,17 +99,24 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#commentsTabView .comment .authorRow {
|
#commentsTabView .comment .authorRow {
|
||||||
margin-bottom: 5px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#commentsTabView .comment .author {
|
#commentsTabView .comment .author,
|
||||||
font-weight: bold;
|
#commentsTabView .comment .date {
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
#commentsTabView .comment .author {
|
||||||
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#commentsTabView .comment .date {
|
#commentsTabView .comment .date {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#commentsTabView .comments .message {
|
||||||
|
padding-left: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#commentsTabView .comment .action {
|
#commentsTabView .comment .action {
|
||||||
|
|
|
@ -14,7 +14,8 @@
|
||||||
var TEMPLATE =
|
var TEMPLATE =
|
||||||
'<ul class="comments">' +
|
'<ul class="comments">' +
|
||||||
'</ul>' +
|
'</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}}"' +
|
'<input type="button" class="showMore hidden" value="{{moreLabel}}"' +
|
||||||
' name="show-more" id="show-more" />' +
|
' name="show-more" id="show-more" />' +
|
||||||
'<div class="loading hidden" style="height: 50px"></div>';
|
'<div class="loading hidden" style="height: 50px"></div>';
|
||||||
|
@ -31,8 +32,8 @@
|
||||||
'{{/if}}' +
|
'{{/if}}' +
|
||||||
' </div>' +
|
' </div>' +
|
||||||
' <form class="newCommentForm">' +
|
' <form class="newCommentForm">' +
|
||||||
' <textarea class="message" placeholder="{{newMessagePlaceholder}}">{{{message}}}</textarea>' +
|
' <input type="text" class="message" placeholder="{{newMessagePlaceholder}}" value="{{{message}}}"" />' +
|
||||||
' <input class="submit" type="submit" value="{{submitText}}" />' +
|
' <input class="submit icon-confirm" type="submit" value="" />' +
|
||||||
'{{#if isEditMode}}' +
|
'{{#if isEditMode}}' +
|
||||||
' <input class="cancel" type="button" value="{{cancelText}}" />' +
|
' <input class="cancel" type="button" value="{{cancelText}}" />' +
|
||||||
'{{/if}}' +
|
'{{/if}}' +
|
||||||
|
@ -113,7 +114,7 @@
|
||||||
avatarEnabled: this._avatarsEnabled,
|
avatarEnabled: this._avatarsEnabled,
|
||||||
actorId: currentUser.uid,
|
actorId: currentUser.uid,
|
||||||
actorDisplayName: currentUser.displayName,
|
actorDisplayName: currentUser.displayName,
|
||||||
newMessagePlaceholder: t('comments', 'Type in a new comment...'),
|
newMessagePlaceholder: t('comments', 'New comment …'),
|
||||||
deleteTooltip: t('comments', 'Delete comment'),
|
deleteTooltip: t('comments', 'Delete comment'),
|
||||||
submitText: t('comments', 'Post'),
|
submitText: t('comments', 'Post'),
|
||||||
cancelText: t('comments', 'Cancel')
|
cancelText: t('comments', 'Cancel')
|
||||||
|
@ -162,17 +163,17 @@
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
this.$el.html(this.template({
|
this.$el.html(this.template({
|
||||||
emptyResultLabel: t('comments', 'No other comments available'),
|
emptyResultLabel: t('comments', 'No comments yet, start the conversation!'),
|
||||||
moreLabel: t('comments', 'More comments...')
|
moreLabel: t('comments', 'More comments …')
|
||||||
}));
|
}));
|
||||||
this.$el.find('.comments').before(this.editCommentTemplate({}));
|
this.$el.find('.comments').before(this.editCommentTemplate({}));
|
||||||
this.$el.find('.has-tooltip').tooltip();
|
this.$el.find('.has-tooltip').tooltip();
|
||||||
this.$container = this.$el.find('ul.comments');
|
this.$container = this.$el.find('ul.comments');
|
||||||
if (this._avatarsEnabled) {
|
if (this._avatarsEnabled) {
|
||||||
this.$el.find('.avatar').avatar(OC.getCurrentUser().uid, 28);
|
this.$el.find('.avatar').avatar(OC.getCurrentUser().uid, 32);
|
||||||
}
|
}
|
||||||
this.delegateEvents();
|
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) {
|
_formatItem: function(commentModel) {
|
||||||
|
@ -200,7 +201,7 @@
|
||||||
_onEndRequest: function(type) {
|
_onEndRequest: function(type) {
|
||||||
var fileInfoModel = this.model;
|
var fileInfoModel = this.model;
|
||||||
this._toggleLoading(false);
|
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());
|
this.$el.find('.showMore').toggleClass('hidden', !this.collection.hasMoreResults());
|
||||||
|
|
||||||
if (type !== 'REPORT') {
|
if (type !== 'REPORT') {
|
||||||
|
@ -238,7 +239,7 @@
|
||||||
if(this._avatarsEnabled) {
|
if(this._avatarsEnabled) {
|
||||||
$el.find('.avatar').each(function() {
|
$el.find('.avatar').each(function() {
|
||||||
var $this = $(this);
|
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 currentUser = OC.getCurrentUser();
|
||||||
var $submit = $form.find('.submit');
|
var $submit = $form.find('.submit');
|
||||||
var $loading = $form.find('.submitLoading');
|
var $loading = $form.find('.submitLoading');
|
||||||
var $textArea = $form.find('textarea');
|
var $textArea = $form.find('.message');
|
||||||
var message = $textArea.val().trim();
|
var message = $textArea.val().trim();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
|
@ -437,4 +438,3 @@
|
||||||
|
|
||||||
OCA.Comments.CommentsTabView = CommentsTabView;
|
OCA.Comments.CommentsTabView = CommentsTabView;
|
||||||
})(OC, OCA);
|
})(OC, OCA);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue