Merge pull request RocketChat#147 from RocketChat/no-require-avatar

No require avatar fixes

Author: rodrigok

client/stylesheets/base.less

@@ -671,11 +671,29 @@ a.github-fork {
 		min-height: 20px;
 		min-width: 20px;
 		display: block;
+		position: relative;
 		background-color: transparent;
 		background-size: cover;
 		background-repeat: no-repeat;
 		background-position: center;
 	}
+
+	&[initials]:before {
+		content: attr(initials);
+		position: absolute;
+		position: absolute;
+		font-size: 22px;
+		text-align: center;
+		width: 100%;
+		height: 100%;
+		color: #FFF;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-family: Helvetica;
+		text-transform: uppercase;
+		font-weight: bold;
+	}
 }
 
 #rocket-chat {
@@ -1728,11 +1746,6 @@ a.github-fork {
 		display: block;
 		width: 40px;
 		height: 40px;
-		background-color: #FFF;
-		border-radius: 2px;
-		background-image: url(/images/no_picture.png);
-		background-size: 100% auto;
-		background-position: 50% 50%;
 	}
 }
 
@@ -2063,13 +2076,13 @@ a.github-fork {
 
 .user-image-status(@color) {
 	.avatar{
-		&:after, &:before {
+		&:after {
 			background-color: darken(@color, 5%);
 		}
 	}
 }
 
-@user-image-square: 30px;
+@user-image-square: 20px;
 .user-image {
 	margin: 4px;
 	height: @user-image-square;
@@ -2079,29 +2092,34 @@ a.github-fork {
 	font-size: 12px;
 	position: relative;
 	display: inline-table;
+	.avatar {
+		&:before {
+			font-size: 10px;
+		}
+	}
 	&:hover,
 	&.selected {
 		.avatar{
 			&:after {
 				.transform(scaleX(1))
 			}
-			.status-offline & {
-				&:after, &:before {
+			.status-offline {
+				&:after {
 					background-color: @status-offline;
 				}
 			}
-			.status-online & {
-				&:after, &:before {
+			.status-online {
+				&:after {
 					background-color: @status-online;
 				}
 			}
-			.status-away & {
-				&:after, &:before {
+			.status-away {
+				&:after {
 					background-color: @status-away;
 				}
 			}
-			.status-busy & {
-				&:after, &:before {
+			.status-busy {
+				&:after {
 					background-color: @status-busy;
 				}
 			}
@@ -2112,22 +2130,14 @@ a.github-fork {
 	}
 	.avatar {
 		overflow: visible;
-		&:after, &:before {
+		&:after {
 			content: " ";
-			width: 100%;
-			height: 2px;
+			height: 100%;
+			width: 3px;
 			position: absolute;
 			z-index: 1;
-			left: 0px;
-		}
-		&:after{
-			bottom: -4px;
-			.transform(scaleX(0));
-			.transform-origin(50%, 50%);
-			.transition(transform .15s ease-out .02s);
-		}
-		&:before{
-			bottom: -3px;
+			left: -7px;
+			bottom: 0px;
 		}
 		.avatar-initials {
 			line-height: @user-image-square;
@@ -2755,6 +2765,9 @@ a.github-fork {
 			cursor: pointer;
 		}
 	}
+	.avatar:before {
+		font-size: 44px;
+	}
 }
 
 @media all and(max-width: 1100px) {

client/views/app/sideNav/userStatus.html

@@ -4,7 +4,7 @@
 			<div class="info status-{{status}}">
 				{{#if username}}
 					<div class="thumb" data-status='{{visualStatus}}'>
-						{{> avatar userId=_id}}
+						{{> avatar username=username}}
 					</div>
 					<div class="data">
 						<div class="wrp">

client/views/avatar/avatar.coffee

@@ -1,14 +1,29 @@
+colors = ['#F44336','#E91E63','#9C27B0','#673AB7','#3F51B5','#2196F3','#03A9F4','#00BCD4','#009688','#4CAF50','#8BC34A','#CDDC39','#FFC107','#FF9800','#FF5722','#795548','#9E9E9E','#607D8B']
 Template.avatar.helpers
-	dimensions: ->
-		return {
-			width: 40
-			height: 40
-		}
+	initials: ->
+		username = this.username or ''
+		username = username.replace(/[^A-Za-z0-9]/g, '.').replace(/\.+/g, '.').replace(/(^\.)|(\.$)/g, '')
+		usernameParts = username.split('.')
+		if usernameParts.length > 1
+			return _.first(usernameParts)[0] + _.last(usernameParts)[0]
+
+		return username.replace(/[^A-Za-z0-9]/g, '').substr(0, 2)
+
+	color: ->
+		username = this.username or ''
+		position = username.length % colors.length
+		return colors[position]
 
 	imageUrl: ->
+		if this.preventImage?
+			return
+
 		username = this.username
 		random = Session.get('AvatarRandom')
 		if not username? and this.userId?
 			username = Meteor.users.findOne(this.userId)?.username
-		url = "#{Meteor.absoluteUrl()}avatar/#{username}.jpg?_dc=#{random}"
-		return url
+
+		if not username?
+			return
+
+		return "background-image:url(#{Meteor.absoluteUrl()}avatar/#{username}.jpg?_dc=#{random});"

client/views/avatar/avatar.html

@@ -1,6 +1,6 @@
 <template name="avatar">
-	<div class="avatar">
-		<div class="avatar-image" style="background-image:url({{imageUrl}});">
+	<div class="avatar" initials="{{initials}}" style="background-color:{{color}}">
+		<div class="avatar-image" style="{{imageUrl}}">
 		</div>
 	</div>
 </template>

client/views/avatar/avatarPrompt.coffee

@@ -20,6 +20,9 @@ Template.avatarPrompt.helpers
 	upload: ->
 		return Template.instance().upload.get()
 
+	username: ->
+		return Meteor.user()?.username
+
 
 Template.avatarPrompt.events
 	'click .select-service': (e) ->

client/views/avatar/avatarPrompt.html

@@ -27,6 +27,13 @@ <h2>{{_ "avatar.Select_an_avatar"}}</h2>
 				<div class='field'>
 					<div class="avatar-suggestions">
 						{{#if suggestions.ready}}
+							<div class="avatar-suggestion-item">
+								{{> avatar username=username preventImage='true'}}
+								{{#with service='initials'}}
+									<button type="button" class="button primary select-service">{{_ "avatar.Use_initials_avatar" }}</button>
+								{{/with}}
+							</div>
+
 							{{> avatarSuggestion suggestions.avatars.gravatar}}
 							{{> avatarSuggestion suggestions.avatars.facebook}}
 							{{> avatarSuggestion suggestions.avatars.google}}

client/views/login/social.html

@@ -1,7 +1,7 @@
 <template name="social">
 	<div class="social">
-		<h4>{{_ "footer.Join_the_Community"}}</h4>
 		{{#if withParagraph}}
+			<h4>{{_ "footer.Join_the_Community"}}</h4>
 			<p>{{_ "footer.Follow_social_profiles"}}</p>
 		{{/if}}
 		<nav>

i18n/en.i18n.json

@@ -159,6 +159,7 @@
 	},
 	"avatar": {
 		"Use_service_avatar": "Use %s avatar",
+		"Use_initials_avatar": "Use your username initials",
 		"Login_with": "Login with %s",
 		"Select_an_avatar": "Select an avatar",
 		"Use_uploaded_avatar": "Use uploaded avatar",

i18n/pt.i18n.json

@@ -155,7 +155,8 @@
 		"Not_found_or_not_allowed": "Não encontrado ou não permitido"
 	},
 	"avatar": {
-		"Use_service_avatar": "Use o avatar de %s",
+		"Use_service_avatar": "Use o avatar do %s",
+		"Use_initials_avatar": "Use as iniciais do seu nome de usuário",
 		"Login_with": "Login com %s",
 		"Select_an_avatar": "Selecione um avatar",
 		"Use_uploaded_avatar": "Use o avatar de upload",

server/methods/setAvatarFromService.coffee

@@ -1,10 +1,14 @@
 Meteor.methods
-	setAvatarFromService: (dataURI, service) ->
+	setAvatarFromService: (dataURI, contentType, service) ->
 		if not Meteor.userId()
 			throw new Meteor.Error 203, '[methods] typingStatus -> Usuário não logado'
 
 		user = Meteor.user()
 
+		if service is 'initials'
+			Meteor.users.update {_id: user._id}, {$set: {avatarOrigin: service}}
+			return
+
 		{image, contentType} = RocketFile.dataURIParse dataURI
 
 		rs = RocketFile.bufferToStream new Buffer(image, 'base64')