Nuestro foro utiliza mucho la función de estado de usuario personalizado, y ha surgido la idea de encontrar una manera de hacer que esa información sea aún más prominente y visible, haciendo que aparezca siempre debajo del nombre de usuario en una publicación en lugar de solo mostrarse cuando se pasa el cursor sobre el icono asociado.
He estado investigando y buscando si hay alguna manera razonablemente fácil de lograr esto, y hasta ahora no he encontrado ninguna respuesta.
Mmm… Estoy viendo cómo se muestra el estado del usuario y no veo un plugin outlet que puedas usar para mostrar la descripción del estado.
Pero creo que puedes obtener el estado de un usuario a través de this.user.status, así que no estoy seguro de si realmente necesitas ese outlet o si puedes encontrar otro cercano.
Hice una variante de esto, pero para mostrar campos de usuario personalizados debajo del nombre del autor de la publicación. Creé un componente de tema y usé esto para el JS:
import Component from "@glimmer/component";
import { withPluginApi } from "discourse/lib/plugin-api";
import { get } from "@ember/object"; // Todavía necesitamos esto
// aquí, añade el id del campo personalizado, prefijado con "user_field_"
// para obtener el id del campo de usuario:
// 1. ve a admin/config/user-fields
// 2. haz clic en el nombre del campo de usuario
// 3. el id del campo de usuario se muestra en la URL después de 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 pasar la clave a la plantilla
get currentFieldKey() {
return config.fieldKey;
}
// getter para pasar el tipo de visualización a la plantilla
get currentDisplayType() {
return config.display;
}
static shouldRender(args) {
// usa config.fieldKey para encontrar los datos
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);
});
}
};
y luego usé esto para el css:
.topic-meta-data .names {
flex-wrap: wrap;
align-items: baseline;
}
// estilos base para toda la visualización de campos personalizados
.poster-custom-field {
font-size: 0.9em;
color: var(--primary-high-or-secondary-low);
flex-shrink: 0;
}
// estilo para visualización en línea
.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 debajo de la visualización del nombre
.poster-custom-field-block {
flex-basis: 100%;
margin-top: 4px;
order: 20;
}
Así es como se ve en la práctica: “more stuff” y “some information” es el contenido en los dos campos personalizados.
Una cosa con eso es que también tendrías que reemplazarlo en otras ocurrencias, como la página de perfil, la tarjeta de usuario y los mensajes de chat.
