Add autosize to comments input

Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>
nextcloud · Oct 4, 2016 · 5ca50d9 · 5ca50d9
1 parent c5d24a6
commit 5ca50d9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/apps/comments/css/comments.css b/apps/comments/css/comments.css
@@ -25,7 +25,7 @@
 
 #commentsTabView .newCommentForm .submit {
 	position: absolute;
-	top: 1px;
+	bottom: 1px;
 	right: 8px;
 	width: 30px;
 	margin: 0;
@@ -47,6 +47,10 @@
 	margin-right: 6px;
 }
 
+#commentsTabView .newCommentForm textarea {
+	resize: none;
+}
+
 #commentsTabView .comment {
 	position: relative;
 	z-index: 1;

diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js
@@ -32,7 +32,7 @@
 		'{{/if}}' +
 		'    </div>' +
 		'    <form class="newCommentForm">' +
-		'        <input type="text" class="message" placeholder="{{newMessagePlaceholder}}" value="{{message}}" />' +
+		'        <textarea rows="1" class="message" placeholder="{{newMessagePlaceholder}}">{{message}}</textarea>' +
 		'        <input class="submit icon-confirm" type="submit" value="" />' +
 		'{{#if isEditMode}}' +
 		'        <input class="cancel pull-right" type="button" value="{{cancelText}}" />' +
@@ -174,6 +174,8 @@
 			}
 			this.delegateEvents();
 			this.$el.find('.message').on('keydown input change', this._onTypeComment);
+
+			autosize(this.$el.find('.newCommentRow textarea'))
 		},
 
 		_formatItem: function(commentModel) {
@@ -281,6 +283,9 @@
 			$formRow.find('.avatar').replaceWith($comment.find('.avatar').clone());
 			$formRow.find('.has-tooltip').tooltip();
 
+			// Enable autosize
+			autosize($formRow.find('textarea'));
+
 			return false;
 		},
 
@@ -346,7 +351,6 @@
 				}
 			});
 
-
 			return false;
 		},