IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-23 01:16:38 -06:00
Code Issues Packages Projects Releases Wiki Activity

DEV: Minor cleanup of user-card code (#27436)

Browse Source
This commit is contained in:
Jarek Radosz 2024-06-14 18:21:17 +02:00 committed by GitHub
parent 49fdccbb1d
commit 831b1fee36
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 99 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/javascripts/discourse/app/components/group-card-contents.hbs
View File

@ -16,8 +16,8 @@
<div class="card-row first-row"> <div class="card-row first-row">
<div class="group-card-avatar"> <div class="group-card-avatar">
<a <a
{{on "click" this.handleShowGroup}}
href={{this.groupPath}} href={{this.groupPath}}
{{on "click" (fn this.handleShowGroup this.group)}}
class="card-huge-avatar" class="card-huge-avatar"
> >
<AvatarFlair <AvatarFlair
@ -32,8 +32,8 @@
<span> <span>
<h1 class={{this.group.name}}> <h1 class={{this.group.name}}>
<a <a
{{on "click" this.handleShowGroup}}
href={{this.groupPath}} href={{this.groupPath}}
{{on "click" (fn this.handleShowGroup this.group)}}
class="group-page-link" class="group-page-link"
>{{this.group.name}}</a> >{{this.group.name}}</a>
</h1> </h1>
@ -84,8 +84,8 @@
{{/each}} {{/each}}
{{#if this.showMoreMembers}} {{#if this.showMoreMembers}}
<a <a
{{on "click" this.handleShowGroup}}
href={{this.groupPath}} href={{this.groupPath}}
{{on "click" (fn this.handleShowGroup this.group)}}
class="more-members-link" class="more-members-link"
> >
<span class="more-members-count">+{{this.moreMembersCount}} <span class="more-members-count">+{{this.moreMembersCount}}

46
app/assets/javascripts/discourse/app/components/group-card-contents.js
View File

@ -2,7 +2,6 @@ import Component from "@ember/component";
import { action } from "@ember/object"; import { action } from "@ember/object";
import { alias, gt } from "@ember/object/computed"; import { alias, gt } from "@ember/object/computed";
import { service } from "@ember/service"; import { service } from "@ember/service";
import { Promise } from "rsvp";
import { setting } from "discourse/lib/computed"; import { setting } from "discourse/lib/computed";
import { wantsNewWindow } from "discourse/lib/intercept-click"; import { wantsNewWindow } from "discourse/lib/intercept-click";
import { groupPath } from "discourse/lib/url"; import { groupPath } from "discourse/lib/url";
@ -51,24 +50,26 @@ export default Component.extend(CardContentsBase, CleansUp, {
return groupPath(group.name); return groupPath(group.name);
}, },
_showCallback(username, $target) { async _showCallback(username, $target) {
this._positionCard($target); this._positionCard($target);
this.setProperties({ visible: true, loading: true }); this.setProperties({ visible: true, loading: true });
return this.store try {
.find("group", username) const group = await this.store.find("group", username);
.then((group) => { this.setProperties({ group });
this.setProperties({ group });
if (!group.flair_url && !group.flair_bg_color) { if (!group.flair_url && !group.flair_bg_color) {
group.set("flair_url", "fa-users"); group.set("flair_url", "fa-users");
} }
return group.can_see_members &&
group.members.length < maxMembersToDisplay if (group.can_see_members && group.members.length < maxMembersToDisplay) {
? group.reloadMembers({ limit: maxMembersToDisplay }, true) return group.reloadMembers({ limit: maxMembersToDisplay }, true);
: Promise.resolve(); }
}) } catch {
.catch(() => this._close()) this._close();
.finally(() => this.set("loading", null)); } finally {
this.set("loading", null);
}
}, },
_close() { _close() {
@ -88,7 +89,7 @@ export default Component.extend(CardContentsBase, CleansUp, {
}, },
@action @action
handleShowGroup(group, event) { handleShowGroup(event) {
if (wantsNewWindow(event)) { if (wantsNewWindow(event)) {
return; return;
} }
@ -96,15 +97,14 @@ export default Component.extend(CardContentsBase, CleansUp, {
event.preventDefault(); event.preventDefault();
// Invokes `showGroup` argument. Convert to `this.args.showGroup` when // Invokes `showGroup` argument. Convert to `this.args.showGroup` when
// refactoring this to a glimmer component. // refactoring this to a glimmer component.
this.showGroup(group); this.showGroup(this.group);
this._close(); this._close();
}, },
actions: { actions: {
cancelFilter() { cancelFilter() {
const postStream = this.postStream; this.postStream.cancelFilter();
postStream.cancelFilter(); this.postStream.refresh();
postStream.refresh();
this._close(); this._close();
}, },
@ -114,9 +114,5 @@ export default Component.extend(CardContentsBase, CleansUp, {
hasGroups: true, hasGroups: true,
}); });
}, },
showGroup(group) {
this.handleShowGroup(group);
},
}, },
}); });

9
app/assets/javascripts/discourse/app/components/user-card-contents.hbs
View File

@ -35,8 +35,8 @@
}}</span> }}</span>
{{else}} {{else}}
<a <a
{{on "click" this.handleShowUser}}
href={{this.user.path}} href={{this.user.path}}
{{on "click" (fn this.handleShowUser this.user)}}
class="card-huge-avatar" class="card-huge-avatar"
>{{bound-avatar this.user "huge"}}</a> >{{bound-avatar this.user "huge"}}</a>
{{/if}} {{/if}}
@ -70,8 +70,8 @@
</span> </span>
{{else}} {{else}}
<a <a
{{on "click" this.handleShowUser}}
href={{this.user.path}} href={{this.user.path}}
{{on "click" (fn this.handleShowUser this.user)}}
class="user-profile-link" class="user-profile-link"
> >
<span <span
@ -91,10 +91,7 @@
<PluginOutlet <PluginOutlet
@name="user-card-after-username" @name="user-card-after-username"
@connectorTagName="div" @connectorTagName="div"
@outletArgs={{hash @outletArgs={{hash user=this.user showUser=this.handleShowUser}}
user=this.user
showUser=(fn this.handleShowUser this.user)
}}
/> />
{{#if this.nameFirst}} {{#if this.nameFirst}}
<h2 class="username">{{this.user.username}}</h2> <h2 class="username">{{this.user.username}}</h2>

56
app/assets/javascripts/discourse/app/components/user-card-contents.js
View File

@ -170,14 +170,13 @@ export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
return; return;
} }
const thisElem = this.element; if (!this.element) {
if (!thisElem) {
return; return;
} }
const url = this.get("user.card_background_upload_url"); const url = this.get("user.card_background_upload_url");
const bg = isEmpty(url) ? "" : `url(${getURLWithCDN(url)})`; const bg = isEmpty(url) ? "" : `url(${getURLWithCDN(url)})`;
thisElem.style.backgroundImage = bg; this.element.style.backgroundImage = bg;
}, },
@discourseComputed("user.primary_group_name") @discourseComputed("user.primary_group_name")
@ -190,7 +189,7 @@ export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
return profileHidden || inactive; return profileHidden || inactive;
}, },
_showCallback(username, $target) { async _showCallback(username, $target) {
this._positionCard($target); this._positionCard($target);
this.setProperties({ visible: true, loading: true }); this.setProperties({ visible: true, loading: true });
@ -199,26 +198,28 @@ export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
include_post_count_for: this.get("topic.id"), include_post_count_for: this.get("topic.id"),
}; };
return User.findByUsername(username, args) try {
.then((user) => { const user = await User.findByUsername(username, args);
if (user.topic_post_count) {
this.set( if (user.topic_post_count) {
"topicPostCount", this.set(
user.topic_post_count[args.include_post_count_for] "topicPostCount",
); user.topic_post_count[args.include_post_count_for]
} );
this.setProperties({ user }); }
this.user.statusManager.trackStatus(); this.setProperties({ user });
return user; this.user.statusManager.trackStatus();
})
.catch(() => this._close()) return user;
.finally(() => this.set("loading", null)); } catch {
this._close();
} finally {
this.set("loading", null);
}
}, },
_close() { _close() {
if (this.user) { this.user?.statusManager.stopTrackingStatus();
this.user.statusManager.stopTrackingStatus();
}
this.setProperties({ this.setProperties({
user: null, user: null,
@ -233,7 +234,7 @@ export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
}, },
@action @action
handleShowUser(user, event) { handleShowUser(event) {
if (wantsNewWindow(event)) { if (wantsNewWindow(event)) {
return; return;
} }
@ -241,7 +242,7 @@ export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
event.preventDefault(); event.preventDefault();
// Invokes `showUser` argument. Convert to `this.args.showUser` when // Invokes `showUser` argument. Convert to `this.args.showUser` when
// refactoring this to a glimmer component. // refactoring this to a glimmer component.
this.showUser(user); this.showUser(this.user);
this._close(); this._close();
}, },
@ -256,9 +257,8 @@ export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
}, },
cancelFilter() { cancelFilter() {
const postStream = this.postStream; this.postStream.cancelFilter();
postStream.cancelFilter(); this.postStream.refresh();
postStream.refresh();
this._close(); this._close();
}, },
@ -272,10 +272,6 @@ export default Component.extend(CardContentsBase, CanCheckEmails, CleansUp, {
this._close(); this._close();
}, },
showUser(user) {
this.handleShowUser(user);
},
checkEmail(user) { checkEmail(user) {
user.checkEmail(); user.checkEmail();
}, },

48
app/assets/javascripts/discourse/app/mixins/card-contents-base.js
View File

@ -11,6 +11,8 @@ import discourseLater from "discourse-common/lib/later";
import { bind } from "discourse-common/utils/decorators"; import { bind } from "discourse-common/utils/decorators";
const DEFAULT_SELECTOR = "#main-outlet"; const DEFAULT_SELECTOR = "#main-outlet";
const AVATAR_OVERFLOW_SIZE = 44;
const MOBILE_SCROLL_EVENT = "scroll.mobile-card-cloak";
let _cardClickListenerSelectors = [DEFAULT_SELECTOR]; let _cardClickListenerSelectors = [DEFAULT_SELECTOR];
@ -23,8 +25,12 @@ export function resetCardClickListenerSelector() {
} }
export default Mixin.create({ export default Mixin.create({
router: service(), appEvents: service(),
currentUser: service(),
menu: service(), menu: service(),
router: service(),
site: service(),
siteSettings: service(),
elementId: null, //click detection added for data-{elementId} elementId: null, //click detection added for data-{elementId}
triggeringLinkClass: null, //the <a> classname where this card should appear triggeringLinkClass: null, //the <a> classname where this card should appear
@ -100,14 +106,11 @@ export default Mixin.create({
this._super(...arguments); this._super(...arguments);
const id = this.elementId; const id = this.elementId;
const triggeringLinkClass = this.triggeringLinkClass; const previewClickEvent = `click.discourse-preview-${id}-${this.triggeringLinkClass}`;
const previewClickEvent = `click.discourse-preview-${id}-${triggeringLinkClass}`;
const mobileScrollEvent = "scroll.mobile-card-cloak";
this.setProperties({ this.setProperties({
boundCardClickHandler: this._cardClickHandler, boundCardClickHandler: this._cardClickHandler,
previewClickEvent, previewClickEvent,
mobileScrollEvent,
}); });
document.addEventListener("mousedown", this._clickOutsideHandler); document.addEventListener("mousedown", this._clickOutsideHandler);
@ -177,18 +180,15 @@ export default Mixin.create({
}, },
_bindMobileScroll() { _bindMobileScroll() {
const mobileScrollEvent = this.mobileScrollEvent;
const onScroll = () => { const onScroll = () => {
throttle(this, this._close, 1000); throttle(this, this._close, 1000);
}; };
$(window).on(mobileScrollEvent, onScroll); $(window).on(MOBILE_SCROLL_EVENT, onScroll);
}, },
_unbindMobileScroll() { _unbindMobileScroll() {
const mobileScrollEvent = this.mobileScrollEvent; $(window).off(MOBILE_SCROLL_EVENT);
$(window).off(mobileScrollEvent);
}, },
_previewClick($target) { _previewClick($target) {
@ -201,14 +201,13 @@ export default Mixin.create({
return; return;
} }
const avatarOverflowSize = 44;
if (this.site.desktopView) { if (this.site.desktopView) {
this._menuInstance = await this.menu.show(target[0], { this._menuInstance = await this.menu.show(target[0], {
content: this.element, content: this.element,
autoUpdate: false, autoUpdate: false,
identifier: "card", identifier: "card",
padding: { padding: {
top: 10 + avatarOverflowSize + headerOffset(), top: 10 + AVATAR_OVERFLOW_SIZE + headerOffset(),
right: 10, right: 10,
bottom: 10, bottom: 10,
left: 10, left: 10,
@ -222,7 +221,7 @@ export default Mixin.create({
computePosition: (content) => { computePosition: (content) => {
content.style.left = "10px"; content.style.left = "10px";
content.style.right = "10px"; content.style.right = "10px";
content.style.top = 10 + avatarOverflowSize + "px"; content.style.top = 10 + AVATAR_OVERFLOW_SIZE + "px";
}, },
}); });
} }
@ -299,21 +298,18 @@ export default Mixin.create({
@bind @bind
_clickOutsideHandler(event) { _clickOutsideHandler(event) {
if (this.visible) { if (
if ( !this.visible ||
event.target event.target
.closest(`[data-${this.elementId}]`) .closest(`[data-${this.elementId}]`)
?.getAttribute(`data-${this.elementId}`) || ?.getAttribute(`data-${this.elementId}`) ||
event.target.closest(`a.${this.triggeringLinkClass}`) || event.target.closest(`a.${this.triggeringLinkClass}`) ||
event.target.closest(`#${this.elementId}`) event.target.closest(`#${this.elementId}`)
) { ) {
return; return;
}
this._close();
} }
return true; this._close();
}, },
@bind @bind

62
app/assets/javascripts/discourse/tests/acceptance/user-card-test.js
View File

@ -2,11 +2,7 @@ import { getOwner } from "@ember/owner";
import { click, visit } from "@ember/test-helpers"; import { click, visit } from "@ember/test-helpers";
import { test } from "qunit"; import { test } from "qunit";
import userFixtures from "discourse/tests/fixtures/user-fixtures"; import userFixtures from "discourse/tests/fixtures/user-fixtures";
import { import { acceptance } from "discourse/tests/helpers/qunit-helpers";
acceptance,
exists,
query,
} from "discourse/tests/helpers/qunit-helpers";
import { cloneJSON } from "discourse-common/lib/object"; import { cloneJSON } from "discourse-common/lib/object";
import I18n from "discourse-i18n"; import I18n from "discourse-i18n";
@ -21,10 +17,11 @@ acceptance("User Card - Show Local Time", function (needs) {
await visit("/t/internationalization-localization/280"); await visit("/t/internationalization-localization/280");
await click('a[data-user-card="charlie"]'); await click('a[data-user-card="charlie"]');
assert.notOk( assert
exists(".user-card .local-time"), .dom(".user-card .local-time")
"it does not show the local time if the user card returns a null/undefined timezone for another user" .doesNotExist(
); "it does not show the local time if the user card returns a null/undefined timezone for another user"
);
}); });
}); });
@ -42,11 +39,10 @@ acceptance(
await visit("/t/this-is-a-test-topic/9"); await visit("/t/this-is-a-test-topic/9");
await click('a[data-user-card="eviltrout"]'); await click('a[data-user-card="eviltrout"]');
assert.equal( assert
query(".user-card h1.username .name-username-wrapper").innerText, .dom(".user-card h1.username .name-username-wrapper")
"eviltrout" .hasText("eviltrout");
); assert.dom(".user-card h2.full-name").hasText("Robin Ward");
assert.equal(query(".user-card h2.full-name").innerText, "Robin Ward");
}); });
} }
); );
@ -65,11 +61,10 @@ acceptance(
await visit("/t/this-is-a-test-topic/9"); await visit("/t/this-is-a-test-topic/9");
await click('a[data-user-card="eviltrout"]'); await click('a[data-user-card="eviltrout"]');
assert.equal( assert
query(".user-card h1.full-name .name-username-wrapper").innerText, .dom(".user-card h1.full-name .name-username-wrapper")
"Robin Ward" .hasText("Robin Ward");
); assert.dom(".user-card h2.username").hasText("eviltrout");
assert.equal(query(".user-card h2.username").innerText, "eviltrout");
}); });
} }
); );
@ -88,7 +83,7 @@ acceptance("User Card - User Status", function (needs) {
await visit("/t/internationalization-localization/280"); await visit("/t/internationalization-localization/280");
await click('a[data-user-card="charlie"]'); await click('a[data-user-card="charlie"]');
assert.ok(exists(".user-card h3.user-status")); assert.dom(".user-card h3.user-status").exists();
}); });
test("doesn't show user status if disabled", async function (assert) { test("doesn't show user status if disabled", async function (assert) {
@ -97,7 +92,7 @@ acceptance("User Card - User Status", function (needs) {
await visit("/t/internationalization-localization/280"); await visit("/t/internationalization-localization/280");
await click('a[data-user-card="charlie"]'); await click('a[data-user-card="charlie"]');
assert.notOk(exists(".user-card h3.user-status")); assert.dom(".user-card h3.user-status").doesNotExist();
}); });
}); });
@ -123,14 +118,10 @@ acceptance("User Card - Hidden Profile", function (needs) {
await visit("/t/this-is-a-test-topic/9"); await visit("/t/this-is-a-test-topic/9");
await click('a[data-user-card="eviltrout"]'); await click('a[data-user-card="eviltrout"]');
assert.equal( assert.dom(".user-card .name-username-wrapper").hasText("eviltrout");
query(".user-card .name-username-wrapper").innerText, assert
"eviltrout" .dom(".user-card .profile-hidden")
); .hasText(I18n.t("user.profile_hidden"));
assert.equal(
query(".user-card .profile-hidden").innerText,
I18n.t("user.profile_hidden")
);
}); });
}); });
@ -154,14 +145,9 @@ acceptance("User Card - Inactive user", function (needs) {
await visit("/t/this-is-a-test-topic/9"); await visit("/t/this-is-a-test-topic/9");
await click('a[data-user-card="eviltrout"]'); await click('a[data-user-card="eviltrout"]');
assert.equal( assert.dom(".user-card .name-username-wrapper").hasText("eviltrout");
query(".user-card .name-username-wrapper").innerText, assert
"eviltrout" .dom(".user-card .inactive-user")
); .hasText(I18n.t("user.inactive_user"));
assert.equal(
query(".user-card .inactive-user").innerText,
I18n.t("user.inactive_user")
);
}); });
}); });