Séparer les sujets épinglés

Dev
1

Bonjour !

Je ne suis pas tout à fait sûr de la manière de procéder et je cherchais un peu d’aide.

En gros, j’aimerais avoir une séparation visuelle entre les sujets épinglés et les sujets réguliers. Ce serait pour les forums communautaires d’un studio de jeux et cette séparation serait utile pour les utilisateurs.

Je recherche quelque chose comme ceci :

[PINNED] Nom du sujet

Sujet régulier

Au lieu de :

[PINNED] Nom du sujet
Sujet régulier

J’ai déjà changé la couleur de fond des sujets épinglés pour créer une légère différence entre les deux. J’ai essayé le CSS, ce qui a fonctionné, mais seulement lors d’un actualisation de page.

J’ai tenté de créer mon propre composant de thème, mais c’est là que je bloque car j’aurais besoin d’ajouter quelque chose, mais je ne sais pas où.

Mon objectif est d’ajouter <tbody class="pinned-topics"> avant le tbody original (sujets réguliers).

Toute aide est grandement appréciée !

1 « J'aime »
2

Vous pouvez envisager d’utiliser le composant de thème Filtered Topic Lists avec la requête in:pinned.

Si vous préférez rester sur CSS, vous pouvez faire quelque chose comme ceci :

// cible la dernière épingle dans la liste
tr.topic-list-item.pinned:has(+ tr:not(.pinned)) td {
  // moyen approximatif de forcer un espace dans une ligne de tableau
  padding-bottom: 1.8em;
}

tr.topic-list-item.pinned:has(+ tr:not(.pinned))::after {
  // contenu à afficher dans l'espace si désiré
  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);
}
5 « J'aime »
3

Merci pour votre aide ! Malheureusement, cela n’a pas fonctionné. J’ai une tentative de plugin qui devrait faire ce dont j’ai besoin, mais je n’arrive pas à le faire fonctionner sur Discourse 3.4.0-beta2.

Toute aide à ce sujet serait grandement appréciée !

4

Salut Terise,

J’ai regardé ton code, et tu y es presque !

Voici quelques retours :

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

Cela signifie que cela devrait être :

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

et le template :

{{#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}}

Cela génère un wrapper div avec un ID unique et perturbe le CSS. Cependant, il est nécessaire si tu veux lier des actions à l’élément.

image
image370×142 5.97 KB

Tu peux utiliser tagName et classNames pour personnaliser le wrapper.

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}}

image
image501×139 7.12 KB

(si tu sais que tu ne feras rien sur l’élément, tu peux garder le tbody dans le template et utiliser tagName("")).

Ensuite, tu obtiens ceci :

The image shows a computer screen with a web browser displaying a page with two separate search results. (Captioned by AI)
The image shows a computer screen with a web browser displaying a page with two separate search results. (Captioned by AI)1087×310 15.9 KB

Je ne l’ai pas examiné en profondeur pour voir s’il y avait une meilleure façon.
Je voulais juste aider à faire fonctionner ton code ! :smile:

5 « J'aime »
5

Aurais-je besoin de quelque chose dans le répertoire des composants ou tous les fichiers résideraient-ils dans les connecteurs ?
La seule raison pour laquelle je faisais cela en tant que composant de plugin au lieu d’un composant de thème est que j’ai l’intention d’ajouter plus de fonctionnalités plus tard.

6

Vous n’avez pas besoin du répertoire components ici, dans ce contexte de connecteur et de code.
Vous pouvez le voir sur ma capture d’écran car j’ai modifié un composant existant. :smile:

Cela dit, cela dépend de ce que vous voulez faire plus tard. Il est également possible de créer un composant dans le connecteur qui fait référence à un autre composant (et celui-ci, vous le placeriez dans le répertoire components).

1 « J'aime »
7

C’est parfait, merci beaucoup !

J’ai une dernière question, si cela ne vous dérange pas. Y a-t-il un moyen d’empêcher les sujets épinglés d’apparaître dans la liste normale des sujets afin que les sujets épinglés ne soient pas dupliqués ?

Modification : J’ai en fait réussi à faire cela avec un peu de CSS.

Encore une fois, merci beaucoup pour votre aide !

1 « J'aime »
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.