Skip to content

Commit c7d2dd3

Browse files
rodrigokrodrigok
committedJul 28, 2015
Merge pull request #358 from RocketChat/change-avatar
Improve view to change avatar
2 parents 381357e + f97e7ea commit c7d2dd3

File tree

10 files changed

+109
-75
lines changed

10 files changed

+109
-75
lines changed
 

‎client/lib/avatar.coffee

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
for key, room of RoomManager.openedRooms
1414
url = getAvatarUrlFromUsername username
15-
console.log url
15+
1616
$(room.dom).find(".message[data-username='#{username}'] .avatar-image").css('background-image', "url(#{url})");
1717

1818
return true

‎client/routes/router.coffee

+5
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@ FlowRouter.route '/home',
3535
FlowLayout.render 'main', {center: 'home'}
3636
KonchatNotification.getDesktopPermission()
3737

38+
FlowRouter.route '/changeavatar',
39+
name: 'changeAvatar'
40+
41+
action: ->
42+
FlowLayout.render 'main', {center: 'avatarPrompt'}
3843

3944
FlowRouter.route '/settings/:group?',
4045
name: 'settings'

‎client/stylesheets/base.less

+29-1
Original file line numberDiff line numberDiff line change
@@ -2798,6 +2798,35 @@ a.github-fork {
27982798
}
27992799
}
28002800

2801+
.avatarPrompt {
2802+
padding: 22px 30px 30px;
2803+
overflow: scroll;
2804+
height: 100%;
2805+
header {
2806+
max-width: 520px;
2807+
padding: 18px 0 23px;
2808+
p {
2809+
//font-family: "Muli";
2810+
margin: 8px 0 0;
2811+
font-size: 14px;
2812+
line-height: 22px;
2813+
font-weight: 300;
2814+
}
2815+
}
2816+
h2 {
2817+
&:extend(.rocket-h2);
2818+
color: @primary-font-color;
2819+
line-height: 24px;
2820+
margin: 0;
2821+
&.error {
2822+
color: #b40202;
2823+
}
2824+
}
2825+
img {
2826+
width: 200px;
2827+
}
2828+
}
2829+
28012830
#login-card {
28022831
width: 90%;
28032832
max-width: 520px;
@@ -3132,7 +3161,6 @@ a.github-fork {
31323161
max-width: 55px;
31333162
min-width: 55px;
31343163
background-size: cover;
3135-
border: 1px solid darken(@tertiary-background-color, 10%);
31363164
font-size: 40px;
31373165
text-align: center;
31383166
background-color: @tertiary-background-color;

‎client/views/app/sideNav/userStatus.coffee

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ Template.userStatus.events
3333
Meteor.call('logoutCleanUp', user)
3434

3535
'click #avatar': (event) ->
36-
Meteor.call('resetAvatar')
36+
FlowRouter.go 'changeAvatar'
3737

3838
'click #settings': (event) ->
3939
SideNav.setFlex "userSettingsFlex"

‎client/views/avatar/avatar.coffee

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
Template.avatar.helpers
22
imageUrl: ->
3-
if this.preventImage?
4-
return
5-
63
username = this.username
74
if not username? and this.userId?
85
username = Meteor.users.findOne(this.userId)?.username
96

107
if not username?
118
return
129

10+
Session.get "avatar_random_#{username}"
11+
1312
url = getAvatarUrlFromUsername(username)
1413

1514
return "background-image:url(#{url});"

‎client/views/avatar/prompt.coffee

+11-3
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,19 @@ Template.avatarPrompt.helpers
2323
username: ->
2424
return Meteor.user()?.username
2525

26+
initialsUsername: ->
27+
return '@'+Meteor.user()?.username
2628

2729
Template.avatarPrompt.events
28-
'click .select-service': (e) ->
29-
Meteor.call 'setAvatarFromService', this.blob, this.contentType, this.service, ->
30-
Session.set('AvatarRandom', Date.now())
30+
'click .select-service': ->
31+
if @service is 'initials'
32+
Meteor.call 'resetAvatar'
33+
updateAvatarOfUsername Meteor.user().username
34+
FlowRouter.go 'home'
35+
else
36+
Meteor.call 'setAvatarFromService', @blob, @contentType, @service, ->
37+
updateAvatarOfUsername Meteor.user().username
38+
FlowRouter.go 'home'
3139

3240
'click .login-with-service': (event, template) ->
3341
loginWithService = "loginWith#{_.capitalize(this)}"

‎client/views/avatar/prompt.html

+46-48
Original file line numberDiff line numberDiff line change
@@ -22,61 +22,59 @@
2222
</template>
2323

2424
<template name="avatarPrompt">
25-
<form id="login-card" method='/'>
25+
<div class="avatarPrompt">
2626
<header>
2727
<h2>{{_ "Select_an_avatar"}}</h2>
2828
<p>{{_ "Select_service_to_login"}}</p>
2929
</header>
30-
<div class="fields">
31-
<div class='input-text active'>
32-
<div class="avatar-suggestions">
33-
{{#if suggestions.ready}}
34-
<div class="avatar-suggestion-item">
35-
{{> avatar username=username preventImage='true'}}
36-
{{#with service='initials'}}
37-
<div class="action">
38-
<button type="button" class="button primary select-service">{{_ "Use_initials_avatar" }}</button>
39-
</div>
40-
{{/with}}
41-
</div>
30+
<div>
31+
<div class="avatar-suggestions">
32+
{{#if suggestions.ready}}
33+
<div class="avatar-suggestion-item">
34+
{{> avatar username=initialsUsername }}
35+
{{#with service='initials'}}
36+
<div class="action">
37+
<button type="button" class="button primary select-service">{{_ "Use_initials_avatar" }}</button>
38+
</div>
39+
{{/with}}
40+
</div>
4241

43-
{{> avatarSuggestion suggestions.avatars.gravatar}}
44-
{{> avatarSuggestion suggestions.avatars.facebook}}
45-
{{> avatarSuggestion suggestions.avatars.google}}
46-
{{> avatarSuggestion suggestions.avatars.github}}
47-
{{> avatarSuggestion suggestions.avatars.linkedin}}
42+
{{> avatarSuggestion suggestions.avatars.gravatar}}
43+
{{> avatarSuggestion suggestions.avatars.facebook}}
44+
{{> avatarSuggestion suggestions.avatars.google}}
45+
{{> avatarSuggestion suggestions.avatars.github}}
46+
{{> avatarSuggestion suggestions.avatars.linkedin}}
4847

49-
{{#unless suggestions.avatars.facebook}}
50-
{{> avatarSuggestionLogin 'facebook'}}
51-
{{/unless}}
52-
{{#unless suggestions.avatars.google}}
53-
{{> avatarSuggestionLogin 'google'}}
54-
{{/unless}}
55-
{{#unless suggestions.avatars.github}}
56-
{{> avatarSuggestionLogin 'github'}}
57-
{{/unless}}
58-
{{#unless suggestions.avatars.linkedin}}
59-
{{> avatarSuggestionLogin 'linkedin'}}
60-
{{/unless}}
48+
{{#unless suggestions.avatars.facebook}}
49+
{{> avatarSuggestionLogin 'facebook'}}
50+
{{/unless}}
51+
{{#unless suggestions.avatars.google}}
52+
{{> avatarSuggestionLogin 'google'}}
53+
{{/unless}}
54+
{{#unless suggestions.avatars.github}}
55+
{{> avatarSuggestionLogin 'github'}}
56+
{{/unless}}
57+
{{#unless suggestions.avatars.linkedin}}
58+
{{> avatarSuggestionLogin 'linkedin'}}
59+
{{/unless}}
6160

62-
<div class="avatar-suggestion-item">
63-
<div style="background-image: url({{upload.blob}});" class="avatar {{#unless upload}}question-mark icon-upload{{/unless}}">
64-
</div>
65-
<div class="action">
66-
{{#with upload}}
67-
<button type="button" class="button primary select-service">{{_ "Use_uploaded_avatar"}}</button>
68-
{{/with}}
69-
{{#unless upload}}
70-
<button type="button" class="button primary">{{_ "Select_file"}}
71-
<input type="file" class="avatar-file-input" accept="image/*">
72-
</button>
73-
{{/unless}}
74-
</div>
61+
<div class="avatar-suggestion-item">
62+
<div style="background-image: url({{upload.blob}});" class="avatar {{#unless upload}}question-mark icon-upload{{/unless}}">
63+
</div>
64+
<div class="action">
65+
{{#with upload}}
66+
<button type="button" class="button primary select-service">{{_ "Use_uploaded_avatar"}}</button>
67+
{{/with}}
68+
{{#unless upload}}
69+
<button type="button" class="button primary">{{_ "Select_file"}}
70+
<input type="file" class="avatar-file-input" accept="image/*">
71+
</button>
72+
{{/unless}}
7573
</div>
76-
{{else}}
77-
{{_ "Loading_suggestion"}}
78-
{{/if}}
79-
</div>
74+
</div>
75+
{{else}}
76+
{{_ "Loading_suggestion"}}
77+
{{/if}}
8078
</div>
8179
</div>
8280

@@ -85,5 +83,5 @@ <h2>{{_ "Select_an_avatar"}}</h2>
8583
<button data-loading-text="{{_ "Please_wait"}}..." class='button primary login'><span>{{_ "Use_this_username"}}</span></button>
8684
</div>
8785
{{/if}}
88-
</form>
86+
</div>
8987
</template>

‎client/views/main.coffee

-3
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,6 @@ Template.main.helpers
7171
hasUsername: ->
7272
return Meteor.userId()? and Meteor.user().username?
7373

74-
hasAvatar: ->
75-
return Meteor.userId()? and Meteor.user().avatarOrigin?
76-
7774
flexOpened: ->
7875
console.log 'layout.helpers flexOpened' if window.rocketDebug
7976
return 'flex-opened' if Session.equals('flexOpened', true)

‎client/views/main.html

+10-14
Original file line numberDiff line numberDiff line change
@@ -52,21 +52,17 @@
5252
{{#unless hasUsername}}
5353
{{> usernameLayout render='usernamePrompt'}}
5454
{{else}}
55-
{{#unless hasAvatar}}
56-
{{> usernameLayout render='avatarPrompt'}}
57-
{{else}}
58-
<div id="user-card-popover"></div>
59-
<div id="rocket-chat" class="menu-nav menu-closed">
60-
<div class="connection-status">
61-
{{> status}}
62-
</div>
63-
<main class="main-content {{flexOpened}} {{flexOpenedRTC1}} {{flexOpenedRTC2}}">
64-
{{> Template.dynamic template=center}}
65-
</main>
66-
{{> sideNav }}
55+
<div id="user-card-popover"></div>
56+
<div id="rocket-chat" class="menu-nav menu-closed">
57+
<div class="connection-status">
58+
{{> status}}
6759
</div>
68-
{{> audioNotification }}
69-
{{/unless}}
60+
<main class="main-content {{flexOpened}} {{flexOpenedRTC1}} {{flexOpenedRTC2}}">
61+
{{> Template.dynamic template=center}}
62+
</main>
63+
{{> sideNav }}
64+
</div>
65+
{{> audioNotification }}
7066
{{/unless}}
7167
{{/unless}}
7268
{{/unless}}

‎server/startup/avatar.coffee

+4-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,10 @@ Meteor.startup ->
3232
this.params =
3333
username: req.url.replace(/^\//, '').replace(/\?.*$/, '')
3434

35-
file = RocketChatFileAvatarInstance.getFileWithReadStream this.params.username
35+
if this.params.username[0] isnt '@'
36+
file = RocketChatFileAvatarInstance.getFileWithReadStream this.params.username
37+
else
38+
this.params.username = this.params.username.replace '@', ''
3639

3740
res.setHeader 'Content-Disposition', 'inline'
3841
res.setHeader 'Cache-Control', 'no-cache'

0 commit comments

Comments
 (0)