Componente de lista de temas MD

Steven · 27 Marzo, 2020 13:46

Puedes editar el componente directamente, modificar la parte del encabezado y pegar esto. Se utilizará la versión anterior

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

<td class='main-link clearfix' colspan="1">
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
    {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    <span class='topic-creator'>{{d-icon "user"}} <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span> &nbsp;
    {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{raw "list/posts-count-column" topic=topic}}

{{#if showLikes}}
  <td class="num likes">
    {{#if hasLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

{{#if showOpLikes}}
  <td class="num likes">
    {{#if hasOpLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.op_like_count}} {{d-icon "heart"}}</td>
  </a>
{{/if}}
{{/if}}

<td class="num views {{topic.viewsHeat}}">{{number topic.views numberKey="views_long"}}</td>

<td class="last-post">
<div class='poster-avatar'>
<a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
</div>
<div class='poster-info'>
<span class='editor'><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
<br />
<a href="{{topic.lastPostUrl}}">
{{format-date topic.bumpedAt format="tiny"}}
</a>
</div>
</td>
</script>

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
  <th class="bulk-select">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
{{#if showLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='likes' name='likes'}}
{{/if}}
{{#if showOpLikes}}
  {{raw "topic-list-header-column" sortable=sortable number='true' order='op_likes' name='likes'}}
{{/if}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='views' name='views'}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='activity' name='activity'}}
</script>

<script>
(function(){
var TopicListItemView = require('discourse/components/topic-list-item').default;
TopicListItemView.reopen({
    showCategory: function(){
        return !this.get('controller.hideCategory') &&
                this.get('topic.creator') &&
                this.get('topic.category.name') !== 'uncategorized';
    }.property()
});
   
})();
</script>

WorldIsMine · 27 Marzo, 2020 17:05

¡Gracias por eso :D!

Steven · 27 Marzo, 2020 17:31

He creado una rama específica para quienes no desean editar el componente y no pueden actualizar su foro de Discourse en este momento.

Puedes instalar un nuevo componente y usar la configuración avanzada.

Repositorio que contiene el tema: https://github.com/iunctis/md-topic-list
Nombre de la rama: bf-20200323

Obtendrás el componente compatible con versiones de Discourse anteriores al 23 de marzo de 2020. Antes de este commit

Steven · 30 Marzo, 2020 19:59

Estuve experimentando un poco con la presentación de la lista de temas en móvil. Aún necesita algunos ajustes, pero ¿te interesaría algo así? (sería un componente separado):

La presentación actual de la lista de temas en móvil:

El avatar sigue abriendo la tarjeta del usuario y la fecha enlaza al último mensaje.

ScammerRevolts · 31 Marzo, 2020 06:55

Definitivamente lo haría, sería un buen añadido, especialmente porque el diseño para móviles y escritorio sería similar en lugar de verse totalmente diferente

jrgong · 31 Marzo, 2020 20:45

El enlace de vista previa no funciona. Cuando intento acceder, obtengo este mensaje de error:

Acceso denegado

mientras intentaba cargar /theme/Steven/md-topic-list.json

Algo salió mal.

Steven · 31 Marzo, 2020 20:48

Lo siento por eso. Limpie las páginas de mi tema en Discourse antes, pero limpié un poco demasiado

Debería estar solucionado ahora, ¡gracias por el reporte!

jrgong · 4 Abril, 2020 10:14

Hola @Steven

Ya estoy en la versión 2.4.1, pero mis avatares siguen desaparecidos. Mira la captura de pantalla de mi tema aquí

Steven · 4 Abril, 2020 11:21

¿Has probado esta rama?

Si tienes una versión de Discourse anterior al 23 de marzo, necesitas usar esta rama hasta que actualices tu foro:

jrgong · 25 Abril, 2020 13:03

¿Alguien está ejecutando este componente de tema en combinación con el plugin Topic List Previews? ¿O está causando problemas después de todo?

Actualmente estoy usando el tema minimalista de Sam, pero no funciona con Topic List Previews en su estado actual. Así que estoy considerando cambiar para poder tener ambas cosas: lista de temas minimalista y vistas previas de imágenes de los temas.

Steven · 25 Abril, 2020 13:10

Se espera que el plugin de vistas previas de la lista de temas anule las plantillas de los elementos de la lista de temas, al igual que este componente del tema. Creo que el plugin tiene ventaja sobre el componente del tema, por lo que creo que la mejor manera de tener ambos es bifurcar el plugin de vistas previas de la lista de temas y personalizar las plantillas.

Hice una bifurcación personalizada yo mismo si quieres ver cómo se puede hacer: https://github.com/iunctis/discourse-topic-previews
Estos cambios específicamente: https://github.com/iunctis/discourse-topic-previews/commit/6905fced0d5f85a6bc01c9bc0fb657a17475cb41 (no recomiendo realmente esta versión para tu foro porque tengo un tema personalizado que viene con ella, y cambié algunas cosas en las tarjetas que a la mayoría de los usuarios no les gustarían).

Las plantillas de escritorio en el plugin original están aquí, esta es la mejor manera de empezar: https://github.com/paviliondev/discourse-topic-previews/tree/master/assets/javascripts/discourse/templates/list

Es totalmente factible, pero necesitas estar un poco cómodo con GitHub (para mantenerte al día con el plugin) y con la personalización de plantillas.

Steven · 19 Mayo, 2020 19:51

Acabo de subir una pequeña actualización. No hay ninguna función nueva, pero he añadido compatibilidad con las nuevas funciones de miniaturas.

El componente del tema es compatible con estos componentes:

nory · 7 Julio, 2020 19:09

Hola, ¿también es compatible con este complemento? Topic List Previews (legacy)
Gracias,
Deb

Steven · 7 Julio, 2020 20:15

Lamentablemente no, ya que editamos el mismo archivo.

Puedes hacer que ambos funcionen si modificas el código del encabezado e integras el estilo de los mosaicos con mis modificaciones, pero esto requiere cierto conocimiento de cómo funciona.

Puedes tomar algo de inspiración en mi antigua versión personalizada de la vista previa de la lista de temas (era antes del componente oficial del tema de miniaturas, por lo que es posible que no funcione en este momento): https://github.com/iunctis/discourse-topic-previews/blob/master/assets/javascripts/discourse/templates/list/topic-list-item.hbr

Sin embargo, utilizaba diferentes clases CSS y alineación para algunos elementos, por lo que es posible que no funcione en tu foro.

pinder99 · 20 Enero, 2021 10:20

Hola @Steven, llevo un tiempo usando tu plugin y he eliminado la pestaña de actividad y la pestaña de vista del tema para poder mover ambas debajo de los temas, como hace tu plugin, pero no he tenido éxito. ¿Puedes ayudarme? Solo quiero agregar la fecha (actividad) como se muestra en la imagen a continuación:

Steven · 20 Enero, 2021 12:57

Primero, necesitas cambiar la estructura de la tabla y eliminar las columnas de las pestañas de vista y actividad.

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
  <th class="bulk-select">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
{{raw "topic-list-header-column" sortable=sortable number='true' order='posts' name='replies'}}
</script>

También puedes eliminar la última línea si deseas borrar la columna de respuestas.

Ahora abordemos la parte más grande con el contenido. Primero, he eliminado las dos columnas.

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{~raw-plugin-outlet name="topic-list-before-columns"}}

{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

<td class='main-link clearfix' colspan="1">
  {{~raw-plugin-outlet name="topic-list-before-link"}}
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
    {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator 
                                   topicId=topic.id 
                                   unreadClass=unreadClass~}}
    {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    <span class='topic-creator'>{{d-icon "user"}} <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span>
	{{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{raw "list/posts-count-column" topic=topic}}

</script>

Luego agregamos el contenido que deseamos. No incluiré todos los detalles necesarios porque requiere un poco de trabajo, pero debería verse así:

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{~raw-plugin-outlet name="topic-list-before-columns"}}

{{#if bulkSelectEnabled}}
  <td class="bulk-select">
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}

<td class='main-link clearfix' colspan="1">
  {{~raw-plugin-outlet name="topic-list-before-link"}}
  <span class='link-top-line'>
    {{~raw-plugin-outlet name="topic-list-before-status"}}
    {{~raw "topic-status" topic=topic}}
    {{~topic-link topic class="raw-link raw-topic-link"}}
    {{~#if topic.featured_link}}
    {{~topic-featured-link topic}}
    {{~/if}}
    {{~raw-plugin-outlet name="topic-list-after-title"}}
    {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator 
                                   topicId=topic.id 
                                   unreadClass=unreadClass~}}
    {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
    {{~/if}}
  </span>
  <div class="link-bottom-line">
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    <span>Comenzado <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a> por <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a></span><br>
    <span><a href="{{topic.lastPostUrl}}">Último post {{format-date topic.bumpedAt format="tiny"}}</a> por <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
	{{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{raw "list/posts-count-column" topic=topic}}

</script>

Sin embargo, esto es solo un primer borrador y no lo he probado. Es posible que necesites agregar algunas clases de span, cambiar el formato de la fecha (usando format=“medium” en lugar de tiny?), pero la estructura debería estar bastante bien.

pinder99 · 20 Enero, 2021 13:02

Muchas gracias, @Steven, esto es exactamente lo que necesitaba. Aprecio mucho tu rápida respuesta. Solo una cosa más: no hay espacio entre “admin” y “Último mensaje”. ¿Cómo puedo agregar algo de espacio entre ellos?

Steven · 20 Enero, 2021 13:29

Agregué un <br> y es extraño que no haya funcionado. Puedes ponerlo dentro de la etiqueta span o usar   para forzar un poco de espacio si no te sientes cómodo agregando un elemento de clase en la etiqueta span.

pinder99 · 20 Enero, 2021 14:39

nbsp funcionó como un encanto

pinder99 · 22 Enero, 2021 08:37

@Steven está funcionando bien en el escritorio (también agregué más datos), pero no se muestra en la versión móvil. ¿Puedes ayudar?

Tema		Respuestas	Vistas
MD Topic List Mobile component Theme component	61	6772	7 Abril 2026
Topic Author Theme component topic-author , end-of-life	63	12616	4 Octubre 2024
Sam's Simple Theme Theme official , sams-simple-theme	368	82822	17 Febrero 2025
Discourse Topic List Author & Posters Theme component	8	220	5 Febrero 2026
Display Topic Author on Topic List UX	7	2569	8 Febrero 2021

Componente de lista de temas MD

Temas relacionados