diff options
Diffstat (limited to 'client/components/users')
-rw-r--r-- | client/components/users/userAvatar.jade | 20 | ||||
-rw-r--r-- | client/components/users/userAvatar.js | 13 | ||||
-rw-r--r-- | client/components/users/userAvatar.styl | 67 | ||||
-rw-r--r-- | client/components/users/userHeader.jade | 2 |
4 files changed, 61 insertions, 41 deletions
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) |