Hey Terise,
I looked at your code, and you’re close!
Here are some feedbacks:
-
You can modify it with a theme component (not a plugin). I would encourage you to use this template: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes · GitHub
-
Using a connector is correct. The right path is
/discourse/connectors/…
-
The arguments passed to the connector can be retrieved with
outletArgs. You can see the connector here:
This means this should be:
export default class PinnedTopicBody extends Component {
get pinnedTopics() {
return this.outletArgs.topics.filter((t) => t.get("pinned"));
}
}
and the template:
{{#if this.pinnedTopics}}
<tbody class="pinned-topics">
{{#each this.pinnedTopics as |topic|}}
<TopicListItem
@topic={{topic}}
@bulkSelectEnabled={{@outletArgs.bulkSelectEnabled}}
@lastVisitedTopic={{@outletArgs.lastVisitedTopic}}
@selected={{@outletArgs.selected}}
@hideCategory={{@outletArgs.hideCategory}}
@showPosters={{true}}
/>
{{/each}}
<tr class="table-break">
<td colspan="10"> </td>
</tr>
</tbody>
{{/if}}
-
Note: Unfortunately,
showPostersis not passed as an argument; you must hardcode its value here. -
Note: By default, it will look like this:
It generates a div wrapper with a unique ID and messes up the CSS. However, it’s necessary if you want to bind actions to the element.
You can use
tagNameandclassNamesto customize the wrapper.
import { classNames, tagName } from "@ember-decorators/component";
@tagName("tbody")
@classNames("pinned-topics")
export default class PinnedTopicBody extends Component {
...
}
{{#if this.pinnedTopics}}
{{#each this.pinnedTopics as |topic|}}
...
{{/each}}
<tr class="table-break">
<td colspan="10"> </td>
</tr>
{{/if}}
(if you know you will do nothing on the element, you can keep the tbody in the template and use tagName("")).
Then, you get this:
I did not thoroughly examine it to see if there was a better way.
I just wanted to help make your code work! 