diff options
Diffstat (limited to 'client/components/users')
-rw-r--r-- | client/components/users/userAvatar.jade | 38 | ||||
-rw-r--r-- | client/components/users/userAvatar.js | 84 | ||||
-rw-r--r-- | client/components/users/userHeader.jade | 4 | ||||
-rw-r--r-- | client/components/users/userProfile.html | 79 | ||||
-rw-r--r-- | client/components/users/userProfile.js | 31 |
5 files changed, 107 insertions, 129 deletions
diff --git a/client/components/users/userAvatar.jade b/client/components/users/userAvatar.jade index 98682eb5..9542f6c4 100644 --- a/client/components/users/userAvatar.jade +++ b/client/components/users/userAvatar.jade @@ -1,22 +1,42 @@ template(name="userAvatar") - .member.js-member(class="{{class}}" title="{{userData.profile.name}} ({{userData.username}})") - +avatar(user=userData size=size) + .member.js-member(title="{{userData.profile.fullname}} ({{userData.username}})") + if userData.profile.avatarUrl + img.avatar.avatar-image(src=userData.profile.avatarUrl) if showStatus span.member-presence-status(class=presenceStatusClassName) span.member-type(class=memberType) - template(name="userPopup") .board-member-menu .mini-profile-info +userAvatar(user=user) - .info - h3.bottom - a.js-profile(href="{{ pathFor route='Profile' username=user.username }}")= user.profile.name - p.quiet.bottom @{{ user.username }} + .info + h3.bottom + a.js-profile(href="{{pathFor route='Profile' username=user.username}}")= user.profile.name + p.quiet.bottom @{{ user.username }} template(name="memberName") - a.inline-object.js-show-mem-menu(href="{{ pathFor route='Profile' username=user.username }}") - = user.profile.name + a.js-show-mem-menu(href="{{pathFor route='Profile' username=user.username}}") + = user.profile.fullname if username | ({{ user.username }}) + +template(name="changeAvatarPopup") + ul.pop-over-list + each uploadedAvatars + li: a.js-select-avatar + .member: .avatar + img.avatar-image(src="{{url avatarUrlOptions}}") + | Uploaded avatar + if isSelected + i.fa.fa-check + p.sub-name + unless isSelected + a.js-delete-avatar + | Delete + | - + = original.name + input.hide.js-upload-avatar-input(accept="image/*;capture=camera" type="file") + button.full.js-upload-avatar + i.fa.fa-upload + | Upload an avatar diff --git a/client/components/users/userAvatar.js b/client/components/users/userAvatar.js index d7d221db..deae01cf 100644 --- a/client/components/users/userAvatar.js +++ b/client/components/users/userAvatar.js @@ -1,17 +1,22 @@ +Meteor.subscribe('my-avatars'); + Template.userAvatar.helpers({ userData: function() { - if (! this.user) { - this.user = Users.findOne(this.userId); - } - return this.user; + return Users.findOne(this.userId, { + fields: { + profile: 1, + username: 1 + } + }); }, + memberType: function() { - var userId = this.userId || this.user._id; - var user = Users.findOne(userId); + var user = Users.findOne(this.userId); return user && user.isBoardAdmin() ? 'admin' : 'normal'; }, + presenceStatusClassName: function() { - var userPresence = Presences.findOne({ userId: this.user._id }); + var userPresence = Presences.findOne({ userId: this.userId }); if (! userPresence) return 'disconnected'; else if (Session.equals('currentBoard', userPresence.state.currentBoardId)) @@ -20,3 +25,68 @@ Template.userAvatar.helpers({ return 'idle'; } }); + +BlazeComponent.extendComponent({ + template: function() { + return 'changeAvatarPopup'; + }, + + avatarUrlOptions: function() { + return { + auth: false, + brokenIsFine: true + }; + }, + + uploadedAvatars: function() { + return Avatars.find({userId: Meteor.userId()}); + }, + + isSelected: function() { + var userProfile = Meteor.user().profile; + var avatarUrl = userProfile && userProfile.avatarUrl; + var currentAvatarUrl = this.currentData().url(this.avatarUrlOptions()); + return avatarUrl === currentAvatarUrl; + }, + + setAvatar: function(avatarUrl) { + Meteor.users.update(Meteor.userId(), { + $set: { + 'profile.avatarUrl': avatarUrl + } + }); + }, + + events: function() { + return [{ + 'click .js-upload-avatar': function() { + this.$('.js-upload-avatar-input').click(); + }, + 'change .js-upload-avatar-input': function(evt) { + var self = this; + var file, fileUrl; + + FS.Utility.eachFile(evt, function(f) { + file = Avatars.insert(new FS.File(f)); + fileUrl = file.url(self.avatarUrlOptions()); + }); + var fetchAvatarInterval = window.setInterval(function() { + $.ajax({ + url: fileUrl, + success: function() { + self.setAvatar(file.url(self.avatarUrlOptions())); + window.clearInterval(fetchAvatarInterval); + } + }); + }, 100); + }, + 'click .js-select-avatar': function() { + var avatarUrl = this.currentData().url(this.avatarUrlOptions()); + this.setAvatar(avatarUrl); + }, + 'click .js-delete-avatar': function() { + Avatars.remove(this.currentData()._id); + } + }]; + } +}).register('changeAvatarPopup'); diff --git a/client/components/users/userHeader.jade b/client/components/users/userHeader.jade index 960264a9..f30ee09d 100644 --- a/client/components/users/userHeader.jade +++ b/client/components/users/userHeader.jade @@ -7,7 +7,7 @@ template(name="headerUserBar") else = currentUser.username a.header-user-bar-avatar.js-change-avatar - +userAvatar(user=currentUser) + +userAvatar(userId=currentUser._id) template(name="memberMenuPopup") ul.pop-over-list @@ -33,8 +33,6 @@ template(name="editProfilePopup") input.js-profile-initials(type="text" value=profile.initials) input.primary.wide(type="submit" value="{{_ 'save'}}") -template(name="changeAvatarPopup") - template(name="changePasswordPopup") +atForm(state='changePwd') diff --git a/client/components/users/userProfile.html b/client/components/users/userProfile.html deleted file mode 100644 index 3d1f8c9b..00000000 --- a/client/components/users/userProfile.html +++ /dev/null @@ -1,79 +0,0 @@ -<template name='profile'> - {{ # if profile }} - <div class="tabbed-pane-header"> - <div class="tabbed-pane-header-wrapper clearfix"> - <a class="tabbed-pane-header-image profile-image ed js-change-avatar-profile" href="#"> - {{> userAvatar user=profile size="large"}} - </a> - <div class="tabbed-pane-header-details"> - <div class="js-current-details"> - <div class="tabbed-pane-header-details-name"> - <h1 class="inline"> {{ profile.profile.name }} </h1> - <p class="window-title-extra quiet"> @{{ profile.username }} </p> - </div> - <div class="tabbed-pane-header-details-content"> - <p>{{ profile.profile.bio }}</p> - </div> - <div class="tabbed-pane-header-details-content"></div> - </div> - {{ > profileEditForm }} - </div> - </div> - </div> - {{ else }} - {{ > message label='user-profile-not-found' }} - {{ /if }} -</template> - -<template name="settings"> - {{ > profile profile=currentUser }} - <div class="tabbed-pane-main-col clearfix"> - <div class="tabbed-pane-main-col-loading hide js-loading-page"> - <span class="tabbed-pane-main-col-loading-spinner spinner"></span> - </div> - <div class="tabbed-pane-main-col-wrapper js-content"> - <div class="window-module clearfix"> - <div class="window-module-title"> - <h3>{{_ "account-details"}}</h3> - </div> - <a class="big-link js-change-name-and-bio" href="#"> - <span class="text">{{_ 'change-name-initials-bio'}}</span> - </a> - <a class="big-link js-change-avatar" href="#"> - <span class="text">{{_ 'change-avatar'}}</span> - </a> - <a class="big-link js-change-password" href="#"> - <span class="text">{{_ 'change-password'}}</span> - </a> - <a class="big-link js-change-email" href="#"> - <span class="text">{{_ 'change-email'}}</span> - </a> - </div> - </div> - </div> -</template> - -<template name="profileEditForm"> - {{#if $eq currentUser.username profile.username }} - {{# if session 'ProfileEditForm' }} - <form id="ProfileEditForm" class="js-profile-form"> - <p class="error js-profile-form-error hide"></p> - <label>{{_ "username"}}</label> - <input type="text" id="username" value="{{ profile.username }}" disabled> - <label>{{_ "fullname"}}</label> - <input type="text" id="name" value="{{ profile.profile.name }}"> - <label> - {{_ "bio"}} <span class="quiet">({{_ 'optional'}})</span> - </label> - <textarea id="bio">{{ profile.profile.bio }}</textarea> - <input type="submit" class="primary wide js-submit-profile" value="{{_ 'save'}}"> - <input type="button" class="js-cancel-edit-profile" value="{{_ 'cancel'}}"> - </form> - {{ else }} - <a class="button-link tabbed-pane-header-details-edit js-edit-profile" href="#"> - <span class="icon-sm fa fa-pencil"></span> - {{_ "edit-profile"}} - </a> - {{ /if }} - {{ /if }} -</template> diff --git a/client/components/users/userProfile.js b/client/components/users/userProfile.js deleted file mode 100644 index 040abed0..00000000 --- a/client/components/users/userProfile.js +++ /dev/null @@ -1,31 +0,0 @@ -Template.profileEditForm.events({ - 'click .js-edit-profile': function() { - Session.set('ProfileEditForm', true); - }, - 'click .js-cancel-edit-profile': function() { - Session.set('ProfileEditForm', false); - }, - 'submit #ProfileEditForm': function(evt, t) { - var name = t.find('#name').value; - var bio = t.find('#bio').value; - - // trim and update - if ($.trim(name)) { - Users.update(this.profile()._id, { - $set: { - 'profile.name': name, - 'profile.bio': bio - } - }, function() { - - // update complete close profileEditForm - Session.set('ProfileEditForm', false); - }); - } - evt.preventDefault(); - } -}); - -Template.memberName.events({ - 'click .js-show-mem-menu': Popup.open('user') -}); |