diff options
| -rw-r--r-- | client/components/boards/boardHeader.jade | 5 | ||||
| -rw-r--r-- | client/components/cards/details.jade | 2 | ||||
| -rw-r--r-- | client/components/cards/labels.jade | 4 | ||||
| -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 | ||||
| -rw-r--r-- | client/lib/popup.js | 18 |
8 files changed, 73 insertions, 58 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) diff --git a/client/lib/popup.js b/client/lib/popup.js index 3813319d..84d4b63a 100644 --- a/client/lib/popup.js +++ b/client/lib/popup.js @@ -16,6 +16,10 @@ Popup = { var self = this; var popupName = name + 'Popup'; + var clickFromPopup = function(evt) { + return $(evt.target).closest('.js-pop-over').length !== 0; + }; + return function(evt) { // If a popup is already openened, clicking again on the opener element // should close it -- and interupt the current `open` function. @@ -34,7 +38,7 @@ Popup = { // has one. This allows us to position a sub-popup exactly at the same // position than its parent. var openerElement; - if (self._hasPopupParent()) { + if (clickFromPopup(evt)) { openerElement = self._getTopStack().openerElement; } else { self._stack = []; @@ -47,9 +51,8 @@ Popup = { // We push our popup data to the stack. The top of the stack is always // used as the data source for our current popup. self._stack.push({ - __isPopup: true, popupName: popupName, - hasPopupParent: self._hasPopupParent(), + hasPopupParent: clickFromPopup(evt), title: self._getTitle(popupName), openerElement: openerElement, depth: self._stack.length, @@ -155,15 +158,6 @@ Popup = { return this._stack[this._stack.length - 1]; }, - // We use the blaze API to determine if the current popup has been opened from - // a parent popup. The number we give to the `Template.parentData` has been - // determined experimentally and is susceptible to change if you modify the - // `Popup.template` - _hasPopupParent: function() { - var tryParentData = Template.parentData(3); - return !! (tryParentData && tryParentData.__isPopup); - }, - // We automatically calculate the popup offset from the reference element // position and dimensions. We also reactively use the window dimensions to // ensure that the popup is always visible on the screen. |