Separando Tópicos Fixados

[Terise]

Olá!

Não tenho muita certeza de como proceder com isso e estava procurando um pouco de ajuda.

Basicamente, eu gostaria de ter uma separação visual entre os tópicos fixados e os tópicos regulares. Isso seria para os fóruns da comunidade de um estúdio de jogos e essa separação seria útil para os usuários.

O que estou procurando é algo como isto:

[FIXADO] Nome do Tópico

Tópico regular

Em vez de:

[FIXADO] Nome do Tópico
Tópico regular

Já alterei a cor de fundo dos tópicos fixados para criar uma pequena diferença entre os dois. Tentei usar CSS, que funcionou, mas apenas em uma atualização de página.

Tentei criar meu próprio componente de tema, mas é aí que estou travado, pois precisaria adicionar algo, mas não tenho certeza de onde.

Meu objetivo é adicionar <tbody> class="pinned-topics"> antes do tbody original (tópicos regulares).

Qualquer orientação é muito apreciada!

[Alteras (Steven Chang)]

Você pode considerar usar o componente de tema Filtered Topic Lists com a consulta in:pinned.

Se, em vez disso, você quiser usar CSS, pode fazer algo como isto:

// tem como alvo o último fixado na lista
tr.topic-list-item.pinned:has(+ tr:not(.pinned)) td {
  // maneira bruta de forçar espaço dentro de uma linha de tabela
  padding-bottom: 1.8em;
}

tr.topic-list-item.pinned:has(+ tr:not(.pinned))::after {
  // conteúdo a ser exibido no espaço, se desejado
  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]

Obrigado pela ajuda! Infelizmente, isso não funcionou. Tenho uma tentativa de plugin que deve fazer o que preciso, mas não consigo fazê-lo funcionar no Discourse 3.4.0-beta2.

GitHub - darkpsy3934/discourse-mistflux-plugin

Qualquer assistência com isso seria muito apreciada!

[Arkshine]

Olá Terise,

Eu olhei seu código e você está quase lá!

Aqui estão alguns feedbacks:

• Você pode modificá-lo com um componente de tema (não um plugin). Eu encorajo você a usar este template: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes

• Usar um conector está correto. O caminho certo é /discourse/connectors/…
  

  

• Os argumentos passados para o conector podem ser recuperados com outletArgs. Você pode ver o conector aqui:

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

Isso significa que isso deveria ser:

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

e o 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: Infelizmente, showPosters não é passado como um argumento; você precisa codificá-lo aqui.

• Nota: Por padrão, parecerá isto:
  

  

Ele gera um wrapper div com um ID único e bagunça o CSS. No entanto, é necessário se você quiser vincular ações ao elemento.

Você pode usar tagName e classNames para personalizar o 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 você sabe que não fará nada no elemento, pode manter o tbody no template e usar tagName("")).

Então, você obtém isto:

Eu não examinei isso a fundo para ver se havia uma maneira melhor.
Eu só queria ajudar a fazer seu código funcionar!

[Terise]

Eu precisaria de algo no diretório de componentes ou todos os arquivos ficariam nos conectores?
A única razão pela qual fiz isso como um plugin em vez de um Componente de Tema é porque tenho planos de adicionar mais funcionalidades mais tarde.

[Arkshine]

Você não precisa do diretório components aqui neste contexto de conector e código.
Você pode vê-lo na minha captura de tela porque modifiquei um componente existente.

Dito isso, depende do que você quer fazer mais tarde. Também é possível criar um componente no conector que se refira a outro componente (e este, você o colocaria no diretório components).

[Terise]

Isso é perfeito, muito obrigado!

Tenho só mais uma pergunta, se não se importar. Existe alguma forma de impedir que os tópicos fixados apareçam na lista normal de tópicos, para que os tópicos fixados não sejam duplicados?

Editar: Na verdade, consegui fazer isso com um pouco de CSS.

Mais uma vez, muito obrigado pela sua ajuda!