Benutzerstatus-Anpassungen prominenter gestalten

Hallo zusammen,

Unser Forum nutzt die Funktion für benutzerdefinierte Statusmeldungen intensiv, und es kam die Idee auf, diese Informationen noch prominenter und sichtbarer zu machen – indem sie immer unter dem Benutzernamen in einem Beitrag angezeigt werden, anstatt nur beim Darüberfahren mit der Maus über das zugehörige Symbol.

Ich habe intensiv gesucht, um herauszufinden, ob es eine einigermaßen einfache Möglichkeit gibt, dies zu erreichen, und bisher habe ich keine Antworten gefunden.

Weiß jemand, ob dies überhaupt möglich ist?

Vielen Dank im Voraus und allen ein frohes neues Jahr!

3 „Gefällt mir“

Hmm… Ich schaue mir an, wie der Benutzerstatus angezeigt wird, und ich sehe keinen Plugin-Outlet, den Sie verwenden könnten, um die Statusbeschreibung anzuzeigen.

Aber ich denke, Sie können den Status eines Benutzers über this.user.status abrufen, daher bin ich mir nicht sicher, ob Sie diesen Outlet wirklich benötigen oder ob Sie einen anderen in der Nähe finden können.

1 „Gefällt mir“

Ich habe eine Variante davon gemacht, um benutzerdefinierte Benutzerfelder unter dem Namen des Posters anzuzeigen. Ich habe eine Theme-Komponente erstellt und dies für den JS-Code verwendet:

import Component from "@glimmer/component";
import { withPluginApi } from "discourse/lib/plugin-api";
import { get } from "@ember/object"; // Wir brauchen das immer noch

// hier die ID des benutzerdefinierten Feldes hinzufügen, vorangestellt mit "user_field_"

// um die Benutzerfeld-ID zu erhalten:
// 1. gehe zu admin/config/user-fields
// 2. klicke auf den Namen des Benutzerfeldes
// 3. die Benutzerfeld-ID wird in der URL nach admin/config/user-fields/ angezeigt

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, um den Schlüssel an die Vorlage zu übergeben
        get currentFieldKey() {
          return config.fieldKey;
        }

        // Getter, um den Anzeigetyp an die Vorlage zu übergeben
        get currentDisplayType() {
          return config.display;
        }

        static shouldRender(args) {
          // config.fieldKey verwenden, um die Daten zu finden
          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);
    });
  }
};

und dann dies für das CSS verwendet:

.topic-meta-data .names {
  flex-wrap: wrap;
  align-items: baseline;
}


// Basisstile für alle benutzerdefinierten Feldanzeigen
.poster-custom-field {
  font-size: 0.9em;
  color: var(--primary-high-or-secondary-low);
  flex-shrink: 0;
}

// Stil für Inline-Anzeige
.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);
}

// Stil für unterhalb der Namensanzeige
.poster-custom-field-block {
  flex-basis: 100%;
  margin-top: 4px;
  order: 20;
}

So sieht es in der Praxis aus – „more stuff“ und „some information“ sind der Inhalt der beiden benutzerdefinierten Felder.

Wie @NateDhaliwal sagte, denke ich, Sie könnten this.user.status verwenden, um den Benutzerstatus anstelle der benutzerdefinierten Felder anzuzeigen, die ich habe.

1 „Gefällt mir“

Eine Sache dabei ist, dass Sie es auch an anderen Stellen ersetzen müssten, wie auf der Profilseite, der Benutzerkarte und in Chat-Nachrichten.