IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

DEV: Convert about-page-users to gjs (#25341)

Browse Source
This commit is contained in:
Jarek Radosz
2024-01-22 12:10:59 +01:00
committed by GitHub
parent 5278734fe2
commit 749b490188
3 changed files with 71 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
app/assets/javascripts/discourse/app/components/about-page-users.gjs Normal file
View File

@@ -0,0 +1,71 @@
import Component from "@glimmer/component";
import { inject as service } from "@ember/service";
import { htmlSafe } from "@ember/template";
import { renderAvatar } from "discourse/helpers/user-avatar";
import { prioritizeNameInUx } from "discourse/lib/settings";
import { userPath } from "discourse/lib/url";
import i18n from "discourse-common/helpers/i18n";
export default class AboutPageUsers extends Component {
@service siteSettings;
get usersTemplates() {
return (this.args.users || []).map((user) => ({
name: user.name,
username: user.username,
userPath: userPath(user.username),
avatar: renderAvatar(user, {
imageSize: "large",
siteSettings: this.siteSettings,
}),
title: user.title || "",
prioritizeName: prioritizeNameInUx(user.name),
}));
}
<template>
{{#each this.usersTemplates as |template|}}
<div data-username={{template.username}} class="user-info small">
<div class="user-image">
<div class="user-image-inner">
<a
href={{template.userPath}}
data-user-card={{template.username}}
aria-hidden="true"
>
{{htmlSafe template.avatar}}
</a>
</div>
</div>
<div class="user-detail">
<div class="name-line">
<a
href={{template.userPath}}
data-user-card={{template.username}}
aria-label={{i18n
"user.profile_possessive"
username=template.username
}}
>
<span class="username">
{{#if template.prioritizeName}}
{{template.name}}
{{else}}
{{template.username}}
{{/if}}
</span>
<span class="name">
{{#if template.prioritizeName}}
{{template.username}}
{{else}}
{{template.name}}
{{/if}}
</span>
</a>
</div>
<div class="title">{{template.title}}</div>
</div>
</div>
{{/each}}
</template>
}

39
app/assets/javascripts/discourse/app/components/about-page-users.hbs
View File

@@ -1,39 +0,0 @@
{{#each this.usersTemplates as |userTemplate|}}
<div data-username={{userTemplate.username}} class="user-info small">
<div class="user-image">
<div class="user-image-inner">
<a
href={{userTemplate.userPath}}
data-user-card={{userTemplate.username}}
aria-hidden="true"
>
{{html-safe userTemplate.avatar}}
</a>
</div>
</div>
<div class="user-detail">
<div class="name-line">
<a
href={{userTemplate.userPath}}
data-user-card={{userTemplate.username}}
aria-label={{i18n
"user.profile_possessive"
username=userTemplate.username
}}
>
<span class="username">
{{#if
userTemplate.prioritizeName
}}{{userTemplate.name}}{{else}}{{userTemplate.username}}{{/if}}
</span>
<span class="name">
{{#if
userTemplate.prioritizeName
}}{{userTemplate.username}}{{else}}{{userTemplate.name}}{{/if}}
</span>
</a>
</div>
<div class="title">{{userTemplate.title}}</div>
</div>
</div>
{{/each}}

26
app/assets/javascripts/discourse/app/components/about-page-users.js
View File

@@ -1,26 +0,0 @@
import Component from "@ember/component";
import { computed } from "@ember/object";
import { renderAvatar } from "discourse/helpers/user-avatar";
import { prioritizeNameInUx } from "discourse/lib/settings";
import { userPath } from "discourse/lib/url";
export default Component.extend({
tagName: "",
usersTemplates: computed("users.[]", function () {
return (this.users || []).map((user) => {
const { name, username } = user;
return {
name,
username,
userPath: userPath(username),
avatar: renderAvatar(user, {
imageSize: "large",
siteSettings: this.siteSettings,
}),
title: user.title || "",
prioritizeName: prioritizeNameInUx(name),
};
});
}),
});