From 8cf9ec266055f065c428216d53018c83b63675c6 Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Fri, 19 Jun 2015 14:39:38 +0200
Subject: 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.
---
 client/components/users/userAvatar.jade | 20 +++++++---
 client/components/users/userAvatar.js   | 13 ++++++-
 client/components/users/userAvatar.styl | 67 +++++++++++++++++----------------
 client/components/users/userHeader.jade |  2 +-
 4 files changed, 61 insertions(+), 41 deletions(-)

(limited to 'client/components/users')

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)
-- 
cgit v1.2.3-1-g7c22