From 8cf9ec266055f065c428216d53018c83b63675c6 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle 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/boards/boardHeader.jade | 5 ++- client/components/cards/details.jade | 2 +- client/components/cards/labels.jade | 4 +- client/components/users/userAvatar.jade | 20 ++++++--- client/components/users/userAvatar.js | 13 +++++- client/components/users/userAvatar.styl | 67 ++++++++++++++++--------------- client/components/users/userHeader.jade | 2 +- 7 files changed, 67 insertions(+), 46 deletions(-) (limited to 'client/components') 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) -- cgit v1.2.3-1-g7c22