MD Topic List component

Steven · March 27, 2020, 1:46pm

You can edit the component directly and change the header part and paste this. It will use the older version

<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 · March 27, 2020, 5:05pm

Thank you for that

Steven · March 27, 2020, 5:31pm

I created a specific branch for those who don’t want to edit the component and can’t upgrade their discourse forum right now

You can install a new component, use the advanced settings

Repository containing theme: https://github.com/iunctis/md-topic-list
Branch name: bf-20200323

You’ll have the component compatible with the version Discourse older than march 23, 2020. Before this commit

Steven · March 30, 2020, 7:59pm

I was playing a bit with the topic list presentation on mobile, it still needs some work but would you be interested with something like this (it would be a separate component):

The current topic list mobile presentation:

The avatar still opens the user card, the date links to the last post

ScammerRevolts · March 31, 2020, 6:55am

I definitely would, would be a nice addition especially since the layout for mobile and desktop would be similar instead of looking totally different

jrgong · March 31, 2020, 8:45pm

The preview link doesn’t work. When I try to access, I get this error message:

Access Denied

while trying to load /theme/Steven/md-topic-list.json

Something went wrong.

Steven · March 31, 2020, 8:48pm

Sorry about that, I cleaned up my Discourse theme pages earlier but I cleaned a bit too much

It should be fixed now, thanks for reporting!

jrgong · April 4, 2020, 10:14am

Hey @Steven

I am on 2.4.1 already, yet my avatars are still gone. See my topic preview screenshot her

Steven · April 4, 2020, 11:21am

Have you tried this branch?

If you have a Discourse version older than march 23rd, you need to use this branch until you upgrade your forum:

jrgong · April 25, 2020, 1:03pm

Is anyone running this theme component in combination Topic List Previews plugin. Or is it causing issues after all?

I am currently using Sam’s minimal theme, but it’s not working with Topic List Previews at its current state. So I am considering switching to be able to have both: Minimalistic topic list and image previews of topics

Steven · April 25, 2020, 1:10pm

It’s expected, the topic list previews plugin override the topic list items templates, so as this theme component. I think the plugin has the edge over the theme component, so I think the best way to has both is to fork the topic list previews plugin and customize the templates.

I did a customized fork myself if you want to check how it can be done : https://github.com/iunctis/discourse-topic-previews
These changes specifically - https://github.com/iunctis/discourse-topic-previews/commit/6905fced0d5f85a6bc01c9bc0fb657a17475cb41 (I don’t really recommand this version to your forum because I have a customized theme that comes with it, and I changed a few things in the tiles most users wouldn’t like)

The desktop templates in the original plugin are here, this is the best way to start : https://github.com/paviliondev/discourse-topic-previews/tree/master/assets/javascripts/discourse/templates/list

It’s totally doable but you need to be a bit confortable with github (to stay up to date with the plugin) and template customization.

Steven · May 19, 2020, 7:51pm

I pushed a little upgrade just now. No new feature but I added the compatibility with the new thumbnails functions.

The theme component is compatible with these components

nory · July 7, 2020, 7:09pm

Hi, it is compatible also with this plugin? Topic List Previews
Thank you,
Deb

Steven · July 7, 2020, 8:15pm

Sadly not since we edit the same file.

You can make both work if you change the header code, and integrate tiles style with my modifications but it require some understanding of how this works.

You can use some inspiration in my old custom version of the topic list preview (it was before the official thumbnails theme component, so it may not work at the moment) : https://github.com/iunctis/discourse-topic-previews/blob/master/assets/javascripts/discourse/templates/list/topic-list-item.hbr
But it used different css class and alignmnent for some things, this may not work with your forum.

pinder99 · January 20, 2021, 10:20am

Hi @Steven i am using your plugin for a while now and i removed activity tab and view tab from topic so i can move both of them below topics like your plugin but i am not successful can you help me out , i just want to add date(activity) like the image below

Steven · January 20, 2021, 12:57pm

First you need to change the structure of the table and delete the view and activity tabs columns

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

You can delete the last line also if you want to delete the replies column

Then let’s takle the big part with the content, first, i’ve deleted the two columns

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

Then we add the content we want, I won’t add all the details you need because it requires a bit of work, but it should look like this

<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>Started <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a> by <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}}">Last post {{format-date topic.bumpedAt format="tiny"}}</a> by <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>

But this is just a first scratch and I didn’t test it, you might need to add some span class, change the date format (using format=“medium” instead of tiny?), but the structure should be pretty much okay

pinder99 · January 20, 2021, 1:02pm

really thankyou @Steven , this is actually what i need really appreciate quick response , just one more thing there is no gap between “admin” and Last post" , how to add some space in them

Steven · January 20, 2021, 1:29pm

I added a <br> weird it didn’t take. You put it in the span tag or use   to force some spacing if you’re not comfortable with adding a class element in the span tag.

pinder99 · January 20, 2021, 2:39pm

nbsp worked like charm

pinder99 · January 22, 2021, 8:37am

@Steven it is working fine on desktop (also added some more data ) but it is not showing on mobile version , can you help

Topic		Replies	Views
MD Topic List Mobile component theme-component	29	5159	December 29, 2023
Topic Author theme-component official , topic-author	61	11354	October 18, 2023
Topic List Thumbnails theme-component official , topic-list-thumbnails	125	26681	February 5, 2024
Sam's Simple Theme theme official	353	75959	March 21, 2024
Homepage Feature theme-component official , homepage-feature	106	18284	April 22, 2024

MD Topic List component

Related Topics