Resolve all comments observer with text displaying how many left

a80db8df · Phil Hughes · 4ab47371 · a80db8df · a80db8df · a80db8df
--- a/app/assets/javascripts/line_comments/application.js.coffee
+++ b/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
+  )
--- a/app/assets/javascripts/line_comments/components/all_lines.js.coffee
+++ b/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()())
+    ])
--- a/app/assets/javascripts/line_comments/components/comment_button.js.coffee
+++ b/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'

--- a/app/assets/javascripts/line_comments/observers/lines.js.coffee
+++ b/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]
+  }
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/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%);
-  }
-}
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/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;
+  }
+}
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/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