Add/edit comment on Ctrl+Enter (#354)

* Add/edit comment on Ctrl+Enter Fixes #352 * Simplify form submission Also handles both keyCode 10 and 13, since some versions of Chrome on some platforms send the wrong keyCode: https://bugs.chromium.org/p/chromium/issues/detail?id=79407 * Resolve PR feedback
Azure · Jan 24, 2020 · c6418f4 · c6418f4
1 parent 90cd7d8
commit c6418f4
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 15 deletions.
diff --git a/src/dotnet/APIView/APIViewWeb/Client/css/site.scss b/src/dotnet/APIView/APIViewWeb/Client/css/site.scss
@@ -1,4 +1,21 @@
-a.navbar-brand
+/* Mixins used below
+-------------------------------------------------- */
+@mixin placeholder {
+    ::-webkit-input-placeholder {
+        @content
+    }
+    :-moz-placeholder {
+        @content
+    }
+    ::-moz-placeholder {
+        @content
+    }
+    :-ms-input-placeholder {
+        @content
+    }
+}
+
+a.navbar-brand
 {
     white-space: normal;
     text-align: center;
@@ -175,6 +192,10 @@ form.comment {
     cursor: pointer;
 }
 
+@include placeholder {
+    font-style: italic;
+}
+
 .code-window {
     font-size: 14px;
     line-height: 1.5;

diff --git a/src/dotnet/APIView/APIViewWeb/Client/src/comments.ts b/src/dotnet/APIView/APIViewWeb/Client/src/comments.ts
@@ -45,8 +45,8 @@
         e.preventDefault();
     });
 
-    $(document).on("click", "[data-post-update='comments']", e => {
-        const form = <HTMLFormElement><any>$(e.target).closest("form");
+    $(document).on("submit", "form[data-post-update='comments']", e => {
+        const form = <HTMLFormElement><any>$(e.target);
         let lineId = getElementId(e.target);
         if (lineId) {
             let commentRow = getCommentsRow(lineId);
@@ -90,6 +90,15 @@
         e.preventDefault();
     });
 
+    $(document).on("keydown", ".new-thread-comment-text", e => {
+        if (e.ctrlKey && (e.keyCode === 10 || e.keyCode === 13)) {
+            const form = $(e.target).closest("form");
+            if (form) {
+                form.submit();
+            }
+            e.preventDefault();
+        }
+    });
 
     function getReviewId(element: HTMLElement) {
         return getParentData(element, "data-review-id");

diff --git a/src/dotnet/APIView/APIViewWeb/Pages/Assemblies/Review.cshtml b/src/dotnet/APIView/APIViewWeb/Pages/Assemblies/Review.cshtml
@@ -116,11 +116,11 @@
 </div>
 <div id="js-comment-form-template" class="d-none">
     <div class="comment-form border-top new-thread-comment">
-        <form class="new-thread-comment-form comment" method="post" asp-controller="Comments" asp-action="Add">
+        <form data-post-update="comments" class="new-thread-comment-form comment" method="post" asp-controller="Comments" asp-action="Add">
             <div class="new-comment-content">
-                <textarea class="new-thread-comment-text form-control" name="commentText" rows="3"></textarea>
+                <textarea class="new-thread-comment-text form-control" name="commentText" rows="3" placeholder="Click Add Comment or press Ctrl+Enter to add your comment."></textarea>
             </div>
-            <button data-post-update="comments" type="submit" name="submit" value="Submit" class="comment-submit-button btn btn-outline-dark">Add Comment</button>
+            <button type="submit" name="submit" value="Submit" class="comment-submit-button btn btn-outline-dark">Add Comment</button>
             <button type="button" name="cancel" value="Cancel" class="comment-cancel-button btn btn-outline-dark">Cancel</button>
         </form>
     </div>
@@ -129,12 +129,12 @@
 
 <div id="js-comment-edit-form-template" class="d-none">
     <div class="comment-form border-top new-thread-comment">
-        <form class="new-thread-comment-form comment" method="post" asp-controller="Comments" asp-action="Update">
+        <form data-post-update="comments" class="new-thread-comment-form comment" method="post" asp-controller="Comments" asp-action="Update">
             <div class="new-comment-content">
-                <textarea class="new-thread-comment-text form-control" name="commentText" rows="3"></textarea>
+                <textarea class="new-thread-comment-text form-control" name="commentText" rows="3" placeholder="Click Save or press Ctrl+Enter to update your comment."></textarea>
             </div>
             <input type="hidden" class="js-comment-id" name="commentId" />
-            <button data-post-update="comments" type="submit" name="submit" value="Submit" class="comment-submit-button btn btn-outline-dark">Save</button>
+            <button type="submit" name="submit" value="Submit" class="comment-submit-button btn btn-outline-dark">Save</button>
             <button type="button" name="cancel" value="Cancel" class="comment-cancel-button btn btn-outline-dark">Cancel</button>
         </form>
     </div>

diff --git a/src/dotnet/APIView/APIViewWeb/Pages/Shared/_CommentThreadPartial.cshtml b/src/dotnet/APIView/APIViewWeb/Pages/Shared/_CommentThreadPartial.cshtml
@@ -27,9 +27,9 @@
                                         </a>
 
                                         <div class="dropdown-menu">
-                                            <form asp-controller="Comments" asp-action="Delete" method="post" asp-route-reviewId="@Model.ReviewId">
+                                            <form data-post-update="comments" asp-controller="Comments" asp-action="Delete" method="post" asp-route-reviewId="@Model.ReviewId">
                                                 <input type="hidden" name="commentId" value="@comment.CommentId"/>
-                                                <button id="@comment.CommentId" data-post-update="comments" class="text-danger dropdown-item">Delete</button>
+                                                <button id="@comment.CommentId" type="submit" class="text-danger dropdown-item">Delete</button>
                                             </form>
                                             <a class="dropdown-item js-edit-comment">Edit</a>
                                         </div>
@@ -64,14 +64,14 @@
                     <div class="m-2">
                         @if (Model.IsResolved)
                         {
-                            <form method="post" asp-controller="Comments" asp-action="Unresolve" asp-route-reviewId="@Model.ReviewId">
-                                <button data-post-update="comments" type="submit" name="submit" value="Submit" class="btn btn-outline-secondary">Unresolve</button>
+                            <form data-post-update="comments" method="post" asp-controller="Comments" asp-action="Unresolve" asp-route-reviewId="@Model.ReviewId">
+                                <button type="submit" name="submit" value="Submit" class="btn btn-outline-secondary">Unresolve</button>
                             </form>
                         }
                         else
                         {
-                            <form method="post" asp-controller="Comments" asp-action="Resolve"  asp-route-reviewId="@Model.ReviewId">
-                                <button data-post-update="comments" type="submit" name="submit" value="Submit" class="btn btn-outline-secondary">Resolve</button>
+                            <form data-post-update="comments" method="post" asp-controller="Comments" asp-action="Resolve"  asp-route-reviewId="@Model.ReviewId">
+                                <button type="submit" name="submit" value="Submit" class="btn btn-outline-secondary">Resolve</button>
                             </form>
                         }
                     </div>