Fix common form and note preview

app/views/notes/_common_form.html.haml

@@ -11,17 +11,32 @@
         - @note.errors.full_messages.each do |msg|
           %div= msg
 
-    = f.text_area :note, size: 255, class: 'js-note-text js-gfm-input'
-    #preview-note.preview_note.hide
-    .hint
-      .right Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
+    .js-toggler-container
+      = f.text_area :note, size: 255, class: 'note_text turn-on js-note-text js-gfm-input'
+      .note_preview.js-note-preview.hide.turn-off
+
+      .hint
+        .right Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
       .clearfix
 
-    .row.note_advanced_opts
-      .span3
+      .buttons
         = f.submit 'Add Comment', class: "btn comment-btn grouped js-comment-button"
-        = link_to 'Preview', preview_project_notes_path(@project), class: 'btn grouped', id: 'preview-link'
-      .span4.notify_opts
+        %button.btn.grouped.js-note-preview-button.js-toggler-target.turn-on{ data: {url: preview_project_notes_path(@project)} }
+          Preview
+        %button.btn.grouped.js-note-preview-button.js-toggler-target.turn-off
+          Edit
+
+    .note_advanced_opts
+      .attachments.right
+        %h6.left Attachment:
+        %span.file_name File name...
+
+        .input.input_file
+          %a.file_upload.btn.small Upload File
+          = f.file_field :attachment, class: "input-file"
+        %span.hint Any file less than 10 MB
+
+      .notify_opts.right
         %h6.left Notify via email:
         = label_tag :notify do
           = check_box_tag :notify, 1, @note.noteable_type != "Commit"
@@ -31,11 +46,4 @@
           = label_tag :notify_author do
             = check_box_tag :notify_author, 1 , @note.noteable_type == "Commit"
             %span Commit author
-      .span5.attachments
-        %h6.left Attachment:
-        %span.file_name File name...
-
-        .input.input_file
-          %a.file_upload.btn.small Upload File
-          = f.file_field :attachment, class: "input-file"
-        %span.hint Any file less than 10 MB
+  .clearfix

app/views/notes/_create_common_note.js.haml

@@ -1,13 +1,6 @@
 - if note.valid?
-  :plain
-    $(".note-form-holder .error").remove();
-    $('.note-form-holder textarea').val("");
-    $('.note-form-holder #preview-link').text('Preview');
-    $('.note-form-holder #preview-note').hide();
-    $('.note-form-holder').show();
     NoteList.appendNewNote(#{note.id}, "#{escape_javascript(render "notes/note", note: note)}");
 
 - else
-  :plain
-    $(".note-form-holder").replaceWith("#{escape_javascript(render 'notes/common_form')}");
-    GitLab.GfmAutoComplete.setup();
+  $(".note-form-holder").replaceWith("#{escape_javascript(render 'notes/common_form')}");
+  GitLab.GfmAutoComplete.setup();

app/views/notes/_create_discussion_note.js.haml

@@ -1,5 +1,5 @@
 - if note.valid?
   :plain
     NoteList.appendNewDiscussionNote("#{note.discussion_id}",
-                                     "#{escape_javascript(render "notes/diff_notes_with_reply", notes: [note])}",
-                                     "#{escape_javascript(render "notes/note", note: note)}");
+                                      "#{escape_javascript(render "notes/diff_notes_with_reply", notes: [note])}",
+                                      "#{escape_javascript(render "notes/note", note: note)}");

app/views/notes/_discussion_note_form.html.haml

@@ -10,7 +10,7 @@
       - @note.errors.full_messages.each do |msg|
         %div= msg
 
-  = f.text_area :note,  size: 255, class: 'js-note-text js-gfm-input'
+  = f.text_area :note,  size: 255, class: 'note_text js-note-text js-gfm-input'
   .note_actions
     .buttons
       = f.submit 'Add Comment', class: "btn comment-btn js-comment-button"

app/views/notes/_notes_with_form.html.haml

@@ -1,7 +1,8 @@
 %ul#notes-list.notes
+.notes-status
 
 - if can? current_user, :write_note, @project
-  .note-forms.js-note-forms
+  #note-forms.js-note-forms
     = render "notes/common_form"
     = render "notes/discussion_note_form"