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.

1 files changed, 34 insertions, 33 deletions

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