Separierung von angehefteten Themen

[Terise]

Hallo!

Ich bin mir nicht ganz sicher, wie ich das angehen soll und suche nach etwas Hilfe.

Grundsätzlich möchte ich eine visuelle Trennung zwischen angepinnten und regulären Themen haben. Dies wäre für die Community-Foren eines Spieleentwicklers und diese Trennung wäre für die Benutzer hilfreich.

Ich suche etwas wie dieses:

[ANGEPINNT] Thema Name

Reguläres Thema

Anstatt:

[ANGEPINNT] Thema Name
Reguläres Thema

Ich habe bereits die Hintergrundfarbe der angepinnten Themen geändert, um einen leichten Unterschied zwischen den beiden zu schaffen. Ich habe CSS ausprobiert, was funktioniert hat, aber nur bei einem Seiten-Refresh.

Ich habe versucht, meine eigene Theme-Komponente zu erstellen, aber da bleibe ich stecken, da ich etwas hinzufügen müsste, aber nicht weiß, wo.

Mein Ziel ist es, <tbody> class="pinned-topics"> vor dem ursprünglichen (regulären Themen) <tbody> einzufügen.

Jede Anleitung wird sehr geschätzt!

[Alteras (Steven Chang)]

Sie können die Verwendung der Theme-Komponente Filtered Topic Lists mit der Abfrage in:pinned in Betracht ziehen.

Wenn Sie stattdessen bei CSS bleiben möchten, können Sie Folgendes tun:

// zielt auf den letzten Pin in der Liste
tr.topic-list-item.pinned:has(+ tr:not(.pinned)) td {
  // grober Weg, um Platz in einer Tabellenzeile zu erzwingen
  padding-bottom: 1.8em;
}

tr.topic-list-item.pinned:has(+ tr:not(.pinned))::after {
  // Inhalt, der im Platz angezeigt werden soll, falls gewünscht
  content: 'regular';
  width: 100%;
  position: absolute;
  display: flex;
  height: 1em;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  border-top: 1px solid var(--primary-low);
}

[Terise]

Vielen Dank für die Hilfe! Leider hat das nicht funktioniert. Ich habe einen Plugin-Versuch, der das tun sollte, was ich brauche, aber ich scheine ihn auf Discourse 3.4.0-beta2 nicht zum Laufen zu bringen.

GitHub - darkpsy3934/discourse-mistflux-plugin

Jede Hilfe dabei wäre sehr willkommen!

[Arkshine]

Hallo Terise,

ich habe mir deinen Code angesehen und du bist nah dran!

Hier sind einige Rückmeldungen:

• Du kannst es mit einer Theme-Komponente (nicht einem Plugin) modifizieren. Ich würde dich ermutigen, diese Vorlage zu verwenden: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes

• Die Verwendung eines Connectors ist korrekt. Der richtige Pfad ist /discourse/connectors/…
  

  

• Die an den Connector übergebenen Argumente können mit outletArgs abgerufen werden. Du kannst den Connector hier sehen:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/topic-list/list.gjs#L126-L136

Das bedeutet, dies sollte sein:

export default class PinnedTopicBody extends Component {
  get pinnedTopics() {
    return this.outletArgs.topics.filter((t) => t.get("pinned"));
  }
}

und die Vorlage:

{{#if this.pinnedTopics}}
  <tbody>
    {{#each this.pinnedTopics as |topic|}}
      <TopicListItem
        @topic={{topic}}
        @bulkSelectEnabled={{@outletArgs.bulkSelectEnabled}}
        @lastVisitedTopic={{@outletArgs.lastVisitedTopic}}
        @selected={{@outletArgs.selected}}
        @hideCategory={{@outletArgs.hideCategory}}
        @showPosters={{true}}
      />
    {{/each}}
    <tr class="table-break">
      <td colspan="10">&nbsp;</td>
    </tr>
  </tbody>
{{/if}}

• Hinweis: Leider wird showPosters nicht als Argument übergeben; du musst seinen Wert hier fest codieren.

• Hinweis: Standardmäßig sieht es so aus:
  

  

Es generiert ein div-Wrapper mit einer eindeutigen ID und vermasselt die CSS. Es ist jedoch notwendig, wenn du Aktionen an das Element binden möchtest.

Du kannst tagName und classNames verwenden, um den Wrapper anzupassen.

import { classNames, tagName } from "@ember-decorators/component";

@tagName("tbody")
@classNames("pinned-topics")
export default class PinnedTopicBody extends Component {
  ...
}

{{#if this.pinnedTopics}}
  {{#each this.pinnedTopics as |topic|}}
    ...
  {{/each}}
  <tr class="table-break">
    <td colspan="10">&nbsp;</td>
  </tr>
{{/if}}

(Wenn du weißt, dass du nichts mit dem Element machen wirst, kannst du das tbody in der Vorlage beibehalten und tagName("") verwenden).

Dann erhältst du dies:

Ich habe es nicht gründlich geprüft, um zu sehen, ob es einen besseren Weg gibt.
Ich wollte nur helfen, deinen Code zum Laufen zu bringen!

[Terise]

Würde ich etwas im Komponentenverzeichnis benötigen oder würden alle Dateien im Connector-Verzeichnis liegen?
Der einzige Grund, warum ich dies als Plugin und nicht als Theme-Komponente gemacht habe, ist, dass ich später weitere Funktionalitäten hinzufügen möchte.

[Arkshine]

Sie benötigen das components-Verzeichnis hier in diesem Connector- und Codekontext nicht.
Sie können es in meinem Screenshot sehen, da ich eine vorhandene Komponente geändert habe.

Das gesagt, es hängt davon ab, was Sie später tun möchten. Es ist auch möglich, eine Komponente im Connector zu erstellen, die sich auf eine andere Komponente bezieht (und diese würden Sie im components-Verzeichnis platzieren).

[Terise]

Das ist perfekt, vielen Dank!

Ich habe noch eine letzte Frage, wenn es Ihnen nichts ausmacht. Gibt es eine Möglichkeit, die angehefteten Themen aus der normalen Themenliste auszublenden, damit die angehefteten Themen nicht dupliziert werden?

Bearbeiten: Ich konnte das tatsächlich mit etwas CSS erreichen.

Nochmals vielen Dank für Ihre Hilfe!