mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Collapse long comments 

Very crude a naive implementation that relies on length and number of
newlines. Should be good enough for most cases.

Clicking on such comments will expand them.
This commit is contained in:
Vincent Petry 2016-02-04 18:20:16 +01:00
parent 62b5948ff5
commit 78864dc6fa
2 changed files with 68 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
apps/comments/css/comments.css
View File

@ -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;

29
apps/comments/js/commentstabview.js
View File

@ -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;
}
});