Separando Temas Anclados

[Terise]

Hola!

No estoy muy seguro de cómo proceder y estaba buscando un poco de ayuda.

Básicamente, me gustaría tener una separación visual entre los temas fijados y los temas regulares. Esto sería para los foros de la comunidad de un estudio de juegos y esa separación sería útil para los usuarios.

Lo que busco es algo como esto:

[FIJADO] Nombre del tema

Tema regular

En lugar de:

[FIJADO] Nombre del tema
Tema regular

Ya he cambiado el color de fondo de los temas fijados para crear una ligera diferencia entre ambos. He probado con CSS, lo que ha funcionado, pero solo al actualizar la página.

He intentado crear mi propio componente temático, pero ahí es donde me atasco, ya que necesitaría añadir algo, pero no estoy seguro de dónde.

Mi objetivo es añadir <tbody> class="pinned-topics"> antes del tbody original (temas regulares).

¡Cualquier orientación es muy apreciada!

[Alteras (Steven Chang)]

Puedes considerar usar el componente temático Filtered Topic Lists con la consulta in:pinned.

Si en cambio quieres usar CSS, puedes hacer algo como esto:

// apunta al último pin en la lista
tr.topic-list-item.pinned:has(+ tr:not(.pinned)) td {
  // forma aproximada de forzar espacio dentro de una fila de tabla
  padding-bottom: 1.8em;
}

tr.topic-list-item.pinned:has(+ tr:not(.pinned))::after {
  // contenido a mostrar en el espacio si se desea
  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]

¡Gracias por la ayuda! Desafortunadamente, eso no funcionó. Tengo un intento de un plugin que debería hacer lo que necesito, pero no parece que pueda hacerlo funcionar en Discourse 3.4.0-beta2.

GitHub - darkpsy3934/discourse-mistflux-plugin

¡Cualquier ayuda con esto sería muy apreciada!

[Arkshine]

Hola Terise,

¡Miré tu código y estás cerca!

Aquí tienes algunos comentarios:

• Puedes modificarlo con un componente de tema (no un plugin). Te animo a usar esta plantilla: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes

• Usar un conector es correcto. La ruta correcta es /discourse/connectors/…
  

  

• Los argumentos pasados al conector se pueden recuperar con outletArgs. Puedes ver el conector aquí:

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

Esto significa que debería ser:

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

y la plantilla:

{{#if this.pinnedTopics}}
  <tbody class="pinned-topics">
    {{#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: Desafortunadamente, showPosters no se pasa como argumento; debes codificar su valor aquí.

• Nota: Por defecto, se verá así:
  

  

Genera un div contenedor con un ID único y estropea el CSS. Sin embargo, es necesario si quieres vincular acciones al elemento.

Puedes usar tagName y classNames para personalizar el contenedor.

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

(si sabes que no harás nada en el elemento, puedes mantener el tbody en la plantilla y usar tagName("")).

Entonces, obtienes esto:

No lo examiné a fondo para ver si había una mejor manera.
¡Solo quería ayudar a que tu código funcionara!

[Terise]

¿Necesitaría algo en el directorio de componentes o todos los archivos residirían en los conectores?
La única razón por la que lo estaba haciendo como un componente de plugin en lugar de un componente temático es porque tengo planes de agregar más funcionalidad más adelante.

[Arkshine]

No necesitas el directorio components aquí en este contexto de código y conector.
Puedes verlo en mi captura de pantalla porque modifiqué un componente existente.

Dicho esto, depende de lo que quieras hacer más adelante. También es posible crear un componente en el conector que haga referencia a otro componente (y este, lo colocarías en el directorio components).

[Terise]

¡Eso es perfecto, muchas gracias!

Tengo una última pregunta, si no le importa. ¿Hay alguna forma de evitar que los temas fijados aparezcan en la lista normal de temas para que los temas fijados no se dupliquen?

Editar: De hecho, pude hacerlo con un poco de CSS.

Nuevamente, ¡muchas gracias por su ayuda!