Nosso fórum utiliza muito o recurso de status de usuário personalizado, e surgiu a ideia de encontrar uma maneira de tornar essa informação ainda mais proeminente e visível — fazendo com que ela apareça sempre abaixo do nome de um usuário em uma postagem, em vez de aparecer apenas quando se passa o mouse sobre o ícone associado.
Tenho pesquisado muito para ver se existe alguma maneira razoavelmente fácil de fazer isso acontecer, e até agora, não encontrei nenhuma resposta.
Alguém sabe se isso é possível?
Agradeço antecipadamente e Feliz Ano Novo a todos!
Hmm… Estou vendo como o status do usuário é exibido e não estou vendo um plugin outlet que você possa usar para exibir a descrição do status.
Mas acho que você pode obter o status de um usuário via this.user.status, então não tenho certeza se você realmente precisa desse outlet ou se pode encontrar outro próximo.
Eu fiz uma variação disso, mas para exibir campos de usuário personalizados sob o nome do autor da postagem. Eu criei um componente de tema e usei isto para o JS:
import Component from "@glimmer/component";
import { withPluginApi } from "discourse/lib/plugin-api";
import { get } from "@ember/object"; // Ainda precisamos disso
// aqui, adicione o id do campo personalizado, prefixado com "user_field_"
// para obter o id do campo do usuário:
// 1. vá para admin/config/user-fields
// 2. clique no nome do campo do usuário
// 3. o id do campo do usuário é mostrado na url após admin/config/user-fields/
const FIELDS_TO_SHOW = [
{ fieldKey: "user_field_2", display: "inline" },
{ fieldKey: "user_field_1", display: "block" }
];
// ----------------------------------------
function addCustomFields(api) {
FIELDS_TO_SHOW.forEach(config => {
api.renderAfterWrapperOutlet(
"post-meta-data-poster-name",
class extends Component {
// getter para passar a chave para o template
get currentFieldKey() {
return config.fieldKey;
}
// getter para passar o tipo de exibição para o template
get currentDisplayType() {
return config.display;
}
static shouldRender(args) {
// use config.fieldKey para encontrar os dados
const value = get(args.post.user.custom_fields, config.fieldKey);
return !!value;
}
<template>
<div class="
poster-custom-field
poster-custom-field-{{this.currentDisplayType}}
field-{{this.currentFieldKey}}
">
{{get @post.user.custom_fields this.currentFieldKey}}
</div>
</template>
}
);
});
}
export default {
name: "show-poster-custom-fields",
initialize() {
withPluginApi("1.0.0", (api) => {
addCustomFields(api);
});
}
};
e então usei isto para o css:
.topic-meta-data .names {
flex-wrap: wrap;
align-items: baseline;
}
// estilos base para toda exibição de campo personalizado
.poster-custom-field {
font-size: 0.9em;
color: var(--primary-high-or-secondary-low);
flex-shrink: 0;
}
// estilo para exibição inline
.poster-custom-field-inline {
display: inline-block;
margin-left: 8px;
order: 5;
}
.topic-meta-data .names .user-title {
order: 10;
flex-basis: 100%;
width: 100%;
display: block;
margin-left: 0;
margin-top: 2px;
font-size: 0.9em;
color: var(--primary-high-or-secondary-low);
}
// estilo para abaixo da exibição do nome
.poster-custom-field-block {
flex-basis: 100%;
margin-top: 4px;
order: 20;
}
Isto é como fica na prática - “more stuff” e “some information” é o conteúdo nos dois campos personalizados.
Como @NateDhaliwal disse, eu acho que você poderia usar this.user.status para exibir o status do usuário no lugar dos campos personalizados que eu tenho.
Uma coisa com isso é que você também teria que substituí-lo em outras ocorrências, como na página de perfil, no cartão de usuário e nas mensagens de bate-papo.
