github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-09 22:45:51 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: backport outlet wrappers (#30110)

Browse Source 
* DEV: add outlet wrapper for categories boxes (#28860)

* DEV: add outlet wrapper for category boxes

* Put plugin outlet after categories boxes

* DEV: Add outlet wrapper for badges template (#28928)

* DEV: Add outlet wrapper for badges template

* Apply suggestions from code review

Co-authored-by: Sérgio Saquetim <1108771+megothss@users.noreply.github.com>

---------

Co-authored-by: Sérgio Saquetim <1108771+megothss@users.noreply.github.com>

* DEV: Add aditional args to plugin outlet (#28948)

* DEV: Add outlet wrapper for user card information replacement (#29523)

* DEV: Add outlet wrapper for user card information replacement

* Fix format issues

* Fix format issues

* format file

* DEV: add outlet wrapper for small user list (#29763)

* DEV: add outlet wrapper for small user list

* DEV: use value transformer to extend small user attrs function

* Update app/assets/javascripts/discourse/app/components/small-user-list.gjs

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

---------

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

* Fix lint issue

* remove extra html

* remove extra value transformers

* disable template formatting rule

* remove aria hidden

---------

Co-authored-by: Sérgio Saquetim <1108771+megothss@users.noreply.github.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
This commit is contained in:
Amanda Alves Branquinho 2024-12-05 21:26:05 -03:00 committed by GitHub
parent 8a1c84b748
commit f71e1643db
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 306 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/admin/addon/templates/user-badges.hbs
View File

@ -21,6 +21,7 @@
@outletArgs={{hash
availableBadges=this.availableBadges
userBadges=this.userBadges
user=this.user
}}
>
<form class="form-horizontal">

188
app/assets/javascripts/discourse/app/components/categories-boxes.hbs
View File

@ -1,100 +1,110 @@
{{#each this.categories as |c|}}
<PluginOutlet
@name="category-box-before-each-box"
@outletArgs={{hash category=c}}
/>
<div
style={{category-color-variable c.color}}
data-category-id={{c.id}}
data-notification-level={{c.notificationLevelString}}
data-url={{c.url}}
class="category category-box category-box-{{c.slug}}
{{if c.isMuted 'muted'}}"
>
<div class="category-box-inner">
{{#unless c.isMuted}}
<div class="category-logo">
{{#if c.uploaded_logo.url}}
<CategoryLogo @category={{c}} />
{{/if}}
</div>
{{/unless}}
<div class="category-details">
<div class="category-box-heading">
<a class="parent-box-link" href={{c.url}}>
<h3>
<CategoryTitleBefore @category={{c}} />
{{#if c.read_restricted}}
{{d-icon this.lockIcon}}
{{/if}}
{{c.name}}
</h3>
</a>
</div>
<PluginOutlet
@name="categories-boxes-wrapper"
@outletArgs={{hash categories=this.categories}}
>
{{#each this.categories as |c|}}
<PluginOutlet
@name="category-box-before-each-box"
@outletArgs={{hash category=c}}
/>
<div
style={{category-color-variable c.color}}
data-category-id={{c.id}}
data-notification-level={{c.notificationLevelString}}
data-url={{c.url}}
class="category category-box category-box-{{c.slug}}
{{if c.isMuted 'muted'}}"
>
<div class="category-box-inner">
{{#unless c.isMuted}}
<div class="description">
{{html-safe c.description_excerpt}}
<div class="category-logo">
{{#if c.uploaded_logo.url}}
<CategoryLogo @category={{c}} />
{{/if}}
</div>
{{/unless}}
<div class="category-details">
<div class="category-box-heading">
<a class="parent-box-link" href={{c.url}}>
<h3>
<CategoryTitleBefore @category={{c}} />
{{#if c.read_restricted}}
{{d-icon this.lockIcon}}
{{/if}}
{{c.name}}
</h3>
</a>
</div>
{{#if c.isGrandParent}}
{{#each c.subcategories as |subcategory|}}
<div
data-category-id={{subcategory.id}}
data-notification-level={{subcategory.notificationLevelString}}
style={{border-color subcategory.color}}
class="subcategory with-subcategories
{{if subcategory.uploaded_logo.url 'has-logo' 'no-logo'}}"
>
<div class="subcategory-box-inner">
<CategoryTitleLink @tagName="h4" @category={{subcategory}} />
{{#if subcategory.subcategories}}
<div class="subcategories">
{{#each subcategory.subcategories as |subsubcategory|}}
{{#unless subsubcategory.isMuted}}
<span class="subcategory">
<CategoryTitleBefore @category={{subsubcategory}} />
{{category-link subsubcategory hideParent="true"}}
</span>
{{/unless}}
{{/each}}
</div>
{{/if}}
</div>
</div>
{{/each}}
{{else if c.subcategories}}
<div class="subcategories">
{{#each c.subcategories as |sc|}}
<a class="subcategory" href={{sc.url}}>
<span class="subcategory-image-placeholder">
{{#if sc.uploaded_logo.url}}
<CategoryLogo @category={{sc}} />
{{/if}}
</span>
{{category-link sc hideParent="true"}}
</a>
{{/each}}
{{#unless c.isMuted}}
<div class="description">
{{html-safe c.description_excerpt}}
</div>
{{/if}}
{{/unless}}
{{#if c.isGrandParent}}
{{#each c.subcategories as |subcategory|}}
<div
data-category-id={{subcategory.id}}
data-notification-level={{subcategory.notificationLevelString}}
style={{border-color subcategory.color}}
class="subcategory with-subcategories
{{if subcategory.uploaded_logo.url 'has-logo' 'no-logo'}}"
>
<div class="subcategory-box-inner">
<CategoryTitleLink
@tagName="h4"
@category={{subcategory}}
/>
{{#if subcategory.subcategories}}
<div class="subcategories">
{{#each subcategory.subcategories as |subsubcategory|}}
{{#unless subsubcategory.isMuted}}
<span class="subcategory">
<CategoryTitleBefore
@category={{subsubcategory}}
/>
{{category-link subsubcategory hideParent="true"}}
</span>
{{/unless}}
{{/each}}
</div>
{{/if}}
</div>
</div>
{{/each}}
{{else if c.subcategories}}
<div class="subcategories">
{{#each c.subcategories as |sc|}}
<a class="subcategory" href={{sc.url}}>
<span class="subcategory-image-placeholder">
{{#if sc.uploaded_logo.url}}
<CategoryLogo @category={{sc}} />
{{/if}}
</span>
{{category-link sc hideParent="true"}}
</a>
{{/each}}
</div>
{{/if}}
{{/unless}}
</div>
<PluginOutlet
@name="category-box-below-each-category"
@outletArgs={{hash category=c}}
/>
</div>
<PluginOutlet
@name="category-box-below-each-category"
@outletArgs={{hash category=c}}
/>
</div>
</div>
<PluginOutlet
@name="category-box-after-each-box"
@outletArgs={{hash category=c}}
/>
{{/each}}
<PluginOutlet
@name="category-box-after-each-box"
@outletArgs={{hash category=c}}
/>
{{/each}}
</PluginOutlet>
<PluginOutlet
@name="category-boxes-after-boxes"

80
app/assets/javascripts/discourse/app/components/small-user-list.gjs
View File

@ -1,31 +1,22 @@
import Component from "@glimmer/component";
import { hash } from "@ember/helper";
import { service } from "@ember/service";
import PluginOutlet from "discourse/components/plugin-outlet";
import avatar from "discourse/helpers/bound-avatar-template";
import { userPath } from "discourse/lib/url";
import { smallUserAttrs } from "discourse/lib/user-list-attrs";
import i18n from "discourse-common/helpers/i18n";
import getURL from "discourse-common/lib/get-url";
export default class SmallUserList extends Component {
@service currentUser;
smallUserAtts(user) {
return {
template: user.avatar_template,
username: user.username,
post_url: user.post_url,
url: userPath(user.username_lower),
unknown: user.unknown,
};
}
get users() {
let users = this.args.data.users;
if (
this.args.data.addSelf &&
!users.some((u) => u.username === this.currentUser.username)
) {
users = users.concat(this.smallUserAtts(this.currentUser));
users = users.concat(smallUserAttrs(this.currentUser));
}
return users;
}
@ -38,38 +29,45 @@ export default class SmallUserList extends Component {
}
<template>
{{#each this.users as |user|}}
{{#if user.unknown}}
<div
title={{i18n "post.unknown_user"}}
class="unknown"
role="listitem"
></div>
{{else}}
<a
class="trigger-user-card"
data-user-card={{user.username}}
title={{user.username}}
aria-hidden="false"
role="listitem"
>
{{avatar user.template "tiny"}}
</a>
{{/if}}
{{/each}}
<PluginOutlet
@name="small-user-list-internal"
@outletArgs={{hash data=this.args}}
>
{{#each this.users as |user|}}
{{#if user.unknown}}
{{! template-lint-disable require-context-role }}
<div
title={{i18n "post.unknown_user"}}
class="unknown"
role="listitem"
></div>
{{else}}
{{! template-lint-disable require-context-role }}
<a
class="trigger-user-card"
data-user-card={{user.username}}
title={{user.username}}
aria-hidden="false"
role="listitem"
>
{{avatar user.template "tiny"}}
</a>
{{/if}}
{{/each}}
{{#if @data.description}}
{{#if this.postUrl}}
<a href={{this.postUrl}}>
{{#if @data.description}}
{{#if this.postUrl}}
<a href={{this.postUrl}}>
<span aria-hidden="true" class="list-description">
{{i18n @data.description count=@data.count}}
</span>
</a>
{{else}}
<span aria-hidden="true" class="list-description">
{{i18n @data.description count=@data.count}}
</span>
</a>
{{else}}
<span aria-hidden="true" class="list-description">
{{i18n @data.description count=@data.count}}
</span>
{{/if}}
{{/if}}
{{/if}}
</PluginOutlet>
</template>
}

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

@ -27,54 +27,48 @@
</div>
{{else}}
<div class="card-row first-row">
<div class="user-card-avatar">
{{#if this.contentHidden}}
<span class="card-huge-avatar">{{bound-avatar
this.user
"huge"
}}</span>
{{else}}
<a
{{on "click" this.handleShowUser}}
href={{this.user.path}}
class="card-huge-avatar"
>{{bound-avatar this.user "huge"}}</a>
{{/if}}
<UserAvatarFlair @user={{this.user}} />
<div>
<PluginOutlet
@name="user-card-avatar-flair"
@connectorTagName="div"
@outletArgs={{hash user=this.user}}
/>
</div>
</div>
<div class="names">
<div
class="names__primary
{{this.staff}}
{{this.newUser}}
{{if this.nameFirst 'full-name' 'username'}}"
>
<PluginOutlet
@name="user-card-main-info"
@outletArgs={{hash
user=this.user
post=this.post
contentHidden=this.contentHidden
handleShowUser=this.handleShowUser
}}
>
<div class="user-card-avatar">
{{#if this.contentHidden}}
<span
id="discourse-user-card-title"
class="name-username-wrapper"
>
{{if
this.nameFirst
this.user.name
(format-username this.user.username)
}}
</span>
<span class="card-huge-avatar">{{bound-avatar
this.user
"huge"
}}</span>
{{else}}
<a
{{on "click" this.handleShowUser}}
href={{this.user.path}}
class="user-profile-link"
>
class="card-huge-avatar"
tabindex="-1"
>{{bound-avatar this.user "huge"}}</a>
{{/if}}
<UserAvatarFlair @user={{this.user}} />
<div>
<PluginOutlet
@name="user-card-avatar-flair"
@connectorTagName="div"
@outletArgs={{hash user=this.user}}
/>
</div>
</div>
<div class="names">
<div
class="names__primary
{{this.staff}}
{{this.newUser}}
{{if this.nameFirst 'full-name' 'username'}}"
>
{{#if this.contentHidden}}
<span
id="discourse-user-card-title"
class="name-username-wrapper"
@ -85,45 +79,68 @@
(format-username this.user.username)
}}
</span>
{{user-status this.user currentUser=this.currentUser}}
</a>
{{/if}}
</div>
<PluginOutlet
@name="user-card-after-username"
@connectorTagName="div"
@outletArgs={{hash user=this.user showUser=this.handleShowUser}}
/>
{{#if this.nameFirst}}
<div class="names__secondary username">{{this.user.username}}</div>
{{else}}
{{#if this.user.name}}
<div class="names__secondary full-name">{{this.user.name}}</div>
{{/if}}
{{/if}}
{{#if this.user.title}}
<div class="names__secondary">{{this.user.title}}</div>
{{/if}}
{{#if this.user.staged}}
<div class="names__secondary staged">{{i18n "user.staged"}}</div>
{{/if}}
{{#if this.hasStatus}}
<div class="user-status">
{{html-safe this.userStatusEmoji}}
<span class="user-status__description">
{{this.user.status.description}}
</span>
{{format-date this.user.status.ends_at format="tiny"}}
{{else}}
<a
{{on "click" this.handleShowUser}}
href={{this.user.path}}
class="user-profile-link"
aria-label={{i18n
"user.profile_link"
username=this.user.username
}}
>
<span
id="discourse-user-card-title"
class="name-username-wrapper"
>
{{if
this.nameFirst
this.user.name
(format-username this.user.username)
}}
</span>
{{user-status this.user currentUser=this.currentUser}}
</a>
{{/if}}
</div>
{{/if}}
<div>
<PluginOutlet
@name="user-card-post-names"
@name="user-card-after-username"
@connectorTagName="div"
@outletArgs={{hash user=this.user}}
@outletArgs={{hash user=this.user showUser=this.handleShowUser}}
/>
{{#if this.nameFirst}}
<div
class="names__secondary username"
>{{this.user.username}}</div>
{{else}}
{{#if this.user.name}}
<div class="names__secondary full-name">{{this.user.name}}</div>
{{/if}}
{{/if}}
{{#if this.user.title}}
<div class="names__secondary">{{this.user.title}}</div>
{{/if}}
{{#if this.user.staged}}
<div class="names__secondary staged">{{i18n "user.staged"}}</div>
{{/if}}
{{#if this.hasStatus}}
<div class="user-status">
{{html-safe this.userStatusEmoji}}
<span class="user-status__description">
{{this.user.status.description}}
</span>
{{format-date this.user.status.ends_at format="tiny"}}
</div>
{{/if}}
<div>
<PluginOutlet
@name="user-card-post-names"
@connectorTagName="div"
@outletArgs={{hash user=this.user}}
/>
</div>
</div>
</div>
</PluginOutlet>
<ul class="usercard-controls">
{{#if this.user.can_send_private_message_to_user}}
<li class="compose-pm">
@ -379,20 +396,25 @@
{{#if this.showBadges}}
<div class="card-row">
{{#if this.user.featured_user_badges}}
<div class="badge-section">
{{#each this.user.featured_user_badges as |ub|}}
<UserBadge @badge={{ub.badge}} @user={{this.user}} />
{{/each}}
{{#if this.showMoreBadges}}
<span class="more-user-badges">
<LinkTo @route="user.badges" @model={{this.user}}>
{{i18n "badges.more_badges" count=this.moreBadgesCount}}
</LinkTo>
</span>
{{/if}}
</div>
{{/if}}
<PluginOutlet
@name="user-card-badges"
@outletArgs={{hash user=this.user post=this.post}}
>
{{#if this.user.featured_user_badges}}
<div class="badge-section">
{{#each this.user.featured_user_badges as |ub|}}
<UserBadge @badge={{ub.badge}} @user={{this.user}} />
{{/each}}
{{#if this.showMoreBadges}}
<span class="more-user-badges">
<LinkTo @route="user.badges" @model={{this.user}}>
{{i18n "badges.more_badges" count=this.moreBadgesCount}}
</LinkTo>
</span>
{{/if}}
</div>
{{/if}}
</PluginOutlet>
</div>
{{/if}}
{{/if}}

1
app/assets/javascripts/discourse/app/lib/transformer/registry.js
View File

@ -2,4 +2,5 @@ export const VALUE_TRANSFORMERS = Object.freeze([
// use only lowercase names
"header-notifications-avatar-size",
"home-logo-href",
"small-user-attrs",
]);

16
app/assets/javascripts/discourse/app/lib/user-list-attrs.js Normal file
View File

@ -0,0 +1,16 @@
import { applyValueTransformer } from "discourse/lib/transformer";
import { userPath } from "discourse/lib/url";
export function smallUserAttrs(user) {
const defaultAttrs = {
template: user.avatar_template,
username: user.username,
post_url: user.post_url,
url: userPath(user.username_lower),
unknown: user.unknown,
};
return applyValueTransformer("small-user-attrs", defaultAttrs, {
user,
});
}

58
app/assets/javascripts/discourse/app/templates/user/badges.hbs
View File

@ -1,30 +1,40 @@
{{body-class "user-badges-page"}}
<section class="user-content" id="user-content">
<p class="favorite-count">
{{i18n
"badges.favorite_count"
count=this.favoriteBadges.length
max=this.siteSettings.max_favorite_badges
<PluginOutlet
@name="user-badges-content"
@outletArgs={{hash
sortedBadges=this.sortedBadges
maxFavBadges=this.siteSettings.max_favorite_badges
favoriteBadges=this.favoriteBadges
canFavoriteMoreBadges=this.canFavoriteMoreBadges
favorite=this.favorite
}}
</p>
<div class="badge-group-list">
{{#each this.sortedBadges as |ub|}}
<BadgeCard
@badge={{ub.badge}}
@count={{ub.count}}
@canFavorite={{ub.can_favorite}}
@isFavorite={{ub.is_favorite}}
@username={{this.username}}
@canFavoriteMoreBadges={{this.canFavoriteMoreBadges}}
@onFavoriteClick={{action "favorite" ub}}
@filterUser="true"
>
<p class="favorite-count">
{{i18n
"badges.favorite_count"
count=this.favoriteBadges.length
max=this.siteSettings.max_favorite_badges
}}
</p>
<div class="badge-group-list">
{{#each this.sortedBadges as |ub|}}
<BadgeCard
@badge={{ub.badge}}
@count={{ub.count}}
@canFavorite={{ub.can_favorite}}
@isFavorite={{ub.is_favorite}}
@username={{this.username}}
@canFavoriteMoreBadges={{this.canFavoriteMoreBadges}}
@onFavoriteClick={{action "favorite" ub}}
@filterUser="true"
/>
{{/each}}
<PluginOutlet
@name="after-user-profile-badges"
@outletArgs={{hash user=this.user.model}}
/>
{{/each}}
<PluginOutlet
@name="after-user-profile-badges"
@outletArgs={{hash user=this.user.model}}
/>
</div>
</div>
</PluginOutlet>
</section>

17
app/assets/javascripts/discourse/app/widgets/post-menu.js
View File

@ -6,7 +6,7 @@ import AdminPostMenu from "discourse/components/admin-post-menu";
import DeleteTopicDisallowedModal from "discourse/components/modal/delete-topic-disallowed";
import { formattedReminderTime } from "discourse/lib/bookmark";
import { recentlyCopied, showAlert } from "discourse/lib/post-action-feedback";
import { userPath } from "discourse/lib/url";
import { smallUserAttrs } from "discourse/lib/user-list-attrs";
import {
NO_REMINDER_ICON,
WITH_REMINDER_ICON,
@ -53,16 +53,6 @@ function registerButton(name, builder) {
_builders[name] = builder;
}
function smallUserAtts(user) {
return {
template: user.avatar_template,
username: user.username,
post_url: user.post_url,
url: userPath(user.username_lower),
unknown: user.unknown,
};
}
export function buildButton(name, widget) {
let { attrs, state, siteSettings, settings, currentUser } = widget;
@ -904,14 +894,13 @@ export default createWidget("post-menu", {
getWhoLiked() {
const { attrs, state } = this;
return this.store
.find("post-action-user", {
id: attrs.id,
post_action_type_id: LIKE_ACTION,
})
.then((users) => {
state.likedUsers = users.map(smallUserAtts);
state.likedUsers = users.map(smallUserAttrs);
state.total = users.totalRows;
});
},
@ -920,7 +909,7 @@ export default createWidget("post-menu", {
const { attrs, state } = this;
return this.store.find("post-reader", { id: attrs.id }).then((users) => {
state.readers = users.map(smallUserAtts);
state.readers = users.map(smallUserAttrs);
state.totalReaders = users.totalRows;
});
},