Add comments only in activity feed

client/components/activities/activities.jade

@@ -31,7 +31,7 @@ template(name="boardActivities")
           .activity-checklist(href="{{ card.absoluteUrl }}")
             +viewer
               = checklist.title
-              
+
         if($eq activityType 'addChecklistItem')
           | {{{_ 'activity-checklist-item-added' checklist.title cardLink}}}.
           .activity-checklist(href="{{ card.absoluteUrl }}")
@@ -90,7 +90,7 @@ template(name="boardActivities")
 
 template(name="cardActivities")
   each currentCard.activities
-    .activity
+    .activity.js-card-activity
       +userAvatar(userId=user._id)
       p.activity-desc
         +memberName(user=user)

client/components/activities/activities.styl

@@ -1,5 +1,10 @@
 @import 'nib'
 
+.activity-title
+  margin: 0 0.5em 0.8em
+  display: flex
+  justify-content:space-between
+
 .activities
   clear: both
 

client/components/cards/cardDetails.jade

@@ -85,7 +85,12 @@ template(name="cardDetails")
       +attachmentsGalery
 
     hr
-    h2 {{ _ 'activity'}}
+    .activity-title
+      h2 {{ _ 'activity'}}
+      .material-toggle-switch
+        span.toggle-switch-title {{_ 'hide-system-messages'}}
+        input.toggle-switch(type="checkbox" id="toggleButton")
+        label.toggle-label(for="toggleButton")
     if currentUser.isBoardMember
       +commentForm
     if isLoaded.get

client/components/cards/cardDetails.js

@@ -99,6 +99,9 @@ BlazeComponent.extendComponent({
         this.parentComponent().showOverlay.set(true);
         this.parentComponent().mouseHasEnterCardDetails = true;
       },
+      'click #toggleButton'() {
+        $('div.activity.js-card-activity:not(:has(.activity-comment))').toggle();
+      },
     }];
   },
 }).register('cardDetails');

client/components/forms/forms.styl

@@ -630,6 +630,58 @@ button
       a, .quiet
         color: white
 
+// Material Design Toggle Switch
+.material-toggle-switch
+  display: flex
+
+.toggle-label
+  position: relative
+  display: block
+  height: 20px
+  width: 44px
+  background-color: #a6a6a6
+  border-radius: 100px
+  cursor: pointer
+  transition: all 0.3s ease
+
+  &:after
+    position: absolute
+    left: -2px
+    top: -3px
+    display: block
+    width: 26px
+    height: 26px
+    border-radius: 100px
+    background-color: #fff
+    box-shadow: 0px 3px 3px rgba(0,0,0,0.05)
+    content: ''
+    transition: all 0.3s ease
+
+  &:active
+    &:after
+      transform: scale(1.15, 0.85)
+
+.toggle-switch:checked ~ .toggle-label
+  background-color: #6fbeb5
+
+  &:after
+    left: 20px
+    background-color: #179588
+
+.toggle-switch:disabled ~ .toggle-label
+  background-color: #d5d5d5
+  pointer-events: none
+
+  &after
+    background-color: #bcbdbc
+
+.toggle-switch
+  display: none
+
+.toggle-switch-title
+  margin: 0 0.5em
+  display: flex
+
 @media screen and (max-width: 800px)
   .edit-controls,
   .add-controls

client/components/lists/listBody.js

@@ -83,6 +83,8 @@ BlazeComponent.extendComponent({
       evt.stopImmediatePropagation();
       evt.preventDefault();
       Utils.goBoardId(Session.get('currentBoard'));
+    } else {
+      $('.toggle-switch').prop('checked', false);
     }
   },