Add a UI to restore archived cards

client/components/boards/boardBody.styl

@@ -20,10 +20,11 @@ position()
     .board-overlay
       position: cover
       top: -100px
+      right: -400px
       background: black
       opacity: 0.33
       animation: fadeIn 0.2s
-      z-index: 10
+      z-index: 16
 
     &.next-sidebar
       margin-right: 248px

client/components/boards/boardHeader.jade

@@ -47,7 +47,7 @@ template(name="headerBoard")
 template(name="boardMenuPopup")
   if currentUser.isBoardMember
     ul.pop-over-list
-      li: a Archived elements
+      li: a.js-open-archives Archived elements
       li: a.js-change-board-color Change color
       li: a Permissions
     hr

client/components/boards/boardHeader.js

@@ -1,5 +1,9 @@
 Template.boardMenuPopup.events({
   'click .js-rename-board': Popup.open('boardChangeTitle'),
+  'click .js-open-archives': function() {
+    Sidebar.setView('archives');
+    Popup.close();
+  },
   'click .js-change-board-color': Popup.open('boardChangeColor'),
   'click .js-change-language': Popup.open('setLanguage')
 });

client/components/cards/details.jade

@@ -74,8 +74,9 @@ template(name="cardDetailsActionsPopup")
       li: a.js-attachments Edit Attachments…
   hr
   ul.pop-over-list
-    li: a.js-copy Copy card
+    li: a.js-copy Copy Card
     li: a.js-archive Archive Card
+    li: a.js-delete Delete Card
 
 template(name="moveCardPopup")
   +boardLists
@@ -103,3 +104,9 @@ template(name="cardLabelsPopup")
             if currentUser.isBoardAdmin
               span.card-label-selectable-icon.fa.fa-check
   a.quiet-button.full.js-add-label {{_ 'label-create'}}
+
+template(name="cardDeletePopup")
+  p {{_ "card-delete-pop"}}
+  unless archived
+   p {{_ "card-delete-suggest-archive"}}
+  button.js-confirm.negate.full(type="submit") {{_ 'delete'}}

client/components/cards/details.js

@@ -77,7 +77,12 @@ Template.cardDetailsActionsPopup.events({
       }
     });
     Popup.close();
-  }
+  },
+  'click .js-delete': Popup.afterConfirm('cardDelete', function() {
+    var cardId = this._id;
+    Cards.remove(cardId);
+    Popup.close();
+  })
 });
 
 Template.moveCardPopup.events({

client/components/cards/minicard.jade

@@ -1,31 +1,25 @@
 template(name="minicard")
-  a.minicard-wrapper.js-minicard(href=absoluteUrl
-    class="{{#if isSelected}}is-selected{{/if}}"
-    class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
-    if MultiSelection.isActive
-      .materialCheckBox.multi-selection-checkbox.js-toggle-multi-selection(
-        class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
-    .minicard
-      if cover
-        .minicard-cover.js-card-cover(style="background-image: url({{cover.url}});")
-      if labels
-        .minicard-labels
-          each labels
-            .minicard-label(class="card-label-{{color}}" title="{{name}}")
-      .minicard-title= title
-      if members
-        .minicard-members.js-minicard-members
-          each members
-            +userAvatar(userId=this size="small" cardId="{{../_id}}")
-      .badges
-        if comments.count
-          .badge(title="{{_ 'card-comments-title' comments.count }}")
-            span.badge-icon.fa.fa-comment-o
-            .badge-text= comments.count
-        if description
-          .badge.badge-state-image-only(title=description)
-            span.badge-icon.fa.fa-align-left
-        if attachments.count
-          .badge
-            span.badge-icon.fa.fa-paperclip
-            span.badge-text= attachments.count
+  .minicard
+    if cover
+      .minicard-cover(style="background-image: url({{cover.url}});")
+    if labels
+      .minicard-labels
+        each labels
+          .minicard-label(class="card-label-{{color}}" title="{{name}}")
+    .minicard-title= title
+    if members
+      .minicard-members.js-minicard-members
+        each members
+          +userAvatar(userId=this size="small" cardId="{{../_id}}")
+    .badges
+      if comments.count
+        .badge(title="{{_ 'card-comments-title' comments.count }}")
+          span.badge-icon.fa.fa-comment-o
+          .badge-text= comments.count
+      if description
+        .badge.badge-state-image-only(title=description)
+          span.badge-icon.fa.fa-align-left
+      if attachments.count
+        .badge
+          span.badge-icon.fa.fa-paperclip
+          span.badge-text= attachments.count

client/components/cards/minicard.js

@@ -5,41 +5,5 @@
 BlazeComponent.extendComponent({
   template: function() {
     return 'minicard';
-  },
-
-  isSelected: function() {
-    return Session.equals('currentCard', this.currentData()._id);
-  },
-
-  toggleMultiSelection: function(evt) {
-    evt.stopPropagation();
-    evt.preventDefault();
-    MultiSelection.toogle(this.currentData()._id);
-  },
-
-  clickOnMiniCard: function(evt) {
-    if (MultiSelection.isActive() || evt.shiftKey) {
-      evt.stopImmediatePropagation();
-      evt.preventDefault();
-      var methodName = evt.shiftKey ? 'toogleRange' : 'toogle';
-      MultiSelection[methodName](this.currentData()._id);
-
-    // If the card is already selected, we want to de-select it.
-    // XXX We should probably modify the minicard href attribute instead of
-    // overwriting the event in case the card is already selected.
-    } else if (Session.equals('currentCard', this.currentData()._id)) {
-      evt.stopImmediatePropagation();
-      evt.preventDefault();
-      Utils.goBoardId(Session.get('currentBoard'));
-    }
-  },
-
-  events: function() {
-    return [{
-      submit: this.addCard,
-      'click .js-toggle-multi-selection': this.toggleMultiSelection,
-      'click .js-minicard': this.clickOnMiniCard,
-      'click .open-minicard-composer': this.scrollToBottom
-    }];
   }
 }).register('minicard');

client/components/cards/templates.html

@@ -79,11 +79,6 @@
     <input type="submit" class="js-confirm negate full" value="{{_ 'delete'}}">
 </template>
 
-<template name="cardDeletePopup">
-    <p>{{_ "card-delete-pop"}}</p>
-    <input type="submit" class="js-confirm negate full" value="{{_ 'delete'}}">
-</template>
-
 <template name="attachmentDeletePopup">
     <p>{{_ "attachment-delete-pop"}}</p>
     <input type="submit" class="js-confirm negate full" value="{{_ 'delete'}}">

client/components/lists/body.jade

@@ -5,7 +5,13 @@ template(name="listBody")
         +inlinedForm(autoclose=false position="top")
           +addCardForm(listId=_id position="top")
       each cards
-        +minicard(this)
+        a.minicard-wrapper.js-minicard(href=absoluteUrl
+          class="{{#if cardIsSelected}}is-selected{{/if}}"
+          class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
+          if MultiSelection.isActive
+            .materialCheckBox.multi-selection-checkbox.js-toggle-multi-selection(
+              class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
+          +minicard(this)
       if currentUser.isBoardMember
         +inlinedForm(autoclose=false position="bottom")
           +addCardForm(listId=_id position="bottom")

client/components/lists/body.js

@@ -61,10 +61,39 @@ BlazeComponent.extendComponent({
     });
   },
 
+  clickOnMiniCard: function(evt) {
+    if (MultiSelection.isActive() || evt.shiftKey) {
+      evt.stopImmediatePropagation();
+      evt.preventDefault();
+      var methodName = evt.shiftKey ? 'toogleRange' : 'toogle';
+      MultiSelection[methodName](this.currentData()._id);
+
+    // If the card is already selected, we want to de-select it.
+    // XXX We should probably modify the minicard href attribute instead of
+    // overwriting the event in case the card is already selected.
+    } else if (Session.equals('currentCard', this.currentData()._id)) {
+      evt.stopImmediatePropagation();
+      evt.preventDefault();
+      Utils.goBoardId(Session.get('currentBoard'));
+    }
+  },
+
+  cardIsSelected: function() {
+    return Session.equals('currentCard', this.currentData()._id);
+  },
+
+  toggleMultiSelection: function(evt) {
+    evt.stopPropagation();
+    evt.preventDefault();
+    MultiSelection.toogle(this.currentData()._id);
+  },
+
   events: function() {
     return [{
-      submit: this.addCard,
-      'click .open-minicard-composer': this.scrollToBottom
+      'click .js-minicard': this.clickOnMiniCard,
+      'click .js-toggle-multi-selection': this.toggleMultiSelection,
+      'click .open-minicard-composer': this.scrollToBottom,
+      submit: this.addCard
     }];
   }
 }).register('listBody');

client/components/sidebar/sidebar.js

@@ -4,7 +4,8 @@ var defaultView = 'home';
 
 var viewTitles = {
   filter: 'filter-cards',
-  multiselection: 'multi-selection'
+  multiselection: 'multi-selection',
+  archives: 'archives'
 };
 
 BlazeComponent.extendComponent({

client/components/sidebar/sidebar.styl

@@ -8,7 +8,7 @@
 
   .sidebar-content
     padding: 12px
-    background: white
+    background: darken(white, 3%)
     box-shadow: -10px 0px 5px -10px darken(white, 30%)
     z-index: 10
     position: absolute
@@ -73,7 +73,7 @@
   position: absolute
   top: 12px
   z-index: 15
-  background: white
+  background: darken(white, 3%)
   border-radius: left 3px
   box-shadow: -4px 0px 7px -4px darken(white, 30%)
   color: darken(white, 50%)

client/components/sidebar/sidebarArchives.jade

@@ -0,0 +1,10 @@
+template(name="archivesSidebar")
+  each archivedCards
+    .minicard-wrapper.js-minicard
+      +minicard(this)
+    p.quiet
+      a.js-restore Restore
+      | -
+      a.js-delete Delete
+  else
+    p.no-items-message No archived cards.

client/components/sidebar/sidebarArchives.js

@@ -0,0 +1,26 @@
+BlazeComponent.extendComponent({
+  template: function() {
+    return 'archivesSidebar';
+  },
+  archivedCards: function() {
+    return Cards.find({archived: true});
+  },
+
+  onRendered: function() {
+    //XXX We should support dragging a card from the sidebar to the board
+  },
+
+  events: function() {
+    return [{
+      'click .js-restore': function() {
+        var cardId = this.currentData()._id;
+        Cards.update(cardId, {$set: {archived: false}});
+      },
+      'click .js-delete': Popup.afterConfirm('cardDelete', function() {
+        var cardId = this._id;
+        Cards.remove(cardId);
+        Popup.close();
+      })
+    }];
+  }
+}).register('archivesSidebar');

client/lib/popup.js

@@ -91,7 +91,7 @@ Popup = {
     var self = this;
 
     return function(evt, tpl) {
-      var context = this;
+      var context = this.currentData && this.currentData() || this;
       context.__afterConfirmAction = action;
       self.open(name).call(context, evt, tpl);
     };

client/styles/main.styl

@@ -53,6 +53,11 @@ h3, h4, h5, h6
 .error, .error a
   color: #eb3800
 
+.no-items-message
+  color: darken(white, 60%)
+  margin: 30px 0
+  text-align: center
+
 .warning
   background: #f0ecdb
   border-radius: 3px
@@ -72,6 +77,10 @@ a
     cursor: default
     text-decoration: none
 
+p
+  a
+    text-decoration: underline
+
 table, p
   margin-bottom: 8px
 
@@ -83,7 +92,7 @@ pre
 pre,
 code,
 tt
-  font-family: bitstream vera sans mono, andale mono, lucida console, monospace
+  font-family: lucida console, monospace
   line-height: 1.25em
 
 blockquote

i18n/en.i18n.json

@@ -13,6 +13,7 @@
     "activity-removed": "removed %s from %s",
     "activity-attached": "attached %s to %s",
     "activity-on": "on %s",
+    "archives": "Archives",
     "this-board": "this board",
     "this-card": "this card",
     "add": "Add",
@@ -45,7 +46,8 @@
     "card-archived": "This card is archived.",
     "card-comments-title": "This card has %s comment.",
     "card-delete-notice": "Deleting is permanent. You will lose all actions associated with this card.",
-    "card-delete-pop": "All actions will be removed from the activity feed and you won't be able to re-open the card. There is no undo. You can archive a card to remove it from the board and preserve the activity.",
+    "card-delete-pop": "All actions will be removed from the activity feed and you won't be able to re-open the card. There is no undo.",
+    "card-delete-suggest-archive": "You can archive a card to remove it from the board and preserve the activity.",
     "attachment-delete-pop": "Deleting an attachment is permanent. There is no undo.",
     "change-avatar": "Change Avatar",
     "change-background": "Change background",