Merge branch 'master' into assign-to-issuable-opener

15 files changed, 295 insertions, 231 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 4f032a82e58..2a4811b8763 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -1,5 +1,6 @@
 class GitLabDropdownFilter
   BLUR_KEYCODES = [27, 40]
+  ARROW_KEY_CODES = [38, 40]
   HAS_VALUE_CLASS = "has-value"
 
   constructor: (@input, @options) ->
@@ -22,19 +23,23 @@ class GitLabDropdownFilter
     # Key events
     timeout = ""
     @input.on "keyup", (e) =>
+      keyCode = e.which
+
+      return if ARROW_KEY_CODES.indexOf(keyCode) >= 0
+
       if @input.val() isnt "" and !$inputContainer.hasClass HAS_VALUE_CLASS
         $inputContainer.addClass HAS_VALUE_CLASS
       else if @input.val() is "" and $inputContainer.hasClass HAS_VALUE_CLASS
         $inputContainer.removeClass HAS_VALUE_CLASS
 
-      if e.keyCode is 13 and @input.val() isnt ""
+      if keyCode is 13 and @input.val() isnt ""
         if @options.enterCallback
           @options.enterCallback()
         return
 
       clearTimeout timeout
       timeout = setTimeout =>
-        blur_field = @shouldBlur e.keyCode
+        blur_field = @shouldBlur keyCode
         search_text = @input.val()
 
         if blur_field and @filterInputBlur
@@ -96,6 +101,7 @@ class GitLabDropdown
   LOADING_CLASS = "is-loading"
   PAGE_TWO_CLASS = "is-page-two"
   ACTIVE_CLASS = "is-active"
+  currentIndex = -1
 
   FILTER_INPUT = '.dropdown-input .dropdown-input-field'
 
@@ -145,11 +151,11 @@ class GitLabDropdown
         data: =>
           return @fullData
         callback: (data) =>
+          currentIndex = -1
           @parseData data
-          @highlightRow 1
         enterCallback: =>
           if @enterCallback
-            @selectFirstRow()
+            @selectRowAtIndex 0
 
     # Event listeners
 
@@ -218,6 +224,8 @@ class GitLabDropdown
         return true
 
   opened: =>
+    @addArrowKeyEvent()
+
     contentHtml = $('.dropdown-content', @dropdown).html()
     if @remote && contentHtml is ""
       @remote.execute()
@@ -228,6 +236,7 @@ class GitLabDropdown
     @dropdown.trigger('shown.gl.dropdown')
 
   hidden: (e) =>
+    @removeArrayKeyEvent()
     if @options.filterable
       @dropdown
         .find(".dropdown-input-field")
@@ -307,11 +316,11 @@ class GitLabDropdown
       if @highlight
         text = @highlightTextMatches(text, @filterInput.val())
 
-      html = "<li>"
-      html += "<a href='#{url}' class='#{cssClass}'>"
-      html += text
-      html += "</a>"
-      html += "</li>"
+      html = "<li>
+        <a href='#{url}' class='#{cssClass}'>
+          #{text}
+        </a>
+      </li>"
 
     return html
 
@@ -322,11 +331,11 @@ class GitLabDropdown
     ).join('')
 
   noResults: ->
-    html = "<li>"
-    html += "<a class='dropdown-menu-empty-link is-focused'>"
-    html += "No matching results."
-    html += "</a>"
-    html += "</li>"
+    html = "<li class='dropdown-menu-empty-link'>
+      <a href='#' class='is-focused'>
+        No matching results.
+      </a>
+    </li>"
 
   highlightRow: (index) ->
     if @filterInput.val() isnt ""
@@ -378,16 +387,81 @@ class GitLabDropdown
 
       return selectedObject
 
-  selectFirstRow: ->
-    selector = '.dropdown-content li:first-child a'
+  selectRowAtIndex: (index) ->
+    selector = ".dropdown-content li:not(.divider):eq(#{index}) a"
+
     if @dropdown.find(".dropdown-toggle-page").length
-      selector = ".dropdown-page-one .dropdown-content li:first-child a"
+      selector = ".dropdown-page-one #{selector}"
 
     # simulate a click on the first link
     $(selector).trigger "click"
 
+  addArrowKeyEvent: ->
+    ARROW_KEY_CODES = [38, 40]
+    $input = @dropdown.find(".dropdown-input-field")
+
+    selector = '.dropdown-content li:not(.divider)'
+    if @dropdown.find(".dropdown-toggle-page").length
+      selector = ".dropdown-page-one #{selector}"
+
+    $('body').on 'keydown', (e) =>
+      currentKeyCode = e.which
+
+      if ARROW_KEY_CODES.indexOf(currentKeyCode) >= 0
+        e.preventDefault()
+        e.stopImmediatePropagation()
+
+        PREV_INDEX = currentIndex
+        $listItems = $(selector, @dropdown)
+
+        # if @options.filterable
+        #   $input.blur()
+
+        if currentKeyCode is 40
+          # Move down
+          currentIndex += 1 if currentIndex < ($listItems.length - 1)
+        else if currentKeyCode is 38
+          # Move up
+          currentIndex -= 1 if currentIndex > 0
+
+        @highlightRowAtIndex($listItems, currentIndex) if currentIndex isnt PREV_INDEX
+
+        return false
+
+      if currentKeyCode is 13
+        @selectRowAtIndex currentIndex
+
+  removeArrayKeyEvent: ->
+    $('body').off 'keydown'
+
+  highlightRowAtIndex: ($listItems, index) ->
+    # Remove the class for the previously focused row
+    $('.is-focused', @dropdown).removeClass 'is-focused'
+
+    # Update the class for the row at the specific index
+    $listItem = $listItems.eq(index)
+    $listItem.find('a:first-child').addClass "is-focused"
+
+    # Dropdown content scroll area
+    $dropdownContent = $listItem.closest('.dropdown-content')
+    dropdownScrollTop = $dropdownContent.scrollTop()
+    dropdownContentHeight = $dropdownContent.outerHeight()
+    dropdownContentTop = $dropdownContent.prop('offsetTop')
+    dropdownContentBottom = dropdownContentTop + dropdownContentHeight
+
+    # Get the offset bottom of the list item
+    listItemHeight = $listItem.outerHeight()
+    listItemTop = $listItem.prop('offsetTop')
+    listItemBottom = listItemTop + listItemHeight
+
+    if listItemBottom > dropdownContentBottom + dropdownScrollTop
+      # Scroll the dropdown content down
+      $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom)
+    else if listItemTop < dropdownContentTop + dropdownScrollTop
+      # Scroll the dropdown content up
+      $dropdownContent.scrollTop(listItemTop - dropdownContentTop)
+
 $.fn.glDropdown = (opts) ->
   return @.each ->
     if (!$.data @, 'glDropdown')
       $.data(@, 'glDropdown', new GitLabDropdown @, opts)
-
diff --git a/app/assets/javascripts/issue.js.coffee b/app/assets/javascripts/issue.js.coffee
index d663e34871c..946d83b7bdd 100644
--- a/app/assets/javascripts/issue.js.coffee
+++ b/app/assets/javascripts/issue.js.coffee
@@ -6,25 +6,10 @@ class @Issue
   constructor: ->
     # Prevent duplicate event bindings
     @disableTaskList()
-    @fixAffixScroll()
     if $('a.btn-close').length
       @initTaskList()
       @initIssueBtnEventListeners()
 
-  fixAffixScroll: ->
-    fixAffix = ->
-      $discussion = $('.issuable-discussion')
-      $sidebar = $('.issuable-sidebar')
-      if $sidebar.hasClass('no-affix')
-        $sidebar.removeClass(['affix-top','affix'])
-      discussionHeight = $discussion.height()
-      sidebarHeight = $sidebar.height()
-      if sidebarHeight > discussionHeight
-        $discussion.height(sidebarHeight + 50)
-        $sidebar.addClass('no-affix')
-    $(window).on('resize', fixAffix)
-    fixAffix()
-
   initTaskList: ->
     $('.detail-page-description .js-task-list-container').taskList('enable')
     $(document).on 'tasklist:changed', '.detail-page-description .js-task-list-container', @updateTaskList
@@ -49,7 +34,7 @@ class @Issue
           issueStatus = if isClose then 'close' else 'open'
           new Flash(issueFailMessage, 'alert')
         success: (data, textStatus, jqXHR) ->
-          if data.saved
+          if 'id' of data
             $(document).trigger('issuable:change');
             if isClose
               $('a.btn-close').addClass('hidden')
diff --git a/app/assets/javascripts/merge_request.js.coffee b/app/assets/javascripts/merge_request.js.coffee
index 6af5a48a0bb..1f46e331427 100644
--- a/app/assets/javascripts/merge_request.js.coffee
+++ b/app/assets/javascripts/merge_request.js.coffee
@@ -15,8 +15,6 @@ class @MergeRequest
     this.$('.show-all-commits').on 'click', =>
       this.showAllCommits()
 
-    @fixAffixScroll();
-
     @initTabs()
 
     # Prevent duplicate event bindings
@@ -30,20 +28,6 @@ class @MergeRequest
   $: (selector) ->
     this.$el.find(selector)
 
-  fixAffixScroll: ->
-    fixAffix = ->
-      $discussion = $('.issuable-discussion')
-      $sidebar = $('.issuable-sidebar')
-      if $sidebar.hasClass('no-affix')
-        $sidebar.removeClass(['affix-top','affix'])
-      discussionHeight = $discussion.height()
-      sidebarHeight = $sidebar.height()
-      if sidebarHeight > discussionHeight
-        $discussion.height(sidebarHeight + 50)
-        $sidebar.addClass('no-affix')
-    $(window).on('resize', fixAffix)
-    fixAffix()
-
   initTabs: ->
     if @opts.action != 'new'
       # `MergeRequests#new` has no tab-persisting or lazy-loading behavior
diff --git a/app/assets/javascripts/notes.js.coffee b/app/assets/javascripts/notes.js.coffee
index ff06c57f2b5..86e3b860fcb 100644
--- a/app/assets/javascripts/notes.js.coffee
+++ b/app/assets/javascripts/notes.js.coffee
@@ -251,13 +251,11 @@ class @Notes
   Sets some hidden fields in the form.
   ###
   setupMainTargetNoteForm: ->
-
     # find the form
     form = $(".js-new-note-form")
 
-    # insert the form after the button
-    form.clone().replaceAll $(".js-main-target-form")
-    form = form.prev("form")
+    # Set a global clone of the form for later cloning
+    @formClone = form.clone()
 
     # show the form
     @setupNoteForm(form)
@@ -266,9 +264,7 @@ class @Notes
     form.removeClass "js-new-note-form"
     form.addClass "js-main-target-form"
 
-    # remove unnecessary fields and buttons
     form.find("#note_line_code").remove()
-    form.find(".js-close-discussion-note-form").remove()
 
   ###
   General note form setup.
@@ -297,7 +293,14 @@ class @Notes
       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()
@@ -307,7 +310,6 @@ class @Notes
     ]
 
     # remove notify commit author checkbox for non-commit notes
-    form.find(".js-notify-commit-author").remove()  if form.find("#note_noteable_type").val() isnt "Commit"
     GitLab.GfmAutoComplete.setup()
     new DropzoneInput(form)
     form.show()
@@ -455,15 +457,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.
@@ -488,7 +490,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.
@@ -498,9 +502,8 @@ class @Notes
   ###
   addDiffNote: (e) =>
     e.preventDefault()
-    link = e.currentTarget
-    form = $(".js-new-note-form")
-    row = $(link).closest("tr")
+    $link = $(e.currentTarget)
+    row = $link.closest("tr")
     nextRow = row.next()
     hasNotes = nextRow.is(".notes_holder")
     addForm = false
@@ -509,7 +512,7 @@ class @Notes
 
     # In parallel view, look inside the correct left/right pane
     if @isParallelView()
-      lineType = $(link).data("lineType")
+      lineType = $link.data("lineType")
       targetContent += "." + lineType
       rowCssToAdd = "<tr class=\"notes_holder js-temp-notes-holder\"><td class=\"notes_line\"></td><td class=\"notes_content parallel old\"></td><td class=\"notes_line\"></td><td class=\"notes_content parallel new\"></td></tr>"
 
@@ -531,11 +534,11 @@ class @Notes
       addForm = true
 
     if addForm
-      newForm = form.clone()
+      newForm = @formClone.clone()
       newForm.appendTo row.next().find(targetContent)
 
       # show the form
-      @setupDiscussionNoteForm $(link), newForm
+      @setupDiscussionNoteForm $link, newForm
 
   ###
   Called in response to "cancel" on a diff note form.
@@ -560,7 +563,6 @@ class @Notes
 
   cancelDiscussionForm: (e) =>
     e.preventDefault()
-    form = $(".js-new-note-form")
     form = $(e.target).closest(".js-discussion-note-form")
     @removeDiscussionNoteForm(form)
 
diff --git a/app/assets/javascripts/zen_mode.js.coffee b/app/assets/javascripts/zen_mode.js.coffee
index e1c5446eaac..99f35ecfb0f 100644
--- a/app/assets/javascripts/zen_mode.js.coffee
+++ b/app/assets/javascripts/zen_mode.js.coffee
@@ -42,7 +42,7 @@ class @ZenMode
       $(e.currentTarget).trigger('zen_mode:leave')
 
     $(document).on 'zen_mode:enter', (e) =>
-      @enter(e.target.parentNode)
+      @enter($(e.target).closest('.md-area').find('.zen-backdrop'))
     $(document).on 'zen_mode:leave', (e) =>
       @exit()
 
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index db1a8b1bf78..2ade341c9dd 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -125,13 +125,6 @@ p.time {
   height: 150px;
 }
 
-// Fixes alignment on notes.
-.new_note {
-  label {
-    text-align: left;
-  }
-}
-
 // Fix issue with notes & lists creating a bunch of bottom borders.
 li.note {
   img { max-width: 100% }
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 8328aac4e7a..ea8e1c902cb 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -1,9 +1,7 @@
 .div-dropzone-wrapper {
   .div-dropzone {
     position: relative;
-    padding: 0;
-    border: 0;
-    margin-bottom: 5px;
+    margin-bottom: -5px;
 
     .div-dropzone-focus {
       border-color: #66afe9 !important;
@@ -25,12 +23,10 @@
 
     .div-dropzone-spinner {
       position: absolute;
-      top: 100%;
-      left: 100%;
-      margin-top: -1.1em;
-      margin-left: -1.1em;
+      bottom: 10px;
+      right: 5px;
       opacity: 0;
-      font-size: 30px;
+      font-size: 20px;
       transition: opacity 200ms ease-in-out;
     }
 
@@ -65,17 +61,29 @@
   position: relative;
 }
 
+.md-header {
+  .nav-links {
+    .active {
+      a {
+        border-bottom-color: #000;
+      }
+    }
+
+    a {
+      padding-top: 0;
+      line-height: 1;
+    }
+  }
+}
+
 .referenced-users {
   color: #4c4e54;
   padding-top: 10px;
 }
 
 .md-preview-holder {
-  background: #fff;
-  border: 1px solid #ddd;
-  min-height: 169px;
-  padding: 5px;
-  box-shadow: none;
+  min-height: 167px;
+  padding: 10px 0;
 }
 
 .markdown-area {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index c3c7bc9fdbe..7b2aada5a0d 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -250,7 +250,7 @@ a > code {
  * Textareas intended for GFM
  *
  */
-textarea.js-gfm-input {
+.js-gfm-input {
   font-family: $monospace_font;
   color: $gl-text-color;
 }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 98fe794d362..c2defd31884 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -217,3 +217,9 @@ $notes-light-color: #8e8e8e;
 $notes-action-color: #c3c3c3;
 $notes-role-color: #8e8e8e;
 $notes-role-border-color: #e4e4e4;
+
+$note-disabled-comment-color: #b2b2b2;
+$note-form-border-color: #e5e5e5;
+$note-toolbar-color: #959494;
+
+$zen-control-hover-color: #111;
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index 02e24ec7c4d..f870ea0d87f 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -1,61 +1,62 @@
-.zennable {
-  a.js-zen-enter {
-    color: $gl-gray;
-    position: absolute;
+.zen-backdrop {
+  &.fullscreen {
+    background-color: white;
+    position: fixed;
     top: 0;
-    right: 4px;
-    line-height: 56px;
-  }
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1031;
 
-  a.js-zen-leave {
-    display: none;
-    color: $gl-text-color;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    padding: 5px;
-    font-size: 36px;
+    textarea {
+      border: none;
+      box-shadow: none;
+      border-radius: 0;
+      color: #000;
+      font-size: 20px;
+      line-height: 26px;
+      padding: 30px;
+      display: block;
+      outline: none;
+      resize: none;
+      height: 100vh;
+      max-width: 900px;
+      margin: 0 auto;
+    }
 
-    &:hover {
-      color: #111;
+    .zen-control-leave {
+      display: block;
+      position: absolute;
+      top: 0;
     }
   }
+}
 
-  .zen-backdrop {
-    &.fullscreen {
-      background-color: white;
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      z-index: 1031;
+.zen-cotrol {
+  padding: 0;
+  color: #555;
+  background: none;
+  border: 0;
+}
 
-      textarea {
-        border: none;
-        box-shadow: none;
-        border-radius: 0;
-        color: #000;
-        font-size: 20px;
-        line-height: 26px;
-        padding: 30px;
-        display: block;
-        outline: none;
-        resize: none;
-        height: 100vh;
-        max-width: 900px;
-        margin: 0 auto;
-      }
+.zen-control-full {
+  color: $note-toolbar-color;
 
-      a.js-zen-enter {
-        display: none;
-      }
+  &:hover {
+    color: $gl-link-color;
+    text-decoration: none;
+  }
+}
 
-      a.js-zen-leave {
-        display: block;
-        position: absolute;
-        top: 0;
-      }
-    }
+.zen-control-leave {
+  display: none;
+  color: $gl-text-color;
+  position: absolute;
+  right: 10px;
+  padding: 5px;
+  font-size: 36px;
+
+  &:hover {
+    color: $zen-control-hover-color;
   }
 }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 7ff63ca20b6..1c6a4208974 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -195,42 +195,6 @@
   line-height: 31px;
 }
 
-.disabled-comment-area {
-  padding: 16px 0;
-
-  .disabled-profile {
-    width: 40px;
-    height: 40px;
-    background: $border-gray-dark;
-    border-radius: 20px;
-    display: inline-block;
-    margin-right: 10px;
-  }
-
-  .disabled-comment {
-    background: $gray-light;
-    display: inline-block;
-    vertical-align: top;
-    height: 200px;
-    border-radius: 4px;
-    border: 1px solid $border-gray-normal;
-    padding-top: 90px;
-    text-align: center;
-    right: 20px;
-    position: absolute;
-    left: 70px;
-    margin-bottom: 20px;
-
-    span {
-      color: #b2b2b2;
-
-      a {
-        color: $md-link-color;
-      }
-    }
-  }
-}
-
 .builds {
   .table-holder {
     overflow-x: scroll;
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 655f88b0c2c..a909776b437 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -1,10 +1,6 @@
 /**
  * Note Form
  */
-
-.comment-btn {
-  @extend .btn-create;
-}
 .reply-btn {
   @extend .btn-primary;
   margin: 10px $gl-padding;
@@ -17,16 +13,17 @@
 }
 .diff-file,
 .discussion {
-  .new_note {
+  .new-note {
     margin: 0;
     border: none;
   }
 }
-.new_note {
+
+.new-note {
   display: none;
 }
 
-.new_note, .note-edit-form {
+.new-note, .note-edit-form {
   .note-form-actions {
     margin-top: $gl-padding;
   }
@@ -40,21 +37,18 @@
   img {
     max-width: 100%;
   }
+}
 
-  .note_text {
-    width: 100%;
-  }
+.note-textarea {
+  padding: 10px 0;
+  font-family: $regular_font;
+  border: 0;
 
-  .comment-hints {
-    margin-top: -12px;
+  &:focus {
+    outline: 0;
   }
 }
 
-/* loading indicator */
-.notes-busy {
-  margin: 18px;
-}
-
 .note-image-attach {
   @extend .col-md-4;
   margin-left: 45px;
@@ -62,38 +56,29 @@
 }
 
 .common-note-form {
-  margin: 0;
-  background: #fff;
-  padding: $gl-padding;
-  margin-left: -$gl-padding;
-  margin-right: -$gl-padding;
-  margin-bottom: -$gl-padding;
-}
-
-.note-form-actions {
-  .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;
+  .md-area {
+    padding: $gl-padding-top $gl-padding;
+    border: 1px solid $note-form-border-color;
+    border-radius: $border-radius-base;
+
+    &.is-focused {
+      border-color: $focus-border-color;
+      box-shadow: 0 0 2px rgba(#000, .2),
+                  0 0 4px rgba($focus-border-color, .4);
+
+      .comment-toolbar,
+      .nav-links {
+        border-color: $focus-border-color;
+      }
     }
   }
 }
 
+.discussion-form {
+  padding: $gl-padding-top $gl-padding;
+  background-color: #fff;
+}
+
 .note-edit-form {
   display: none;
   font-size: 15px;
@@ -152,11 +137,49 @@
   }
 }
 
-.comment-hints {
-  color: #999;
-  background: #fff;
-  padding: 7px;
-  margin-top: -7px;
-  border: 1px solid $border-color;
-  font-size: 13px;
+.comment-toolbar {
+  padding-top: $gl-padding-top;
+  color: $note-toolbar-color;
+  border-top: 1px solid $border-color;
+}
+
+.toolbar-button {
+  padding: 0;
+  background: none;
+  border: 0;
+  font-size: 14px;
+  line-height: 16px;
+
+  &:hover,
+  &:focus {
+    color: $gl-link-color;
+    outline: 0;
+  }
+
+  @media (min-width: $screen-md-min) {
+    float: left;
+    margin-right: $gl-padding;
+
+    &:last-child {
+      float: right;
+      margin-right: 0;
+    }
+  }
+}
+
+.toolbar-button-icon {
+  position: relative;
+  top: 1px;
+  margin-right: 3px;
+  color: inherit;
+  font-size: 16px;
+}
+
+.toolbar-text {
+  font-size: 14px;
+  line-height: 16px;
+
+  @media (min-width: $screen-md-min) {
+    float: left;
+  }
 }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 92fcaaeeacf..614ca48b901 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -20,6 +20,12 @@ ul.notes {
 
   .timeline-content {
     margin-left: 55px;
+
+    &.timeline-content-form {
+      @media (max-width: $screen-sm-max) {
+        margin-left: 0;
+      }
+    }
   }
 
   .note-created-ago, .note-updated-at {
@@ -149,7 +155,7 @@ ul.notes {
     &.notes_content {
       background-color: #fff;
       border-width: 1px 0;
-      padding-top: 0;
+      padding: 0;
       vertical-align: top;
       &.parallel {
         border-width: 1px;
@@ -281,3 +287,21 @@ ul.notes {
     }
   }
 }
+
+.disabled-comment {
+  margin-left: -$gl-padding-top;
+  margin-right: -$gl-padding-top;
+  background-color: $gray-light;
+  border-radius: $border-radius-base;
+  border: 1px solid $border-gray-normal;
+  color: $note-disabled-comment-color;
+  line-height: 200px;
+
+  .disabled-comment-text {
+    line-height: normal;
+  }
+
+  a {
+    color: $gl-link-color;
+  }
+}
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 4e6aa8cd1a6..a0ac06008b6 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -401,7 +401,7 @@ pre.light-well {
   }
 
   .commit_short_id {
-    margin-right: 5px;
+    margin: 0 5px;
     color: $gl-link-color;
     font-weight: 600;
   }
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 5e5e38a0ba6..dbb6daf0d70 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -1,4 +1,4 @@
-.container-fluid .content {
+.container-fluid {
   .ci-status {
     padding: 2px 7px;
     margin-right: 5px;