summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMaxime Quandalle <maxime@quandalle.com>2015-06-19 14:39:38 +0200
committerMaxime Quandalle <maxime@quandalle.com>2015-06-19 14:39:38 +0200
commit8cf9ec266055f065c428216d53018c83b63675c6 (patch)
tree7277b335901d3b5a40ab2851f227691ceb97b356
parentfad4cba5e20b3273c2adc80b7a7c5c9fa57ed720 (diff)
downloadwekan-8cf9ec266055f065c428216d53018c83b63675c6.tar.gz
wekan-8cf9ec266055f065c428216d53018c83b63675c6.tar.bz2
wekan-8cf9ec266055f065c428216d53018c83b63675c6.zip
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.
-rw-r--r--client/components/boards/boardHeader.jade5
-rw-r--r--client/components/cards/details.jade2
-rw-r--r--client/components/cards/labels.jade4
-rw-r--r--client/components/users/userAvatar.jade20
-rw-r--r--client/components/users/userAvatar.js13
-rw-r--r--client/components/users/userAvatar.styl67
-rw-r--r--client/components/users/userHeader.jade2
-rw-r--r--client/lib/popup.js18
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.