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.

apps/comments/css/comments.css

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

apps/comments/js/commentstabview.js

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