UX: sort chat channels by activity in desktop drawer (#28822)
This change sorts the desktop chat channels by activity in drawer mode, and keeps sidebar channel list sorted by slug.
This commit is contained in:
parent
f6ba5ed4d9
commit
e9b7663798
|
@ -33,6 +33,12 @@ export default class ChannelsListPublic extends Component {
|
|||
return this.chatChannelsManager.hasThreadedChannels;
|
||||
}
|
||||
|
||||
get channelList() {
|
||||
return this.args.sortByActivity === true
|
||||
? this.chatChannelsManager.publicMessageChannelsByActivity
|
||||
: this.chatChannelsManager.publicMessageChannels;
|
||||
}
|
||||
|
||||
@action
|
||||
toggleChannelSection(section) {
|
||||
this.args.toggleSection(section);
|
||||
|
@ -103,7 +109,7 @@ export default class ChannelsListPublic extends Component {
|
|||
@showCTA={{this.chatChannelsManager.displayPublicChannels}}
|
||||
/>
|
||||
{{else}}
|
||||
{{#each this.chatChannelsManager.publicMessageChannels as |channel|}}
|
||||
{{#each this.channelList as |channel|}}
|
||||
<ChatChannelRow
|
||||
@channel={{channel}}
|
||||
@options={{hash settingsButton=true}}
|
||||
|
|
|
@ -22,7 +22,7 @@ export default class ChatDrawerRoutesChannels extends Component {
|
|||
|
||||
{{#if this.chatStateManager.isDrawerExpanded}}
|
||||
<div class="chat-drawer-content">
|
||||
<ChannelsListPublic />
|
||||
<ChannelsListPublic @sortByActivity={{true}} />
|
||||
</div>
|
||||
|
||||
<ChatFooter />
|
||||
|
|
|
@ -17,7 +17,7 @@ export default class ChatRoutesChannels extends Component {
|
|||
</navbar.Actions>
|
||||
</Navbar>
|
||||
|
||||
<ChannelsListPublic />
|
||||
<ChannelsListPublic @sortByActivity={{true}} />
|
||||
</div>
|
||||
</template>
|
||||
}
|
||||
|
|
|
@ -125,16 +125,16 @@ export default class ChatChannelsManager extends Service {
|
|||
|
||||
@cached
|
||||
get publicMessageChannels() {
|
||||
const channels = this.channels.filter(
|
||||
return this.channels
|
||||
.filter(
|
||||
(channel) =>
|
||||
channel.isCategoryChannel && channel.currentUserMembership.following
|
||||
);
|
||||
|
||||
if (this.site.mobileView) {
|
||||
return this.#sortChannelsByActivity(channels);
|
||||
} else {
|
||||
return channels.sort((a, b) => a?.slug?.localeCompare?.(b?.slug));
|
||||
)
|
||||
.sort((a, b) => a?.slug?.localeCompare?.(b?.slug));
|
||||
}
|
||||
|
||||
get publicMessageChannelsByActivity() {
|
||||
return this.#sortChannelsByActivity(this.publicMessageChannels);
|
||||
}
|
||||
|
||||
@cached
|
||||
|
|
|
@ -50,7 +50,19 @@ RSpec.describe "List channels | sidebar", type: :system do
|
|||
channel_2.add(current_user)
|
||||
end
|
||||
|
||||
it "sorts them by slug" do
|
||||
it "sorts them by slug when all channels are read" do
|
||||
visit("/")
|
||||
|
||||
expect(page.find("#sidebar-section-content-chat-channels li:nth-child(1)")).to have_css(
|
||||
".channel-#{channel_2.id}",
|
||||
)
|
||||
expect(page.find("#sidebar-section-content-chat-channels li:nth-child(2)")).to have_css(
|
||||
".channel-#{channel_1.id}",
|
||||
)
|
||||
end
|
||||
|
||||
it "sorts them by slug when channel has unread messages" do
|
||||
Fabricate(:chat_message, chat_channel: channel_1)
|
||||
visit("/")
|
||||
|
||||
expect(page.find("#sidebar-section-content-chat-channels li:nth-child(1)")).to have_css(
|
||||
|
|
Loading…
Reference in New Issue