Avatar from username

.meteor/packages

@@ -39,7 +39,6 @@ tap:i18n
 tmeasday:crypto-md5
 tmeasday:errors
 todda00:friendly-slugs
-utilities:avatar
 simple:highlight.js
 percolate:migrations
 underscorestring:underscore.string

.meteor/versions

@@ -115,7 +115,6 @@ simple:highlight.js@1.0.9
 spacebars@1.0.6
 spacebars-compiler@1.0.6
 srp@1.0.3
-stylus@1.0.7
 tap:i18n@1.4.1
 templating@1.1.1
 tmeasday:crypto-base@3.1.2
@@ -127,7 +126,6 @@ ui@1.0.6
 underscore@1.0.3
 underscorestring:underscore.string@3.0.3_1
 url@1.0.4
-utilities:avatar@0.7.10
 webapp@1.2.0
 webapp-hashing@1.0.3
 yasaricli:slugify@0.0.5

client/stylesheets/base.less

@@ -663,7 +663,12 @@ a.github-fork {
 	height: 100%;
 	width: 100%;
 	overflow: hidden;
+	position: relative;
 	.avatar-image {
+		height: 100%;
+		width: 100%;
+		min-height: 40px;
+		min-width: 40px;
 		display: block;
 		background-color: transparent;
 		background-size: cover;

client/views/avatar/avatar.coffee

@@ -1,53 +1,13 @@
-Template.avatarPrompt.onCreated ->
-	self = this
-	self.suggestions = new ReactiveVar
-	self.upload = new ReactiveVar
-
-	self.getSuggestions = ->
-		self.suggestions.set undefined
-		Meteor.call 'getAvatarSuggestion', (error, avatars) ->
-			self.suggestions.set
-				ready: true
-				avatars: avatars
-
-	self.getSuggestions()
-
-
-Template.avatarPrompt.helpers
-	suggestions: ->
-		return Template.instance().suggestions.get()
-
-	upload: ->
-		return Template.instance().upload.get()
-
-
-Template.avatarPrompt.events
-	'click .select-service': (e) ->
-		Meteor.call 'setAvatarFromService', this.blob, this.service, ->
-			console.log arguments
-
-	'click .login-with-service': (event, template) ->
-		loginWithService = "loginWith#{_.capitalize(this)}"
-
-		serviceConfig = {}
-
-		Meteor[loginWithService] serviceConfig, (error) ->
-			if error?.error is 'github-no-public-email'
-				alert t("loginServices.github_no_public_email")
-				return
-
-			console.log error
-			if error?
-				toastr.error error.message
-				return
-
-			template.getSuggestions()
-
-	'change .myFileInput': (event, template) ->
-		FS.Utility.eachFile event, (blob) ->
-			reader = new FileReader()
-			reader.readAsDataURL(blob)
-			reader.onloadend = ->
-				template.upload.set
-					service: 'upload'
-					blob: reader.result
+Template.avatar.helpers
+	dimensions: ->
+		return {
+			width: 40
+			height: 40
+		}
+
+	imageUrl: ->
+		username = this.username
+		if not username? and this.userId?
+			username = Meteor.users.findOne(this.userId)?.username
+		url = "#{Meteor.absoluteUrl()}/avatar/#{username}"
+		return url

client/views/avatar/avatar.html

@@ -1,71 +1,6 @@
-<template name="avatarSuggestion">
-	{{#if .}}
-		<div class="avatar-suggestion-item">
-			<div style="background-image: url({{blob}});">
-			</div>
-			<button type="button" class="button primary select-service">{{_ "avatar.Use_service_avatar" service}}</button>
-		</div>
-	{{/if}}
-</template>
-
-<template name="avatarSuggestionLogin">
-	{{#if .}}
-		<div class="avatar-suggestion-item">
-			<div class="question-mark"></div>
-			<button type="button" class="button primary login-with-service">{{_ "avatar.Login_with" .}}</button>
-		</div>
-	{{/if}}
-</template>
-
-<template name="avatarPrompt">
-	<form id="login-card" method='/'>
-		<div class="fields">
-			<h2>{{_ "avatar.Select_an_avatar"}}</h2>
-		</div>
-		<div class="fields">
-			<div class='input-text active'>
-				<div class='field'>
-					<div class="avatar-suggestions">
-						{{#if suggestions.ready}}
-							{{> avatarSuggestion suggestions.avatars.gravatar}}
-							{{> avatarSuggestion suggestions.avatars.facebook}}
-							{{> avatarSuggestion suggestions.avatars.google}}
-							{{> avatarSuggestion suggestions.avatars.github}}
-
-							{{#unless suggestions.avatars.facebook}}
-								{{> avatarSuggestionLogin 'facebook'}}
-							{{/unless}}
-							{{#unless suggestions.avatars.google}}
-								{{> avatarSuggestionLogin 'google'}}
-							{{/unless}}
-							{{#unless suggestions.avatars.github}}
-								{{> avatarSuggestionLogin 'github'}}
-							{{/unless}}
-
-							<div class="avatar-suggestion-item">
-								<div style="background-image: url({{upload.blob}});" class="{{#unless upload}}question-mark{{/unless}}">
-								</div>
-								{{#with upload}}
-									<button type="button" class="button primary select-service">{{_ "avatar.Use_uploaded_avatar"}}</button>
-								{{/with}}
-								{{#unless upload}}
-									<button type="button" class="button primary">{{_ "avatar.Select_file"}}
-										<input type="file" class="myFileInput">
-									</button>
-								{{/unless}}
-							</div>
-						{{else}}
-							{{_ "usernameRegistration.Loading_suggestion"}}
-						{{/if}}
-					</div>
-				</div>
-			</div>
-		</div>
-
-		{{#if username.ready}}
-			<div class="submit">
-				<button data-loading-text="{{_ "general.Please_wait"}}..." class='button primary login'><span>{{_ "usernameRegistration.Use_this_username"}}</span></button>
-			</div>
-		{{/if}}
-	</form>
-</template>
+<template name="avatar">
+	<div class="avatar">
+		<img class="avatar-image" src="/images/pixel.png" style="background-image:url({{imageUrl}});" alt="avatar" />
+		<span class="avatar-initials" style="{{initialsCss}}">{{initialsText}}</span>
+	</div>
+</template>

client/views/avatar/avatarPrompt.coffee

@@ -0,0 +1,53 @@
+Template.avatarPrompt.onCreated ->
+	self = this
+	self.suggestions = new ReactiveVar
+	self.upload = new ReactiveVar
+
+	self.getSuggestions = ->
+		self.suggestions.set undefined
+		Meteor.call 'getAvatarSuggestion', (error, avatars) ->
+			self.suggestions.set
+				ready: true
+				avatars: avatars
+
+	self.getSuggestions()
+
+
+Template.avatarPrompt.helpers
+	suggestions: ->
+		return Template.instance().suggestions.get()
+
+	upload: ->
+		return Template.instance().upload.get()
+
+
+Template.avatarPrompt.events
+	'click .select-service': (e) ->
+		Meteor.call 'setAvatarFromService', this.blob, this.service, ->
+			console.log arguments
+
+	'click .login-with-service': (event, template) ->
+		loginWithService = "loginWith#{_.capitalize(this)}"
+
+		serviceConfig = {}
+
+		Meteor[loginWithService] serviceConfig, (error) ->
+			if error?.error is 'github-no-public-email'
+				alert t("loginServices.github_no_public_email")
+				return
+
+			console.log error
+			if error?
+				toastr.error error.message
+				return
+
+			template.getSuggestions()
+
+	'change .myFileInput': (event, template) ->
+		FS.Utility.eachFile event, (blob) ->
+			reader = new FileReader()
+			reader.readAsDataURL(blob)
+			reader.onloadend = ->
+				template.upload.set
+					service: 'upload'
+					blob: reader.result

client/views/avatar/avatarPrompt.html

@@ -0,0 +1,71 @@
+<template name="avatarSuggestion">
+	{{#if .}}
+		<div class="avatar-suggestion-item">
+			<div style="background-image: url({{blob}});">
+			</div>
+			<button type="button" class="button primary select-service">{{_ "avatar.Use_service_avatar" service}}</button>
+		</div>
+	{{/if}}
+</template>
+
+<template name="avatarSuggestionLogin">
+	{{#if .}}
+		<div class="avatar-suggestion-item">
+			<div class="question-mark"></div>
+			<button type="button" class="button primary login-with-service">{{_ "avatar.Login_with" .}}</button>
+		</div>
+	{{/if}}
+</template>
+
+<template name="avatarPrompt">
+	<form id="login-card" method='/'>
+		<div class="fields">
+			<h2>{{_ "avatar.Select_an_avatar"}}</h2>
+		</div>
+		<div class="fields">
+			<div class='input-text active'>
+				<div class='field'>
+					<div class="avatar-suggestions">
+						{{#if suggestions.ready}}
+							{{> avatarSuggestion suggestions.avatars.gravatar}}
+							{{> avatarSuggestion suggestions.avatars.facebook}}
+							{{> avatarSuggestion suggestions.avatars.google}}
+							{{> avatarSuggestion suggestions.avatars.github}}
+
+							{{#unless suggestions.avatars.facebook}}
+								{{> avatarSuggestionLogin 'facebook'}}
+							{{/unless}}
+							{{#unless suggestions.avatars.google}}
+								{{> avatarSuggestionLogin 'google'}}
+							{{/unless}}
+							{{#unless suggestions.avatars.github}}
+								{{> avatarSuggestionLogin 'github'}}
+							{{/unless}}
+
+							<div class="avatar-suggestion-item">
+								<div style="background-image: url({{upload.blob}});" class="{{#unless upload}}question-mark{{/unless}}">
+								</div>
+								{{#with upload}}
+									<button type="button" class="button primary select-service">{{_ "avatar.Use_uploaded_avatar"}}</button>
+								{{/with}}
+								{{#unless upload}}
+									<button type="button" class="button primary">{{_ "avatar.Select_file"}}
+										<input type="file" class="myFileInput">
+									</button>
+								{{/unless}}
+							</div>
+						{{else}}
+							{{_ "usernameRegistration.Loading_suggestion"}}
+						{{/if}}
+					</div>
+				</div>
+			</div>
+		</div>
+
+		{{#if username.ready}}
+			<div class="submit">
+				<button data-loading-text="{{_ "general.Please_wait"}}..." class='button primary login'><span>{{_ "usernameRegistration.Use_this_username"}}</span></button>
+			</div>
+		{{/if}}
+	</form>
+</template>