Merge pull request #10327 from nextcloud/focus-comment-on-tabs-select

Focus comment on tabs select + design fixes

apps/comments/css/comments.scss

@@ -14,39 +14,37 @@
 
 #commentsTabView .newCommentForm {
 	margin-left: 36px;
+	position: relative;
 }
 
 #commentsTabView .newCommentForm .message {
-	/* width = 100% - (width of submit button (44px) + margin (3px) + border (1px)) */
-	width: calc(100% - 48px);
-	/* Need to use float left instead of display inline-block because Safari shows a big cursor */
-	float: left;
-	/* To align it to the button on the side */
-	margin-top: 5px;
+	width: 100%;
+	padding: 10px;
+	min-height: 44px;
+	margin: 0;
 }
 
-#commentsTabView .newCommentForm .submit {
-	width: 44px;
-	margin: 0;
-	padding: 13px;
-	background-color: transparent;
-	border: none;
-	opacity: .3;
-	vertical-align: bottom;
+#commentsTabView .newCommentForm {
+	.submit,
+	.submitLoading {
+		width: 44px;
+		height: 44px;
+		margin: 0;
+		padding: 13px;
+		background-color: transparent;
+		border: none;
+		opacity: .3;
+		position: absolute;
+		bottom: 0;
+		right: 0;
+	}
 }
 
 #commentsTabView .deleteLoading {
-	float: right;
 	padding: 14px;
 	vertical-align: middle;
 }
 
-#commentsTabView .submitLoading {
-	vertical-align: bottom;
-	display: inline-block;
-	padding: 14px;
-}
-
 #commentsTabView .newCommentForm .submit:not(:disabled):hover,
 #commentsTabView .newCommentForm .submit:not(:disabled):focus {
 	opacity: 1;
@@ -65,9 +63,6 @@
 	position: relative;
 	/** padding bottom is little more so that the top and bottom gap look uniform **/
 	padding: 10px 0px 15px;
-	word-wrap: break-word;
-	overflow-wrap: break-word;
-	overflow: hidden;
 }
 
 #commentsTabView .comments .comment {
@@ -201,6 +196,9 @@
 
 #commentsTabView .comments > li:not(.newCommentRow) .message {
 	padding-left: 40px;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	overflow: hidden;
 }
 
 #commentsTabView .comment .action {

apps/comments/js/commentstabview.js

@@ -172,6 +172,7 @@
 			this.$el.find('.message').on('keydown input change', this._onTypeComment);
 
 			autosize(this.$el.find('.newCommentRow .message'))
+			this.$el.find('.newCommentForm .message').focus();	
 		},
 
 		_initAutoComplete: function($target) {
@@ -303,6 +304,8 @@
 					}
 				);
 			}
+			this.$el.find('.newCommentForm .message').focus();	
+			
 		},
 
 		/**