Huge set of fixes for comments logic

CHANGELOG

@@ -24,6 +24,9 @@ v 7.7.0
   - Trigger GitLab CI when push tags
   - When accept merge request - do merge using sidaekiq job
   - Enable web signups by default
+  - Fixes for diff comments: drag-n-drop images, selecting images
+  - Fixes for edit comments: drag-n-drop images, preview mode, selecting images, save & update 
+  
 
 
 v 7.6.0

app/assets/javascripts/notes.js.coffee

@@ -261,8 +261,10 @@ class @Notes
   Updates the current note field.
   ###
   updateNote: (xhr, note, status) =>
-    note_li = $("#note_" + note.id)
+    note_li = $(".note-row-" + note.id)
     note_li.replaceWith(note.html)
+    note_li.find('.note-edit-form').hide()
+    note_li.find('.note-text').show()
     code = "#note_" + note.id + " .highlight pre code"
     $(code).each (i, e) ->
       hljs.highlightBlock(e)
@@ -278,11 +280,16 @@ class @Notes
     e.preventDefault()
     note = $(this).closest(".note")
     note.find(".note-text").hide()
+    form = note.find(".note-edit-form")
+    form.find('.div-dropzone').remove()
 
     # Show the attachment delete link
     note.find(".js-note-attachment-delete").show()
+
+    # Setup markdown form
     GitLab.GfmAutoComplete.setup()
-    form = note.find(".note-edit-form")
+    new DropzoneInput(form)
+
     form.show()
     textarea = form.find("textarea")
     textarea.focus()

app/assets/stylesheets/main/mixins.scss

@@ -65,10 +65,6 @@
     max-width: 100%;
   }
 
-  *:first-child {
-    margin-top: 0;
-  }
-
   code { padding: 0 4px; }
 
   h1 {

app/assets/stylesheets/sections/markdown_area.scss

+.markdown-area {
+  background: #FFF;
+  border: 1px solid #ddd;
+  min-height: 100px;
+  padding: 5px;
+  font-size: 14px;
+  box-shadow: none;
+  width: 100%;
+}

app/assets/stylesheets/sections/note_form.scss

+/**
+ * Note Form
+ */
+
+.comment-btn {
+  @extend .btn-create;
+}
+.reply-btn {
+  @extend .btn-primary;
+}
+.diff-file .diff-content {
+  tr.line_holder:hover {
+    &> td.line_content {
+      background: $hover !important;
+      border-color: darken($hover, 10%) !important;
+    }
+    &> td.new_line,
+    &> td.old_line {
+      background: darken($hover, 4%) !important;
+      border-color: darken($hover, 10%) !important;
+    }
+  }
+
+  tr.line_holder:hover > td .line_note_link {
+    opacity: 1.0;
+    filter: alpha(opacity=100);
+  }
+}
+.diff-file,
+.discussion {
+  .new_note {
+    margin: 0;
+    border: none;
+  }
+}
+.new_note {
+  display: none;
+}
+
+.new_note, .edit_note {
+  .buttons {
+    float: left;
+    margin-top: 8px;
+  }
+  .clearfix {
+    margin-bottom: 0;
+  }
+
+  .note-preview-holder {
+    > p {
+      overflow-x: auto;
+    }
+  }
+
+  .note_text {
+    width: 100%;
+  }
+}
+
+/* loading indicator */
+.notes-busy {
+  margin: 18px;
+}
+
+.note-image-attach {
+  @extend .col-md-4;
+  @extend .thumbnail;
+  margin-left: 45px;
+  float: none;
+}
+
+.common-note-form {
+  margin: 0;
+  background: #F9F9F9;
+  padding: 5px;
+  border: 1px solid #DDD;
+}
+
+.note-form-actions {
+  background: #F9F9F9;
+  height: 45px;
+
+  .note-form-option {
+    margin-top: 8px;
+    margin-left: 30px;
+    @extend .pull-left;
+  }
+
+  .js-notify-commit-author {
+    float: left;
+  }
+
+  .write-preview-btn {
+    // makes the "absolute" position for links relative to this
+    position: relative;
+
+    // preview/edit buttons
+    > a {
+      position: absolute;
+      right: 5px;
+      top: 8px;
+    }
+  }
+}
+
+.note-edit-form {
+  display: none;
+  font-size: 13px;
+
+  .form-actions {
+    padding-left: 20px;
+
+    .btn-save {
+      float: left;
+    }
+
+    .note-form-option {
+      float: left;
+      padding: 2px 0 0 25px;
+    }
+  }
+}
+
+.js-note-attachment-delete {
+  display: none;
+}
+
+.parallel-comment {
+  padding: 6px;
+}
+
+.error-alert > .alert {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.discussion-body,
+.diff-file {
+  .notes .note {
+    border-color: #ddd;
+    padding: 10px 15px;
+  }
+
+  .discussion-reply-holder {
+    background: #f9f9f9;
+    padding: 10px 15px;
+    border-top: 1px solid #DDD;
+  }
+}
+
+.discussion-notes-count {
+  font-size: 16px;
+}
+
+.edit_note {
+  .markdown-area {
+    min-height: 140px;
+  }
+  .note-form-actions {
+    background: #FFF;
+  }
+}

app/assets/stylesheets/sections/notes.scss

@@ -190,169 +190,3 @@ ul.notes {
   }
 }
 
-/**
- * Note Form
- */
-
-.comment-btn {
-  @extend .btn-create;
-}
-.reply-btn {
-  @extend .btn-primary;
-}
-.diff-file .diff-content {
-  tr.line_holder:hover {
-    &> td.line_content {
-      background: $hover !important;
-      border-color: darken($hover, 10%) !important;
-    }
-    &> td.new_line,
-    &> td.old_line {
-      background: darken($hover, 4%) !important;
-      border-color: darken($hover, 10%) !important;
-    }
-  }
-
-  tr.line_holder:hover > td .line_note_link {
-    opacity: 1.0;
-    filter: alpha(opacity=100);
-  }
-}
-.diff-file,
-.discussion {
-  .new_note {
-    margin: 0;
-    border: none;
-  }
-}
-.new_note {
-  display: none;
-  .buttons {
-    float: left;
-    margin-top: 8px;
-  }
-  .clearfix {
-    margin-bottom: 0;
-  }
-
-  .note_text {
-    background: #FFF;
-    border: 1px solid #ddd;
-    min-height: 100px;
-    padding: 5px;
-    font-size: 14px;
-    box-shadow: none;
-  }
-
-  .note-preview-holder {
-    > p {
-      overflow-x: auto;
-    }
-  }
-
-  .note_text {
-    width: 100%;
-  }
-}
-
-/* loading indicator */
-.notes-busy {
-  margin: 18px;
-}
-
-.note-image-attach {
-  @extend .col-md-4;
-  @extend .thumbnail;
-  margin-left: 45px;
-  float: none;
-}
-
-.common-note-form {
-  margin: 0;
-  background: #F9F9F9;
-  padding: 5px;
-  border: 1px solid #DDD;
-}
-
-.note-form-actions {
-  background: #F9F9F9;
-  height: 45px;
-
-  .note-form-option {
-    margin-top: 8px;
-    margin-left: 30px;
-    @extend .pull-left;
-  }
-
-  .js-notify-commit-author {
-    float: left;
-  }
-
-  .write-preview-btn {
-    // makes the "absolute" position for links relative to this
-    position: relative;
-
-    // preview/edit buttons
-    > a {
-      position: absolute;
-      right: 5px;
-      top: 8px;
-    }
-  }
-}
-
-.note-edit-form {
-  display: none;
-
-  .note_text {
-    border: 1px solid #DDD;
-    box-shadow: none;
-    font-size: 14px;
-    height: 80px;
-    width: 100%;
-  }
-
-  .form-actions {
-    padding-left: 20px;
-
-    .btn-save {
-      float: left;
-    }
-
-    .note-form-option {
-      float: left;
-      padding: 2px 0 0 25px;
-    }
-  }
-}
-
-.js-note-attachment-delete {
-  display: none;
-}
-
-.parallel-comment {
-  padding: 6px;
-}
-
-.error-alert > .alert {
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-.discussion-body,
-.diff-file {
-  .notes .note {
-    border-color: #ddd;
-    padding: 10px 15px;
-  }
-
-  .discussion-reply-holder {
-    background: #f9f9f9;
-    padding: 10px 15px;
-    border-top: 1px solid #DDD;
-  }
-}
-
-.discussion-notes-count {
-  font-size: 16px;
-}

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

+.note-edit-form
+  = form_for note, url: project_note_path(@project, note), method: :put, remote: true, authenticity_token: true do |f|
+    = render layout: 'projects/md_preview' do
+      = render 'projects/zen', f: f, attr: :note,
+        classes: 'note_text js-note-text'
+
+      .light.clearfix
+        .pull-left Comments are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"),{ target: '_blank', tabindex: -1 }}
+        .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector', tabindex: -1 }.
+
+    .note-form-actions
+      .buttons
+        = f.submit 'Save Comment', class: "btn btn-primary btn-save btn-grouped js-comment-button"
+        = link_to  'Cancel', "#", class: "btn btn-cancel note-edit-cancel"
+
+      .note-form-option.hidden-xs
+        %a.choose-btn.btn.js-choose-note-attachment-button
+          %i.fa.fa-paperclip
+          %span Choose File ...
+         
+        %span.file_name.js-attachment-filename
+        = f.file_field :attachment, class: "js-note-attachment-input hidden"

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

@@ -8,6 +8,7 @@
   = render layout: 'projects/md_preview' do
     = render 'projects/zen', f: f, attr: :note,
       classes: 'note_text js-note-text'
+
     .light.clearfix
       .pull-left Comments are parsed with #{link_to "GitLab Flavored Markdown", help_page_path("markdown", "markdown"),{ target: '_blank', tabindex: -1 }}
       .pull-right Attach images (JPG, PNG, GIF) by dragging & dropping or #{link_to "selecting them", '#', class: 'markdown-selector', tabindex: -1 }.
@@ -24,7 +25,7 @@
         %i.fa.fa-paperclip
         %span Choose File ...
        
-      %span.file_name.js-attachment-filename File name...
+      %span.file_name.js-attachment-filename
       = f.file_field :attachment, class: "js-note-attachment-input hidden"
 
 :javascript

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

-%li.timeline-entry{ id: dom_id(note), class: [dom_class(note), ('system-note' if note.system)], data: { discussion: note.discussion_id } }
+%li.timeline-entry{ id: dom_id(note), class: [dom_class(note), "note-row-#{note.id}", ('system-note' if note.system)], data: { discussion: note.discussion_id } }
   .timeline-entry-inner
     .timeline-icon
       - if note.system
@@ -42,25 +42,7 @@
         .note-text
           = preserve do
             = markdown(note.note, {no_header_anchors: true})
-
-        .note-edit-form
-          = form_for note, url: project_note_path(@project, note), method: :put, remote: true, authenticity_token: true do |f|
-            = render layout: 'projects/md_preview' do
-              = f.text_area :note, class: 'note_text js-note-text js-gfm-input turn-on'
-
-            .form-actions.clearfix
-              = f.submit 'Save changes', class: "btn btn-primary btn-save js-comment-button"
-
-              .note-form-option
-                %a.choose-btn.btn.js-choose-note-attachment-button
-                  %i.fa.fa-paperclip
-                  %span Choose File ...
-                 
-                %span.file_name.js-attachment-filename File name...
-                = f.file_field :attachment, class: "js-note-attachment-input hidden"
-
-              = link_to  'Cancel', "#", class: "btn btn-cancel note-edit-cancel"
-
+        = render 'projects/notes/edit_form', note: note
 
       - if note.attachment.url
         .note-attachment