Making custom user status more prominent

Support
1

Hi all,

Our forum heavily uses the custom user status feature, and the notion has come up of finding a way to make that info even more prominent and visible – by having it always appear beneath a user’s name in a post rather than only showing up when you hover over the associated icon.

I’ve been digging and digging to see if there’s any reasonably easy way to make this happen, and so far, I haven’t found any answers.

Does anyone know if this is at all possible?

Thanks in advance, and happy New Year to everyone!

3 Likes
2

Hmm… I’m looking at how the user status is displayed and I’m not seeing a plugin outlet that you can use to display the status description.

But I think you can get a user’s status via this.user.status so I’m not sure if you really need that outlet or if you can find another one close by.

1 Like
3

I did a variant of this, but to display custom user fields under the poster’s name. I created a theme component and used this for the JS:

import Component from "@glimmer/component";
import { withPluginApi } from "discourse/lib/plugin-api";
import { get } from "@ember/object"; // We still need this

// here, add the id of the custom field, prefixed with "user_field_"

// to get the user field id:
// 1. go to admin/config/user-fields
// 2. click on the user field's name
// 3. the user field id is shown in the url after 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 to pass the key to the template
        get currentFieldKey() {
          return config.fieldKey;
        }

        // getter to pass the display type to the template
        get currentDisplayType() {
          return config.display;
        }

        static shouldRender(args) {
          // use config.fieldKey to find the data
          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);
    });
  }
};

and then used this for the css:

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


// base styles for all custom field display
.poster-custom-field {
  font-size: 0.9em;
  color: var(--primary-high-or-secondary-low);
  flex-shrink: 0;
}

// style for inline display
.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);
}

// style for below the name display
.poster-custom-field-block {
  flex-basis: 100%;
  margin-top: 4px;
  order: 20;
}

This is what it looks like in practice - “more stuff” and “some information” is the content in the two custom fields.

image
image778×189 9.02 KB

Like @NateDhaliwal said, I think you could use this.user.status to display the user status in place of the custom fields I have.

1 Like
4

One thing with that is that you would have to also replace it in other occurrences, like the profile page, user card and chat messages.