Merge pull request #22138 from owncloud/comments-collapse
Collapse long comments
This commit is contained in:
commit
03ca63c224
|
@ -31,6 +31,49 @@
|
|||
line-height: 28px;
|
||||
}
|
||||
|
||||
#commentsTabView .comment {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#commentsTabView .comment.collapsed .message {
|
||||
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
|
||||
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 */
|
||||
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
#commentsTabView .comment.collapsed .message {
|
||||
max-height: 70px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#commentsTabView .comment .message-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#commentsTabView .comment.collapsed .message-overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
height: 50px;
|
||||
pointer-events: none;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
|
||||
background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
|
||||
background: -o-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
|
||||
background: -ms-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
|
||||
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00FFFFFF', endColorstr='#FFFFFFFF');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#commentsTabView .authorRow>div {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
|
|
@ -41,7 +41,7 @@
|
|||
'</div>';
|
||||
|
||||
var COMMENT_TEMPLATE =
|
||||
'<li class="comment{{#if isUnread}} unread{{/if}}" data-id="{{id}}">' +
|
||||
'<li class="comment{{#if isUnread}} unread{{/if}}{{#if isLong}} collapsed{{/if}}" data-id="{{id}}">' +
|
||||
' <div class="authorRow">' +
|
||||
' {{#if avatarEnabled}}' +
|
||||
' <div class="avatar" {{#if actorId}}data-username="{{actorId}}"{{/if}}> </div>' +
|
||||
|
@ -53,6 +53,9 @@
|
|||
' <div class="date has-tooltip" title="{{altDate}}">{{date}}</div>' +
|
||||
' </div>' +
|
||||
' <div class="message">{{{formattedMessage}}}</div>' +
|
||||
'{{#if isLong}}' +
|
||||
' <div class="message-overlay"></div>' +
|
||||
'{{/if}}' +
|
||||
'</li>';
|
||||
|
||||
/**
|
||||
|
@ -68,7 +71,8 @@
|
|||
'click .showMore': '_onClickShowMore',
|
||||
'click .action.edit': '_onClickEditComment',
|
||||
'click .action.delete': '_onClickDeleteComment',
|
||||
'click .cancel': '_onClickCloseComment'
|
||||
'click .cancel': '_onClickCloseComment',
|
||||
'click .comment': '_onClickComment'
|
||||
},
|
||||
|
||||
_commentMaxLength: 1000,
|
||||
|
@ -124,7 +128,8 @@
|
|||
params = _.extend({
|
||||
avatarEnabled: this._avatarsEnabled,
|
||||
editTooltip: t('comments', 'Edit comment'),
|
||||
isUserAuthor: OC.getCurrentUser().uid === params.actorId
|
||||
isUserAuthor: OC.getCurrentUser().uid === params.actorId,
|
||||
isLong: this._isLong(params.message)
|
||||
}, params);
|
||||
|
||||
if (params.actorType === 'deleted_users') {
|
||||
|
@ -264,7 +269,7 @@
|
|||
submitText: t('comments', 'Save')
|
||||
}, commentToEdit.attributes)));
|
||||
|
||||
$comment.addClass('hidden');
|
||||
$comment.addClass('hidden').removeClass('collapsed');
|
||||
// spawn form
|
||||
$comment.after($formRow);
|
||||
$formRow.data('commentEl', $comment);
|
||||
|
@ -298,6 +303,14 @@
|
|||
$submitButton.prop('disabled', limitExceeded);
|
||||
},
|
||||
|
||||
_onClickComment: function(ev) {
|
||||
var $row = $(ev.target);
|
||||
if (!$row.is('.comment')) {
|
||||
$row = $row.closest('.comment');
|
||||
}
|
||||
$row.removeClass('collapsed');
|
||||
},
|
||||
|
||||
_onClickCloseComment: function(ev) {
|
||||
ev.preventDefault();
|
||||
var $row = $(ev.target).closest('.comment');
|
||||
|
@ -406,6 +419,14 @@
|
|||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns whether the given message is long and needs
|
||||
* collapsing
|
||||
*/
|
||||
_isLong: function(message) {
|
||||
return message.length > 250 || (message.match(/\n/g) || []).length > 1;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue