Die unboundClassNames()-Methode, die wir oben verwendet haben, ist für die Klassen verantwortlich, die dem Komponentenelement hinzugefügt werden. Mit anderen Worten, die HTML-Elemente .topic-list-item oder .latest-topic-list-item. Sie können dies hier sehen
discourse/app/assets/javascripts/discourse/app/components/topic-list-item.js at ad4faf637c9caf7e6ac60a614e3838a69c928e27 · discourse/discourse · GitHub
und hier
discourse/app/assets/javascripts/discourse/app/components/latest-topic-list-item.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub
Ember nimmt jeden String, den diese Methode zurückgibt, und fügt ihn als class-Attribut auf dem Element selbst hinzu.
Sie müssen etwas anderes verwenden, wenn Sie Klassen zu Kindern dieses Elements hinzufügen möchten.
Jeder Poster in der posters-Eigenschaft hat eine Eigenschaft namens extras. Diese Eigenschaft wird als Flag für zusätzliche Klassen verwendet, die dem Avatar hinzugefügt werden sollen, wenn er gerendert wird.
Es ist hier gesetzt
discourse/app/assets/javascripts/discourse/app/models/topic-list.js at d3a59e3f695c467c22d02db62532194e17ac827b · discourse/discourse · GitHub
und hier verbraucht
discourse/app/assets/javascripts/discourse/app/templates/list/posters-column.hbr at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub
Sie können also Klassen zu Avataren in der Topic-Liste basierend auf einer Bedingung hinzufügen, wenn Sie diese Eigenschaft erweitern.
Sie können den @on-Decorator verwenden, wenn die Komponente ihre Attribute erhält, um eine Methode aufzurufen, die dies tut. Da wir diese Komponentenkassen bereits ändern, können wir dieses neue Verhalten in den obigen Code integrieren.
Hier ist, was wir am Ende haben
im Initialisierer
import { apiInitializer } from "discourse/lib/api";
import discourseComputed, { on } from "discourse-common/utils/decorators";
export default apiInitializer("0.11.1", (api) => {
const PLUGIN_ID = "hide-ignored-op-topics";
const IGNORED_TOPIC_CLASS_STRING = " ignored-op-topic";
const IGNORED_AVATAR_CLASS_STRING = " ignored-user-avatar";
const user = api.getCurrentUser();
if (!user) {
return;
}
const ignoredUsers = user.ignored_users;
function isIgnoredUser(poster) {
return ignoredUsers.includes(poster.user.username);
}
function addIgnoredTopicClass() {
let classList = this._super(...arguments);
const topicCreator = this.topic.posters[0];
if (isIgnoredUser(topicCreator)) {
classList += IGNORED_TOPIC_CLASS_STRING;
}
return classList;
}
function addIgnoredAvatarClass() {
this.topic.posters.forEach((poster) => {
if (isIgnoredUser(poster)) {
// default raw topic-lists
poster.extras += IGNORED_AVATAR_CLASS_STRING;
// categories page topic lists
poster.user.set("extras", IGNORED_AVATAR_CLASS_STRING);
}
});
}
api.modifyClass("component:topic-list-item", {
pluginId: PLUGIN_ID,
@discourseComputed()
unboundClassNames() {
return addIgnoredTopicClass.call(this);
},
@on("didReceiveAttrs")
ignoredAvatarClass() {
addIgnoredAvatarClass.call(this);
},
});
api.modifyClass("component:latest-topic-list-item", {
pluginId: PLUGIN_ID,
@discourseComputed()
unboundClassNames() {
return addIgnoredTopicClass.call(this);
},
@on("didReceiveAttrs")
ignoredAvatarClass() {
addIgnoredAvatarClass.call(this);
},
});
});
Dies sollte Ihnen eine CSS-Klasse ignored-op-topic für Topic-List-Items geben, die von einem ignorierten Benutzer gestartet wurden, und eine CSS-Klasse ignored-user-avatar für jeden Avatar eines ignorierten Benutzers in der Poster-Spalte.
Wir haben bereits die CSS für .ignored-op-topic von oben.
// wir verwenden hier kein display: none;, da wir load-more nicht beeinträchtigen wollen
.ignored-op-topic {
height: 0;
width: 0;
position: fixed;
bottom: 0;
}
Jetzt möchten Sie ignorierte Benutzer-Avatare in der Poster-Spalte ausblenden.
Tun Sie das nicht. Dies wird zu viel Verwirrung stiften.
Was ist, wenn ein ignorierter Benutzer auf ein Topic antwortet und es hochgestuft wird, aber Sie haben seinen Avatar ausgeblendet? Es würde so aussehen, als hätte jemand anderes das Topic hochgestuft.
Außerdem gibt es auf der Kategorienseite nur einen Avatar neben den Topic-Titeln. Was passiert, wenn die letzte Antwort von einem ignorierten Benutzer stammt? Kein Avatar?
Sie können sehen, wie solche Fälle zu einer unangenehmen Erfahrung für Ihre Benutzer führen würden.
Anstatt ignorierte Benutzer-Avatare auszublenden, können Sie sie durch ein SVG-Icon ersetzen. Alle ignorierten Benutzer haben denselben Avatar. Das können Sie mit CSS tun
.ignored-user-avatar {
background: white;
border: 1px solid transparent;
box-sizing: border-box;
opacity: 0.5;
content: svg-uri(
'\u003csvg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"\u003e\u003cpath d="m256 0c141.385 0 256 114.615 256 256s-114.615 256-256 256-256-114.615-256-256 114.615-256 256-256zm0 105c-83.262 0-151 67.74-151 151s67.737 151 151 151 151-67.736 151-151-67.74-151-151-151zm-52.816 130.621a22.119 22.119 0 1 0 0-44.237 22.119 22.119 0 0 0 0 44.237zm127.749-22.121a22.116 22.116 0 0 0 -22.12-22.12 22.119 22.119 0 1 0 22.12 22.12zm-40.233 70.79a9.439 9.439 0 0 0 -13.35-13.347l-21.35 21.357-21.352-21.357a9.438 9.438 0 1 0 -13.348 13.347l21.352 21.352-21.352 21.358a9.438 9.438 0 1 0 13.347 13.347l21.353-21.355 21.351 21.351a9.439 9.439 0 0 0 13.349-13.343l-21.352-21.354z"/\u003e\u003c/svg\u003e'
);
}
und es wird so gerendert
und dasselbe auf
latest-topic-list-item. Ändern Sie das SVG in jedes gewünschte Icon.
Damit ist das aus dem Weg…
Ich habe Ihre Frage beantwortet, da sie eine gute Gelegenheit bietet, über die Anpassung der Topic-Liste zu sprechen und wie Sie dies tun würden. Ich habe jedoch viele Vorbehalte gegenüber Ihrem Anwendungsfall. Die Notwendigkeit, die Avatare von ignorierten Benutzern auszublenden, deutet auf ein zugrunde liegendes Problem hin. Es ist eine Sache zu sagen
“Diese Person schreibt über Themen, die mich nicht interessieren. Ich werde sie ignorieren, um das Rauschen zu reduzieren.”
aber es ist eine ganz andere Sache zu sagen
“Schon der Anblick des Avatars dieser Person löst eine emotionale Reaktion aus. Ich möchte ihren Avatar nie wieder sehen.”
Sie kennen Ihre Community besser als jeder andere… aber das ist wahrscheinlich etwas, das es wert ist, untersucht zu werden.
