From a80db8dfefb6757d4f1611c3d2d19369d6288072 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Thu, 30 Jun 2016 14:25:30 +0100 Subject: Resolve all comments observer with text displaying how many left --- .../line_comments/application.js.coffee | 16 +++++++- .../line_comments/components/all_lines.js.coffee | 28 ++++++++++++++ .../components/comment_button.js.coffee | 13 ++++++- .../line_comments/observers/lines.js.coffee | 16 ++++++++ app/assets/stylesheets/pages/merge_requests.scss | 14 ------- app/assets/stylesheets/pages/notes.scss | 44 ++++++++++++++++++++++ app/views/projects/merge_requests/_show.html.haml | 1 + 7 files changed, 114 insertions(+), 18 deletions(-) create mode 100644 app/assets/javascripts/line_comments/components/all_lines.js.coffee create mode 100644 app/assets/javascripts/line_comments/observers/lines.js.coffee diff --git a/app/assets/javascripts/line_comments/application.js.coffee b/app/assets/javascripts/line_comments/application.js.coffee index ae65502800e..cf42dd67002 100644 --- a/app/assets/javascripts/line_comments/application.js.coffee +++ b/app/assets/javascripts/line_comments/application.js.coffee @@ -1,15 +1,27 @@ #= 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 + ) diff --git a/app/assets/javascripts/line_comments/components/all_lines.js.coffee b/app/assets/javascripts/line_comments/components/all_lines.js.coffee new file mode 100644 index 00000000000..bcdbae8e02e --- /dev/null +++ b/app/assets/javascripts/line_comments/components/all_lines.js.coffee @@ -0,0 +1,28 @@ +@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()()) + ]) diff --git a/app/assets/javascripts/line_comments/components/comment_button.js.coffee b/app/assets/javascripts/line_comments/components/comment_button.js.coffee index 2f022d062d7..13ef6afef09 100644 --- a/app/assets/javascripts/line_comments/components/comment_button.js.coffee +++ b/app/assets/javascripts/line_comments/components/comment_button.js.coffee @@ -1,6 +1,6 @@ @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' diff --git a/app/assets/javascripts/line_comments/observers/lines.js.coffee b/app/assets/javascripts/line_comments/observers/lines.js.coffee new file mode 100644 index 00000000000..b6556cc6cbb --- /dev/null +++ b/app/assets/javascripts/line_comments/observers/lines.js.coffee @@ -0,0 +1,16 @@ +@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] + } diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 3b5eb9a66da..124f4afaa0d 100644 --- 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%); - } -} diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index ac8c02b59dc..f056bb22070 100644 --- 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; + } +} diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml index 046d6567336..ed1dda448f2 100644 --- 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 -- cgit v1.2.1