Discussion form

3 files changed, 27 insertions, 17 deletions

diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index ae16769ad4b..22cad1d6124 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -254,6 +254,9 @@ class @Notes
     # find the form
     form = $(".js-new-note-form")
 
+    # Set a global clone of the form for later cloning
+    @formClone = form.clone()
+
     # show the form
     @setupNoteForm(form)
 
@@ -452,15 +455,15 @@ class @Notes
   Shows the note form below the notes.
   ###
   replyToDiscussionNote: (e) =>
-    form = $(".js-new-note-form")
+    form = @formClone.clone()
     replyLink = $(e.target).closest(".js-discussion-reply-button")
     replyLink.hide()
 
     # insert the form after the button
-    form.clone().insertAfter replyLink
+    replyLink.after form
 
     # show the form
-    @setupDiscussionNoteForm(replyLink, replyLink.next("form"))
+    @setupDiscussionNoteForm(replyLink, form)
 
   ###
   Shows the diff or discussion form and does some setup on it.
@@ -485,7 +488,9 @@ class @Notes
         .text(form.find('.js-close-discussion-note-form').data('cancel-text'))
     @setupNoteForm form
     form.find(".js-note-text").focus()
-    form.addClass "js-discussion-note-form"
+    form
+      .removeClass('js-main-target-form')
+      .addClass("discussion-form js-discussion-note-form")
 
   ###
   Called when clicking on the "add a comment" button on the side of a diff line.
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 56912791212..85b323e2caf 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -73,6 +73,11 @@
   }
 }
 
+.discussion-form {
+  padding: $gl-padding-top $gl-padding;
+  background-color: #fff;
+}
+
 .note-edit-form {
   display: none;
   font-size: 15px;
diff --git a/app/views/projects/notes/_notes_with_form.html.haml b/app/views/projects/notes/_notes_with_form.html.haml
index 51e33dd774b..2f9903e26fc 100644
--- a/app/views/projects/notes/_notes_with_form.html.haml
+++ b/app/views/projects/notes/_notes_with_form.html.haml
@@ -1,24 +1,24 @@
 %ul#notes-list.notes.main-notes-list.timeline
   = render "projects/notes/notes"
+%ul.notes.timeline
   %li.timeline-entry
     .timeline-icon.hidden-xs.hidden-sm
       - if can? current_user, :create_note, @project
         %a.author_link{ href: user_path(current_user) }
           = image_tag avatar_icon(current_user), alt: current_user.to_reference, class: 'avatar s40'
     .timeline-content.timeline-content-form
-      .js-main-target-form
-        - if can? current_user, :create_note, @project
-          = render "projects/notes/form", view: diff_view
-        - else
-          .disabled-comment-area
-            .disabled-profile
-            .disabled-comment
-              %span
-                Please
-                = link_to "register",new_user_session_path
-                or
-                = link_to "login",new_user_session_path
-                to post a comment
+      - if can? current_user, :create_note, @project
+        = render "projects/notes/form", view: diff_view
+      - else
+        .disabled-comment-area
+          .disabled-profile
+          .disabled-comment
+            %span
+              Please
+              = link_to "register",new_user_session_path
+              or
+              = link_to "login",new_user_session_path
+              to post a comment
 
 :javascript
   var notes = new Notes("#{namespace_project_notes_path(namespace_id: @project.namespace, target_id: @noteable.id, target_type: @noteable.class.name.underscore)}", #{@notes.map(&:id).to_json}, #{Time.now.to_i}, "#{diff_view}")