DEV: Update for glimmer topic list (#189)
This switches docs to use the core `<BasicTopicList` component, with some customizations made via the DAG API.
This commit is contained in:
David Taylor
GitHub
parent
0897548b5d
commit
ee5111a628
|
|
@ -1,24 +0,0 @@
|
|||
import Component from "@ember/component";
|
||||
import { htmlSafe } from "@ember/template";
|
||||
import { classNameBindings, tagName } from "@ember-decorators/component";
|
||||
import { RUNTIME_OPTIONS } from "discourse-common/lib/raw-handlebars-helpers";
|
||||
import { findRawTemplate } from "discourse-common/lib/raw-templates";
|
||||
|
||||
@tagName("tr")
|
||||
@classNameBindings(":topic-list-item")
|
||||
export default class DocsTopicListItem extends Component {
|
||||
didInsertElement() {
|
||||
super.didInsertElement(...arguments);
|
||||
this.renderTopicListItem();
|
||||
}
|
||||
|
||||
renderTopicListItem() {
|
||||
const template = findRawTemplate("docs-topic-list-item");
|
||||
if (template) {
|
||||
this.set(
|
||||
"topicListItemContents",
|
||||
htmlSafe(template(this, RUNTIME_OPTIONS))
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -17,6 +17,22 @@ 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;
|
||||
});
|
||||
|
||||
api.registerValueTransformer("topic-list-item-expand-pinned", ({ value }) => {
|
||||
if (container.lookup("service:router").currentRouteName === "docs.index") {
|
||||
return true;
|
||||
}
|
||||
return value;
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
{{this.topicListItemContents}}
|
||||
|
|
@ -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}} />
|
||||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<a href="/{{urlPath}}?topic={{topic.id}}" class="docs-topic-link">{{{topic.fancyTitle}}}</a>
|
||||
|
|
@ -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>
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
font-weight: normal;
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
.docs-topic-link {
|
||||
.raw-topic-link {
|
||||
color: var(--tertiary);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
.docs-topic-list {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.docs-topic-link {
|
||||
.raw-topic-link {
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
.docs-topic {
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@ describe "Discourse Docs | Index", type: :system do
|
|||
|
||||
it "does not error when showing the index" do
|
||||
visit("/docs")
|
||||
expect(page).to have_css(".docs-topic-link", text: topic_1.title)
|
||||
expect(page).to have_css(".docs-topic-link", text: topic_2.title)
|
||||
expect(page).to have_css(".raw-topic-link", text: topic_1.title)
|
||||
expect(page).to have_css(".raw-topic-link", text: topic_2.title)
|
||||
end
|
||||
|
||||
describe "topic excerpts" do
|
||||
|
|
|
|||
|
|
@ -57,10 +57,7 @@ acceptance("Docs", function (needs) {
|
|||
assert.equal(query(".docs-category .docs-item-count").innerText, "119");
|
||||
assert.equal(query(".docs-tag .docs-item-id").innerText, "something");
|
||||
assert.equal(query(".docs-tag .docs-item-count").innerText, "74");
|
||||
assert.equal(
|
||||
query(".docs-topic-link").innerText.trim(),
|
||||
"Importing from Software X"
|
||||
);
|
||||
assert.dom(".raw-topic-link").hasText("Importing from Software X");
|
||||
});
|
||||
|
||||
test("selecting a category", async function (assert) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue