Separare gli Argomenti Fissati

[Terise]

Ciao!

Non sono sicuro di come procedere e cercavo un po’ di assistenza.

In sostanza, vorrei avere una separazione visiva tra gli argomenti bloccati e quelli regolari. Questo sarebbe per i forum della community di uno studio di giochi e tale separazione sarebbe utile per gli utenti.

Quello che sto cercando è qualcosa del genere:

[BLOCCATO] Nome argomento

Argomento regolare

Invece di:

[BLOCCATO] Nome argomento
Argomento regolare

Ho già cambiato il colore di sfondo degli argomenti bloccati per creare una leggera differenza tra i due. Ho provato con CSS, che ha funzionato, ma solo al refresh della pagina.

Ho tentato di creare il mio componente tema, ma è lì che mi blocco poiché dovrei aggiungere qualcosa, ma non sono sicuro di dove.

Il mio obiettivo è aggiungere <tbody class="pinned-topics"> prima del tbody originale (argomenti regolari).

Qualsiasi guida è molto apprezzata!

[Alteras (Steven Chang)]

Puoi considerare l’utilizzo del componente tema Filtered Topic Lists con la query in:pinned.

Se invece vuoi attenerti al CSS, puoi fare qualcosa di simile:

// seleziona l'ultimo pin nell'elenco
tr.topic-list-item.pinned:has(+ tr:not(.pinned)) td {
  // modo approssimativo per forzare spazio all'interno di una riga della tabella
  padding-bottom: 1.8em;
}

tr.topic-list-item.pinned:has(+ tr:not(.pinned))::after {
  // contenuto da visualizzare nello spazio, se desiderato
  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]

Grazie per l’aiuto! Sfortunatamente, non ha funzionato. Ho un tentativo di plugin che dovrebbe fare quello che mi serve, ma non riesco a farlo funzionare su Discourse 3.4.0-beta2.

GitHub - darkpsy3934/discourse-mistflux-plugin

Qualsiasi assistenza sarebbe molto apprezzata!

[Arkshine]

Ciao Terise,

Ho esaminato il tuo codice e ci sei quasi!

Ecco alcuni feedback:

• Puoi modificarlo con un componente tema (non un plugin). Ti incoraggio a usare questo modello: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes

• L’uso di un connettore è corretto. Il percorso giusto è /discourse/connectors/…
  

  

• Gli argomenti passati al connettore possono essere recuperati con outletArgs. Puoi vedere il connettore qui:

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

Ciò significa che questo dovrebbe essere:

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

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

• Nota: Sfortunatamente, showPosters non viene passato come argomento; devi codificarlo qui.

• Nota: Per impostazione predefinita, apparirà così:
  

  

Genera un div wrapper con un ID univoco e rovina il CSS. Tuttavia, è necessario se vuoi associare azioni all’elemento.

Puoi usare tagName e classNames per personalizzare il 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}}

(se sai che non farai nulla sull’elemento, puoi mantenere il tbody nel template e usare tagName("")).

Quindi, ottieni questo:

Non l’ho esaminato a fondo per vedere se c’era un modo migliore.
Volevo solo aiutarti a far funzionare il tuo codice!

[Terise]

Mi servirebbe qualcosa nella directory dei componenti o tutti i file risiederanno nei connettori?
L’unica ragione per cui lo stavo facendo come plugin invece di un componente del tema è perché ho in programma di aggiungere altre funzionalità in seguito.

[Arkshine]

Non hai bisogno della directory components qui, in questo connettore e contesto di codice.
Puoi vederla nel mio screenshot perché ho modificato un componente esistente.

Detto questo, dipende da cosa vuoi fare in seguito. È anche possibile creare un componente nel connettore che faccia riferimento a un altro componente (e questo, lo collocheresti nella directory components).

[Terise]

Perfetto, grazie mille!

Ho un’ultima domanda, se non ti dispiace. C’è un modo per impedire che gli argomenti fissati appaiano nell’elenco normale degli argomenti in modo che gli argomenti fissati non vengano duplicati?

Modifica: Sono riuscito a farlo con un po’ di CSS.

Grazie ancora mille per il tuo aiuto!