Improve notes form UI/UX

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

1 files changed, 27 insertions, 3 deletions

diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index 4510718c2fd..5be001e0a22 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -32,6 +32,9 @@ class Notes
     # Preview button
     $(document).on "click", ".js-note-preview-button", @previewNote
 
+    # Preview button
+    $(document).on "click", ".js-note-write-button", @writeNote
+
     # reset main target form after submit
     $(document).on "ajax:complete", ".js-main-target-form", @resetMainTargetForm
 
@@ -68,6 +71,7 @@ class Notes
     $(document).off "click", ".js-note-delete"
     $(document).off "click", ".js-note-attachment-delete"
     $(document).off "click", ".js-note-preview-button"
+    $(document).off "click", ".js-note-write-button"
     $(document).off "ajax:complete", ".js-main-target-form"
     $(document).off "click", ".js-choose-note-attachment-button"
     $(document).off "click", ".js-discussion-reply-button"
@@ -145,15 +149,35 @@ class Notes
     @removeDiscussionNoteForm(form)
 
   ###
+  Shows write note textarea.
+  ###
+  writeNote: (e) ->
+    e.preventDefault()
+    form = $(this).closest("form")
+    # toggle tabs
+    form.find(".js-note-write-button").parent().addClass "active"
+    form.find(".js-note-preview-button").parent().removeClass "active"
+
+    # toggle content
+    form.find(".note-write-holder").show()
+    form.find(".note-preview-holder").hide()
+
+  ###
   Shows the note preview.
 
   Lets the server render GFM into Html and displays it.
-
-  Note: uses the Toggler behavior to toggle preview/edit views/buttons
   ###
   previewNote: (e) ->
     e.preventDefault()
     form = $(this).closest("form")
+    # toggle tabs
+    form.find(".js-note-write-button").parent().removeClass "active"
+    form.find(".js-note-preview-button").parent().addClass "active"
+
+    # toggle content
+    form.find(".note-write-holder").hide()
+    form.find(".note-preview-holder").show()
+
     preview = form.find(".js-note-preview")
     noteText = form.find(".js-note-text").val()
     if noteText.trim().length is 0
@@ -179,7 +203,7 @@ class Notes
     form.find(".js-errors").remove()
 
     # reset text and preview
-    previewContainer = form.find(".js-toggler-container.note_text_and_preview")
+    previewContainer = form.find(".note-edit-and-preview")
     previewContainer.removeClass "on"  if previewContainer.is(".on")
     form.find(".js-note-text").val("").trigger "input"