Merge branch 'note-form-buttons' into 'master'

Note form

A lot of the forms have the same actions associated with them so I have created a standard class that encapsulate these actions.

There is also another class that allows toolbar action buttons to be added that will insert different characters based on the HTML `data-prefix` attribute value - this will give us the opportunity to add more actions to the form and maybe create a markdown toolbar in the future.

See merge request !3534

CHANGELOG

@@ -61,6 +61,7 @@ v 8.7.0 (unreleased)
   - API: User can leave a project through the API when not master or owner. !3613
   - Fix repository cache invalidation issue when project is recreated with an empty repo (Stan Hu)
   - Fix: Allow empty recipients list for builds emails service when pushed is added (Frank Groeneveld)
+  - Improved markdown forms
 
 v 8.6.6
   - Fix error on language detection when repository has no HEAD (e.g., master branch). !3654 (Jeroen Bobbeldijk)

app/assets/javascripts/dispatcher.js.coffee

@@ -28,26 +28,26 @@ class Dispatcher
         new Todos()
       when 'projects:milestones:new', 'projects:milestones:edit'
         new ZenMode()
-        new DropzoneInput($('.milestone-form'))
+        new GLForm($('.milestone-form'))
       when 'groups:milestones:new'
         new ZenMode()
       when 'projects:compare:show'
         new Diff()
       when 'projects:issues:new','projects:issues:edit'
         shortcut_handler = new ShortcutsNavigation()
-        new DropzoneInput($('.issue-form'))
+        new GLForm($('.issue-form'))
         new IssuableForm($('.issue-form'))
       when 'projects:merge_requests:new', 'projects:merge_requests:edit'
         new Diff()
         shortcut_handler = new ShortcutsNavigation()
-        new DropzoneInput($('.merge-request-form'))
+        new GLForm($('.merge-request-form'))
         new IssuableForm($('.merge-request-form'))
       when 'projects:tags:new'
         new ZenMode()
-        new DropzoneInput($('.tag-form'))
+        new GLForm($('.tag-form'))
       when 'projects:releases:edit'
         new ZenMode()
-        new DropzoneInput($('.release-form'))
+        new GLForm($('.release-form'))
       when 'projects:merge_requests:show'
         new Diff()
         shortcut_handler = new ShortcutsIssuable(true)
@@ -137,7 +137,7 @@ class Dispatcher
             new Wikis()
             shortcut_handler = new ShortcutsNavigation()
             new ZenMode()
-            new DropzoneInput($('.wiki-form'))
+            new GLForm($('.wiki-form'))
           when 'snippets'
             shortcut_handler = new ShortcutsNavigation()
             new ZenMode() if path[2] == 'show'

app/assets/javascripts/dropzone_input.js.coffee

@@ -15,11 +15,13 @@ class @DropzoneInput
     project_uploads_path = window.project_uploads_path or null
     max_file_size = gon.max_file_size or 10
 
-    form_textarea = $(form).find("textarea.markdown-area")
+    form_textarea = $(form).find(".js-gfm-input")
     form_textarea.wrap "<div class=\"div-dropzone\"></div>"
     form_textarea.on 'paste', (event) =>
       handlePaste(event)
 
+    $mdArea = $(form_textarea).closest('.md-area')
+
     $(form).setupMarkdownPreview()
 
     form_dropzone = $(form).find('.div-dropzone')
@@ -49,17 +51,16 @@ class @DropzoneInput
         $(".div-dropzone-alert").alert "close"
 
       dragover: ->
-        form_textarea.addClass "div-dropzone-focus"
+        $mdArea.addClass 'is-dropzone-hover'
         form.find(".div-dropzone-hover").css "opacity", 0.7
         return
 
       dragleave: ->
-        form_textarea.removeClass "div-dropzone-focus"
+        $mdArea.removeClass 'is-dropzone-hover'
         form.find(".div-dropzone-hover").css "opacity", 0
         return
 
       drop: ->
-        form_textarea.removeClass "div-dropzone-focus"
         form.find(".div-dropzone-hover").css "opacity", 0
         form_textarea.focus()
         return

app/assets/javascripts/gl_form.js.coffee

+class @GLForm
+  constructor: (@form) ->
+    @textarea = @form.find('textarea.js-gfm-input')
+
+    # Before we start, we should clean up any previous data for this form
+    @destroy()
+
+    # Setup the form
+    @setupForm()
+
+    @form.data 'gl-form', @
+
+  destroy: ->
+    # Clean form listeners
+    @clearEventListeners()
+    @form.data 'gl-form', null
+
+  setupForm: ->
+    isNewForm = @form.is(':not(.gfm-form)')
+
+    @form.removeClass 'js-new-note-form'
+
+    if isNewForm
+      @form.find('.div-dropzone').remove()
+      @form.addClass('gfm-form')
+      disableButtonIfEmptyField @form.find('.js-note-text'), @form.find('.js-comment-button')
+
+      # remove notify commit author checkbox for non-commit notes
+      GitLab.GfmAutoComplete.setup()
+      new DropzoneInput(@form)
+
+      autosize(@textarea)
+
+      # form and textarea event listeners
+      @addEventListeners()
+
+    # hide discard button
+    @form.find('.js-note-discard').hide()
+
+    @form.show()
+
+  clearEventListeners: ->
+    @textarea.off 'focus'
+    @textarea.off 'blur'
+
+  addEventListeners: ->
+    @textarea.on 'focus', ->
+      $(@).closest('.md-area').addClass 'is-focused'
+
+    @textarea.on 'blur', ->
+      $(@).closest('.md-area').removeClass 'is-focused'

app/assets/javascripts/notes.js.coffee

@@ -283,32 +283,10 @@ class @Notes
   show the form
   ###
   setupNoteForm: (form) ->
-    disableButtonIfEmptyField form.find(".js-note-text"), form.find(".js-comment-button")
-    form.removeClass "js-new-note-form"
-    form.find('.div-dropzone').remove()
-
-    # hide discard button
-    form.find('.js-note-discard').hide()
-
-    # setup preview buttons
-    previewButton = form.find(".js-md-preview-button")
+    new GLForm form
 
     textarea = form.find(".js-note-text")
 
-    textarea.on "input", ->
-      if $(this).val().trim() isnt ""
-        previewButton.removeClass("turn-off").addClass "turn-on"
-      else
-        previewButton.removeClass("turn-on").addClass "turn-off"
-
-    textarea.on 'focus', ->
-      $(this).closest('.md-area').addClass 'is-focused'
-
-    textarea.on 'blur', ->
-      $(this).closest('.md-area').removeClass 'is-focused'
-
-    autosize(textarea)
-
     new Autosave textarea, [
       "Note"
       form.find("#note_commit_id").val()
@@ -317,11 +295,6 @@ class @Notes
       form.find("#note_noteable_id").val()
     ]
 
-    # remove notify commit author checkbox for non-commit notes
-    GitLab.GfmAutoComplete.setup()
-    new DropzoneInput(form)
-    form.show()
-
   ###
   Called in response to the new note form being submitted
 
@@ -375,34 +348,15 @@ class @Notes
     note = $(this).closest(".note")
     note.addClass "is-editting"
     form = note.find(".note-edit-form")
-    isNewForm = form.is(':not(.gfm-form)')
-    if isNewForm
-      form.addClass('gfm-form')
+
     form.addClass('current-note-edit-form')
 
     # Show the attachment delete link
     note.find(".js-note-attachment-delete").show()
 
-    # Setup markdown form
-    if isNewForm
-      GitLab.GfmAutoComplete.setup()
-      new DropzoneInput(form)
-
-    textarea = form.find("textarea")
-    textarea.focus()
-
-    if isNewForm
-      autosize(textarea)
-
-    # HACK (rspeicher/DouweM): Work around a Chrome 43 bug(?).
-    # The textarea has the correct value, Chrome just won't show it unless we
-    # modify it, so let's clear it and re-set it!
-    value = textarea.val()
-    textarea.val ""
-    textarea.val value
+    new GLForm form
 
-    if isNewForm
-      disableButtonIfEmptyField textarea, form.find(".js-comment-button")
+    form.find(".js-note-text").focus()
 
   ###
   Called in response to clicking the edit note link
@@ -559,6 +513,9 @@ class @Notes
   removeDiscussionNoteForm: (form)->
     row = form.closest("tr")
 
+    glForm = form.data 'gl-form'
+    glForm.destroy()
+
     form.find(".js-note-text").data("autosave").reset()
 
     # show the reply button (will only work for replies)
@@ -570,7 +527,6 @@ class @Notes
       # only remove the form
       form.remove()
 
-
   cancelDiscussionForm: (e) =>
     e.preventDefault()
     form = $(e.target).closest(".js-discussion-note-form")

app/assets/stylesheets/framework/gfm.scss

 /**
  * Styles that apply to all GFM related forms.
  */
-.issue-form, .merge-request-form, .wiki-form {
-  .description {
-    height: 16em;
-    border-top-left-radius: 0;
-  }
-}
-
-.wiki-form {
-  .description {
-    height: 26em;
-  }
-}
-
-.milestone-form {
-  .description {
-    height: 14em;
-  }
-}
 
 .gfm-commit, .gfm-commit_range {
   font-family: $monospace_font;

app/assets/stylesheets/framework/markdown_area.scss

 .div-dropzone-wrapper {
   .div-dropzone {
     position: relative;
-    margin-bottom: -5px;
-
-    .div-dropzone-focus {
-      border-color: #66afe9 !important;
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
-      outline: 0 !important;
-    }
 
     .div-dropzone-hover {
       position: absolute;
       top: 50%;
       left: 50%;
-      margin-top: -0.5em;
-      margin-left: -0.6em;
+      margin-top: -11.5px;
+      margin-left: -15px;
       opacity: 0;
-      font-size: 50px;
+      font-size: 30px;
       transition: opacity 200ms ease-in-out;
       pointer-events: none;
     }

app/assets/stylesheets/framework/typography.scss

@@ -250,14 +250,6 @@ a > code {
  * Textareas intended for GFM
  *
  */
-.js-gfm-input {
-  font-family: $monospace_font;
-  color: $gl-text-color;
-}
-
-.md-preview {
-}
-
 .strikethrough {
   text-decoration: line-through;
 }

app/assets/stylesheets/framework/variables.scss

@@ -150,6 +150,7 @@ $light-grey-header: #faf9f9;
  */
 $gl-primary: $blue-normal;
 $gl-success: $green-normal;
+$gl-success-focus: rgba($gl-success, .4);
 $gl-info: $blue-normal;
 $gl-warning: $orange-normal;
 $gl-danger: $red-normal;

app/assets/stylesheets/pages/note_form.scss

@@ -40,6 +40,7 @@
 }
 
 .note-textarea {
+  display: block;
   padding: 10px 0;
   font-family: $regular_font;
   border: 0;
@@ -63,7 +64,7 @@
 
     &.is-focused {
       border-color: $focus-border-color;
-      box-shadow: 0 0 2px rgba(#000, .2),
+      box-shadow: 0 0 2px $black-transparent,
                   0 0 4px rgba($focus-border-color, .4);
 
       .comment-toolbar,
@@ -72,6 +73,17 @@
       }
     }
 
+    &.is-dropzone-hover {
+      border-color: $gl-success;
+      box-shadow: 0 0 2px $black-transparent,
+                  0 0 4px $gl-success-focus;
+
+      .comment-toolbar,
+      .nav-links {
+        border-color: $gl-success;
+      }
+    }
+
     p {
       code {
         white-space: normal;

app/views/groups/milestones/new.html.haml

@@ -8,7 +8,7 @@
   This will create milestone in every selected project
 %hr
 
-= form_for @milestone, url: group_milestones_path(@group), html: { class: 'form-horizontal milestone-form gfm-form js-quick-submit js-requires-input' }  do |f|
+= form_for @milestone, url: group_milestones_path(@group), html: { class: 'form-horizontal milestone-form common-note-form js-quick-submit js-requires-input' }  do |f|
   .row
     - if @milestone.errors.any?
       #error_explanation
@@ -27,7 +27,7 @@
         = f.label :description, "Description", class: "control-label"
         .col-sm-10
           = render layout: 'projects/md_preview', locals: { preview_class: "md-preview" } do
-            = render 'projects/zen', f: f, attr: :description, classes: 'description form-control'
+            = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: 'Write milestone description...'
             .clearfix
             .error-alert
       .form-group

app/views/projects/_zen.html.haml

 .zen-backdrop
   - classes << ' js-gfm-input js-autosize markdown-area'
   - if defined?(f) && f
-    = f.text_area attr, class: classes, placeholder: "Write a comment or drag your files here..."
+    = f.text_area attr, class: classes, placeholder: placeholder
   - else
-    = text_area_tag attr, nil, class: classes, placeholder: "Write a comment or drag your files here..."
+    = text_area_tag attr, nil, class: classes, placeholder: placeholder
   %a.zen-cotrol.zen-control-leave.js-zen-leave{ href: "#" }
     = icon('compress')

app/views/projects/issues/_form.html.haml

-= form_for [@project.namespace.becomes(Namespace), @project, @issue], html: { class: 'form-horizontal issue-form gfm-form js-quick-submit js-requires-input' } do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @issue], html: { class: 'form-horizontal issue-form common-note-form js-quick-submit js-requires-input' } do |f|
   = render 'shared/issuable/form', f: f, issuable: @issue
 
 :javascript

app/views/projects/merge_requests/_form.html.haml

-= form_for [@project.namespace.becomes(Namespace), @project, @merge_request], html: { class: 'merge-request-form form-horizontal gfm-form js-requires-input js-quick-submit' } do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @merge_request], html: { class: 'merge-request-form form-horizontal common-note-form js-requires-input js-quick-submit' } do |f|
   = render 'shared/issuable/form', f: f, issuable: @merge_request
 
 :javascript

app/views/projects/merge_requests/_new_submit.html.haml

@@ -10,7 +10,7 @@
   %span.pull-right
     = link_to 'Change branches', mr_change_branches_path(@merge_request)
 %hr
-= form_for [@project.namespace.becomes(Namespace), @project, @merge_request], html: { class: 'merge-request-form form-horizontal gfm-form js-requires-input' } do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @merge_request], html: { class: 'merge-request-form form-horizontal common-note-form js-requires-input' } do |f|
   = render 'shared/issuable/form', f: f, issuable: @merge_request
   = f.hidden_field :source_project_id
   = f.hidden_field :source_branch

app/views/projects/milestones/_form.html.haml

-= form_for [@project.namespace.becomes(Namespace), @project, @milestone], html: {class: 'form-horizontal milestone-form gfm-form js-quick-submit js-requires-input'}  do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @milestone], html: {class: 'form-horizontal milestone-form common-note-form js-quick-submit js-requires-input'}  do |f|
   = form_errors(@milestone)
-
   .row
     .col-md-6
       .form-group
@@ -11,7 +10,7 @@
         = f.label :description, "Description", class: "control-label"
         .col-sm-10
           = render layout: 'projects/md_preview', locals: { preview_class: "md-preview" } do
-            = render 'projects/zen', f: f, attr: :description, classes: 'description form-control'
+            = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: 'Write milestone description...'
             = render 'projects/notes/hints'
           .clearfix
           .error-alert

app/views/projects/notes/_edit_form.html.haml

@@ -2,7 +2,7 @@
   = form_for note, url: namespace_project_note_path(@project.namespace, @project, note), method: :put, remote: true, authenticity_token: true, html: { class: 'edit-note common-note-form js-quick-submit' } do |f|
     = note_target_fields(note)
     = render layout: 'projects/md_preview', locals: { preview_class: 'md-preview' } do
-      = render 'projects/zen', f: f, attr: :note, classes: 'note-textarea js-note-text js-task-list-field'
+      = render 'projects/zen', f: f, attr: :note, classes: 'note-textarea js-note-text js-task-list-field', placeholder: "Write a comment or drag your files here..."
       = render 'projects/notes/hints'
 
     .note-form-actions.clearfix

app/views/projects/notes/_form.html.haml

-= form_for [@project.namespace.becomes(Namespace), @project, @note], remote: true, html: { :'data-type' => 'json', multipart: true, id: nil, class: "new-note js-new-note-form js-quick-submit common-note-form gfm-form" }, authenticity_token: true do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @note], remote: true, html: { :'data-type' => 'json', multipart: true, id: nil, class: "new-note js-new-note-form js-quick-submit common-note-form" }, authenticity_token: true do |f|
   = hidden_field_tag :view, diff_view
   = hidden_field_tag :line_type
   = note_target_fields(@note)
@@ -8,7 +8,7 @@
   = f.hidden_field :noteable_type
 
   = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
-    = render 'projects/zen', f: f, attr: :note, classes: 'note-textarea js-note-text'
+    = render 'projects/zen', f: f, attr: :note, classes: 'note-textarea js-note-text', placeholder: "Write a comment or drag your files here..."
     = render 'projects/notes/hints'
     .error-alert
 

app/views/projects/releases/edit.html.haml

@@ -9,11 +9,11 @@
       %strong #{@tag.name}
 
 .prepend-top-default
-  = form_for(@release, method: :put, url: namespace_project_tag_release_path(@project.namespace, @project, @tag.name), html: { class: 'form-horizontal gfm-form release-form js-quick-submit' }) do |f|
+  = form_for(@release, method: :put, url: namespace_project_tag_release_path(@project.namespace, @project, @tag.name), html: { class: 'form-horizontal common-note-form release-form js-quick-submit' }) do |f|
     = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
-      = render 'projects/zen', f: f, attr: :description, classes: 'description form-control'
+      = render 'projects/zen', f: f, attr: :description, classes: 'note-textarea', placeholder: "Write your release notes or drag files here..."
       = render 'projects/notes/hints'
-      .error-alert
-      .form-actions.prepend-top-default
-        = f.submit 'Save changes', class: 'btn btn-save'
-        = link_to "Cancel", namespace_project_tag_path(@project.namespace, @project, @tag.name), class: "btn btn-default btn-cancel"
+    .error-alert
+    .form-actions.prepend-top-default
+      = f.submit 'Save changes', class: 'btn btn-save'
+      = link_to "Cancel", namespace_project_tag_path(@project.namespace, @project, @tag.name), class: "btn btn-default btn-cancel"

app/views/projects/tags/new.html.haml

@@ -10,7 +10,7 @@
   New Tag
 %hr
 
-= form_tag namespace_project_tags_path, method: :post, id: "new-tag-form", class: "form-horizontal gfm-form tag-form js-quick-submit js-requires-input" do
+= form_tag namespace_project_tags_path, method: :post, id: "new-tag-form", class: "form-horizontal common-note-form tag-form js-quick-submit js-requires-input" do
   .form-group
     = label_tag :tag_name, nil, class: 'control-label'
     .col-sm-10
@@ -30,9 +30,9 @@
     = label_tag :release_description, 'Release notes', class: 'control-label'
     .col-sm-10
       = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
-        = render 'projects/zen', attr: :release_description, classes: 'description form-control'
+        = render 'projects/zen', attr: :release_description, classes: 'note-textarea', placeholder: "Write your release notes or drag files here..."
         = render 'projects/notes/hints'
-        .help-block Optionally, add release notes to the tag. They will be stored in the GitLab database and displayed on the tags page.
+      .help-block Optionally, add release notes to the tag. They will be stored in the GitLab database and displayed on the tags page.
   .form-actions
     = button_tag 'Create tag', class: 'btn btn-create', tabindex: 3
     = link_to 'Cancel', namespace_project_tags_path(@project.namespace, @project), class: 'btn btn-cancel'

app/views/projects/wikis/_form.html.haml

-= form_for [@project.namespace.becomes(Namespace), @project, @page], method: @page.persisted? ? :put : :post, html: { class: 'form-horizontal wiki-form gfm-form prepend-top-default js-quick-submit' } do |f|
+= form_for [@project.namespace.becomes(Namespace), @project, @page], method: @page.persisted? ? :put : :post, html: { class: 'form-horizontal wiki-form common-note-form prepend-top-default js-quick-submit' } do |f|
   = form_errors(@page)
 
   = f.hidden_field :title, value: @page.title
@@ -11,7 +11,7 @@
     = f.label :content, class: 'control-label'
     .col-sm-10
       = render layout: 'projects/md_preview', locals: { preview_class: "md-preview" } do
-        = render 'projects/zen', f: f, attr: :content, classes: 'description form-control'
+        = render 'projects/zen', f: f, attr: :content, classes: 'note-textarea', placeholder: 'Write your content or drag files here...'
         = render 'projects/notes/hints'
 
       .clearfix

app/views/shared/issuable/_form.html.haml

@@ -29,7 +29,8 @@
 
     = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
       = render 'projects/zen', f: f, attr: :description,
-                               classes: 'description form-control'
+                               classes: 'note-textarea',
+                               placeholder: "Write a comment or drag your files here..."
       = render 'projects/notes/hints'
       .clearfix
       .error-alert

spec/javascripts/notes_spec.js.coffee

 #= require notes
+#= require gl_form
 
 window.gon = {}
 window.disableButtonIfEmptyField = -> null