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;
|
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 {
|
#commentsTabView .authorRow>div {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
|
@ -41,7 +41,7 @@
|
||||||
'</div>';
|
'</div>';
|
||||||
|
|
||||||
var COMMENT_TEMPLATE =
|
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">' +
|
' <div class="authorRow">' +
|
||||||
' {{#if avatarEnabled}}' +
|
' {{#if avatarEnabled}}' +
|
||||||
' <div class="avatar" {{#if actorId}}data-username="{{actorId}}"{{/if}}> </div>' +
|
' <div class="avatar" {{#if actorId}}data-username="{{actorId}}"{{/if}}> </div>' +
|
||||||
|
@ -53,6 +53,9 @@
|
||||||
' <div class="date has-tooltip" title="{{altDate}}">{{date}}</div>' +
|
' <div class="date has-tooltip" title="{{altDate}}">{{date}}</div>' +
|
||||||
' </div>' +
|
' </div>' +
|
||||||
' <div class="message">{{{formattedMessage}}}</div>' +
|
' <div class="message">{{{formattedMessage}}}</div>' +
|
||||||
|
'{{#if isLong}}' +
|
||||||
|
' <div class="message-overlay"></div>' +
|
||||||
|
'{{/if}}' +
|
||||||
'</li>';
|
'</li>';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -68,7 +71,8 @@
|
||||||
'click .showMore': '_onClickShowMore',
|
'click .showMore': '_onClickShowMore',
|
||||||
'click .action.edit': '_onClickEditComment',
|
'click .action.edit': '_onClickEditComment',
|
||||||
'click .action.delete': '_onClickDeleteComment',
|
'click .action.delete': '_onClickDeleteComment',
|
||||||
'click .cancel': '_onClickCloseComment'
|
'click .cancel': '_onClickCloseComment',
|
||||||
|
'click .comment': '_onClickComment'
|
||||||
},
|
},
|
||||||
|
|
||||||
_commentMaxLength: 1000,
|
_commentMaxLength: 1000,
|
||||||
|
@ -124,7 +128,8 @@
|
||||||
params = _.extend({
|
params = _.extend({
|
||||||
avatarEnabled: this._avatarsEnabled,
|
avatarEnabled: this._avatarsEnabled,
|
||||||
editTooltip: t('comments', 'Edit comment'),
|
editTooltip: t('comments', 'Edit comment'),
|
||||||
isUserAuthor: OC.getCurrentUser().uid === params.actorId
|
isUserAuthor: OC.getCurrentUser().uid === params.actorId,
|
||||||
|
isLong: this._isLong(params.message)
|
||||||
}, params);
|
}, params);
|
||||||
|
|
||||||
if (params.actorType === 'deleted_users') {
|
if (params.actorType === 'deleted_users') {
|
||||||
|
@ -264,7 +269,7 @@
|
||||||
submitText: t('comments', 'Save')
|
submitText: t('comments', 'Save')
|
||||||
}, commentToEdit.attributes)));
|
}, commentToEdit.attributes)));
|
||||||
|
|
||||||
$comment.addClass('hidden');
|
$comment.addClass('hidden').removeClass('collapsed');
|
||||||
// spawn form
|
// spawn form
|
||||||
$comment.after($formRow);
|
$comment.after($formRow);
|
||||||
$formRow.data('commentEl', $comment);
|
$formRow.data('commentEl', $comment);
|
||||||
|
@ -298,6 +303,14 @@
|
||||||
$submitButton.prop('disabled', limitExceeded);
|
$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) {
|
_onClickCloseComment: function(ev) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
var $row = $(ev.target).closest('.comment');
|
var $row = $(ev.target).closest('.comment');
|
||||||
|
@ -406,6 +419,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
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