codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-27 17:46:05 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

UX: Let's try a fade in when the user card is shown

Browse source
This commit is contained in:
Robin Ward 2014-11-04 13:26:33 -05:00
parent e96630c6f4
commit d4d282e919
3 changed files with 61 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/assets/javascripts/discourse/controllers/user-card.js.es6
View file

@ -48,7 +48,7 @@ export default ObjectController.extend({
this.set('avatar', null); this.set('avatar', null);
} }
this.setProperties({visible: true, username: username}); this.set('username', username);
// If we click the avatar again, close it. // If we click the avatar again, close it.
if (username === currentUsername && wasVisible) { if (username === currentUsername && wasVisible) {
@ -67,8 +67,7 @@ export default ObjectController.extend({
var self = this; var self = this;
self.set('user', null); self.set('user', null);
Discourse.User.findByUsername(username).then(function (user) { Discourse.User.findByUsername(username).then(function (user) {
self.set('user', user); self.setProperties({ user: user, avatar: user, visible: true});
self.set('avatar', user);
}); });
}, },

6
app/assets/javascripts/discourse/templates/user-card.hbs
View file

@ -1,6 +1,4 @@
<div class="card-content"> <div class="card-content">
{{#if username}}
{{#link-to 'user' user}}{{bound-avatar avatar "huge"}}{{/link-to}} {{#link-to 'user' user}}{{bound-avatar avatar "huge"}}{{/link-to}}
<div class="names"> <div class="names">
@ -23,7 +21,6 @@
</span> </span>
</div> </div>
{{#if user}}
<ul class="usercard-controls"> <ul class="usercard-controls">
{{#if user.can_send_private_message_to_user}} {{#if user.can_send_private_message_to_user}}
<li><a class='btn btn-primary' {{action "composePrivateMessage" user}}>{{fa-icon "envelope"}}{{i18n user.private_message}}</a></li> <li><a class='btn btn-primary' {{action "composePrivateMessage" user}}>{{fa-icon "envelope"}}{{i18n user.private_message}}</a></li>
@ -76,7 +73,4 @@
{{/if}} {{/if}}
</div> </div>
{{/if}} {{/if}}
{{/if}}
{{/if}}
</div> </div>

15
app/assets/javascripts/discourse/views/user-card.js.es6
View file

@ -6,9 +6,22 @@ var clickOutsideEventName = "mousedown.outside-user-card",
export default Discourse.View.extend(CleansUp, { export default Discourse.View.extend(CleansUp, {
elementId: 'user-card', elementId: 'user-card',
classNameBindings: ['controller.visible::hidden', 'controller.showBadges'], classNameBindings: ['controller.showBadges'],
allowBackgrounds: Discourse.computed.setting('allow_profile_backgrounds'), allowBackgrounds: Discourse.computed.setting('allow_profile_backgrounds'),
_visibleChanged: function() {
var vis = this.get('controller.visible'),
$this = this.$();
if (!$this) { return; }
if (vis) {
this.$().fadeIn('fast');
} else {
this.$().fadeOut('fast');
}
}.observes('controller.visible'),
addBackground: function() { addBackground: function() {
var url = this.get('controller.user.card_background'); var url = this.get('controller.user.card_background');
if (!this.get('allowBackgrounds')) { return; } if (!this.get('allowBackgrounds')) { return; }