He creado un componente separado para móviles:
@Steven ¿Podemos también agregar “último mensaje de” dentro de un cuadro de categoría en el índice o la página principal que esté configurado solo para categorías?
Necesitarás reescribir una plantilla; hay demasiadas opciones para que yo lo añada en mi componente, pero se puede hacer en tu sección de personalización.
Mi suposición es que deberías usar las cajas de categorías con temas y reescribir esta plantilla: https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/categories-boxes-with-topics.hbs
@Steven, gracias de nuevo. Una última cosa: si elijo categorías con los temas más recientes o populares, no puedo ver “Último mensaje por” en la página de inicio, pero sí es visible dentro de las secciones de categorías.
No estoy seguro de qué plantilla se usa en este escenario, probablemente esté en esta lista: https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/app/templates/components
Pero no estoy seguro de cuál, mi mejor suposición es esta: https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/templates/components/latest-topic-list-item.hbs
1 me gusta
Creo que se trata de «categorías con tema», pero no funciona. @Steven, ¿podrías indicarme qué necesito agregar para mostrar solo «última publicación por» debajo de los temas?
@Steven Acabo de hacer una PR para arreglar este componente bajo el nuevo entorno ‘ember cli’:
2 Me gusta
Gracias, lo fusioné lo antes posible, todos pueden actualizar de forma segura.
2 Me gusta
¡Felicitaciones por el componente, me gustó mucho! ¿Es posible usar el componente y poner el avatar de la persona que creó el tema antes del tema? Si es así, ¿cómo lo hago? Un ejemplo de lo que estoy hablando
La foto del avatar antes del tema sería la del creador, y el avatar al final del tema sería el de quien publicó por última vez, ¿cómo hago esto?
[image]
Usé parte del componente de tema de @dax para mostrar el avatar del autor: Topic Author
Aquí están las partes para agregar en la sección Header
<td class='author topic-list-data'>
<a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">
{{#if (theme-setting 'show_author_username')}}
{{topic.creator.username}}
{{else}}
{{avatar topic.creator imageSize="45"}}
{{/if}}
</a>
</td>
dentro de <script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'> (...) </script>
Y
{{raw "topic-list-header-column" number='true'}}
dentro de <script type='text/x-handlebars' data-template-name='topic-list-header.raw'> (...) </script>
Aquí está el código completo que puedes usar
<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='author topic-list-data'>
<a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">
{{#if (theme-setting 'show_author_username')}}
{{topic.creator.username}}
{{else}}
{{avatar topic.creator imageSize="45"}}
{{/if}}
</a>
</td>
<td class='main-link clearfix topic-list-data' colspan="1" role="rowheader">
{{~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}}
{{#if showLikes}}
<td class="num likes topic-list-data">
{{#if hasLikes}}
<a href='{{topic.summaryUrl}}'>
{{number topic.like_count}} {{d-icon "heart"}}</td>
</a>
{{/if}}
{{/if}}
<td class="num views {{topic.viewsHeat}} topic-list-data">{{number topic.views numberKey="views_long"}}</td>
<td class="last-post">
<div class='poster-avatar'>
<a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser 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'>
{{~raw-plugin-outlet name="topic-list-header-before"~}}
{{#if bulkSelectEnabled}}
<th class="bulk-select topic-list-data">
{{#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 type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
<th class="bulk-select topic-list-data">
{{#if canBulkSelect}}
{{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
{{/if}}
</th>
{{/if}}
{{raw "topic-list-header-column" number='true'}}
{{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'}}
{{~raw-plugin-outlet name="topic-list-header-after"~}}
</script>
<script type="script/discourse-plugin">
(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>
1 me gusta
Muchas gracias por responderme, por alguna razón la interfaz de mi foro no es la misma que la de la imagen que publicaste, el avatar en la esquina derecha está arriba y el @ de la persona que publicó está abajo, esto rompe totalmente la interfaz. (Hay mucho espacio entre algunos temas y otros no, en una confusión) ¿cómo lo dejo a un lado con la información al lado? (¿Como tu foto?) Y el avatar de la izquierda es la persona que publicó por última vez, ¿hay alguna forma de cambiarlo a la persona que creó el tema? (¿Mientras que el avatar en la esquina derecha sería la última persona que publicó?) Ya que voy a dejar el avatar en la esquina derecha para el creador del tema, ¿hay alguna forma de eliminar el nombre de la persona que creó el tema junto al nombre de la categoría?
No estoy seguro de haber entendido todo, asumo que los problemas de diseño provienen de un CSS personalizado por tu parte.
Aquí tienes una versión corregida para ti:
<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='author topic-list-data'>
<a href="{{topic.creator.path}}" data-user-card="{{topic.creator.username}}">
{{#if (theme-setting 'show_author_username')}}
{{topic.creator.username}}
{{else}}
{{avatar topic.creator imageSize="45"}}
{{/if}}
</a>
</td>
<td class='main-link clearfix topic-list-data' colspan="1" role="rowheader">
{{~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}}
{{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 topic-list-data">
{{#if hasLikes}}
<a href='{{topic.summaryUrl}}'>
{{number topic.like_count}} {{d-icon "heart"}}</td>
</a>
{{/if}}
{{/if}}
<td class="num views {{topic.viewsHeat}} topic-list-data">{{number topic.views numberKey="views_long"}}</td>
</script>
<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{~raw-plugin-outlet name="topic-list-header-before"~}}
{{#if bulkSelectEnabled}}
<th class="bulk-select topic-list-data">
{{#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 type='text/x-handlebars' data-template-name='topic-list-header.raw'>
{{#if bulkSelectEnabled}}
<th class="bulk-select topic-list-data">
{{#if canBulkSelect}}
{{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
{{/if}}
</th>
{{/if}}
{{raw "topic-list-header-column" number='true'}}
{{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-plugin-outlet name="topic-list-header-after"~}}
</script>
<script type="script/discourse-plugin">
(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>
Añade esto para corregir el sitio de la primera columna
.topic-list .author {
width: 50px;
}
Debería ser más cercano a lo que buscas.
Gracias, Steven. ¡Estaba intentando lograr exactamente esto!
¿Planeas fusionar este mod en tu componente temático? Sería algo importante para mí.
Saludos cordiales,
No planeo hacer esto, veo estos dos componentes como conceptos diferentes. Pero puedes crear fácilmente tu propia fusión en tu sección Personalizar para usar el ejemplo que di antes.
3 Me gusta
Hola, el icono de etiqueta no se muestra en las listas de temas de categorías en mi tema, cuando uso este componente.
¿Estás usando el componente Tag Icons? Sí que se muestra en mi lado. ¿Cuál es tu tema?
No, no lo estoy. En el componente móvil de la lista de temas de md, se muestra el icono de etiqueta, pero en este no. Lo acabo de deshabilitar y voy a probar los iconos de etiqueta.
En la configuración del foro svg icon subset ¿configuraste algún icono?
Si tienes fa-tag, deberías eliminarlo en esta configuración.
1 me gusta
