Fades out the other boards when marking as done

app/assets/javascripts/boards/components/board.js.coffee

@@ -7,6 +7,7 @@ Board = Vue.extend
     clearSearch: ->
       this.query = ''
   computed:
+    newDone: -> BoardsStore.state.done
     isPreset: ->
       typeof this.board.id != 'number'
   ready: ->

app/assets/javascripts/boards/components/board_list.js.coffee

@@ -5,11 +5,10 @@ BoardList = Vue.extend
     filters: Object
     issues: Array
     query: String
+    done: Object
   data: ->
     scrollOffset: 20
     loadMore: false
-  computed:
-    newDone: -> BoardsStore.state.done
   methods:
     listHeight: -> this.$els.list.getBoundingClientRect().height
     scrollHeight: -> this.$els.list.scrollHeight
@@ -19,6 +18,11 @@ BoardList = Vue.extend
       setTimeout =>
         this.loadMore = false
       , 2000
+    doneFilter: (issue) ->
+      if this.boardId is 'done' and this.done?.issue?
+        issue.id is this.done.issue.id
+      else
+        issue
     customFilter: (issue) ->
       returnIssue = issue
       if this.filters.author?.id

app/assets/stylesheets/pages/boards.scss

@@ -37,6 +37,10 @@
   height: 100%;
   padding-right: ($gl-padding / 2);
   padding-left: ($gl-padding / 2);
+
+  &.is-faded {
+    opacity: .4;
+  }
 }
 
 .board-inner {

app/views/projects/boards/components/_board.html.haml

 %board{ "inline-template" => true, "v-cloak" => true, "v-for" => "board in state.boards | orderBy 'index'", ":board" => "board" }
-  .board{ ":class" => "{ 'is-draggable': !isPreset }" }
+  .board{ ":class" => "{ 'is-draggable': !isPreset, 'is-faded': board.id != 'done' && newDone.issue }" }
     .board-inner
       %header.board-inner-container.board-header{ ":class" => "{ 'has-border': board.label }", ":style" => "{ borderTopColor: board.label.backgroundColor }" }
         %h3.board-title
@@ -18,10 +18,10 @@
           %span.sr-only
             Clear search
           = icon("times", class: "board-search-clear")
-      %board-list{ "inline-template" => true, ":board-id" => "board.id", ":issues" => "board.issues", ":disabled" => "#{current_user.nil?}", ":query" => "query", ":filters" => "filters" }
-        %ul.board-list{ "v-el:list" => true, ":data-board" => "boardId", ":class" => "{ 'is-marking-done': boardId == 'done' && newDone.board }" }
+      %board-list{ "inline-template" => true, ":board-id" => "board.id", ":issues" => "board.issues", ":disabled" => "#{current_user.nil?}", ":query" => "query", ":filters" => "filters", ":done" => "newDone" }
+        %ul.board-list{ "v-el:list" => true, ":data-board" => "boardId", ":class" => "{ 'is-marking-done': boardId == 'done' && done.board }" }
           = render "projects/boards/components/card"
-        %issue-done{ "inline-template" => true, ":done" => "newDone", "v-if" => "boardId == 'done' && newDone.board" }
+        %issue-done{ "inline-template" => true, ":done" => "done", "v-if" => "boardId == 'done' && done.board" }
           .board-done
             %p
               This issue is currently in the following lists:

app/views/projects/boards/components/_card.html.haml

-%li.card{ ":data-issue" => "issue.id", "v-for" => "issue in issues | filterBy query in 'title' | filterBy customFilter" }
+%li.card{ ":data-issue" => "issue.id", "v-for" => "issue in issues | filterBy query in 'title' | filterBy customFilter | filterBy doneFilter" }
   %h4.card-title
     %a{ href: "#", ":title" => "issue.title" }
       {{ issue.title }}