Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3285 from fantasticfears/user-card-animation 

user card animation when there is an active user card
This commit is contained in:
Régis Hanol 2015-05-18 21:45:26 +02:00
parent 72d46ee337 4ac40145d8
commit a69451c75d
3 changed files with 44 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/discourse/controllers/group/members.js.es6
View File

@ -5,15 +5,13 @@ export default Ember.ObjectController.extend({
loadMore() { loadMore() {
if (this.get("loading")) { return; } if (this.get("loading")) { return; }
// we've reached the end // we've reached the end
if (this.get("members.length") >= this.get("user_count")) { return; } if (this.get("model.members.length") >= this.get("user_count")) { return; }
this.set("loading", true); this.set("loading", true);
const self = this; Discourse.Group.loadMembers(this.get("name"), this.get("model.members.length"), this.get("limit")).then(result => {
this.get("model.members").addObjects(result.members.map(member => Discourse.User.create(member)));
Discourse.Group.loadMembers(this.get("name"), this.get("members.length"), this.get("limit")).then(function (result) { this.setProperties({
self.get("members").addObjects(result.members.map(member => Discourse.User.create(member)));
self.setProperties({
loading: false, loading: false,
user_count: result.meta.total, user_count: result.meta.total,
limit: result.meta.limit, limit: result.meta.limit,

35
app/assets/javascripts/discourse/controllers/user-card.js.es6
View File

@ -49,10 +49,13 @@ export default Ember.Controller.extend({
this.setProperties({ avatar: null, post: post, username: username }); this.setProperties({ avatar: null, post: post, username: username });
// If we click the avatar again, close it (unless its diff element on the screen). if (wasVisible) {
if (target === this.get('cardTarget') && wasVisible) { if (target === this.get('cardTarget')) {
this.setProperties({ visible: false, username: null, cardTarget: null }); this.close();
return; return; // Same target, close it without loading the new user card
} else {
this.close();
}
} }
if (username === currentUsername && this.get('userLoading') === username) { if (username === currentUsername && this.get('userLoading') === username) {
@ -60,32 +63,28 @@ export default Ember.Controller.extend({
return; return;
} }
this.set('topicPostCount', null); this.setProperties({ user: null, userLoading: username, cardTarget: target, topicPostCount: null });
this.setProperties({ user: null, userLoading: username, cardTarget: target });
const args = { stats: false }; const args = { stats: false };
args.include_post_count_for = this.get('controllers.topic.model.id'); args.include_post_count_for = this.get('controllers.topic.model.id');
const self = this; return Discourse.User.findByUsername(username, args).then((user) => {
return Discourse.User.findByUsername(username, args).then(function(user) {
if (user.topic_post_count) { if (user.topic_post_count) {
self.set('topicPostCount', user.topic_post_count[args.include_post_count_for]); this.set('topicPostCount', user.topic_post_count[args.include_post_count_for]);
} }
user = Discourse.User.create(user); user = Discourse.User.create(user);
self.setProperties({ user, avatar: user, visible: true}); this.setProperties({ user, avatar: user, visible: true });
self.appEvents.trigger('usercard:shown'); this.appEvents.trigger('usercard:shown');
}).catch(function(error) { }).catch((error) => {
self.close(); this.close();
throw error; throw error;
}).finally(function() { }).finally(() => {
self.set('userLoading', null); this.set('userLoading', null);
}); });
}, },
close() { close() {
this.setProperties({ visible: false, cardTarget: null }); this.setProperties({ visible: false, username: null, cardTarget: null });
}, },
actions: { actions: {

46
app/assets/javascripts/discourse/views/user-card.js.es6
View File

@ -27,13 +27,11 @@ export default Discourse.View.extend(CleansUp, {
}.observes('controller.user.card_background'), }.observes('controller.user.card_background'),
_setup: function() { _setup: function() {
const self = this; afterTransition(this.$(), this._hide.bind(this));
afterTransition(self.$(), this._hide.bind(this));
$('html').off(clickOutsideEventName) $('html').off(clickOutsideEventName)
.on(clickOutsideEventName, function(e) { .on(clickOutsideEventName, (e) => {
if (self.get('controller.visible')) { if (this.get('controller.visible')) {
const $target = $(e.target); const $target = $(e.target);
if ($target.closest('[data-user-card]').data('userCard') || if ($target.closest('[data-user-card]').data('userCard') ||
$target.closest('a.mention').length > 0 || $target.closest('a.mention').length > 0 ||
@ -41,25 +39,28 @@ export default Discourse.View.extend(CleansUp, {
return; return;
} }
self.get('controller').close(); this.get('controller').close();
} }
return true; return true;
}); });
var expand = function(username, $target) { const expand = (username, $target) => {
const postId = $target.parents('article').data('post-id'); const postId = $target.parents('article').data('post-id'),
self.get('controller') user = this.get('controller').show(username, postId, $target[0]);
.show(username, postId, $target[0]) if (user !== undefined) {
.then(function() { user.then(() => {
self._willShow($target); this._willShow($target);
}).catch(function() { }).catch(() => {
self._hide(); this._hide();
}); });
} else {
this._hide();
}
return false; return false;
}; };
$('#main-outlet').on(clickDataExpand, '[data-user-card]', function(e) { $('#main-outlet').on(clickDataExpand, '[data-user-card]', (e) => {
if (e.ctrlKey || e.metaKey) { return; } if (e.ctrlKey || e.metaKey) { return; }
const $target = $(e.currentTarget), const $target = $(e.currentTarget),
@ -67,7 +68,7 @@ export default Discourse.View.extend(CleansUp, {
return expand(username, $target); return expand(username, $target);
}); });
$('#main-outlet').on(clickMention, 'a.mention', function(e) { $('#main-outlet').on(clickMention, 'a.mention', (e) => {
if (e.ctrlKey || e.metaKey) { return; } if (e.ctrlKey || e.metaKey) { return; }
const $target = $(e.target), const $target = $(e.target),
@ -89,9 +90,8 @@ export default Discourse.View.extend(CleansUp, {
_willShow(target) { _willShow(target) {
if (!target) { return; } if (!target) { return; }
const self = this, const width = this.$().width();
width = this.$().width(); Em.run.schedule('afterRender', () => {
Em.run.schedule('afterRender', function() {
if (target) { if (target) {
let position = target.offset(); let position = target.offset();
if (position) { if (position) {
@ -100,11 +100,11 @@ export default Discourse.View.extend(CleansUp, {
const overage = ($(window).width() - 50) - (position.left + width); const overage = ($(window).width() - 50) - (position.left + width);
if (overage < 0) { if (overage < 0) {
position.left += overage; position.left += overage;
position.top += target.height() + 8; position.top += target.height() + 48;
} }
position.top -= $('#main-outlet').offset().top; position.top -= $('#main-outlet').offset().top;
self.$().css(position); this.$().css(position);
} }
} }
}); });
@ -112,7 +112,7 @@ export default Discourse.View.extend(CleansUp, {
_hide() { _hide() {
if (!this.get('controller.visible')) { if (!this.get('controller.visible')) {
this.$().css({ left: -9999, top: -9999 }); this.$().css({left: -9999, top: -9999});
} }
}, },