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() {
if (this.get("loading")) { return; }
// 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);
const self = this;
Discourse.Group.loadMembers(this.get("name"), this.get("members.length"), this.get("limit")).then(function (result) {
self.get("members").addObjects(result.members.map(member => Discourse.User.create(member)));
self.setProperties({
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)));
this.setProperties({
loading: false,
user_count: result.meta.total,
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 });
// If we click the avatar again, close it (unless its diff element on the screen).
if (target === this.get('cardTarget') && wasVisible) {
this.setProperties({ visible: false, username: null, cardTarget: null });
return;
if (wasVisible) {
if (target === this.get('cardTarget')) {
this.close();
return; // Same target, close it without loading the new user card
} else {
this.close();
}
}
if (username === currentUsername && this.get('userLoading') === username) {
@ -60,32 +63,28 @@ export default Ember.Controller.extend({
return;
}
this.set('topicPostCount', null);
this.setProperties({ user: null, userLoading: username, cardTarget: target });
this.setProperties({ user: null, userLoading: username, cardTarget: target, topicPostCount: null });
const args = { stats: false };
args.include_post_count_for = this.get('controllers.topic.model.id');
const self = this;
return Discourse.User.findByUsername(username, args).then(function(user) {
return Discourse.User.findByUsername(username, args).then((user) => {
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);
self.setProperties({ user, avatar: user, visible: true});
self.appEvents.trigger('usercard:shown');
}).catch(function(error) {
self.close();
this.setProperties({ user, avatar: user, visible: true });
this.appEvents.trigger('usercard:shown');
}).catch((error) => {
this.close();
throw error;
}).finally(function() {
self.set('userLoading', null);
}).finally(() => {
this.set('userLoading', null);
});
},
close() {
this.setProperties({ visible: false, cardTarget: null });
this.setProperties({ visible: false, username: null, cardTarget: null });
},
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'),
_setup: function() {
const self = this;
afterTransition(self.$(), this._hide.bind(this));
afterTransition(this.$(), this._hide.bind(this));
$('html').off(clickOutsideEventName)
.on(clickOutsideEventName, function(e) {
if (self.get('controller.visible')) {
.on(clickOutsideEventName, (e) => {
if (this.get('controller.visible')) {
const $target = $(e.target);
if ($target.closest('[data-user-card]').data('userCard') ||
$target.closest('a.mention').length > 0 ||
@ -41,25 +39,28 @@ export default Discourse.View.extend(CleansUp, {
return;
}
self.get('controller').close();
this.get('controller').close();
}
return true;
});
var expand = function(username, $target) {
const postId = $target.parents('article').data('post-id');
self.get('controller')
.show(username, postId, $target[0])
.then(function() {
self._willShow($target);
}).catch(function() {
self._hide();
});
const expand = (username, $target) => {
const postId = $target.parents('article').data('post-id'),
user = this.get('controller').show(username, postId, $target[0]);
if (user !== undefined) {
user.then(() => {
this._willShow($target);
}).catch(() => {
this._hide();
});
} else {
this._hide();
}
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; }
const $target = $(e.currentTarget),
@ -67,7 +68,7 @@ export default Discourse.View.extend(CleansUp, {
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; }
const $target = $(e.target),
@ -89,9 +90,8 @@ export default Discourse.View.extend(CleansUp, {
_willShow(target) {
if (!target) { return; }
const self = this,
width = this.$().width();
Em.run.schedule('afterRender', function() {
const width = this.$().width();
Em.run.schedule('afterRender', () => {
if (target) {
let position = target.offset();
if (position) {
@ -100,11 +100,11 @@ export default Discourse.View.extend(CleansUp, {
const overage = ($(window).width() - 50) - (position.left + width);
if (overage < 0) {
position.left += overage;
position.top += target.height() + 8;
position.top += target.height() + 48;
}
position.top -= $('#main-outlet').offset().top;
self.$().css(position);
this.$().css(position);
}
}
});
@ -112,7 +112,7 @@ export default Discourse.View.extend(CleansUp, {
_hide() {
if (!this.get('controller.visible')) {
this.$().css({ left: -9999, top: -9999 });
this.$().css({left: -9999, top: -9999});
}
},