Add user option to hide finished checklist items

Add a user option to hide finished items in a checklist.

3 files changed, 43 insertions, 4 deletions

diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade
index 1b1e088a..25aa11b9 100644
--- a/client/components/cards/checklists.jade
+++ b/client/components/cards/checklists.jade
@@ -1,7 +1,17 @@
 template(name="checklists")
-  h3
-    i.fa.fa-check
-    | {{_ 'checklists'}}
+  .checklists-title
+    h3
+      i.fa.fa-check
+      | {{_ 'checklists'}}
+    if currentUser.isBoardMember
+      .material-toggle-switch
+        span.toggle-switch-title {{_ 'hide-checked-items'}}
+        if hideCheckedItems
+          input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton" checked="checked")
+        else
+          input.toggle-switch(type="checkbox" id="toggleHideCheckedItemsButton")
+        label.toggle-label(for="toggleHideCheckedItemsButton")
+
   if toggleDeleteDialog.get
     .board-overlay#card-details-overlay
     +checklistDeleteDialog(checklist = checklistToDelete)
@@ -86,7 +96,7 @@ template(name="checklistItems")
           | {{_ 'add-checklist-item'}}...
 
 template(name='checklistItemDetail')
-  .js-checklist-item.checklist-item
+  .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if hideCheckedItems}} invisible{{/if}}{{/if}}")
     if canModifyCard
       .check-box-container
         .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js
index 29573d2b..17faa773 100644
--- a/client/components/cards/checklists.js
+++ b/client/components/cards/checklists.js
@@ -193,6 +193,9 @@ BlazeComponent.extendComponent({
         }
         this.toggleDeleteDialog.set(!this.toggleDeleteDialog.get());
       },
+      'click #toggleHideCheckedItemsButton'() {
+        Meteor.call('toggleHideCheckedItems');
+      },
     };
 
     return [
@@ -211,6 +214,14 @@ BlazeComponent.extendComponent({
   },
 }).register('checklists');
 
+Template.checklists.helpers({
+  hideCheckedItems() {
+    const currentUser = Meteor.user();
+    if (currentUser) return currentUser.hasHideCheckedItems();
+    return false;
+  },
+});
+
 Template.checklistDeleteDialog.onCreated(() => {
   const $cardDetails = this.$('.card-details');
   this.scrollState = {
@@ -246,6 +257,11 @@ Template.checklistItemDetail.helpers({
       !Meteor.user().isWorker()
     );
   },
+  hideCheckedItems() {
+    const user = Meteor.user();
+    if (user) return user.hasHideCheckedItems();
+    return false;
+  },
 });
 
 BlazeComponent.extendComponent({
diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl
index 0a6d688b..f8c36a12 100644
--- a/client/components/cards/checklists.styl
+++ b/client/components/cards/checklists.styl
@@ -16,6 +16,10 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
   &:hover
     color: inherit
 
+.checklists-title
+  display: flex
+  justify-content: space-between
+
 .checklist-title
   .checkbox
     float: left
@@ -99,6 +103,15 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
   margin-top: 3px
   display: flex
   background: darken(white, 3%)
+  opacity: 1
+  transition: height 0ms 400ms, opacity 400ms 0ms
+  height: auto
+  overflow: hidden
+
+  &.is-checked.invisible
+    opacity: 0
+    height: 0
+    transition: height 0ms 0ms, opacity 600ms 0ms
 
   &.placeholder
     background: darken(white, 20%)