Fix member permission modification

Fixes #280

client/components/boards/boardColors.styl

@@ -18,7 +18,7 @@ setBoardColor(color)
   button[type=submit].primary, input[type=submit].primary
     background-color: darken(color, 20%)
 
-  &.pop-over .pop-over-list li a:hover,
+  &.pop-over .pop-over-list li a:not(.disabled):hover,
   .sidebar .sidebar-content .sidebar-btn:hover,
   .sidebar-list li a:hover
     background-color: lighten(color, 10%)

client/components/boards/boardsList.styl

@@ -68,7 +68,10 @@ $spaceBetweenTiles = 16px
     color: white
 
   li:hover a
-    color: #f6f6f6
+    &:hover
+      .fa-star,
+      .fa-star-o
+        color: white
 
     .fa-star,
     .fa-star-o

client/components/cards/cardDetails.jade

@@ -91,7 +91,7 @@ template(name="moveCardPopup")
   +boardLists
 
 template(name="cardMembersPopup")
-  ul.pop-over-list.pop-over-member-list
+  ul.pop-over-list.js-card-member-list
     each board.members
       li.item(class="{{#if isCardMember}}active{{/if}}")
         a.name.js-select-member(href="#")

client/components/main/layouts.styl

@@ -28,6 +28,9 @@ body
   flex: 1
   overflow: hidden
 
+  .sk-spinner
+    margin-top: 30vh
+
 #modal
   position: absolute
   top: 0
@@ -267,7 +270,7 @@ dd
 .fa.fa-lock.colorful
   color: #f44336
 
-.pop-over .pop-over-list li a:hover
+.pop-over .pop-over-list li a:not(.disabled):hover
   .fa, .fa.colorful
     color: white
 
@@ -278,7 +281,7 @@ a
   &.fa, i.fa
     color: darken(white, 35%)
 
-  &:hover, &.is-active
+  &:not(.disabled):hover, &:not(.disabled).is-active
     &.fa, i.fa
       color: darken(white, 60%)
 

client/components/main/popup.styl

@@ -120,6 +120,9 @@ $popupWidth = 300px
     .at-result
       background: #b2dfdb
 
+  .sk-spinner
+    margin: 40px auto
+
   for depth in (1..6)
     .popup-container-depth-{depth}
       transform: translateX(- depth * $popupWidth)
@@ -133,7 +136,7 @@ $popupWidth = 300px
     cursor: pointer
     display: block
     font-weight: 700
-    padding: 0px 10px
+    padding: 1.5px 10px
     position: relative
     margin: 0 -10px
     text-decoration: none
@@ -145,7 +148,7 @@ $popupWidth = 300px
       width: auto
       padding-right: 22px
 
-    &:hover
+    &:not(.disabled):hover
       background-color: #005377
       color: #fff
 
@@ -162,7 +165,6 @@ $popupWidth = 300px
       font-size: 12px
       font-weight: 400
       line-height: 15px
-      margin-top: 4px
 
     &.current
       background-color: #e2e6e9

client/components/main/spinner.styl

@@ -13,16 +13,12 @@
  *
  */
 
-.sk-spinner-wave {
-
-  &.sk-spinner {
-    width: 50px;
-    height: 50px;
-    margin: auto;
-    margin-top: 30vh;
-    text-align: center;
-    font-size: 10px;
-  }
+.sk-spinner {
+  width: 50px;
+  height: 50px;
+  margin: auto;
+  text-align: center;
+  font-size: 10px;
 
   div {
     background-color: #333;

client/components/sidebar/sidebar.jade

@@ -26,7 +26,7 @@ template(name="membersWidget")
       i.fa.fa-user
       | {{_ 'members'}}
     .board-widget-content
-      each currentBoard.members
+      each currentBoard.activeMembers
         +userAvatar(userId=this.userId showStatus=true)
       unless isSandstorm
         if currentUser.isBoardAdmin
@@ -50,7 +50,7 @@ template(name="labelsWidget")
 template(name="memberPopup")
   .board-member-menu
     .miniprofile-header
-      +userAvatar(userId=user._id)
+      +userAvatar(userId=user._id showEdit=true)
       .info
         h3
           .js-profile= user.profile.fullname
@@ -67,10 +67,12 @@ template(name="memberPopup")
                 | {{_ 'change-permissions'}}
                 span.quiet (#{memberType})
             li
-              if currentUser.isBoardAdmin
-                a.js-remove-member {{_ 'remove-from-board'}}
+              if $eq currentUser._id userId
+                //-
+                  XXX Not implemented!
+                // a.js-leave-member {{_ 'leave-board'}}
               else
-                a.js-leave-member {{_ 'leave-board'}}
+                a.js-remove-member {{_ 'remove-from-board'}}
 
 
 template(name="removeMemberPopup")
@@ -81,16 +83,16 @@ template(name="addMemberPopup")
   .js-search-member
     +esInput(index="users")
 
-  ul.pop-over-member-list
+  ul.pop-over-list
     +esEach(index="users")
-      li.item.js-member-item(class="{{#if isBoardMember }}disabled{{/if}}")
-        a.name.js-select-member(title="{{ profile.name }} ({{ username }})")
+      li.item.js-member-item(class="{{#if isBoardMember}}disabled{{/if}}")
+        a.name.js-select-member(title="{{profile.name}} ({{username}})")
           +userAvatar(userId=_id)
           span.full-name
             = profile.name
-            | (<span class="username">{{ username }}</span>)
+            | (<span class="username">{{username}}</span>)
           if isBoardMember
-            .extra-text.quiet ({{_ 'joined'}})
+            .quiet ({{_ 'joined'}})
 
     +ifEsIsSearching(index='users')
       +spinner

client/components/sidebar/sidebar.js

@@ -206,7 +206,7 @@ Template.addMemberPopup.helpers({
 });
 
 Template.addMemberPopup.events({
-  'click .pop-over-member-list li:not(.disabled)'() {
+  'click .js-select-member'() {
     const userId = this._id;
     const currentBoard = Boards.findOne(Session.get('currentBoard'));
     const currentMembersIds = _.pluck(currentBoard.members, 'userId');
@@ -233,14 +233,14 @@ Template.addMemberPopup.events({
   },
 });
 
-Template.addMemberPopup.onRendered(() => {
+Template.addMemberPopup.onRendered(function() {
   this.find('.js-search-member input').focus();
 });
 
 Template.changePermissionsPopup.events({
   'click .js-set-admin, click .js-set-normal'(event) {
     const currentBoard = Boards.findOne(Session.get('currentBoard'));
-    const memberIndex = getMemberIndex(currentBoard, this.user._id);
+    const memberIndex = getMemberIndex(currentBoard, this.userId);
     const isAdmin = $(event.currentTarget).hasClass('js-set-admin');
 
     Boards.update(currentBoard._id, {
@@ -254,10 +254,13 @@ Template.changePermissionsPopup.events({
 
 Template.changePermissionsPopup.helpers({
   isAdmin() {
-    return this.user.isBoardAdmin();
+    const user = Users.findOne(this.userId);
+    return user.isBoardAdmin();
   },
+
   isLastAdmin() {
-    if (!this.user.isBoardAdmin())
+    const user = Users.findOne(this.userId);
+    if (!user.isBoardAdmin())
       return false;
     const currentBoard = Boards.findOne(Session.get('currentBoard'));
     const nbAdmins = _.where(currentBoard.members, { isAdmin: true }).length;

client/components/users/userAvatar.js

@@ -137,6 +137,7 @@ Template.cardMembersPopup.helpers({
     const cardMembers = Cards.findOne(cardId).members || [];
     return _.contains(cardMembers, this.userId);
   },
+
   user() {
     return Users.findOne(this.userId);
   },

collections/boards.js

@@ -123,16 +123,24 @@ Boards.helpers({
   isPublic() {
     return this.permission === 'public';
   },
+
   lists() {
     return Lists.find({ boardId: this._id, archived: false },
                                                           { sort: { sort: 1 }});
   },
+
   activities() {
     return Activities.find({ boardId: this._id }, { sort: { createdAt: -1 }});
   },
+
+  activeMembers() {
+    return _.where(this.members, {isActive: true});
+  },
+
   absoluteUrl() {
     return FlowRouter.path('board', { id: this._id, slug: this.slug });
   },
+
   colorClass() {
     return `board-color-${this.color}`;
   },

collections/users.js

@@ -12,23 +12,27 @@ Users.helpers({
   boards() {
     return Boards.find({ userId: this._id });
   },
+
   starredBoards() {
     const starredBoardIds = this.profile.starredBoards || [];
     return Boards.find({archived: false, _id: {$in: starredBoardIds}});
   },
+
   hasStarred(boardId) {
     const starredBoardIds = this.profile.starredBoards || [];
     return _.contains(starredBoardIds, boardId);
   },
+
   isBoardMember() {
     const board = Boards.findOne(Session.get('currentBoard'));
     return board && _.contains(_.pluck(board.members, 'userId'), this._id) &&
                          _.where(board.members, {userId: this._id})[0].isActive;
   },
+
   isBoardAdmin() {
     const board = Boards.findOne(Session.get('currentBoard'));
-    if (this.isBoardMember(board))
-      return _.where(board.members, {userId: this._id})[0].isAdmin;
+    return board && this.isBoardMember(board) &&
+                          _.where(board.members, {userId: this._id})[0].isAdmin;
   },
 
   getInitials() {