Second clik on the "reply" button in thread closes the form

boards/static/css/base.css

@@ -91,3 +91,7 b' textarea, input {'
     background: none;
     font-size: inherit;
 }
+
+#form-close-button {
+    display: none;
+}

boards/static/js/thread.js

@@ -23,6 +23,7 b''
  for the JavaScript code in this page.
  */
 
+var CLOSE_BUTTON = '#form-close-button';
 var $html = $("html, body");
 
 function moveCaretToEnd(el) {
@@ -43,46 +44,60 b' function getForm() {'
 function resetFormPosition() {
     var form = getForm();
     form.insertAfter($('.thread'));
+
+    $(CLOSE_BUTTON).hide();
+}
+
+function showFormAfter(blockToInsertAfter) {
+    var form = getForm();
+    form.insertAfter(blockToInsertAfter);
+
+    $(CLOSE_BUTTON).show();
+    form.show();
 }
 
 function addQuickReply(postId) {
-    var postLinkRaw = '[post]' + postId + '[/post]'
+    // If we click "reply" on the same post, it means "cancel"
+    if (getForm().prev().attr('id') == postId) {
+        resetFormPosition();
+    } else {
+        var postLinkRaw = '[post]' + postId + '[/post]'
 
-    var textToAdd = '';
-    var blockToInsert = null;
+            var textToAdd = '';
+        var blockToInsert = null;
 
-    var textAreaJq = $('textarea');
+        var textAreaJq = $('textarea');
 
-    if (postId != null) {
-        var post = $('#' + postId);
+        if (postId != null) {
+            var post = $('#' + postId);
 
-        // If this is not OP, add reflink to the post. If there already is
-        // the same reflink, don't add it again.
-        if (!post.is(':first-child') && textAreaJq.val().indexOf(postLinkRaw) < 0) {
-            textToAdd += postLinkRaw + '\n';
+            // If this is not OP, add reflink to the post. If there already is
+            // the same reflink, don't add it again.
+            if (!post.is(':first-child') && textAreaJq.val().indexOf(postLinkRaw) < 0) {
+                textToAdd += postLinkRaw + '\n';
+            }
+
+            blockToInsert = post;
+        } else {
+            blockToInsert = $('.thread');
         }
 
-        blockToInsert = post;
-    } else {
-        blockToInsert = $('.thread');
-    }
+        var selection = window.getSelection().toString();
+        if (selection.length > 0) {
+            textToAdd += '[quote]' + selection + '[/quote]\n';
+        }
 
-    var selection = window.getSelection().toString();
-    if (selection.length > 0) {
-        textToAdd += '[quote]' + selection + '[/quote]\n';
-    }
+        textAreaJq.val(textAreaJq.val()+ textToAdd);
 
-    textAreaJq.val(textAreaJq.val()+ textToAdd);
+        showFormAfter(blockToInsert);
 
-    var form = getForm();
-    form.insertAfter(blockToInsert);
-    form.show();
-
-    textAreaJq.focus();
-    var textarea = document.getElementsByTagName('textarea')[0];
-    moveCaretToEnd(textarea);
+        textAreaJq.focus();
+        var textarea = document.getElementsByTagName('textarea')[0];
+        moveCaretToEnd(textarea);
+    }
 }
 
 function scrollToBottom() {
     $html.animate({scrollTop: $html.height()}, "fast");
 }
+

boards/templates/boards/thread_normal.html

@@ -46,7 +46,7 b''
                 </div>
                 <div><a href="{% url "staticpage" name="help" %}">
                     {% trans 'Text syntax' %}</a></div>
-                <div><a href="#" onClick="resetFormPosition(); return false;">{% trans 'Close form' %}</a></div>
+                <div><a id="form-close-button" href="#" onClick="resetFormPosition(); return false;">{% trans 'Close form' %}</a></div>
             </div>
         </div>