Merge branch 'devel'

15 files changed, 418 insertions, 202 deletions

diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade
index bb3d2906..30e70b31 100644
--- a/client/components/boards/boardBody.jade
+++ b/client/components/boards/boardBody.jade
@@ -20,33 +20,8 @@ template(name="boardBody")
       class="{{#if draggingActive.get}}is-dragging-active{{/if}}")
       if showOverlay.get
         .board-overlay
-      .lists.js-lists
-        if isMiniScreen
-          if currentList
-            +list(currentList)
-          else
-            each currentBoard.lists
-              +miniList(this)
-            if currentUser.isBoardMember
-              +addListForm
-        else
-          each currentBoard.lists
-            +list(this)
-            if currentCardIsInThisList
-              +cardDetails(currentCard)
-          if currentUser.isBoardMember
-            +addListForm
-
-template(name="addListForm")
-  .list.js-list.list-composer.js-list-composer
-    .list-header
-      +inlinedForm(autoclose=false)
-        input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}"
-          autocomplete="off" autofocus)
-        .edit-controls.clearfix
-          button.primary.confirm(type="submit") {{_ 'save'}}
-          a.fa.fa-times-thin.js-close-inlined-form
-      else
-        a.open-list-composer.js-open-inlined-form
-          i.fa.fa-plus
-          | {{_ 'add-list'}}
+      if isViewSwimlanes
+        each currentBoard.swimlanes
+          +swimlane(this)
+      if isViewLists
+        +listsGroup
diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js
index b3880c61..a068dd04 100644
--- a/client/components/boards/boardBody.js
+++ b/client/components/boards/boardBody.js
@@ -29,10 +29,6 @@ BlazeComponent.extendComponent({
     this.mouseHasEnterCardDetails = false;
   },
 
-  openNewListForm() {
-    this.childComponents('addListForm')[0].open();
-  },
-
   // XXX Flow components allow us to avoid creating these two setter methods by
   // exposing a public API to modify the component state. We need to investigate
   // best practices here.
@@ -47,16 +43,22 @@ BlazeComponent.extendComponent({
     });
   },
 
-  currentCardIsInThisList() {
-    const currentCard = Cards.findOne(Session.get('currentCard'));
-    const listId = this.currentData()._id;
-    return currentCard && currentCard.listId === listId;
-  },
-
   onlyShowCurrentCard() {
     return Utils.isMiniScreen() && Session.get('currentCard');
   },
 
+  isViewSwimlanes() {
+    const currentBoardId = Session.get('currentBoard');
+    const board = Boards.findOne(currentBoardId);
+    return (board.view === 'board-view-swimlanes');
+  },
+
+  isViewLists() {
+    const currentBoardId = Session.get('currentBoard');
+    const board = Boards.findOne(currentBoardId);
+    return (board.view === 'board-view-lists');
+  },
+
   events() {
     return [{
       // XXX The board-overlay div should probably be moved to the parent
@@ -66,147 +68,11 @@ BlazeComponent.extendComponent({
           this.showOverlay.set(false);
         }
       },
-
-      // Click-and-drag action
-      'mousedown .board-canvas'(evt) {
-        // Translating the board canvas using the click-and-drag action can
-        // conflict with the build-in browser mechanism to select text. We
-        // define a list of elements in which we disable the dragging because
-        // the user will legitimately expect to be able to select some text with
-        // his mouse.
-        const noDragInside = ['a', 'input', 'textarea', 'p', '.js-list-header'];
-        if ($(evt.target).closest(noDragInside.join(',')).length === 0 && $('.lists').prop('clientHeight') > evt.offsetY) {
-          this._isDragging = true;
-          this._lastDragPositionX = evt.clientX;
-        }
-      },
       'mouseup'() {
         if (this._isDragging) {
           this._isDragging = false;
         }
       },
-      'mousemove'(evt) {
-        if (this._isDragging) {
-          // Update the canvas position
-          this.listsDom.scrollLeft -= evt.clientX - this._lastDragPositionX;
-          this._lastDragPositionX = evt.clientX;
-          // Disable browser text selection while dragging
-          evt.stopPropagation();
-          evt.preventDefault();
-          // Don't close opened card or inlined form at the end of the
-          // click-and-drag.
-          EscapeActions.executeUpTo('popup-close');
-          EscapeActions.preventNextClick();
-        }
-      },
     }];
   },
 }).register('board');
-
-Template.boardBody.onRendered(function() {
-  const self = BlazeComponent.getComponentForElement(this.firstNode);
-
-  self.listsDom = this.find('.js-lists');
-
-  if (!Session.get('currentCard')) {
-    self.scrollLeft();
-  }
-
-  // We want to animate the card details window closing. We rely on CSS
-  // transition for the actual animation.
-  self.listsDom._uihooks = {
-    removeElement(node) {
-      const removeNode = _.once(() => {
-        node.parentNode.removeChild(node);
-      });
-      if ($(node).hasClass('js-card-details')) {
-        $(node).css({
-          flexBasis: 0,
-          padding: 0,
-        });
-        $(self.listsDom).one(CSSEvents.transitionend, removeNode);
-      } else {
-        removeNode();
-      }
-    },
-  };
-
-  $(self.listsDom).sortable({
-    tolerance: 'pointer',
-    helper: 'clone',
-    handle: '.js-list-header',
-    items: '.js-list:not(.js-list-composer)',
-    placeholder: 'list placeholder',
-    distance: 7,
-    start(evt, ui) {
-      ui.placeholder.height(ui.helper.height());
-      Popup.close();
-    },
-    stop() {
-      $(self.listsDom).find('.js-list:not(.js-list-composer)').each(
-        (i, list) => {
-          const data = Blaze.getData(list);
-          Lists.update(data._id, {
-            $set: {
-              sort: i,
-            },
-          });
-        }
-      );
-    },
-  });
-
-  function userIsMember() {
-    return Meteor.user() && Meteor.user().isBoardMember();
-  }
-
-  // Disable drag-dropping while in multi-selection mode, or if the current user
-  // is not a board member
-  self.autorun(() => {
-    const $listDom = $(self.listsDom);
-    if ($listDom.data('sortable')) {
-      $(self.listsDom).sortable('option', 'disabled',
-        MultiSelection.isActive() || !userIsMember());
-    }
-  });
-
-  // If there is no data in the board (ie, no lists) we autofocus the list
-  // creation form by clicking on the corresponding element.
-  const currentBoard = Boards.findOne(Session.get('currentBoard'));
-  if (userIsMember() && currentBoard.lists().count() === 0) {
-    self.openNewListForm();
-  }
-});
-
-BlazeComponent.extendComponent({
-  // Proxy
-  open() {
-    this.childComponents('inlinedForm')[0].open();
-  },
-
-  events() {
-    return [{
-      submit(evt) {
-        evt.preventDefault();
-        const titleInput = this.find('.list-name-input');
-        const title = titleInput.value.trim();
-        if (title) {
-          Lists.insert({
-            title,
-            boardId: Session.get('currentBoard'),
-            sort: $('.list').length,
-          });
-
-          titleInput.value = '';
-          titleInput.focus();
-        }
-      },
-    }];
-  },
-}).register('addListForm');
-
-Template.boardBody.helpers({
-  canSeeAddList() {
-    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
-  },
-});
diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl
index bb9beb19..f5ecc08e 100644
--- a/client/components/boards/boardBody.styl
+++ b/client/components/boards/boardBody.styl
@@ -20,15 +20,14 @@ position()
     &.is-sibling-sidebar-open
       margin-right: 248px
 
-    .lists
-      align-items: flex-start
+    .swimlane
+      border-bottom: 1px solid #CCC
       display: flex
       flex-direction: row
       margin: 0 0 10px
       padding: 0 40px 5px 0
       overflow-x: auto
       overflow-y: hidden
-      position: cover
 
     .board-overlay
       position: cover
@@ -49,12 +48,11 @@ position()
 
     .board-canvas
 
-      .lists
-        align-items: flex-start
+      .swimlane
+        border-bottom: 1px solid #CCC
         display: flex
         flex-direction: column
         margin: 0
         padding: 0 40px 0px 0
         overflow-x: hidden
         overflow-y: auto
-        position: cover
diff --git a/client/components/boards/boardHeader.jade b/client/components/boards/boardHeader.jade
index ffb8eb27..1a65ce27 100644
--- a/client/components/boards/boardHeader.jade
+++ b/client/components/boards/boardHeader.jade
@@ -87,6 +87,11 @@ template(name="boardHeaderBar")
           a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}")
             i.fa.fa-times-thin
 
+      a.board-header-btn.js-toggle-board-view(
+        title="{{_ 'board-view'}}")
+        i.fa.fa-th-large
+        span {{_ currentBoard.view}}
+
       if canModifyBoard
         a.board-header-btn.js-multiselection-activate(
             title="{{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}"
diff --git a/client/components/boards/boardHeader.js b/client/components/boards/boardHeader.js
index fe10dab1..67b05446 100644
--- a/client/components/boards/boardHeader.js
+++ b/client/components/boards/boardHeader.js
@@ -76,6 +76,22 @@ BlazeComponent.extendComponent({
       'click .js-open-archived-board'() {
         Modal.open('archivedBoards');
       },
+      'click .js-toggle-board-view'() {
+        const currentBoard = Boards.findOne(Session.get('currentBoard'));
+        if (currentBoard.view === 'board-view-swimlanes') {
+          Boards.update(currentBoard._id, {
+            $set: {
+              view: 'board-view-lists',
+            },
+          });
+        } else if (currentBoard.view === 'board-view-lists') {
+          Boards.update(currentBoard._id, {
+            $set: {
+              view: 'board-view-swimlanes',
+            },
+          });
+        }
+      },
       'click .js-open-filter-view'() {
         Sidebar.setView('filter');
       },
@@ -164,6 +180,11 @@ const CreateBoard = BlazeComponent.extendComponent({
       permission: visibility,
     }));
 
+    Swimlanes.insert({
+      title: 'Default',
+      boardId: this.boardId.get(),
+    });
+
     Utils.goBoardId(this.boardId.get());
   },
 
diff --git a/client/components/cards/cardDate.js b/client/components/cards/cardDate.js
index 3f69f384..abf6a42b 100644
--- a/client/components/cards/cardDate.js
+++ b/client/components/cards/cardDate.js
@@ -171,11 +171,12 @@ class CardStartDate extends CardDate {
   }
 
   classes() {
+    let classes = 'start-date' + ' ';
     if (this.date.get().isBefore(this.now.get(), 'minute') &&
         this.now.get().isBefore(this.data().dueAt)) {
-      return 'current';
+      classes += 'current';
     }
-    return '';
+    return classes;
   }
 
   showTitle() {
@@ -200,13 +201,14 @@ class CardDueDate extends CardDate {
   }
 
   classes() {
+    let classes = 'due-date' + ' ';
     if (this.now.get().diff(this.date.get(), 'days') >= 2)
-      return 'long-overdue';
+      classes += 'long-overdue';
     else if (this.now.get().diff(this.date.get(), 'minute') >= 0)
-      return 'due';
+      classes += 'due';
     else if (this.now.get().diff(this.date.get(), 'days') >= -1)
-      return 'almost-due';
-    return '';
+      classes += 'almost-due';
+    return classes;
   }
 
   showTitle() {
diff --git a/client/components/cards/cardDate.styl b/client/components/cards/cardDate.styl
index 1631baa5..e0c3fc9e 100644
--- a/client/components/cards/cardDate.styl
+++ b/client/components/cards/cardDate.styl
@@ -49,10 +49,20 @@
     &:hover, &.is-active
       background-color: darken(#fd5d47, 7)
 
+  &.due-date
+    time
+      &::before
+        content: "\f090"  // symbol: fa-sign-in
+
+  &.start-date
+    time
+      &::before
+        content: "\f08b"  // symbol: fa-sign-out
+
   time
     &::before
       font: normal normal normal 14px/1 FontAwesome
       font-size: inherit
       -webkit-font-smoothing: antialiased
-      content: "\f017"  // clock symbol
-      margin-right: 0.3em
\ No newline at end of file
+      margin-right: 0.3em
+
diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js
index f4e6e773..94a938f0 100644
--- a/client/components/cards/cardDetails.js
+++ b/client/components/cards/cardDetails.js
@@ -20,8 +20,8 @@ BlazeComponent.extendComponent({
 
   onCreated() {
     this.isLoaded = new ReactiveVar(false);
-    this.parentComponent().showOverlay.set(true);
-    this.parentComponent().mouseHasEnterCardDetails = false;
+    this.parentComponent().parentComponent().showOverlay.set(true);
+    this.parentComponent().parentComponent().mouseHasEnterCardDetails = false;
     this.calculateNextPeak();
 
     Meteor.subscribe('unsaved-edits');
@@ -42,7 +42,7 @@ BlazeComponent.extendComponent({
 
   scrollParentContainer() {
     const cardPanelWidth = 510;
-    const bodyBoardComponent = this.parentComponent();
+    const bodyBoardComponent = this.parentComponent().parentComponent();
 
     const $cardContainer = bodyBoardComponent.$('.js-lists');
     const $cardView = this.$(this.firstNode());
@@ -69,7 +69,7 @@ BlazeComponent.extendComponent({
   },
 
   onDestroyed() {
-    this.parentComponent().showOverlay.set(false);
+    this.parentComponent().parentComponent().showOverlay.set(false);
   },
 
   events() {
@@ -104,8 +104,8 @@ BlazeComponent.extendComponent({
       'click .js-add-members': Popup.open('cardMembers'),
       'click .js-add-labels': Popup.open('cardLabels'),
       'mouseenter .js-card-details' () {
-        this.parentComponent().showOverlay.set(true);
-        this.parentComponent().mouseHasEnterCardDetails = true;
+        this.parentComponent().parentComponent().showOverlay.set(true);
+        this.parentComponent().parentComponent().mouseHasEnterCardDetails = true;
       },
       'click #toggleButton'() {
         Meteor.call('toggleSystemMessages');
diff --git a/client/components/lists/list.js b/client/components/lists/list.js
index a65ccc56..e922a3fd 100644
--- a/client/components/lists/list.js
+++ b/client/components/lists/list.js
@@ -18,7 +18,7 @@ BlazeComponent.extendComponent({
   // callback, we basically solve all issues related to reactive updates. A
   // comment below provides further details.
   onRendered() {
-    const boardComponent = this.parentComponent();
+    const boardComponent = this.parentComponent().parentComponent();
     const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
     const $cards = this.$('.js-minicards');
     $cards.sortable({
@@ -55,6 +55,7 @@ BlazeComponent.extendComponent({
         const nCards = MultiSelection.isActive() ? MultiSelection.count() : 1;
         const sortIndex = calculateIndex(prevCardDom, nextCardDom, nCards);
         const listId = Blaze.getData(ui.item.parents('.list').get(0))._id;
+        const swimlaneId = Blaze.getData(ui.item.parents('.swimlane').get(0))._id;
 
         // Normally the jquery-ui sortable library moves the dragged DOM element
         // to its new position, which disrupts Blaze reactive updates mechanism
@@ -67,12 +68,12 @@ BlazeComponent.extendComponent({
 
         if (MultiSelection.isActive()) {
           Cards.find(MultiSelection.getMongoSelector()).forEach((card, i) => {
-            card.move(listId, sortIndex.base + i * sortIndex.increment);
+            card.move(swimlaneId, listId, sortIndex.base + i * sortIndex.increment);
           });
         } else {
           const cardDomElement = ui.item.get(0);
           const card = Blaze.getData(cardDomElement);
-          card.move(listId, sortIndex.base);
+          card.move(swimlaneId, listId, sortIndex.base);
         }
         boardComponent.setIsDragging(false);
       },
diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl
index d5800140..c3753360 100644
--- a/client/components/lists/list.styl
+++ b/client/components/lists/list.styl
@@ -9,7 +9,6 @@
   // Even if this background color is the same as the body we can't leave it
   // transparent, because that won't work during a list drag.
   background: darken(white, 13%)
-  height: 100%
   border-left: 1px solid darken(white, 20%)
   padding: 0
   float: left
@@ -88,12 +87,14 @@
 
 .list-body
   flex: 1
+  flex-direction: column
   display: flex
   overflow-y: auto
   padding: 5px 11px
 
   .minicards
-    flex: 1
+    flex-grow: 1
+    flex-shrink: 0
 
     form
       margin-bottom: 9px
diff --git a/client/components/lists/listBody.jade b/client/components/lists/listBody.jade
index 840fd801..32c6b278 100644
--- a/client/components/lists/listBody.jade
+++ b/client/components/lists/listBody.jade
@@ -4,7 +4,7 @@ template(name="listBody")
       if cards.count
         +inlinedForm(autoclose=false position="top")
           +addCardForm(listId=_id position="top")
-      each cards
+      each (cards (idOrNull ../../_id))
         a.minicard-wrapper.js-minicard(href=absoluteUrl
           class="{{#if cardIsSelected}}is-selected{{/if}}"
           class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js
index fe2f1630..6cc94371 100644
--- a/client/components/lists/listBody.js
+++ b/client/components/lists/listBody.js
@@ -36,6 +36,14 @@ BlazeComponent.extendComponent({
     const members = formComponent.members.get();
     const labelIds = formComponent.labels.get();
 
+    const boardId = this.data().board()._id;
+    const board = Boards.findOne(boardId);
+    let swimlaneId = '';
+    if (board.view === 'board-view-swimlanes')
+      swimlaneId = this.parentComponent().parentComponent().data()._id;
+    else
+      swimlaneId = Swimlanes.findOne({boardId})._id;
+
     if (title) {
       const _id = Cards.insert({
         title,
@@ -44,6 +52,7 @@ BlazeComponent.extendComponent({
         listId: this.data()._id,
         boardId: this.data().board()._id,
         sort: sortIndex,
+        swimlaneId,
       });
       // In case the filter is active we need to add the newly inserted card in
       // the list of exceptions -- cards that are not filtered. Otherwise the
@@ -96,6 +105,13 @@ BlazeComponent.extendComponent({
     MultiSelection.toggle(this.currentData()._id);
   },
 
+  idOrNull(swimlaneId) {
+    const board = Boards.findOne(Session.get('currentBoard'));
+    if (board.view === 'board-view-swimlanes')
+      return swimlaneId;
+    return undefined;
+  },
+
   canSeeAddCard() {
     return !this.reachedWipLimit() && Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
   },
diff --git a/client/components/swimlanes/swimlanes.jade b/client/components/swimlanes/swimlanes.jade
new file mode 100644
index 00000000..77afa399
--- /dev/null
+++ b/client/components/swimlanes/swimlanes.jade
@@ -0,0 +1,78 @@
+template(name="swimlane")
+  .swimlane.js-lists
+    .swimlane-header-wrap
+      .swimlane-header
+        = title
+    if isMiniScreen
+      if currentList
+        +list(currentList)
+      else
+        each currentBoard.lists
+          +miniList(this)
+        if currentUser.isBoardMember
+          +addListForm
+    else
+      each currentBoard.lists
+        +list(this)
+        if currentCardIsInThisList
+          +cardDetails(currentCard)
+      if currentUser.isBoardMember
+        +addListForm
+        +addListAndSwimlaneForm
+
+template(name="listsGroup")
+  .swimlane.js-lists
+    if isMiniScreen
+      if currentList
+        +list(currentList)
+      else
+        each currentBoard.lists
+          +miniList(this)
+        if currentUser.isBoardMember
+          +addListForm
+    else
+      each currentBoard.lists
+        +list(this)
+        if currentCardIsInThisList
+          +cardDetails(currentCard)
+      if currentUser.isBoardMember
+        +addListForm
+
+template(name="addListAndSwimlaneForm")
+  .list.js-list.list-composer.js-list-composer
+    .list-header
+      +inlinedForm(autoclose=false)
+        input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}"
+          autocomplete="off" autofocus)
+        .edit-controls.clearfix
+          button.primary.confirm(type="submit") {{_ 'save'}}
+          a.fa.fa-times-thin.js-close-inlined-form
+      else
+        a.open-list-composer.js-open-inlined-form
+          i.fa.fa-plus
+          | {{_ 'add-list'}}
+    .list-header
+      +inlinedForm(autoclose=false)
+        input.swimlane-name-input.full-line(type="text" placeholder="{{_ 'add-swimlane'}}"
+          autocomplete="off" autofocus)
+        .edit-controls.clearfix
+          button.primary.confirm(type="submit") {{_ 'save'}}
+          a.fa.fa-times-thin.js-close-inlined-form
+      else
+        a.open-list-composer.js-open-inlined-form
+          i.fa.fa-plus
+          | {{_ 'add-swimlane'}}
+
+template(name="addListForm")
+  .list.js-list.list-composer.js-list-composer
+    .list-header
+      +inlinedForm(autoclose=false)
+        input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}"
+          autocomplete="off" autofocus)
+        .edit-controls.clearfix
+          button.primary.confirm(type="submit") {{_ 'save'}}
+          a.fa.fa-times-thin.js-close-inlined-form
+      else
+        a.open-list-composer.js-open-inlined-form
+          i.fa.fa-plus
+          | {{_ 'add-list'}}
diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js
new file mode 100644
index 00000000..397f9e9b
--- /dev/null
+++ b/client/components/swimlanes/swimlanes.js
@@ -0,0 +1,223 @@
+BlazeComponent.extendComponent({
+  onCreated() {
+    this.draggingActive = new ReactiveVar(false);
+
+    this._isDragging = false;
+    this._lastDragPositionX = 0;
+  },
+
+  openNewListForm() {
+    this.childComponents('addListForm')[0].open();
+  },
+
+  id() {
+    return this._id;
+  },
+
+  // XXX Flow components allow us to avoid creating these two setter methods by
+  // exposing a public API to modify the component state. We need to investigate
+  // best practices here.
+  setIsDragging(bool) {
+    this.draggingActive.set(bool);
+  },
+
+  scrollLeft(position = 0) {
+    const lists = this.$('.js-lists');
+    lists && lists.animate({
+      scrollLeft: position,
+    });
+  },
+
+  currentCardIsInThisList() {
+    const currentCard = Cards.findOne(Session.get('currentCard'));
+    const listId = this.currentData()._id;
+    return currentCard && currentCard.listId === listId; //TODO: AND IN THIS SWIMLANE
+  },
+
+  events() {
+    return [{
+      // Click-and-drag action
+      'mousedown .board-canvas'(evt) {
+        // Translating the board canvas using the click-and-drag action can
+        // conflict with the build-in browser mechanism to select text. We
+        // define a list of elements in which we disable the dragging because
+        // the user will legitimately expect to be able to select some text with
+        // his mouse.
+        const noDragInside = ['a', 'input', 'textarea', 'p', '.js-list-header'];
+        if ($(evt.target).closest(noDragInside.join(',')).length === 0 && this.$('.swimlane').prop('clientHeight') > evt.offsetY) {
+          this._isDragging = true;
+          this._lastDragPositionX = evt.clientX;
+        }
+      },
+      'mouseup'() {
+        if (this._isDragging) {
+          this._isDragging = false;
+        }
+      },
+      'mousemove'(evt) {
+        if (this._isDragging) {
+          // Update the canvas position
+          this.listsDom.scrollLeft -= evt.clientX - this._lastDragPositionX;
+          this._lastDragPositionX = evt.clientX;
+          // Disable browser text selection while dragging
+          evt.stopPropagation();
+          evt.preventDefault();
+          // Don't close opened card or inlined form at the end of the
+          // click-and-drag.
+          EscapeActions.executeUpTo('popup-close');
+          EscapeActions.preventNextClick();
+        }
+      },
+    }];
+  },
+}).register('swimlane');
+
+Template.swimlane.onRendered(function() {
+  const self = BlazeComponent.getComponentForElement(this.firstNode);
+
+  self.listsDom = this.find('.js-lists');
+
+  if (!Session.get('currentCard')) {
+    self.scrollLeft();
+  }
+
+  // We want to animate the card details window closing. We rely on CSS
+  // transition for the actual animation.
+  self.listsDom._uihooks = {
+    removeElement(node) {
+      const removeNode = _.once(() => {
+        node.parentNode.removeChild(node);
+      });
+      if ($(node).hasClass('js-card-details')) {
+        $(node).css({
+          flexBasis: 0,
+          padding: 0,
+        });
+        $(self.listsDom).one(CSSEvents.transitionend, removeNode);
+      } else {
+        removeNode();
+      }
+    },
+  };
+
+  $(self.listsDom).sortable({
+    tolerance: 'pointer',
+    helper: 'clone',
+    handle: '.js-list-header',
+    items: '.js-list:not(.js-list-composer)',
+    placeholder: 'list placeholder',
+    distance: 7,
+    start(evt, ui) {
+      ui.placeholder.height(ui.helper.height());
+      Popup.close();
+    },
+    stop() {
+      $(self.listsDom).find('.js-list:not(.js-list-composer)').each(
+        (i, list) => {
+          const data = Blaze.getData(list);
+          Lists.update(data._id, {
+            $set: {
+              sort: i,
+            },
+          });
+        }
+      );
+    },
+  });
+
+  function userIsMember() {
+    return Meteor.user() && Meteor.user().isBoardMember();
+  }
+
+  // Disable drag-dropping while in multi-selection mode, or if the current user
+  // is not a board member
+  self.autorun(() => {
+    const $listDom = $(self.listsDom);
+    if ($listDom.data('sortable')) {
+      $(self.listsDom).sortable('option', 'disabled',
+        MultiSelection.isActive() || !userIsMember());
+    }
+  });
+
+  // If there is no data in the board (ie, no lists) we autofocus the list
+  // creation form by clicking on the corresponding element.
+  const currentBoard = Boards.findOne(Session.get('currentBoard'));
+  if (userIsMember() && currentBoard.lists().count() === 0) {
+    self.openNewListForm();
+  }
+});
+
+BlazeComponent.extendComponent({
+  // Proxy
+  open() {
+    this.childComponents('inlinedForm')[0].open();
+  },
+
+  events() {
+    return [{
+      submit(evt) {
+        evt.preventDefault();
+        const titleInput = this.find('.list-name-input');
+        const title = titleInput.value.trim();
+        if (title) {
+          Lists.insert({
+            title,
+            boardId: Session.get('currentBoard'),
+            sort: $('.list').length,
+          });
+
+          titleInput.value = '';
+          titleInput.focus();
+        }
+      },
+    }];
+  },
+}).register('addListForm');
+
+BlazeComponent.extendComponent({
+  // Proxy
+  open() {
+    this.childComponents('inlinedForm')[0].open();
+  },
+
+  events() {
+    return [{
+      submit(evt) {
+        evt.preventDefault();
+        let titleInput = this.find('.list-name-input');
+        if (titleInput) {
+          const title = titleInput.value.trim();
+          if (title) {
+            Lists.insert({
+              title,
+              boardId: Session.get('currentBoard'),
+              sort: $('.list').length,
+            });
+
+            titleInput.value = '';
+            titleInput.focus();
+          }
+        } else {
+          titleInput = this.find('.swimlane-name-input');
+          const title = titleInput.value.trim();
+          if (title) {
+            Swimlanes.insert({
+              title,
+              boardId: Session.get('currentBoard'),
+              sort: $('.swimlane').length,
+            });
+
+            titleInput.value = '';
+            titleInput.focus();
+          }
+        }
+      },
+    }];
+  },
+}).register('addListAndSwimlaneForm');
+
+Template.swimlane.helpers({
+  canSeeAddList() {
+    return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+  },
+});
diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl
new file mode 100644
index 00000000..48bc495c
--- /dev/null
+++ b/client/components/swimlanes/swimlanes.styl
@@ -0,0 +1,20 @@
+@import 'nib'
+
+.swimlane-header-wrap
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 50px;
+
+  .swimlane-header
+    writing-mode: sideways-lr;
+    font-size: 14px;
+    line-height: 50px;
+    margin: 0;
+    font-weight: bold;
+    min-height: 9px;
+    min-width: 30px;
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    word-wrap: break-word;
+    text-align: center;