From dcc64f44f9f81d32c8071c6bdac86546eaeb57a0 Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Wed, 27 May 2015 17:17:00 +0200
Subject: UI improvements

* Implement visibility choice on board creation;

* Rework the board header bar. Remove links to un-implemented
features;

* Implement a board star counter (visible if the board have >2 stars);

* Define a new icon (a thin cross) to close elements;

* Remove $(document).on('mouseover') event handlers that were
basically fired hundreds of times for nothing, we now define a proper
Tracker dependency to execute jquery-ui plugin initialization only
when something has changed;

* Bug fixes related to list scrolling.
---
 client/components/boards/boardBody.jade   |  34 +++++++
 client/components/boards/boardBody.js     | 141 +++++++++++++++++++++++++++
 client/components/boards/boardBody.styl   |  34 +++++++
 client/components/boards/boardHeader.jade |  94 ++++++++++++++++++
 client/components/boards/boardHeader.js   | 157 ++++++++++++++++++++++++++++++
 client/components/boards/boardList.jade   |  21 ++++
 client/components/boards/boardList.js     |  34 +++++++
 client/components/boards/boardList.styl   |  85 ++++++++++++++++
 client/components/boards/body.jade        |  34 -------
 client/components/boards/body.js          | 141 ---------------------------
 client/components/boards/body.styl        |  34 -------
 client/components/boards/colors.styl      |  15 ++-
 client/components/boards/events.js        |  96 ------------------
 client/components/boards/header.jade      |  87 -----------------
 client/components/boards/header.js        |   7 --
 client/components/boards/header.styl      | 137 --------------------------
 client/components/boards/helpers.js       |  39 --------
 client/components/boards/list.jade        |  14 ---
 client/components/boards/list.styl        |  85 ----------------
 19 files changed, 614 insertions(+), 675 deletions(-)
 create mode 100644 client/components/boards/boardBody.jade
 create mode 100644 client/components/boards/boardBody.js
 create mode 100644 client/components/boards/boardBody.styl
 create mode 100644 client/components/boards/boardHeader.jade
 create mode 100644 client/components/boards/boardHeader.js
 create mode 100644 client/components/boards/boardList.jade
 create mode 100644 client/components/boards/boardList.js
 create mode 100644 client/components/boards/boardList.styl
 delete mode 100644 client/components/boards/body.jade
 delete mode 100644 client/components/boards/body.js
 delete mode 100644 client/components/boards/body.styl
 delete mode 100644 client/components/boards/events.js
 delete mode 100644 client/components/boards/header.jade
 delete mode 100644 client/components/boards/header.js
 delete mode 100644 client/components/boards/header.styl
 delete mode 100644 client/components/boards/list.jade
 delete mode 100644 client/components/boards/list.styl

(limited to 'client/components/boards')

diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade
new file mode 100644
index 00000000..672a3860
--- /dev/null
+++ b/client/components/boards/boardBody.jade
@@ -0,0 +1,34 @@
+//-
+  XXX This template can't be transformed into a component because it is
+  included by iron-router. That's a bug.
+  See https://github.com/peerlibrary/meteor-blaze-components/issues/44
+template(name="board")
+  +boardComponent
+
+template(name="boardComponent")
+  if this
+    .board-wrapper(class=colorClass)
+      .board-canvas(class=sidebarSize)
+        .lists.js-lists
+          each lists
+            +list(this)
+            if currentCardIsInThisList
+              +cardDetails(currentCard)
+          if currentUser.isBoardMember
+            +addListForm
+      +sidebar
+  else
+    +message(label="board-no-found")
+
+template(name="addListForm")
+  .list.js-list.list-composer.js-list-composer
+    +inlinedForm(autoclose=false)
+      input.list-name-input(type="text" placeholder="{{_ 'add-list'}}"
+        autocomplete="off" autofocus value=getCache)
+      div.edit-controls.clearfix
+        button.primary.confirm.js-save-edit(type="submit") {{_ 'save'}}
+        a.fa.fa-times-thin.js-close-inlined-form
+    else
+      .js-open-inlined-form
+        i.fa.fa-plus
+        | {{_ 'add-list'}}
diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js
new file mode 100644
index 00000000..cf32f764
--- /dev/null
+++ b/client/components/boards/boardBody.js
@@ -0,0 +1,141 @@
+// XXX This event list must be abstracted somewhere else.
+var endTransitionEvents = [
+  'webkitTransitionEnd',
+  'otransitionend',
+  'oTransitionEnd',
+  'msTransitionEnd',
+  'transitionend'
+].join(' ');
+
+BlazeComponent.extendComponent({
+  template: function() {
+    return 'boardComponent';
+  },
+
+  openNewListForm: function() {
+    this.componentChildren('addListForm')[0].open();
+  },
+
+  showNewCardForms: function(value) {
+    _.each(this.componentChildren('list'), function(listComponent) {
+      listComponent.showNewCardForm(value);
+    });
+  },
+
+  scrollLeft: function(position) {
+    position = position || 0;
+    var $container = $(this.find('.js-lists'));
+    var containerWidth = $container.width();
+    var currentScrollPosition = $container.scrollLeft();
+    if (position < currentScrollPosition) {
+      $container.animate({
+        scrollLeft: position
+      });
+    } else if (position > currentScrollPosition + containerWidth) {
+      $container.animate({
+        scrollLeft: Math.max(0, position - containerWidth)
+      });
+    }
+  },
+
+  currentCardIsInThisList: function() {
+    var currentCard = Cards.findOne(Session.get('currentCard'));
+    var listId = this.currentData()._id;
+    return currentCard && currentCard.listId === listId;
+  },
+
+  onRendered: function() {
+    var self = this;
+
+    self.scrollLeft();
+
+    var lists = this.find('.js-lists');
+
+    // We want to animate the card details window closing. We rely on CSS
+    // transition for the actual animation.
+    lists._uihooks = {
+      removeElement: function(node) {
+        var removeNode = _.once(function() {
+          node.parentNode.removeChild(node);
+        });
+        if ($(node).hasClass('js-card-detail')) {
+          $(node).css({
+            flex: '0 0 0',
+            padding: 0
+          });
+          $(lists).one(endTransitionEvents, removeNode);
+        } else {
+          removeNode();
+        }
+      }
+    };
+
+    if (! Meteor.userId() || ! Meteor.user().isBoardMember())
+      return;
+
+    self.$(lists).sortable({
+      tolerance: 'pointer',
+      appendTo: '.js-lists',
+      helper: 'clone',
+      items: '.js-list:not(.js-list-composer)',
+      placeholder: 'list placeholder',
+      start: function(event, ui) {
+        $('.list.placeholder').height(ui.item.height());
+        Popup.close();
+      },
+      stop: function() {
+        self.$('.js-lists').find('.js-list:not(.js-list-composer)').each(
+          function(i, list) {
+            var data = Blaze.getData(list);
+            Lists.update(data._id, {
+              $set: {
+                sort: i
+              }
+            });
+          }
+        );
+      }
+    });
+
+    // If there is no data in the board (ie, no lists) we autofocus the list
+    // creation form by clicking on the corresponding element.
+    if (self.data().lists().count() === 0) {
+      this.openNewListForm();
+    }
+  },
+
+  sidebarSize: function() {
+    var sidebar = this.componentChildren('sidebar')[0];
+    if (sidebar && sidebar.isOpen())
+      return 'next-sidebar';
+  }
+}).register('boardComponent');
+
+BlazeComponent.extendComponent({
+  template: function() {
+    return 'addListForm';
+  },
+
+  // Proxy
+  open: function() {
+    this.componentChildren('inlinedForm')[0].open();
+  },
+
+  events: function() {
+    return [{
+      submit: function(evt) {
+        evt.preventDefault();
+        var title = this.find('.list-name-input');
+        if ($.trim(title.value)) {
+          Lists.insert({
+            title: title.value,
+            boardId: Session.get('currentBoard'),
+            sort: $('.list').length
+          });
+
+          title.value = '';
+        }
+      }
+    }];
+  }
+}).register('addListForm');
diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl
new file mode 100644
index 00000000..de4963ab
--- /dev/null
+++ b/client/components/boards/boardBody.styl
@@ -0,0 +1,34 @@
+@import 'nib'
+
+.board-wrapper
+  left: 0
+  top: 0
+  bottom: 0
+  right: 0
+  position: absolute
+  overflow: hidden
+
+  .board-canvas
+    position: absolute
+    left: 0
+    right: 0
+    top: 0
+    bottom: 0
+    transition: margin .1s
+
+    &.next-sidebar
+      margin-right: 248px
+
+.lists
+  align-items: flex-start
+  display: flex
+  flex-direction: row
+  margin-bottom: 10px
+  overflow-x: auto
+  overflow-y: hidden
+  padding-bottom: 10px
+  position: absolute
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
diff --git a/client/components/boards/boardHeader.jade b/client/components/boards/boardHeader.jade
new file mode 100644
index 00000000..0ea359fc
--- /dev/null
+++ b/client/components/boards/boardHeader.jade
@@ -0,0 +1,94 @@
+template(name="headerBoard")
+  h1.header-board-menu(
+    class="{{#if currentUser.isBoardMember}}is-clickable js-edit-board-title{{/if}}")
+    = title
+
+  .board-header-btns.left
+    unless isSandstorm
+      if currentUser
+        a.board-header-btn.js-star-board(class="{{#if isStarred}}is-hovered{{/if}}"
+          title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
+          i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+          if showStarCounter
+            span {{_ 'board-nb-stars' stars}}
+
+      a.board-header-btn.js-change-visibility(class="{{#unless currentUser.isBoardAdmin}}no-edit{{/unless}}")
+        i.fa(class="{{#if isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+        span {{_ permission}}
+
+  .board-header-btns.right
+    a.board-header-btn.js-open-filter-view(
+        title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{/if}}"
+        class="{{#if Filter.isActive}}emphasis{{/if}}")
+      i.fa.fa-filter
+      if Filter.isActive
+        span {{_ 'filter-on'}}
+        a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}")
+          i.fa.fa-times-thin
+      else
+        span {{_ 'filter'}}
+    .separator
+    a.board-header-btn.js-open-board-menu
+      i.board-header-btn-icon.fa.fa-cog
+
+template(name="boardMenuPopup")
+  ul.pop-over-list
+    li: a.js-change-board-color Change color
+    li: a Copy this board
+    li: a Permissions
+
+template(name="boardVisibilityList")
+  ul.pop-over-list
+    li
+      with "private"
+        a.js-select-visibility
+          i.fa.fa-lock.colorful
+          | {{_ 'private'}}
+          if visibilityCheck
+            i.fa.fa-check
+          span.sub-name {{_ 'private-desc'}}
+    li
+      with "public"
+        a.js-select-visibility
+          i.fa.fa-globe.colorful
+          | {{_ 'public'}}
+          if visibilityCheck
+            i.fa.fa-check
+          span.sub-name {{_ 'public-desc'}}
+
+template(name="boardChangeVisibilityPopup")
+  +boardVisibilityList
+
+template(name="boardChangeColorPopup")
+  .board-backgrounds-list.clearfix
+    each backgroundColors
+      .board-background-select.js-select-background
+        span.background-box(class="board-color-{{this}}")
+          if isSelected
+            i.fa.fa-check
+
+template(name="createBoardPopup")
+  form
+    label
+      | {{_ 'title'}}
+      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
+    if visibilityMenuIsOpen.get
+      +boardVisibilityList
+    else
+      p.quiet
+        if $eq visibility.get 'public'
+          span.fa.fa-globe.colorful
+          | {{{_ 'board-public-info'}}}
+        else
+          span.fa.fa-lock.colorful
+          | {{{_ 'board-private-info'}}}
+        a.js-change-visibility Change.
+    input.primary.wide(type="submit" value="{{_ 'create'}}")
+
+
+template(name="boardChangeTitlePopup")
+  form
+    label
+      | {{_ 'title'}}
+      input.js-board-name(type="text" value="{{title}}" autofocus)
+    input.primary.wide(type="submit" value="{{_ 'rename'}}")
diff --git a/client/components/boards/boardHeader.js b/client/components/boards/boardHeader.js
new file mode 100644
index 00000000..a78012ca
--- /dev/null
+++ b/client/components/boards/boardHeader.js
@@ -0,0 +1,157 @@
+Template.boardMenuPopup.events({
+  'click .js-rename-board': Popup.open('boardChangeTitle'),
+  'click .js-change-board-color': Popup.open('boardChangeColor')
+});
+
+Template.boardChangeTitlePopup.events({
+  submit: function(evt, t) {
+    var title = t.$('.js-board-name').val().trim();
+    if (title) {
+      Boards.update(this._id, {
+        $set: {
+          title: title
+        }
+      });
+      Popup.close();
+    }
+    evt.preventDefault();
+  }
+});
+
+BlazeComponent.extendComponent({
+  template: function() {
+    return 'headerBoard';
+  },
+
+  isStarred: function() {
+    var boardId = this.currentData()._id;
+    var user = Meteor.user();
+    return boardId && user && user.hasStarred(boardId);
+  },
+
+  // Only show the star counter if the number of star is greater than 2
+  showStarCounter: function() {
+    return this.currentData().stars > 2;
+  },
+
+  events: function() {
+    return [{
+      'click .js-edit-board-title': Popup.open('boardChangeTitle'),
+      'click .js-star-board': function() {
+        Meteor.user().toggleBoardStar(Session.get('currentBoard'));
+      },
+      'click .js-open-board-menu': Popup.open('boardMenu'),
+      'click .js-change-visibility': Popup.open('boardChangeVisibility'),
+      'click .js-open-filter-view': function() {
+        Sidebar.setView('filter');
+      },
+      'click .js-filter-reset': function(evt) {
+        evt.stopPropagation();
+        Sidebar.setView();
+        Filter.reset();
+      }
+    }];
+  }
+}).register('headerBoard');
+
+BlazeComponent.extendComponent({
+  template: function() {
+    return 'boardChangeColorPopup';
+  },
+
+  backgroundColors: function() {
+    return Boards.simpleSchema()._schema.color.allowedValues;
+  },
+
+  isSelected: function() {
+    var currentBoard = Boards.findOne(Session.get('currentBoard'));
+    return currentBoard.color === this.currentData().toString();
+  },
+
+  events: function() {
+    return [{
+      'click .js-select-background': function(evt) {
+        var currentBoardId = Session.get('currentBoard');
+        Boards.update(currentBoardId, {
+          $set: {
+            color: this.currentData().toString()
+          }
+        });
+        evt.preventDefault();
+      }
+    }];
+  }
+}).register('boardChangeColorPopup');
+
+BlazeComponent.extendComponent({
+  template: function() {
+    return 'createBoardPopup';
+  },
+
+  onCreated: function() {
+    this.visibilityMenuIsOpen = new ReactiveVar(false);
+    this.visibility = new ReactiveVar('private');
+  },
+
+  visibilityCheck: function() {
+    return this.currentData() === this.visibility.get();
+  },
+
+  setVisibility: function(visibility) {
+    this.visibility.set(visibility);
+    this.visibilityMenuIsOpen.set(false);
+  },
+
+  toogleVisibilityMenu: function() {
+    this.visibilityMenuIsOpen.set(! this.visibilityMenuIsOpen.get());
+  },
+
+  onSubmit: function(evt) {
+    evt.preventDefault();
+    var title = this.find('.js-new-board-title').value;
+    var visibility = this.visibility.get();
+
+    var boardId = Boards.insert({
+      title: title,
+      permission: visibility
+    });
+
+    Utils.goBoardId(boardId);
+  },
+
+  events: function() {
+    return [{
+      'click .js-select-visibility': function() {
+        this.setVisibility(this.currentData());
+      },
+      'click .js-change-visibility': this.toogleVisibilityMenu,
+      submit: this.onSubmit
+    }];
+  }
+}).register('createBoardPopup');
+
+BlazeComponent.extendComponent({
+  template: function() {
+    return 'boardChangeVisibilityPopup';
+  },
+
+  visibilityCheck: function() {
+    var currentBoard = Boards.findOne(Session.get('currentBoard'));
+    return this.currentData() === currentBoard.permission;
+  },
+
+  selectBoardVisibility: function() {
+    Boards.update(Session.get('currentBoard'), {
+      $set: {
+        permission: this.currentData()
+      }
+    });
+    Popup.close();
+  },
+
+  events: function() {
+    return [{
+      'click .js-select-visibility': this.selectBoardVisibility
+    }];
+  }
+}).register('boardChangeVisibilityPopup');
diff --git a/client/components/boards/boardList.jade b/client/components/boards/boardList.jade
new file mode 100644
index 00000000..e133f73c
--- /dev/null
+++ b/client/components/boards/boardList.jade
@@ -0,0 +1,21 @@
+//-
+  XXX This template can't be transformed into a component because it is
+  included by iron-router. That's a bug.
+  See https://github.com/peerlibrary/meteor-blaze-components/issues/44
+template(name="boards")
+  +boardList
+
+template(name="boardList")
+  if boards
+    ul.board-list.clearfix
+      each boards
+        li(class="{{#if isStarred}}starred{{/if}}" class=colorClass)
+          a.js-open-board(href="{{ pathFor route='Board' boardId=_id }}")
+            span.details
+              span.board-list-item-name= title
+              i.fa.fa-star-o.js-star-board(
+                class="{{#if isStarred}}is-star-active{{/if}}"
+                title="{{_ 'star-board-title'}}")
+  else
+    p.quiet {{_ 'no-boards'}}
+    button.js-add-board {{_ 'add-board'}}
diff --git a/client/components/boards/boardList.js b/client/components/boards/boardList.js
new file mode 100644
index 00000000..8dc70ee9
--- /dev/null
+++ b/client/components/boards/boardList.js
@@ -0,0 +1,34 @@
+BlazeComponent.extendComponent({
+  template: function() {
+    return 'boardList';
+  },
+
+  boards: function() {
+    return Boards.find({}, {
+      sort: ['title']
+    });
+  },
+
+  starredBoards: function() {
+    var cursor = Boards.find({
+      _id: { $in: Meteor.user().profile.starredBoards || [] }
+    }, {
+      sort: ['title']
+    });
+    return cursor.count() === 0 ? null : cursor;
+  },
+
+  isStarred: function() {
+    var user = Meteor.user();
+    return user && user.hasStarred(this._id);
+  },
+
+  events: function() {
+    return [{
+      'click .js-star-board': function(evt) {
+        Meteor.user().toggleBoardStar(this._id);
+        evt.preventDefault();
+      }
+    }];
+  }
+}).register('boardList');
diff --git a/client/components/boards/boardList.styl b/client/components/boards/boardList.styl
new file mode 100644
index 00000000..c068dbb0
--- /dev/null
+++ b/client/components/boards/boardList.styl
@@ -0,0 +1,85 @@
+.board-list
+  margin: 25px auto
+  width: 1200px
+
+  li
+    float: left
+    width: 25%
+    box-sizing: border-box
+    position: relative
+
+    &.starred .fa-star-o
+      opacity: 1
+
+  a
+    background-color: #999
+    color: #f6f6f6
+    height: 90px
+    font-size: 16px
+    line-height: 22px
+    border-radius: 3px
+    display: block
+    font-weight: 700
+    min-height: 18px
+    padding: 8px 12px 8px 12px
+    margin: 0 16px 16px 0
+    position: relative
+    text-decoration: none
+
+    &.tile
+      background-size: auto
+      background-repeat: repeat
+
+  .details
+    height: 84px
+    padding-right: 36px
+    bottom: 0
+    left: 0
+    overflow: hidden
+    padding: 9px 12px
+    position: absolute
+    right: 0
+    top: 0
+
+  .board-list-item-sub-name
+    color: rgba(255, 255, 255, .5)
+    display: block
+    font-size: 14px
+    font-weight: 400
+    line-height: 22px
+
+  .fa-star-o
+    bottom: 0
+    font-size: 14px
+    height: 18px
+    line-height: 18px
+    opacity: 0
+    padding: 9px 9px
+    position: absolute
+    right: 0
+    top: 0
+    transition-duration: .15s
+    transition-property: color, font-size, background
+
+  .is-star-active
+    color: #e6bf00
+
+  li:hover a
+    color: #f6f6f6
+
+    .fa-star-o
+      color: #fff
+      opacity: .75
+
+      &:hover
+        font-size: 18px
+        opacity: 1
+
+      &.is-star-active
+        color: #e6bf00
+        opacity: 1
+
+        &:hover
+          color: #ffd91a
+          font-size: 16px
+          opacity: 1
diff --git a/client/components/boards/body.jade b/client/components/boards/body.jade
deleted file mode 100644
index b157b742..00000000
--- a/client/components/boards/body.jade
+++ /dev/null
@@ -1,34 +0,0 @@
-//-
-  XXX This template can't be transformed into a component because it is
-  included by iron-router. That's a bug.
-  See https://github.com/peerlibrary/meteor-blaze-components/issues/44
-template(name="board")
-  +boardComponent
-
-template(name="boardComponent")
-  if this
-    .board-wrapper(class=colorClass)
-      .board-canvas(class=sidebarSize)
-        .lists.js-lists
-          each lists
-            +list(this)
-            if currentCardIsInThisList
-              +cardDetails(currentCard)
-          if currentUser.isBoardMember
-            +addListForm
-      +sidebar
-  else
-    +message(label="board-no-found")
-
-template(name="addListForm")
-  .list.js-list.list-composer.js-list-composer
-    +inlinedForm(autoclose=false)
-      input.list-name-input(type="text" placeholder="{{_ 'add-list'}}"
-        autocomplete="off" autofocus value=getCache)
-      div.edit-controls.clearfix
-        button.primary.confirm.js-save-edit(type="submit") {{_ 'save'}}
-        a.fa.fa-times.dark-hover.cancel.js-close-inlined-form
-    else
-      .js-open-inlined-form
-        i.fa.fa-plus
-        | {{_ 'add-list'}}
diff --git a/client/components/boards/body.js b/client/components/boards/body.js
deleted file mode 100644
index cf32f764..00000000
--- a/client/components/boards/body.js
+++ /dev/null
@@ -1,141 +0,0 @@
-// XXX This event list must be abstracted somewhere else.
-var endTransitionEvents = [
-  'webkitTransitionEnd',
-  'otransitionend',
-  'oTransitionEnd',
-  'msTransitionEnd',
-  'transitionend'
-].join(' ');
-
-BlazeComponent.extendComponent({
-  template: function() {
-    return 'boardComponent';
-  },
-
-  openNewListForm: function() {
-    this.componentChildren('addListForm')[0].open();
-  },
-
-  showNewCardForms: function(value) {
-    _.each(this.componentChildren('list'), function(listComponent) {
-      listComponent.showNewCardForm(value);
-    });
-  },
-
-  scrollLeft: function(position) {
-    position = position || 0;
-    var $container = $(this.find('.js-lists'));
-    var containerWidth = $container.width();
-    var currentScrollPosition = $container.scrollLeft();
-    if (position < currentScrollPosition) {
-      $container.animate({
-        scrollLeft: position
-      });
-    } else if (position > currentScrollPosition + containerWidth) {
-      $container.animate({
-        scrollLeft: Math.max(0, position - containerWidth)
-      });
-    }
-  },
-
-  currentCardIsInThisList: function() {
-    var currentCard = Cards.findOne(Session.get('currentCard'));
-    var listId = this.currentData()._id;
-    return currentCard && currentCard.listId === listId;
-  },
-
-  onRendered: function() {
-    var self = this;
-
-    self.scrollLeft();
-
-    var lists = this.find('.js-lists');
-
-    // We want to animate the card details window closing. We rely on CSS
-    // transition for the actual animation.
-    lists._uihooks = {
-      removeElement: function(node) {
-        var removeNode = _.once(function() {
-          node.parentNode.removeChild(node);
-        });
-        if ($(node).hasClass('js-card-detail')) {
-          $(node).css({
-            flex: '0 0 0',
-            padding: 0
-          });
-          $(lists).one(endTransitionEvents, removeNode);
-        } else {
-          removeNode();
-        }
-      }
-    };
-
-    if (! Meteor.userId() || ! Meteor.user().isBoardMember())
-      return;
-
-    self.$(lists).sortable({
-      tolerance: 'pointer',
-      appendTo: '.js-lists',
-      helper: 'clone',
-      items: '.js-list:not(.js-list-composer)',
-      placeholder: 'list placeholder',
-      start: function(event, ui) {
-        $('.list.placeholder').height(ui.item.height());
-        Popup.close();
-      },
-      stop: function() {
-        self.$('.js-lists').find('.js-list:not(.js-list-composer)').each(
-          function(i, list) {
-            var data = Blaze.getData(list);
-            Lists.update(data._id, {
-              $set: {
-                sort: i
-              }
-            });
-          }
-        );
-      }
-    });
-
-    // If there is no data in the board (ie, no lists) we autofocus the list
-    // creation form by clicking on the corresponding element.
-    if (self.data().lists().count() === 0) {
-      this.openNewListForm();
-    }
-  },
-
-  sidebarSize: function() {
-    var sidebar = this.componentChildren('sidebar')[0];
-    if (sidebar && sidebar.isOpen())
-      return 'next-sidebar';
-  }
-}).register('boardComponent');
-
-BlazeComponent.extendComponent({
-  template: function() {
-    return 'addListForm';
-  },
-
-  // Proxy
-  open: function() {
-    this.componentChildren('inlinedForm')[0].open();
-  },
-
-  events: function() {
-    return [{
-      submit: function(evt) {
-        evt.preventDefault();
-        var title = this.find('.list-name-input');
-        if ($.trim(title.value)) {
-          Lists.insert({
-            title: title.value,
-            boardId: Session.get('currentBoard'),
-            sort: $('.list').length
-          });
-
-          title.value = '';
-        }
-      }
-    }];
-  }
-}).register('addListForm');
diff --git a/client/components/boards/body.styl b/client/components/boards/body.styl
deleted file mode 100644
index de4963ab..00000000
--- a/client/components/boards/body.styl
+++ /dev/null
@@ -1,34 +0,0 @@
-@import 'nib'
-
-.board-wrapper
-  left: 0
-  top: 0
-  bottom: 0
-  right: 0
-  position: absolute
-  overflow: hidden
-
-  .board-canvas
-    position: absolute
-    left: 0
-    right: 0
-    top: 0
-    bottom: 0
-    transition: margin .1s
-
-    &.next-sidebar
-      margin-right: 248px
-
-.lists
-  align-items: flex-start
-  display: flex
-  flex-direction: row
-  margin-bottom: 10px
-  overflow-x: auto
-  overflow-y: hidden
-  padding-bottom: 10px
-  position: absolute
-  top: 0
-  right: 0
-  bottom: 0
-  left: 0
diff --git a/client/components/boards/colors.styl b/client/components/boards/colors.styl
index a3f74ab8..2b60dde3 100644
--- a/client/components/boards/colors.styl
+++ b/client/components/boards/colors.styl
@@ -5,16 +5,29 @@ setBoardColor(color)
   &#header,
   &.sk-spinner div,
   .board-backgrounds-list &.background-box,
-  &.pop-over .pop-over-list li a:hover,
   .board-list & a
     background-color: color
 
   & .minicard.is-selected .minicard-details
     border-left: 3px solid color
 
+  &.pop-over .pop-over-list li a:hover,
   button[type=submit].primary, input[type=submit].primary
     background-color: darken(color, 20%)
 
+  &#header #header-quick-access ul li.current
+    border-bottom: 2px solid lighten(color, 10%)
+
+  &#header #header-main-bar .board-header-btn.emphasis
+    background: complement(color)
+
+    &:hover,
+    .board-header-btn-close
+      background: darken(complement(color), 10%)
+
+    &:hover .board-header-btn-close
+      background: darken(complement(color), 20%)
+
 .board-color-nephritis
   setBoardColor(#27AE60)
 
diff --git a/client/components/boards/events.js b/client/components/boards/events.js
deleted file mode 100644
index 6f9d7fc6..00000000
--- a/client/components/boards/events.js
+++ /dev/null
@@ -1,96 +0,0 @@
-var toggleBoardStar = function(boardId) {
-  var queryType = Meteor.user().hasStarred(boardId) ? '$pull' : '$addToSet';
-  var query = {};
-  query[queryType] = {
-    'profile.starredBoards': boardId
-  };
-  Meteor.users.update(Meteor.userId(), query);
-};
-
-Template.boards.events({
-  'click .js-star-board': function(evt) {
-    toggleBoardStar(this._id);
-    evt.preventDefault();
-  }
-});
-
-Template.headerBoard.events({
-  'click .js-star-board': function() {
-    toggleBoardStar(this._id);
-  },
-  'click .js-open-board-menu': Popup.open('boardMenu'),
-  'click #permission-level:not(.no-edit)': Popup.open('boardChangePermission'),
-  'click .js-filter-cards-indicator': function(evt) {
-    Session.set('currentWidget', 'filter');
-    evt.preventDefault();
-  },
-  'click .js-filter-card-clear': function(evt) {
-    Filter.reset();
-    evt.stopPropagation();
-  }
-});
-
-Template.boardMenuPopup.events({
-  'click .js-rename-board': Popup.open('boardChangeTitle'),
-  'click .js-change-board-color': Popup.open('boardChangeColor')
-});
-
-Template.createBoardPopup.events({
-  'submit #CreateBoardForm': function(evt, t) {
-    var title = t.$('#boardNewTitle');
-
-    // trim value title
-    if ($.trim(title.val())) {
-      // İnsert Board title
-      var boardId = Boards.insert({
-        title: title.val(),
-        permission: 'public'
-      });
-
-      // Go to Board _id
-      Utils.goBoardId(boardId);
-    }
-    evt.preventDefault();
-  }
-});
-
-Template.boardChangeTitlePopup.events({
-  'submit #ChangeBoardTitleForm': function(evt, t) {
-    var title = t.$('.js-board-name').val().trim();
-    if (title) {
-      Boards.update(this._id, {
-        $set: {
-          title: title
-        }
-      });
-      Popup.close();
-    }
-    evt.preventDefault();
-  }
-});
-
-Template.boardChangePermissionPopup.events({
-  'click .js-select': function(evt) {
-    var $this = $(evt.currentTarget);
-    var permission = $this.attr('name');
-
-    Boards.update(this._id, {
-      $set: {
-        permission: permission
-      }
-    });
-    Popup.close();
-  }
-});
-
-Template.boardChangeColorPopup.events({
-  'click .js-select-background': function(evt) {
-    var currentBoardId = Session.get('currentBoard');
-    Boards.update(currentBoardId, {
-      $set: {
-        color: this.toString()
-      }
-    });
-    evt.preventDefault();
-  }
-});
diff --git a/client/components/boards/header.jade b/client/components/boards/header.jade
deleted file mode 100644
index 189cdac4..00000000
--- a/client/components/boards/header.jade
+++ /dev/null
@@ -1,87 +0,0 @@
-template(name="headerBoard")
-  h1.header-board-menu.js-open-board-menu
-    = title
-    span.fa.fa-angle-down
-
-  .board-header-btns.left
-    unless isSandstorm
-      a.board-header-btn.js-star-board(class="{{#if isStarred}}board-header-starred{{/if}}"
-        title="{{# if isStarred }}{{_ 'click-to-unstar'}}{{ else }}{{_ 'click-to-star'}}{{/ if }} {{_ 'starred-boards-description'}}")
-        span.board-header-btn-icon.icon-sm.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
-        //- XXX To implement
-        span.board-header-btn-text Starred
-    //-
-      XXX Normally we would disable this field for sandstorm, but we keep it
-      until sandstorm implements sharing capabilities
-
-      a.board-header-btn.perms-btn.js-change-vis(class="{{#unless currentUser.isBoardAdmin}}no-edit{{/ unless}}" id="permission-level")
-        span.board-header-btn-icon.icon-sm.fa(class="{{#if isPublic}}fa-globe{{else}}fa-lock{{/if}}")
-        span.board-header-btn-text {{_ permission}}
-
-    a.board-header-btn.js-search
-      span.board-header-btn-icon.icon-sm.fa.fa-tag
-      span.board-header-btn-text Labels
-
-    //- XXX Clicking here should open a search field
-    a.board-header-btn.js-search
-      span.board-header-btn-icon.icon-sm.fa.fa-search
-      span.board-header-btn-text {{_ 'search'}}
-
-  //- +boardMembersHeader
-
-template(name="boardMembersHeader")
-  .board-header-members
-    each currentBoard.members
-      +userAvatar(userId=userId draggable=true showBadges=true)
-    unless isSandstorm
-      if currentUser.isBoardAdmin
-        a.member.add-board-member.js-open-manage-board-members
-          i.fa.fa-plus
-
-template(name="boardMenuPopup")
-  ul.pop-over-list
-    li: a.js-rename-board {{_ 'rename-board'}}
-    li: a.js-change-board-color Change color
-    li: a Copy this board
-    li: a Rules
-
-template(name="boardChangeTitlePopup")
-  form#ChangeBoardTitleForm
-    label {{_ 'name'}}
-      input.js-board-name(type="text" value="{{ title }}" autofocus)
-      input.primary.wide.js-rename-board(type="submit" value="{{_ 'rename'}}")
-
-template(name="boardChangePermissionPopup")
-  ul.pop-over-list
-    li
-      a.js-select.light-hover(name="private")
-        span.icon-sm.fa.fa-lock.vis-icon
-        | {{_ 'private'}}
-        if check 'private'
-          span.icon-sm.fa.fa-check
-        span.sub-name {{_ 'private-desc'}}
-    li
-      a.js-select.light-hover(name="public")
-        span.icon-sm.fa.fa-globe.vis-icon
-        | {{_ 'public'}}
-        if check 'public'
-          span.icon-sm.fa.fa-check
-        span.sub-name {{_ 'public-desc'}}
-
-template(name="boardChangeColorPopup")
-  .board-backgrounds-list.clearfix
-    each backgroundColors
-      .board-background-select.js-select-background
-        span.background-box(class="board-color-{{this}}")
-          if isSelected
-            i.fa.fa-check
-
-template(name="createBoardPopup")
-  .content.clearfix
-    form#CreateBoardForm
-      label(for="boardNewTitle") {{_ 'title'}}
-      input#boardNewTitle.non-empty(type="text" name="name" placeholder="{{_ 'bucket-example'}}" autofocus)
-      p.quiet
-        span.icon-sm.fa.fa-globe
-        | {{{_ 'board-public-info'}}}
-      input.primary.wide(type="submit" value="{{_ 'create'}}")
diff --git a/client/components/boards/header.js b/client/components/boards/header.js
deleted file mode 100644
index 7d02df48..00000000
--- a/client/components/boards/header.js
+++ /dev/null
@@ -1,7 +0,0 @@
-Template.headerBoard.helpers({
-  isStarred: function() {
-    var boardId = Session.get('currentBoard');
-    var user = Meteor.user();
-    return boardId && user && user.hasStarred(boardId);
-  }
-});
diff --git a/client/components/boards/header.styl b/client/components/boards/header.styl
deleted file mode 100644
index 44c38a4b..00000000
--- a/client/components/boards/header.styl
+++ /dev/null
@@ -1,137 +0,0 @@
-@import 'nib'
-
-.board-header {
-    height: auto;
-    overflow: hidden;
-    padding: 10px 30px 10px 8px;
-    position: relative;
-    transition: padding .15s ease-in;
-}
-
-.board-header-btns {
-    position: relative;
-    display: block;
-}
-
-.board-header-btn {
-    border-radius: 3px;
-    color: #f6f6f6;
-    cursor: default;
-    float: left;
-    font-size: 12px;
-    height: 30px;
-    line-height: 32px;
-    margin: 2px 4px 0 0;
-    overflow: hidden;
-    padding-left: 30px;
-    position: relative;
-    text-decoration: none;
-}
-
-.board-header-btn:empty {
-    display: none;
-}
-
-.board-header-btn-without-icon {
-    padding-left: 8px;
-}
-
-.board-header-btn-icon {
-    background-clip: content-box;
-    background-origin: content-box;
-    color: #f6f6f6 !important;
-    padding: 6px;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-.board-header-btn-text {
-    padding-right: 8px;
-}
-
-.board-header-btn:not(.no-edit) .text {
-    text-decoration: underline;
-}
-
-.board-header-btn:not(.no-edit):hover {
-    background: rgba(0, 0, 0, .12);
-    cursor: pointer;
-}
-
-.board-header-btn:hover {
-    color: #f6f6f6;
-}
-
-.board-header-btn.board-header-btn-enabled {
-    background-color: rgba(0, 0, 0, .1);
-
-    &:hover {
-        background-color: rgba(0, 0, 0, .3);
-    }
-
-    .board-header-btn-icon.icon-star {
-        color: #e6bf00 !important;
-    }
-}
-
-.board-header-btn-name {
-    cursor: default;
-    font-size: 18px;
-    font-weight: 700;
-    line-height: 30px;
-    padding-left: 4px;
-    text-decoration: none;
-
-    .board-header-btn-text {
-        padding-left: 6px;
-    }
-}
-
-.board-header-btn-name-org-logo {
-    border-radius: 3px;
-    height: 30px;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 30px;
-
-    .board-header-btn-text {
-        padding-left: 32px;
-    }
-}
-
-.board-header-btn-org-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 400px;
-}
-
-.board-header-btn-filter-indicator {
-    background: #3d990f;
-    padding-right: 30px;
-    color: #fff;
-    text-shadow: 0;
-
-    &:hover {
-        background: #43a711 !important;
-    }
-
-    .board-header-btn-icon-close {
-        background: #43a711;
-        border-top-left-radius: 0;
-        border-top-right-radius: 3px;
-        border-bottom-right-radius: 3px;
-        border-bottom-left-radius: 0;
-        color: #fff;
-        padding: 6px;
-        position: absolute;
-        right: 0;
-        top: 0;
-
-        &:hover {
-            background: #48b512;
-        }
-    }
-}
diff --git a/client/components/boards/helpers.js b/client/components/boards/helpers.js
index 05be987d..969f8564 100644
--- a/client/components/boards/helpers.js
+++ b/client/components/boards/helpers.js
@@ -1,42 +1,3 @@
-Template.boards.helpers({
-  boards: function() {
-    return Boards.find({}, {
-      sort: ['title']
-    });
-  },
-
-  starredBoards: function() {
-    var cursor = Boards.find({
-      _id: { $in: Meteor.user().profile.starredBoards || [] }
-    }, {
-      sort: ['title']
-    });
-    return cursor.count() === 0 ? null : cursor;
-  },
-
-  isStarred: function() {
-    var user = Meteor.user();
-    return user && user.hasStarred(this._id);
-  }
-});
-
-Template.boardChangePermissionPopup.helpers({
-  check: function(perm) {
-    return this.permission === perm;
-  }
-});
-
-Template.boardChangeColorPopup.helpers({
-  backgroundColors: function() {
-    return Boards.simpleSchema()._schema.color.allowedValues;
-  },
-
-  isSelected: function() {
-    var currentBoard = Boards.findOne(Session.get('currentBoard'));
-    return currentBoard.color === this.toString();
-  }
-});
-
 Blaze.registerHelper('currentBoard', function() {
   var boardId = Session.get('currentBoard');
   if (boardId) {
diff --git a/client/components/boards/list.jade b/client/components/boards/list.jade
deleted file mode 100644
index 3a8fecd2..00000000
--- a/client/components/boards/list.jade
+++ /dev/null
@@ -1,14 +0,0 @@
-template(name="boards")
-  if boards
-    ul.board-list.clearfix
-      each boards
-        li(class="{{#if isStarred}}starred{{/if}}" class=colorClass)
-          a.js-open-board(href="{{ pathFor route='Board' boardId=_id }}")
-            span.details
-              span.board-list-item-name= title
-              i.fa.fa-star-o.js-star-board(
-                class="{{#if isStarred}}is-star-active{{/if}}"
-                title="{{_ 'star-board-title'}}")
-  else
-    p.quiet {{_ 'no-boards'}}
-    button.js-add-board {{_ 'add-board'}}
diff --git a/client/components/boards/list.styl b/client/components/boards/list.styl
deleted file mode 100644
index c068dbb0..00000000
--- a/client/components/boards/list.styl
+++ /dev/null
@@ -1,85 +0,0 @@
-.board-list
-  margin: 25px auto
-  width: 1200px
-
-  li
-    float: left
-    width: 25%
-    box-sizing: border-box
-    position: relative
-
-    &.starred .fa-star-o
-      opacity: 1
-
-  a
-    background-color: #999
-    color: #f6f6f6
-    height: 90px
-    font-size: 16px
-    line-height: 22px
-    border-radius: 3px
-    display: block
-    font-weight: 700
-    min-height: 18px
-    padding: 8px 12px 8px 12px
-    margin: 0 16px 16px 0
-    position: relative
-    text-decoration: none
-
-    &.tile
-      background-size: auto
-      background-repeat: repeat
-
-  .details
-    height: 84px
-    padding-right: 36px
-    bottom: 0
-    left: 0
-    overflow: hidden
-    padding: 9px 12px
-    position: absolute
-    right: 0
-    top: 0
-
-  .board-list-item-sub-name
-    color: rgba(255, 255, 255, .5)
-    display: block
-    font-size: 14px
-    font-weight: 400
-    line-height: 22px
-
-  .fa-star-o
-    bottom: 0
-    font-size: 14px
-    height: 18px
-    line-height: 18px
-    opacity: 0
-    padding: 9px 9px
-    position: absolute
-    right: 0
-    top: 0
-    transition-duration: .15s
-    transition-property: color, font-size, background
-
-  .is-star-active
-    color: #e6bf00
-
-  li:hover a
-    color: #f6f6f6
-
-    .fa-star-o
-      color: #fff
-      opacity: .75
-
-      &:hover
-        font-size: 18px
-        opacity: 1
-
-      &.is-star-active
-        color: #e6bf00
-        opacity: 1
-
-        &:hover
-          color: #ffd91a
-          font-size: 16px
-          opacity: 1
-- 
cgit v1.2.3-1-g7c22