DEV: Update for glimmer topic list

This switches docs to use the core `<BasicTopicList` component, with some customizations made via the DAG API.
This commit is contained in:
David Taylor 2025-01-06 18:34:52 +00:00
parent d30f2d44dc
commit 1658c61287
No known key found for this signature in database
GPG Key ID: 46904C18B1D3F434
8 changed files with 27 additions and 103 deletions

View File

@ -1,32 +0,0 @@
import Component from "@ember/component";
import { action } from "@ember/object";
import { classNames } from "@ember-decorators/component";
import discourseComputed from "discourse-common/utils/decorators";
import { getDocs } from "../../lib/get-docs";
@classNames("docs-topic-list")
export default class DocsTopicList extends Component {
urlPath = getDocs();
@discourseComputed("order")
sortTitle(order) {
return order === "title";
}
@discourseComputed("order")
sortActivity(order) {
return order === "activity";
}
@action
sortListActivity() {
this.sortBy("activity");
return false;
}
@action
sortListTitle() {
this.sortBy("title");
return false;
}
}

View File

@ -17,6 +17,15 @@ function initialize(api, container) {
href: "/" + docsPath,
});
}
api.registerValueTransformer("topic-list-columns", ({ value: columns }) => {
if (container.lookup("service:router").currentRouteName === "docs.index") {
columns.delete("posters");
columns.delete("replies");
columns.delete("views");
}
return columns;
});
}
export default {

View File

@ -1 +0,0 @@
{{this.topicListItemContents}}

View File

@ -1,41 +0,0 @@
<LoadMore @selector=".topic-list tr" @action={{this.loadMore}}>
<table class="topic-list">
<thead class="topic-list-header">
<th role="button" class="topic-list-data" {{action "sortListTitle"}}>
{{i18n "docs.column_titles.topic"}}
{{#if this.sortTitle}}
{{#if this.ascending}}
{{d-icon "angle-up"}}
{{else}}
{{d-icon "angle-down"}}
{{/if}}
{{/if}}
</th>
<th role="button" class="topic-list-data" {{action "sortListActivity"}}>
{{i18n "docs.column_titles.activity"}}
{{#if this.sortActivity}}
{{#if this.ascending}}
{{d-icon "angle-up"}}
{{else}}
{{d-icon "angle-down"}}
{{/if}}
{{/if}}
</th>
</thead>
<tbody class="topic-list-body">
{{#each this.topics as |topic|}}
{{docs-topic-list-item
topic=topic
urlPath=this.urlPath
showExcerpt=this.showExcerpts
}}
{{/each}}
</tbody>
</table>
</LoadMore>
<ConditionalLoadingSpinner @condition={{this.loading}} />

View File

@ -243,15 +243,15 @@
{{/if}}
{{#unless this.emptyResults}}
<DocsTopicList
@topics={{this.topics}}
@showExcerpts={{this.showExcerpts}}
@ascending={{this.ascending}}
@order={{this.orderColumn}}
@sortBy={{action "sortBy"}}
@loadMore={{action "loadMore"}}
@loading={{this.isLoadingMore}}
/>
<LoadMore @selector=".topic-list tr" @action={{this.loadMore}}>
<BasicTopicList
@topics={{this.topics}}
@ascending={{this.ascending}}
@order={{this.orderColumn}}
@changeSort={{action "sortBy"}}
/>
</LoadMore>
<ConditionalLoadingSpinner @condition={{this.isLoadingMore}} />
{{/unless}}
</div>
{{/if}}

View File

@ -1 +0,0 @@
<a href="/{{urlPath}}?topic={{topic.id}}" class="docs-topic-link">{{{topic.fancyTitle}}}</a>

View File

@ -1,19 +0,0 @@
{{~raw-plugin-outlet name="topic-list-before-columns"}}
<td class="main-link topic-list-data">
{{~raw-plugin-outlet name="topic-list-before-link"}}
<span class="link-top-line">
{{~raw "topic-status" topic=topic}}
{{~raw "docs-topic-link" topic=topic urlPath=urlPath}}
</span>
<span class="link-bottom-line">
{{category-link topic.category}}
{{discourse-tags topic mode="list"}}
</span>
{{!-- {{#if showExcerpt}} --}}
{{~raw "list/topic-excerpt" topic=topic}}
{{!-- {{/if}} --}}
</td>
<td class="topic-list-data">
{{format-date topic.bumped_at format="tiny" noTitle="true"}}
</td>

View File

@ -274,3 +274,12 @@
width: 100%;
}
}
// TODO: Remove once legacy topic-list is removed
.docs-browse {
.topic-list-data.replies,
.topic-list-data.posts,
.topic-list-data.views {
display: none;
}
}