Implement board archive and restoration

client/components/boards/boardArchive.jade

@@ -0,0 +1,12 @@
+template(name="archivedBoards")
+  h2 Archived boards
+
+  ul.archived-lists
+    each archivedBoards
+      li.archived-lists-item
+        button.js-restore-board
+          i.fa.fa-undo
+          | Restore board
+        = title
+    else
+      li.no-items-message No archived board.

client/components/boards/boardArchive.js

@@ -0,0 +1,35 @@
+Template.headerTitle.events({
+  'click .js-open-archived-board': function() {
+    Modal.open('archivedBoards')
+  }
+})
+
+BlazeComponent.extendComponent({
+  template() {
+    return 'archivedBoards';
+  },
+
+  onCreated() {
+    this.subscribe('archivedBoards')
+  },
+
+  archivedBoards() {
+    return Boards.find({ archived: true }, {
+      sort: ['title']
+    })
+  },
+
+  events() {
+    return [{
+      'click .js-restore-board': function() {
+        let boardId = this.currentData()._id
+        Boards.update(boardId, {
+          $set: {
+            archived: false
+          }
+        })
+        Utils.goBoardId(boardId)
+      }
+    }]
+  },
+}).register('archivedBoards')

client/components/boards/boardBody.jade

@@ -3,6 +3,7 @@ template(name="board")
     if currentBoard
       +boardBody
     else
+      //- XXX We need a better error message in case the board has been archived
       +message(label="board-no-found")
   else
     +spinner

client/components/boards/boardHeader.jade

@@ -60,7 +60,7 @@ template(name="boardMenuPopup")
     if currentUser.isBoardAdmin
       hr
       ul.pop-over-list
-        li: a Close Board…
+        li: a.js-archive-board Archive Board…
 
 template(name="boardVisibilityList")
   ul.pop-over-list
@@ -120,6 +120,6 @@ template(name="boardChangeTitlePopup")
       input.js-board-name(type="text" value="{{title}}" autofocus)
     input.primary.wide(type="submit" value="{{_ 'rename'}}")
 
-template(name="closeBoardPopup")
+template(name="archiveBoardPopup")
   p {{_ 'close-board-pop'}}
   button.js-confirm.negate.full(type="submit") {{_ 'close'}}

client/components/boards/boardHeader.js

@@ -5,7 +5,14 @@ Template.boardMenuPopup.events({
     Popup.close();
   },
   'click .js-change-board-color': Popup.open('boardChangeColor'),
-  'click .js-change-language': Popup.open('setLanguage')
+  'click .js-change-language': Popup.open('setLanguage'),
+  'click .js-archive-board ': Popup.afterConfirm('archiveBoard', function() {
+    var boardId = Session.get('currentBoard');
+    Boards.update(boardId, { $set: { archived: true }});
+    // XXX We should have some kind of notification on top of the page to
+    // confirm that the board was successfully archived.
+    FlowRouter.go('home');
+  })
 });
 
 Template.boardChangeTitlePopup.events({

client/components/boards/boardList.jade

@@ -1,15 +1,16 @@
 template(name="boardList")
-  if boards.count
-    ul.board-list.clearfix
-      each boards
-        li(class="{{#if isStarred}}starred{{/if}}" class=colorClass)
-          a.js-open-board(href="{{pathFor 'board' id=_id slug=slug}}")
-            span.details
-              span.board-list-item-name= title
-              i.fa.js-star-board(
-                class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
-                title="{{_ 'star-board-title'}}")
-  else
-    ul.board-list.clearfix
-      li.js-add-board
-        a.label {{_ 'add-board'}}
+  .wrapper
+    if boards.count
+      ul.board-list.clearfix
+        each boards
+          li(class="{{#if isStarred}}starred{{/if}}" class=colorClass)
+            a.js-open-board(href="{{pathFor 'board' id=_id slug=slug}}")
+              span.details
+                span.board-list-item-name= title
+                i.fa.js-star-board(
+                  class="fa-star{{#if isStarred}} is-star-active{{else}}-o{{/if}}"
+                  title="{{_ 'star-board-title'}}")
+    else
+      ul.board-list.clearfix
+        li.js-add-board
+          a.label {{_ 'add-board'}}

client/components/boards/boardList.js

@@ -4,7 +4,7 @@ BlazeComponent.extendComponent({
   },
 
   boards: function() {
-    return Boards.find({}, {
+    return Boards.find({ archived: false }, {
       sort: ['title']
     });
   },

client/components/boards/boardList.styl

@@ -1,6 +1,7 @@
+$spaceBetweenTiles = 16px
+
 .board-list
-  margin: 25px auto
-  width: 1200px
+  margin: $spaceBetweenTiles ($spaceBetweenTiles/-2) 0
 
   li
     float: left
@@ -24,7 +25,7 @@
     font-weight: 700
     min-height: 18px
     padding: 8px 12px 8px 12px
-    margin: 0 16px 16px 0
+    margin: 0 ($spaceBetweenTiles/2) $spaceBetweenTiles
     position: relative
     text-decoration: none
 

client/components/main/header.jade

@@ -31,7 +31,7 @@ template(name="header")
       The main bar is a colorful bar that provide all the meta-data for the
       current page. This bar is contextual based.
       If the user is not connected we display "sign in" and "log in" buttons.
-    #header-main-bar
+    #header-main-bar(class="{{#if wrappedHeader}}wrapper{{/if}}")
       if $.Session.get 'currentBoard'
         +headerBoard
       else
@@ -39,3 +39,7 @@ template(name="header")
 
 template(name="headerTitle")
   h1 LibreBoard
+  .board-header-btns.right
+    a.board-header-btn.js-open-archived-board
+      i.fa.fa-archive
+      span Archives

client/components/main/header.js

@@ -2,6 +2,12 @@ Template.header.helpers({
   // Reactively set the color of the page from the color of the current board.
   headerTemplate: function() {
     return 'headerBoard';
+  },
+
+  wrappedHeader: function() {
+    var unwrapedRoutes = ['board', 'card'];
+    var currentRouteName = FlowRouter.getRouteName();
+    return unwrapedRoutes.indexOf(currentRouteName) === -1;
   }
 });
 

client/components/main/header.styl

@@ -106,6 +106,8 @@
         margin: 0 10px
 
         + span
+          display: inline-block
+          margin-top: 1px
           margin-right: 10px
 
       .board-header-btn-close

client/components/main/layouts.styl

@@ -42,6 +42,7 @@ body
     width: 660px
     min-height: 160px
     margin: 42px auto
+    padding: 12px
     border-radius: 4px
     background: darken(white, 13%)
     z-index: 110
@@ -49,7 +50,6 @@ body
     .modal-close-btn
       display: block
       float: right
-      margin: 12px
       font-size: 24px
 
 h1
@@ -206,6 +206,10 @@ dd
   margin-bottom: 0
   padding-bottom: 0
 
+.wrapper
+  max-width: 1200px
+  margin: 0 auto
+
 .relative
   position: relative