안녕하세요 여러분,
저희 포럼은 사용자 상태 사용자 정의 기능을 많이 활용하고 있습니다. 최근, 해당 정보를 더 눈에 띄고 두드러지게 표시할 수 있는 방법에 대한 논의가 있었는데요. 마우스를 관련 아이콘에 올려야만 표시되던 사용자 상태를, 게시물에서 사용자 이름 아래에 항상 표시되도록 하는 것입니다.
이것이 가능할지 쉽게 구현할 수 있는 방법이 있는지 열심히 찾아봤지만, 아직까지 답을 찾지 못했습니다.
혹시 이것이 가능할지 아시는 분 계신가요?
미리 감사드리며, 모두 새해 복 많이 받으세요!
음… 사용자 상태가 어떻게 표시되는지 보고 있는데, 상태 설명을 표시할 수 있는 플러그인 아웃렛을 찾지 못하고 있어요.
하지만 this.user.status를 통해 사용자 상태를 가져올 수 있을 것 같아서, 정말로 그 아웃렛이 필요한지 아니면 근처에 다른 아웃렛을 사용할 수 있는지 확실하지 않아요.
이것의 변형 버전을 만들어서, 게시자 이름 아래에 사용자 정의 필드를 표시하도록 했습니다. 테마 컴포넌트를 생성하고, 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);
});
}
};
그리고 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;
}
실제로 적용하면 아래 이미지와 같습니다. "more stuff"와 "some information"은 두 사용자 정의 필드에 있는 내용입니다.
@NateDhaliwal 님이 말씀하신 대로, this.user.status를 사용하여 사용자 상태가 있는 곳에 제가 사용한 사용자 정의 필드를 대신 표시할 수 있다고 생각합니다.
그 점의 하나로는 다른 발생 위치, 예를 들어 프로필 페이지, 사용자 카드, 채팅 메시지 등에서도 이를 대체해야 한다는 것입니다.
