From 98d7278d08dabc9e1da5dcd9a9bb968ab369520e Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Sun, 7 Jun 2015 18:55:26 +0200
Subject: Add a UI to restore archived cards

---
 client/components/boards/boardBody.styl        |  3 +-
 client/components/boards/boardHeader.jade      |  2 +-
 client/components/boards/boardHeader.js        |  4 ++
 client/components/cards/details.jade           |  9 ++++-
 client/components/cards/details.js             |  7 +++-
 client/components/cards/minicard.jade          | 54 ++++++++++++--------------
 client/components/cards/minicard.js            | 36 -----------------
 client/components/cards/templates.html         |  5 ---
 client/components/lists/body.jade              |  8 +++-
 client/components/lists/body.js                | 33 +++++++++++++++-
 client/components/sidebar/sidebar.js           |  3 +-
 client/components/sidebar/sidebar.styl         |  4 +-
 client/components/sidebar/sidebarArchives.jade | 10 +++++
 client/components/sidebar/sidebarArchives.js   | 26 +++++++++++++
 client/lib/popup.js                            |  2 +-
 client/styles/main.styl                        | 11 +++++-
 16 files changed, 134 insertions(+), 83 deletions(-)
 create mode 100644 client/components/sidebar/sidebarArchives.jade
 create mode 100644 client/components/sidebar/sidebarArchives.js

(limited to 'client')

diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl
index d64e1a69..9db5c1c0 100644
--- a/client/components/boards/boardBody.styl
+++ b/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
diff --git a/client/components/boards/boardHeader.jade b/client/components/boards/boardHeader.jade
index 258fe843..b0f0eebe 100644
--- a/client/components/boards/boardHeader.jade
+++ b/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
diff --git a/client/components/boards/boardHeader.js b/client/components/boards/boardHeader.js
index d0a1340c..714e4ed2 100644
--- a/client/components/boards/boardHeader.js
+++ b/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')
 });
diff --git a/client/components/cards/details.jade b/client/components/cards/details.jade
index 46929f56..5ee962cd 100644
--- a/client/components/cards/details.jade
+++ b/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'}}
diff --git a/client/components/cards/details.js b/client/components/cards/details.js
index 3f141622..f3d03793 100644
--- a/client/components/cards/details.js
+++ b/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({
diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade
index ad51ce22..efca9673 100644
--- a/client/components/cards/minicard.jade
+++ b/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
diff --git a/client/components/cards/minicard.js b/client/components/cards/minicard.js
index 8f229be8..70751152 100644
--- a/client/components/cards/minicard.js
+++ b/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');
diff --git a/client/components/cards/templates.html b/client/components/cards/templates.html
index 94d54b6b..d003f051 100644
--- a/client/components/cards/templates.html
+++ b/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'}}">
diff --git a/client/components/lists/body.jade b/client/components/lists/body.jade
index f1159ce5..60e7a57e 100644
--- a/client/components/lists/body.jade
+++ b/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")
diff --git a/client/components/lists/body.js b/client/components/lists/body.js
index f2d780af..a91f0ca9 100644
--- a/client/components/lists/body.js
+++ b/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');
diff --git a/client/components/sidebar/sidebar.js b/client/components/sidebar/sidebar.js
index cfd38c89..7da67476 100644
--- a/client/components/sidebar/sidebar.js
+++ b/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({
diff --git a/client/components/sidebar/sidebar.styl b/client/components/sidebar/sidebar.styl
index 57cc85fd..813e263a 100644
--- a/client/components/sidebar/sidebar.styl
+++ b/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%)
diff --git a/client/components/sidebar/sidebarArchives.jade b/client/components/sidebar/sidebarArchives.jade
new file mode 100644
index 00000000..efd70fd4
--- /dev/null
+++ b/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.
diff --git a/client/components/sidebar/sidebarArchives.js b/client/components/sidebar/sidebarArchives.js
new file mode 100644
index 00000000..b106f705
--- /dev/null
+++ b/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');
diff --git a/client/lib/popup.js b/client/lib/popup.js
index a1f4def2..6193cb13 100644
--- a/client/lib/popup.js
+++ b/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);
     };
diff --git a/client/styles/main.styl b/client/styles/main.styl
index e6c0eb13..e6849852 100644
--- a/client/styles/main.styl
+++ b/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
-- 
cgit v1.2.3-1-g7c22