DEV: Refactor basic-topic-list to use topic-list-item on mobile (#10105)
Previously, basic-topic-list had its own implementation of topic-list-item on mobile, which made it more difficult to maintain and extend. The visible difference was that the basic-topic-list implementation had no large avatar on the left. This commit adds a new hideMobileAvatar parameter to topic-list-item and topic-list, and sets it to `true` for the basic-topic-list component.
This commit is contained in:
David Taylor
GitHub
parent
525a2174b3
commit
98786cb037
|
|
@ -6,6 +6,8 @@ export default Component.extend({
|
|||
loadingMore: alias("topicList.loadingMore"),
|
||||
loading: not("loaded"),
|
||||
|
||||
hideMobileAvatar: true,
|
||||
|
||||
@discourseComputed("topicList.loaded")
|
||||
loaded() {
|
||||
var topicList = this.topicList;
|
||||
|
|
|
|||
|
|
@ -187,6 +187,11 @@ export default Component.extend({
|
|||
return false;
|
||||
},
|
||||
|
||||
@discourseComputed("expandPinned", "hideMobileAvatar")
|
||||
showMobileAvatar(expandPinned, hideMobileAvatar) {
|
||||
return !(hideMobileAvatar || expandPinned);
|
||||
},
|
||||
|
||||
showEntrance,
|
||||
|
||||
click(e) {
|
||||
|
|
|
|||
|
|
@ -10,13 +10,13 @@
|
|||
{{#if topics}}
|
||||
{{topic-list
|
||||
showPosters=showPosters
|
||||
hideMobileAvatar=hideMobileAvatar
|
||||
hideCategory=hideCategory
|
||||
topics=topics
|
||||
expandExcerpts=expandExcerpts
|
||||
bulkSelectEnabled=bulkSelectEnabled
|
||||
canBulkSelect=canBulkSelect
|
||||
selected=selected
|
||||
skipHeader=skipHeader
|
||||
tagsForUser=tagsForUser
|
||||
onScroll=onScroll
|
||||
scrollOnLoad=scrollOnLoad
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
showTopicPostBadges=showTopicPostBadges
|
||||
hideCategory=hideCategory
|
||||
showPosters=showPosters
|
||||
hideMobileAvatar=hideMobileAvatar
|
||||
showLikes=showLikes
|
||||
showOpLikes=showOpLikes
|
||||
expandGloballyPinned=expandGloballyPinned
|
||||
|
|
|
|||
|
|
@ -1,70 +0,0 @@
|
|||
{{#conditional-loading-spinner condition=loading}}
|
||||
{{#if hasIncoming}}
|
||||
<div class="show-mores">
|
||||
<a href {{action showInserted}} class="alert alert-info clickable">
|
||||
{{count-i18n key="topic_count_" suffix="latest" count=incomingCount}}
|
||||
</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if topics}}
|
||||
<table class="topic-list">
|
||||
<tbody>
|
||||
{{#each topics as |t|}}
|
||||
<tr class="topic-list-item {{if t.archived "archived"}} {{if t.visited "visited"}}" data-topic-id={{t.id}}>
|
||||
<td>
|
||||
<div class="main-link">
|
||||
{{topic-status topic=t}}
|
||||
{{topic-link t}}
|
||||
{{raw "list/unread-indicator"
|
||||
includeUnreadIndicator=showUnreadIndicator
|
||||
topicId=t.id
|
||||
unreadClass=(if t.unread_by_group_member "" "read")
|
||||
}}
|
||||
{{#if t.unseen}}
|
||||
<span class="badge-notification new-topic"></span>
|
||||
{{/if}}
|
||||
{{#if t.hasExcerpt}}
|
||||
<div class="topic-excerpt">
|
||||
{{html-safe t.excerpt}}
|
||||
{{#if t.excerptTruncated}}
|
||||
{{#unless t.canClearPin}}
|
||||
<a href={{t.url}}>{{i18n "read_more"}}</a>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
{{#if t.canClearPin}}
|
||||
<a href {{action "clearPin" t}} title={{i18n "topic.clear_pin.help"}}>
|
||||
{{i18n "topic.clear_pin.title"}}
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
{{raw "list/post-count-or-badges" topic=t postBadgesEnabled="true"}}
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="topic-item-stats clearfix">
|
||||
{{discourse-tags t mode="list" tagsForUser=tagsForUser}}
|
||||
<div class="pull-right">
|
||||
{{raw "list/activity-column" topic=t tagName="div" class="num activity last"}}
|
||||
<a href={{t.lastPostUrl}} title="{{i18n "last_post"}}: {{raw-date t.bumped_at}}">{{t.last_poster_username}}</a>
|
||||
</div>
|
||||
{{#unless hideCategory}}
|
||||
<div class="category">
|
||||
{{category-link t.category}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{else}}
|
||||
<div class="alert alert-info">
|
||||
{{i18n "choose_topic.none_found"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/conditional-loading-spinner}}
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
<td>
|
||||
{{~raw-plugin-outlet name="topic-list-before-columns"}}
|
||||
{{~#unless expandPinned}}
|
||||
{{~#if showMobileAvatar}}
|
||||
<div class='pull-left'>
|
||||
<a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="large"}}</a>
|
||||
</div>
|
||||
<div class='right'>
|
||||
{{else}}
|
||||
<div>
|
||||
{{/unless~}}
|
||||
{{/if~}}
|
||||
{{!--
|
||||
The `~` syntax strip spaces between the elements, making it produce
|
||||
`<a class=topic-post-badges>Some text</a><span class=topic-post-badges>`,
|
||||
|
|
|
|||
Loading…
Reference in New Issue