codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-23 23:58:31 -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.setProperties({visible: true, username: username});
this.set('username', username);
// If we click the avatar again, close it.
if (username === currentUsername && wasVisible) {
@ -67,8 +67,7 @@ export default ObjectController.extend({
var self = this;
self.set('user', null);
Discourse.User.findByUsername(username).then(function (user) {
self.set('user', user);
self.set('avatar', user);
self.setProperties({ user: user, avatar: user, visible: true});
});
},

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

@ -1,6 +1,4 @@
<div class="card-content">
{{#if username}}
{{#link-to 'user' user}}{{bound-avatar avatar "huge"}}{{/link-to}}
<div class="names">
@ -23,60 +21,56 @@
</span>
</div>
{{#if user}}
<ul class="usercard-controls">
{{#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>
{{/if}}
<li>{{#link-to 'user' user class="btn"}}{{fa-icon "user"}}{{i18n user.profile}}{{/link-to}}</li>
{{#if showFilter}}
<li><a class='btn' {{action "togglePosts" user}}>{{fa-icon "filter"}}{{i18n topic.filter_to username="username" post_count="participant.post_count"}}</a></li>
{{/if}}
{{#if hasUserFilters}}
<li><a class='btn' {{action "cancelFilter"}}>{{fa-icon "times"}}{{i18n topic.filters.cancel}}</a></li>
{{/if}}
</ul>
{{#if isSuspended}}
<div class='suspended'>
{{fa-icon "ban"}}
<b>{{i18n user.suspended_notice date="user.suspendedTillDate"}}</b><br/>
<b>{{i18n user.suspended_reason}}</b> {{user.suspend_reason}}
</div>
{{else}}
{{#if user.bio_cooked}}<div class='bio'>{{text-overflow class="overflow" text=user.bio_cooked}}</div>{{/if}}
<ul class="usercard-controls">
{{#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>
{{/if}}
{{#if user.card_badge}}
{{#link-to 'badges.show' user.card_badge class="card-badge" title=user.card_badge.name}}
{{icon-or-image user.card_badge.image title=user.card_badge.name}}
{{/link-to}}
<li>{{#link-to 'user' user class="btn"}}{{fa-icon "user"}}{{i18n user.profile}}{{/link-to}}</li>
{{#if showFilter}}
<li><a class='btn' {{action "togglePosts" user}}>{{fa-icon "filter"}}{{i18n topic.filter_to username="username" post_count="participant.post_count"}}</a></li>
{{/if}}
<div class="metadata">
<h3><span class='desc'>{{i18n last_post}}</span> {{format-date path="user.last_posted_at" leaveAgo="true"}} </h3>
<h3><span class='desc'>{{i18n joined}}</span> {{format-date path="user.created_at" leaveAgo="true"}}</h3>
{{#if user.githubProfileUrl}}
<h3><a href="{{unbound user.githubProfileUrl}}">{{i18n user.github_profile}}</a></h3>
{{#if hasUserFilters}}
<li><a class='btn' {{action "cancelFilter"}}>{{fa-icon "times"}}{{i18n topic.filters.cancel}}</a></li>
{{/if}}
</ul>
{{#if isSuspended}}
<div class='suspended'>
{{fa-icon "ban"}}
<b>{{i18n user.suspended_notice date="user.suspendedTillDate"}}</b><br/>
<b>{{i18n user.suspended_reason}}</b> {{user.suspend_reason}}
</div>
{{else}}
{{#if user.bio_cooked}}<div class='bio'>{{text-overflow class="overflow" text=user.bio_cooked}}</div>{{/if}}
{{/if}}
{{#if user.card_badge}}
{{#link-to 'badges.show' user.card_badge class="card-badge" title=user.card_badge.name}}
{{icon-or-image user.card_badge.image title=user.card_badge.name}}
{{/link-to}}
{{/if}}
<div class="metadata">
<h3><span class='desc'>{{i18n last_post}}</span> {{format-date path="user.last_posted_at" leaveAgo="true"}} </h3>
<h3><span class='desc'>{{i18n joined}}</span> {{format-date path="user.created_at" leaveAgo="true"}}</h3>
{{#if user.githubProfileUrl}}
<h3><a href="{{unbound user.githubProfileUrl}}">{{i18n user.github_profile}}</a></h3>
{{/if}}
</div>
{{#if showBadges}}
<div class="badge-section">
{{#each user.featured_user_badges}}
{{user-badge badge=badge}}
{{/each}}
{{#if showMoreBadges}}
{{#link-to 'user.badges' user class="btn more-user-badges"}}
{{i18n badges.more_badges count=moreBadgesCount}}
{{/link-to}}
{{/if}}
</div>
{{#if showBadges}}
<div class="badge-section">
{{#each user.featured_user_badges}}
{{user-badge badge=badge}}
{{/each}}
{{#if showMoreBadges}}
{{#link-to 'user.badges' user class="btn more-user-badges"}}
{{i18n badges.more_badges count=moreBadgesCount}}
{{/link-to}}
{{/if}}
</div>
{{/if}}
{{/if}}
{{/if}}
</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, {
elementId: 'user-card',
classNameBindings: ['controller.visible::hidden', 'controller.showBadges'],
classNameBindings: ['controller.showBadges'],
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() {
var url = this.get('controller.user.card_background');
if (!this.get('allowBackgrounds')) { return; }