apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve view to change avatar

Browse Source
pull/358/head
Rodrigo Nascimento 11 years ago
parent 381357ebaa
commit f97e7ea39e
10 changed files with 109 additions and 75 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      client/lib/avatar.coffee
  2. 5
      client/routes/router.coffee
  3. 30
      client/stylesheets/base.less
  4. 2
      client/views/app/sideNav/userStatus.coffee
  5. 5
      client/views/avatar/avatar.coffee
  6. 14
      client/views/avatar/prompt.coffee
  7. 94
      client/views/avatar/prompt.html
  8. 3
      client/views/main.coffee
  9. 24
      client/views/main.html
  10. 5
      server/startup/avatar.coffee

2
client/lib/avatar.coffee
Unescape View File

@ -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

5
client/routes/router.coffee
Unescape View File

@ -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'

30
client/stylesheets/base.less
Unescape View File

@ -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;

2
client/views/app/sideNav/userStatus.coffee
Unescape View File

@ -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"

5
client/views/avatar/avatar.coffee
Unescape View File

@ -1,8 +1,5 @@
Template.avatar.helpers
imageUrl: ->
if this.preventImage?
return
username = this.username
if not username? and this.userId?
username = Meteor.users.findOne(this.userId)?.username
@ -10,6 +7,8 @@ Template.avatar.helpers
if not username?
return
Session.get "avatar_random_#{username}"
url = getAvatarUrlFromUsername(username)
return "background-image:url(#{url});"

14
client/views/avatar/prompt.coffee
Unescape View File

@ -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)}"

94
client/views/avatar/prompt.html
Unescape View File

@ -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 @@
<button data-loading-text="{{_ "Please_wait"}}..." class='button primary login'><span>{{_ "Use_this_username"}}</span></button>
</div>
{{/if}}
</form>
</div>
</template>

3
client/views/main.coffee
Unescape View File

@ -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)

24
client/views/main.html
Unescape View File

@ -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}}

5
server/startup/avatar.coffee
Unescape View File

@ -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'

Write Preview
Loading…
Cancel
Save