Allow a user to edit its profile or avatar from a member popover

Fixes the data context on the member popover in the details pane. Also
change the way Popover detect if the click is initiated from a parent
popover -- from reading Blaze context, to looking at the event target
parents.

8 files changed, 73 insertions, 58 deletions

diff --git a/client/components/boards/boardHeader.jade b/client/components/boards/boardHeader.jade
index a1d3ce9f..3847cd93 100644
--- a/client/components/boards/boardHeader.jade
+++ b/client/components/boards/boardHeader.jade
@@ -44,8 +44,9 @@ template(name="boardMenuPopup")
   if currentUser.isBoardMember
     ul.pop-over-list
       li: a.js-open-archives Archived elements
-      li: a.js-change-board-color Change color
-      li: a Permissions
+      if currentUser.isBoardAdmin
+        li: a.js-change-board-color Change color
+        li: a Permissions
     hr
   ul.pop-over-list
     li: a Copy this board
diff --git a/client/components/cards/details.jade b/client/components/cards/details.jade
index 877acd9a..67ef287b 100644
--- a/client/components/cards/details.jade
+++ b/client/components/cards/details.jade
@@ -39,7 +39,7 @@ template(name="cardDetails")
         a.card-label.add-label.js-add-labels
           i.fa.fa-plus
 
-    //- XXX We should use "editable" to avoide repetiting ourselves
+    //- XXX We should use "editable" to avoid repetiting ourselves
     if currentUser.isBoardMember
       h3.card-details-item-title Description
       +inlinedForm(classNames="card-description js-card-description")
diff --git a/client/components/cards/labels.jade b/client/components/cards/labels.jade
index 5089f90a..5742969f 100644
--- a/client/components/cards/labels.jade
+++ b/client/components/cards/labels.jade
@@ -32,6 +32,6 @@ template(name="cardLabelsPopup")
         span.card-label.card-label-selectable.js-select-label(class="card-label-{{color}}"
           class="{{# if isLabelSelected ../_id }}active{{/ if }}")
             = name
-            if currentUser.isBoardAdmin
-              span.card-label-selectable-icon.fa.fa-check
+            if isLabelSelected ../_id
+              i.card-label-selectable-icon.fa.fa-check
   a.quiet-button.full.js-add-label {{_ 'label-create'}}
diff --git a/client/components/users/userAvatar.jade b/client/components/users/userAvatar.jade
index 2ea3aa20..d6527a5d 100644
--- a/client/components/users/userAvatar.jade
+++ b/client/components/users/userAvatar.jade
@@ -9,6 +9,11 @@ template(name="userAvatar")
       span.member-presence-status(class=presenceStatusClassName)
       span.member-type(class=memberType)
 
+    if showEdit
+      if $eq currentUser._id userData._id
+        a.edit-avatar.js-change-avatar
+          i.fa.fa-pencil
+
 template(name="userAvatarInitials")
   svg.avatar.avatar-initials(viewBox="0 0 {{viewPortWidth}} 15")
     text(x="0" y="13")= initials
@@ -18,9 +23,8 @@ template(name="userPopup")
     .mini-profile-info
       +userAvatar(userId=user._id)
       .info
-        h3.bottom
-          = user.profile.fullname
-          p.quiet.bottom @{{ user.username }}
+        h3= user.profile.fullname
+        p.quiet @{{ user.username }}
 
 template(name="memberName")
   if showBoth
@@ -61,10 +65,14 @@ template(name="changeAvatarPopup")
 template(name="cardMemberPopup")
   .board-member-menu
     .mini-profile-info
-      +userAvatar(userId=user._id)
+      +userAvatar(userId=user._id showEdit=true)
       .info
-        h3.bottom= user.profile.fullname
-        p.quiet.bottom @{{ user.username }}
+        h3= user.profile.fullname
+        p.quiet @{{ user.username }}
     if currentUser.isBoardMember
       ul.pop-over-list
         li: a.js-remove-member {{_ 'remove-member-from-card'}}
+
+        if $eq currentUser._id user._id
+          with currentUser
+            li: a.js-edit-profile Edit Profile
diff --git a/client/components/users/userAvatar.js b/client/components/users/userAvatar.js
index 64975141..73b2631a 100644
--- a/client/components/users/userAvatar.js
+++ b/client/components/users/userAvatar.js
@@ -26,6 +26,10 @@ Template.userAvatar.helpers({
   }
 });
 
+Template.userAvatar.events({
+  'click .js-change-avatar': Popup.open('changeAvatar')
+});
+
 Template.userAvatarInitials.helpers({
   initials: function() {
     var user = Users.findOne(this.userId);
@@ -142,9 +146,16 @@ Template.cardMembersPopup.events({
   }
 });
 
+Template.cardMemberPopup.helpers({
+  user: function() {
+    return Users.findOne(this.userId);
+  }
+});
+
 Template.cardMemberPopup.events({
   'click .js-remove-member': function() {
     Cards.update(this.cardId, {$pull: {members: this.userId}});
     Popup.close();
-  }
+  },
+  'click .js-edit-profile': Popup.open('editProfile')
 });
diff --git a/client/components/users/userAvatar.styl b/client/components/users/userAvatar.styl
index 010311b6..e2a66d1e 100644
--- a/client/components/users/userAvatar.styl
+++ b/client/components/users/userAvatar.styl
@@ -56,39 +56,24 @@ avatar-radius = 50%
       background: #bdbdbd
       border-color: #ededed
 
-  &.extra-small
-    .avatar-initials
-      font-size: 9px
-      width: 18px
-      height: 18px
-      line-height: 18px
-
-    .avatar-image
-      width: 18px
-      height: 18px
-
-  &.small
-    width: 30px
-    height: 30px
-
-    .avatar-initials
-      font-size: 12px
-      line-height: 30px
-
-  &.large
-    height: 85px
-    line-height: 85px
-    width: 85px
-
-    .avatar
-      width: 85px
-      height: 85px
-
-      .avatar-initials
-        font-size: 16px
-        font-weight: 700
-        line-height: 85px
-        width: 85px
+  .edit-avatar
+    position: absolute
+    top: 0
+    height: 100%
+    width: 100%
+    border-radius: avatar-radius
+    background: black
+    display: flex
+    align-items: center
+    justify-content: center
+    opacity: 0
+
+    &:hover
+      opacity: 0.6
+
+    i.fa-pencil
+      color: white
+
 
   &.add-member
     display: flex
@@ -106,3 +91,19 @@ avatar-radius = 50%
   &.me
     background: #cfdfe8
 
+.mini-profile-info
+  margin-top: 10px
+
+  .info
+    padding-top: 5px
+
+    h3, p
+      margin-bottom: 0
+
+    p
+      padding-top: 0
+
+  .member
+    width: 50px
+    height: @width
+    margin-right: 10px
diff --git a/client/components/users/userHeader.jade b/client/components/users/userHeader.jade
index f30ee09d..6a096658 100644
--- a/client/components/users/userHeader.jade
+++ b/client/components/users/userHeader.jade
@@ -24,7 +24,7 @@ template(name="editProfilePopup")
   form
     label
       | {{_ "fullname"}}
-      input.js-profile-fullname(type="text" value=profile.name autofocus)
+      input.js-profile-fullname(type="text" value=profile.fullname autofocus)
     label
       | {{_ "username"}}
       input.js-profile-username(type="text" value=username)
diff --git a/client/lib/popup.js b/client/lib/popup.js
index 3813319d..84d4b63a 100644
--- a/client/lib/popup.js
+++ b/client/lib/popup.js
@@ -16,6 +16,10 @@ Popup = {
     var self = this;
     var popupName = name + 'Popup';
 
+    var clickFromPopup = function(evt) {
+      return $(evt.target).closest('.js-pop-over').length !== 0;
+    };
+
     return function(evt) {
       // If a popup is already openened, clicking again on the opener element
       // should close it -- and interupt the current `open` function.
@@ -34,7 +38,7 @@ Popup = {
       // has one. This allows us to position a sub-popup exactly at the same
       // position than its parent.
       var openerElement;
-      if (self._hasPopupParent()) {
+      if (clickFromPopup(evt)) {
         openerElement = self._getTopStack().openerElement;
       } else {
         self._stack = [];
@@ -47,9 +51,8 @@ Popup = {
       // We push our popup data to the stack. The top of the stack is always
       // used as the data source for our current popup.
       self._stack.push({
-        __isPopup: true,
         popupName: popupName,
-        hasPopupParent: self._hasPopupParent(),
+        hasPopupParent: clickFromPopup(evt),
         title: self._getTitle(popupName),
         openerElement: openerElement,
         depth: self._stack.length,
@@ -155,15 +158,6 @@ Popup = {
     return this._stack[this._stack.length - 1];
   },
 
-  // We use the blaze API to determine if the current popup has been opened from
-  // a parent popup. The number we give to the `Template.parentData` has been
-  // determined experimentally and is susceptible to change if you modify the
-  // `Popup.template`
-  _hasPopupParent: function() {
-    var tryParentData = Template.parentData(3);
-    return !! (tryParentData && tryParentData.__isPopup);
-  },
-
   // We automatically calculate the popup offset from the reference element
   // position and dimensions. We also reactively use the window dimensions to
   // ensure that the popup is always visible on the screen.