Resolve all comments observer with text displaying how many left

app/assets/javascripts/line_comments/application.js.coffee

 #= require mithril
+#= require_directory ./observers
 #= require_directory ./components
 #= require_directory .
 $ ->
+  allNoteIds = []
+  resolvedNoteIds = []
   # Render all the buttons
   $('.discussion').each ->
     $this = $(this)
     $('.js-line-comment', $(this)).each ->
+      resolved = !!$(this).data('resolved')
+      allNoteIds.push $(this).data('id')
+      resolvedNoteIds.push $(this).data('id') if resolved
+
       m.mount $(this).get(0), m(CommentButton,
-        discussion_id: $this.data('discussion-id')
-        note_id: $(this).data('id')
+        discussionId: $this.data('discussion-id')
+        noteId: $(this).data('id')
         resolved: !!$(this).data('resolved')
       )
+
+  m.mount $('.js-line-comments-all').get(0), m(AllLines,
+    noteIds: allNoteIds
+    resolvedNoteIds: resolvedNoteIds
+  )

app/assets/javascripts/line_comments/components/all_lines.js.coffee

+@AllLines =
+  controller: (args) ->
+    @noteIds = m.prop(args.noteIds || [])
+    @resolvedCount = m.prop(args.resolvedNoteIds || [])
+    @resolvedtext = m.prop =>
+      "#{@resolvedCount().length}/#{@noteIds().length} comments resolved"
+    @resolveButtontext = m.prop =>
+      'Resolve all line comments'
+
+    LinesObserver.register (resolved, noteId) =>
+      if resolved
+        @resolvedCount().push noteId
+      else
+        @resolvedCount().splice @resolvedCount().indexOf(noteId), 1
+    return
+  view: (ctrl) ->
+    m('div',
+      class: 'line-resolve-all'
+    ,[
+      m('button',
+        'aria-label': ctrl.resolveButtontext()()
+        class: 'btn btn-gray'
+        type: 'button'
+      , ctrl.resolveButtontext()())
+      m('span',
+        class: 'line-resolve-text'
+      , ctrl.resolvedtext()())
+    ])

app/assets/javascripts/line_comments/components/comment_button.js.coffee

 @CommentButton =
   model: (args) ->
-    @note = m.prop(args.note_id or false)
+    @note = m.prop(args.noteId or undefined)
     @resolved = m.prop(args.resolved or false)
     return
   controller: (args) ->
@@ -11,16 +11,25 @@
     @resolveLine = =>
       @model.resolved(!@model.resolved())
+      LinesObserver.trigger(@model.resolved(), @model.note())
     return
   view: (ctrl) ->
     buttonText = ctrl.resolvedText()()
+    isActive = if ctrl.model.resolved() then 'is-active' else ''
     # Return the view elements
     m('button',
       'aria-label': buttonText
-      class: 'line-resolve-btn'
+      title: buttonText
+      type: 'button'
+      class: "line-resolve-btn #{isActive}"
       onclick: ctrl.resolveLine
+      config: (el) ->
+        $(el)
+          .tooltip('hide')
+          .tooltip()
+          .tooltip('fixTitle')
     , [
       m('i',
         class: 'fa fa-check'

app/assets/javascripts/line_comments/observers/lines.js.coffee

+@LinesObserver = do ->
+  ctrls = []
+  return {
+    register: (controller) ->
+      ctrl = new controller
+      ctrl.onunload = ->
+        ctrls.splice ctrls.indexOf(ctrl), 1
+      ctrls.push
+        insrance: ctrl
+        controller: controller
+    trigger: (resolved, noteId) ->
+      ctrls.map (c) ->
+        ctrl = new c.controller(resolved, noteId)
+        for i in ctrl
+          c.instance[i] = ctrl[i]
+  }

app/assets/stylesheets/pages/merge_requests.scss

@@ -341,17 +341,3 @@
     }
   }
 }
-
-.line-resolve-btn {
-  width: 14px;
-  height: 14px;
-  padding: 0;
-  background-color: transparent;
-  border: 1px solid #c3c3c3;
-  border-radius: 50%;
-
-  &:hover {
-    background-color: $gl-text-green;
-    border-color: darken($gl-text-green, 10%);
-  }
-}

app/assets/stylesheets/pages/notes.scss

@@ -406,3 +406,47 @@ ul.notes {
     color: $gl-link-color;
   }
 }
+
+.line-resolve-all {
+  padding: 10px;
+  border: 1px solid $border-color;
+  border-radius: 2px;
+
+  > .btn {
+    margin-right: 10px;
+  }
+}
+
+.line-resolve-text {
+  vertical-align: middle;
+}
+
+.line-resolve-btn {
+  position: relative;
+  top: -1px;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  background-color: transparent;
+  border: 1px solid #c3c3c3;
+  border-radius: 50%;
+  outline: 0;
+  vertical-align: middle;
+
+  &:hover,
+  &.is-active {
+    color: #fff;
+    background-color: $gl-text-green;
+    border-color: $gl-text-green;
+
+    .fa {
+      color: #fff;
+    }
+  }
+
+  .fa {
+    top: 2px;
+    font-size: 8px;
+    vertical-align: top;
+  }
+}

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

@@ -46,6 +46,7 @@
           = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
     - if @commits.present?
+      .js-line-comments-all
       %ul.merge-request-tabs.nav-links.no-top.no-bottom
         %li.notes-tab
           = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: {target: 'div#notes', action: 'notes', toggle: 'tab'} do