Merge pull request #358 from RocketChat/change-avatar

Improve view to change avatar
RocketChat · Jul 28, 2015 · c7d2dd3 · c7d2dd3
2 parents 381357e + f97e7ea
commit c7d2dd3
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 75 deletions.
diff --git a/client/lib/avatar.coffee b/client/lib/avatar.coffee
@@ -12,7 +12,7 @@
 
 	for key, room of RoomManager.openedRooms
 		url = getAvatarUrlFromUsername username
-		console.log url
+
 		$(room.dom).find(".message[data-username='#{username}'] .avatar-image").css('background-image', "url(#{url})");
 
 	return true
diff --git a/client/routes/router.coffee b/client/routes/router.coffee
@@ -35,6 +35,11 @@ FlowRouter.route '/home',
 		FlowLayout.render 'main', {center: 'home'}
 		KonchatNotification.getDesktopPermission()
 
+FlowRouter.route '/changeavatar',
+	name: 'changeAvatar'
+
+	action: ->
+		FlowLayout.render 'main', {center: 'avatarPrompt'}
 
 FlowRouter.route '/settings/:group?',
 	name: 'settings'

diff --git a/client/stylesheets/base.less b/client/stylesheets/base.less
@@ -2798,6 +2798,35 @@ a.github-fork {
 	}
 }
 
+.avatarPrompt {
+	padding: 22px 30px 30px;
+	overflow: scroll;
+	height: 100%;
+	header {
+		max-width: 520px;
+		padding: 18px 0 23px;
+		p {
+			//font-family: "Muli";
+			margin: 8px 0 0;
+			font-size: 14px;
+			line-height: 22px;
+			font-weight: 300;
+		}
+	}
+	h2 {
+		&:extend(.rocket-h2);
+		color: @primary-font-color;
+		line-height: 24px;
+		margin: 0;
+		&.error {
+			color: #b40202;
+		}
+	}
+	img {
+		width: 200px;
+	}
+}
+
 #login-card {
 	width: 90%;
 	max-width: 520px;
@@ -3132,7 +3161,6 @@ a.github-fork {
 		max-width: 55px;
 		min-width: 55px;
 		background-size: cover;
-		border: 1px solid darken(@tertiary-background-color, 10%);
 		font-size: 40px;
 		text-align: center;
 		background-color: @tertiary-background-color;

diff --git a/client/views/app/sideNav/userStatus.coffee b/client/views/app/sideNav/userStatus.coffee
@@ -33,7 +33,7 @@ Template.userStatus.events
 			Meteor.call('logoutCleanUp', user)
 
 	'click #avatar': (event) ->
-		Meteor.call('resetAvatar')
+		FlowRouter.go 'changeAvatar'
 
 	'click #settings': (event) ->
 		SideNav.setFlex "userSettingsFlex"

diff --git a/client/views/avatar/avatar.coffee b/client/views/avatar/avatar.coffee
@@ -1,15 +1,14 @@
 Template.avatar.helpers
 	imageUrl: ->
-		if this.preventImage?
-			return
-
 		username = this.username
 		if not username? and this.userId?
 			username = Meteor.users.findOne(this.userId)?.username
 
 		if not username?
 			return
 
+		Session.get "avatar_random_#{username}"
+
 		url = getAvatarUrlFromUsername(username)
 
 		return "background-image:url(#{url});"
diff --git a/client/views/avatar/prompt.coffee b/client/views/avatar/prompt.coffee
@@ -23,11 +23,19 @@ Template.avatarPrompt.helpers
 	username: ->
 		return Meteor.user()?.username
 
+	initialsUsername: ->
+		return '@'+Meteor.user()?.username
 
 Template.avatarPrompt.events
-	'click .select-service': (e) ->
-		Meteor.call 'setAvatarFromService', this.blob, this.contentType, this.service, ->
-			Session.set('AvatarRandom', Date.now())
+	'click .select-service': ->
+		if @service is 'initials'
+			Meteor.call 'resetAvatar'
+			updateAvatarOfUsername Meteor.user().username
+			FlowRouter.go 'home'
+		else
+			Meteor.call 'setAvatarFromService', @blob, @contentType, @service, ->
+				updateAvatarOfUsername Meteor.user().username
+				FlowRouter.go 'home'
 
 	'click .login-with-service': (event, template) ->
 		loginWithService = "loginWith#{_.capitalize(this)}"

diff --git a/client/views/avatar/prompt.html b/client/views/avatar/prompt.html
@@ -22,61 +22,59 @@
 </template>
 
 <template name="avatarPrompt">
-	<form id="login-card" method='/'>
+	<div class="avatarPrompt">
 		<header>
 			<h2>{{_ "Select_an_avatar"}}</h2>
 			<p>{{_ "Select_service_to_login"}}</p>
 		</header>
-		<div class="fields">
-			<div class='input-text active'>
-				<div class="avatar-suggestions">
-					{{#if suggestions.ready}}
-						<div class="avatar-suggestion-item">
-							{{> avatar username=username preventImage='true'}}
-							{{#with service='initials'}}
-								<div class="action">
-									<button type="button" class="button primary select-service">{{_ "Use_initials_avatar" }}</button>
-								</div>
-							{{/with}}
-						</div>
+		<div>
+			<div class="avatar-suggestions">
+				{{#if suggestions.ready}}
+					<div class="avatar-suggestion-item">
+						{{> avatar username=initialsUsername }}
+						{{#with service='initials'}}
+							<div class="action">
+								<button type="button" class="button primary select-service">{{_ "Use_initials_avatar" }}</button>
+							</div>
+						{{/with}}
+					</div>
 
-						{{> avatarSuggestion suggestions.avatars.gravatar}}
-						{{> avatarSuggestion suggestions.avatars.facebook}}
-						{{> avatarSuggestion suggestions.avatars.google}}
-						{{> avatarSuggestion suggestions.avatars.github}}
-						{{> avatarSuggestion suggestions.avatars.linkedin}}
+					{{> avatarSuggestion suggestions.avatars.gravatar}}
+					{{> avatarSuggestion suggestions.avatars.facebook}}
+					{{> avatarSuggestion suggestions.avatars.google}}
+					{{> avatarSuggestion suggestions.avatars.github}}
+					{{> avatarSuggestion suggestions.avatars.linkedin}}
 
-						{{#unless suggestions.avatars.facebook}}
-							{{> avatarSuggestionLogin 'facebook'}}
-						{{/unless}}
-						{{#unless suggestions.avatars.google}}
-							{{> avatarSuggestionLogin 'google'}}
-						{{/unless}}
-						{{#unless suggestions.avatars.github}}
-							{{> avatarSuggestionLogin 'github'}}
-						{{/unless}}
-						{{#unless suggestions.avatars.linkedin}}
-							{{> avatarSuggestionLogin 'linkedin'}}
-						{{/unless}}
+					{{#unless suggestions.avatars.facebook}}
+						{{> avatarSuggestionLogin 'facebook'}}
+					{{/unless}}
+					{{#unless suggestions.avatars.google}}
+						{{> avatarSuggestionLogin 'google'}}
+					{{/unless}}
+					{{#unless suggestions.avatars.github}}
+						{{> avatarSuggestionLogin 'github'}}
+					{{/unless}}
+					{{#unless suggestions.avatars.linkedin}}
+						{{> avatarSuggestionLogin 'linkedin'}}
+					{{/unless}}
 
-						<div class="avatar-suggestion-item">
-							<div style="background-image: url({{upload.blob}});" class="avatar {{#unless upload}}question-mark icon-upload{{/unless}}">
-							</div>
-							<div class="action">
-								{{#with upload}}
-									<button type="button" class="button primary select-service">{{_ "Use_uploaded_avatar"}}</button>
-								{{/with}}
-								{{#unless upload}}
-									<button type="button" class="button primary">{{_ "Select_file"}}
-										<input type="file" class="avatar-file-input" accept="image/*">
-									</button>
-								{{/unless}}
-							</div>
+					<div class="avatar-suggestion-item">
+						<div style="background-image: url({{upload.blob}});" class="avatar {{#unless upload}}question-mark icon-upload{{/unless}}">
+						</div>
+						<div class="action">
+							{{#with upload}}
+								<button type="button" class="button primary select-service">{{_ "Use_uploaded_avatar"}}</button>
+							{{/with}}
+							{{#unless upload}}
+								<button type="button" class="button primary">{{_ "Select_file"}}
+									<input type="file" class="avatar-file-input" accept="image/*">
+								</button>
+							{{/unless}}
 						</div>
-					{{else}}
-						{{_ "Loading_suggestion"}}
-					{{/if}}
-				</div>
+					</div>
+				{{else}}
+					{{_ "Loading_suggestion"}}
+				{{/if}}
 			</div>
 		</div>
 
@@ -85,5 +83,5 @@ <h2>{{_ "Select_an_avatar"}}</h2>
 				<button data-loading-text="{{_ "Please_wait"}}..." class='button primary login'><span>{{_ "Use_this_username"}}</span></button>
 			</div>
 		{{/if}}
-	</form>
+	</div>
 </template>
diff --git a/client/views/main.coffee b/client/views/main.coffee
@@ -71,9 +71,6 @@ Template.main.helpers
 	hasUsername: ->
 		return Meteor.userId()? and Meteor.user().username?
 
-	hasAvatar: ->
-		return Meteor.userId()? and Meteor.user().avatarOrigin?
-
 	flexOpened: ->
 		console.log 'layout.helpers flexOpened' if window.rocketDebug
 		return 'flex-opened' if Session.equals('flexOpened', true)

diff --git a/client/views/main.html b/client/views/main.html
@@ -52,21 +52,17 @@
 			{{#unless hasUsername}}
 				{{> usernameLayout render='usernamePrompt'}}
 			{{else}}
-				{{#unless hasAvatar}}
-					{{> usernameLayout render='avatarPrompt'}}
-				{{else}}
-					<div id="user-card-popover"></div>
-					<div id="rocket-chat" class="menu-nav menu-closed">
-						<div class="connection-status">
-							{{> status}}
-						</div>
-						<main class="main-content {{flexOpened}} {{flexOpenedRTC1}} {{flexOpenedRTC2}}">
-							{{> Template.dynamic template=center}}
-						</main>
-						{{> sideNav }}
+				<div id="user-card-popover"></div>
+				<div id="rocket-chat" class="menu-nav menu-closed">
+					<div class="connection-status">
+						{{> status}}
 					</div>
-					{{> audioNotification }}
-				{{/unless}}
+					<main class="main-content {{flexOpened}} {{flexOpenedRTC1}} {{flexOpenedRTC2}}">
+						{{> Template.dynamic template=center}}
+					</main>
+					{{> sideNav }}
+				</div>
+				{{> audioNotification }}
 			{{/unless}}
 		{{/unless}}
 	{{/unless}}

diff --git a/server/startup/avatar.coffee b/server/startup/avatar.coffee
@@ -32,7 +32,10 @@ Meteor.startup ->
 		this.params =
 			username: req.url.replace(/^\//, '').replace(/\?.*$/, '')
 
-		file = RocketChatFileAvatarInstance.getFileWithReadStream this.params.username
+		if this.params.username[0] isnt '@'
+			file = RocketChatFileAvatarInstance.getFileWithReadStream this.params.username
+		else
+			this.params.username = this.params.username.replace '@', ''
 
 		res.setHeader 'Content-Disposition', 'inline'
 		res.setHeader 'Cache-Control', 'no-cache'