Il nostro forum utilizza molto la funzione di stato utente personalizzato, ed è emersa l’idea di trovare un modo per rendere queste informazioni ancora più prominenti e visibili, facendole apparire sempre sotto il nome utente in un post anziché mostrarle solo quando si passa il mouse sull’icona associata.
Ho cercato a lungo per vedere se ci fosse un modo ragionevolmente semplice per farlo, ma finora non ho trovato risposte.
Qualcuno sa se questo è in qualche modo possibile?
Hmm… sto guardando come viene visualizzato lo stato dell’utente e non vedo un punto di uscita (plugin outlet) che puoi usare per visualizzare la descrizione dello stato.
Tuttavia, penso che tu possa ottenere lo stato di un utente tramite this.user.status, quindi non sono sicuro se hai davvero bisogno di quel punto di uscita o se puoi trovarne un altro nelle vicinanze.
Ho fatto una variante di questo, ma per visualizzare campi utente personalizzati sotto il nome dell’autore. Ho creato un componente tema e ho usato questo per il JS:
import Component from "@glimmer/component";
import { withPluginApi } from "discourse/lib/plugin-api";
import { get } from "@ember/object"; // Abbiamo ancora bisogno di questo
// qui, aggiungi l'id del campo personalizzato, preceduto da "user_field_"
// per ottenere l'id del campo utente:
// 1. vai su admin/config/user-fields
// 2. clicca sul nome del campo utente
// 3. l'id del campo utente è mostrato nell'url dopo 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 per passare la chiave al template
get currentFieldKey() {
return config.fieldKey;
}
// getter per passare il tipo di visualizzazione al template
get currentDisplayType() {
return config.display;
}
static shouldRender(args) {
// usa config.fieldKey per trovare i dati
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 poi ho usato questo per il css:
.topic-meta-data .names {
flex-wrap: wrap;
align-items: baseline;
}
// stili di base per tutte le visualizzazioni dei campi personalizzati
.poster-custom-field {
font-size: 0.9em;
color: var(--primary-high-or-secondary-low);
flex-shrink: 0;
}
// stile per la visualizzazione 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);
}
// stile per la visualizzazione sotto il nome
.poster-custom-field-block {
flex-basis: 100%;
margin-top: 4px;
order: 20;
}
Ecco come appare in pratica - “more stuff” e “some information” è il contenuto nei due campi personalizzati.
Come ha detto @NateDhaliwal, penso che potresti usare this.user.status per visualizzare lo stato dell’utente al posto dei campi personalizzati che ho io.
