Делаем статус пользователя более заметным

Поддержка
1

Всем привет,

Наш форум активно использует функцию пользовательского статуса, и возникла идея сделать эту информацию ещё более заметной и видимой — например, чтобы она всегда отображалась под именем пользователя в сообщении, а не только при наведении курсора на соответствующий значок.

Я уже долго ищу способ реализовать это относительно простым путём, но пока не нашёл никаких ответов.

Не знает ли кто-нибудь, возможно ли это вообще?

Заранее спасибо и с Новым годом всех!

2

Хм… Я смотрю, как отображается статус пользователя, и не вижу плагина-аутлета, который можно было бы использовать для отображения описания статуса.

Но, думаю, вы можете получить статус пользователя через this.user.status, поэтому не уверен, что вам действительно нужен этот аутлет, или, возможно, вы сможете найти другой, расположенный поблизости.

3

Я реализовал вариант этого, но для отображения пользовательских полей под именем автора. Я создал компонент темы и использовал следующий JS:

import Component from "@glimmer/component";
import { withPluginApi } from "discourse/lib/plugin-api";
import { get } from "@ember/object"; // Это всё ещё нужно

// Здесь добавьте ID пользовательского поля с префиксом "user_field_"

// Чтобы получить ID пользовательского поля:
// 1. Перейдите в admin/config/user-fields
// 2. Нажмите на имя пользовательского поля
// 3. ID поля отображается в URL после 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 {
        
        // геттер для передачи ключа в шаблон
        get currentFieldKey() {
          return config.fieldKey;
        }

        // геттер для передачи типа отображения в шаблон
        get currentDisplayType() {
          return config.display;
        }

        static shouldRender(args) {
          // используйте config.fieldKey для поиска данных
          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);
    });
  }
};

А затем использовал следующий CSS:

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


// базовые стили для всех пользовательских полей отображения
.poster-custom-field {
  font-size: 0.9em;
  color: var(--primary-high-or-secondary-low);
  flex-shrink: 0;
}

// стиль для отображения в строку
.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);
}

// стиль для отображения под именем
.poster-custom-field-block {
  flex-basis: 100%;
  margin-top: 4px;
  order: 20;
}

Вот как это выглядит на практике — «ещё что-то» и «некоторая информация» — это содержимое двух пользовательских полей.

image
image778×189 9.02 KB

Как сказал @NateDhaliwal, думаю, вы можете использовать this.user.status, чтобы отображать статус пользователя вместо моих пользовательских полей.

4

Однако при этом вам также придется заменить его в других местах, например на странице профиля, в карточке пользователя и в сообщениях чата.