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.

7 files changed, 67 insertions, 46 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)