mirror of
https://github.com/discourse/discourse.git
synced 2025-02-25 18:55:32 -06:00
FIX: renders channels-list wrapper only once (#25383)
This bug was causing broken layout when using the `header_dropdown` setting instead of `sidebar` as we were rendering `<div class="channels-list"></div>` two times.
This commit is contained in:
Joffrey JAFFEUX
GitHub
parent
9d3800adec
commit
eff485e4c0
@ -59,75 +59,68 @@ export default class ChannelsListDirect extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<PluginOutlet
|
||||||
role="region"
|
@name="below-direct-chat-channels"
|
||||||
aria-label={{i18n "chat.aria_roles.channels_list"}}
|
@tagName=""
|
||||||
class="channels-list"
|
@outletArgs={{hash inSidebar=this.inSidebar}}
|
||||||
>
|
/>
|
||||||
|
|
||||||
<PluginOutlet
|
{{#if this.showDirectMessageChannels}}
|
||||||
@name="below-direct-chat-channels"
|
{{#if this.site.desktopView}}
|
||||||
@tagName=""
|
<div class="chat-channel-divider direct-message-channels-section">
|
||||||
@outletArgs={{hash inSidebar=this.inSidebar}}
|
{{#if this.inSidebar}}
|
||||||
/>
|
<span
|
||||||
|
class="title-caret"
|
||||||
|
id="direct-message-channels-caret"
|
||||||
|
role="button"
|
||||||
|
title="toggle nav list"
|
||||||
|
{{on
|
||||||
|
"click"
|
||||||
|
(fn this.toggleChannelSection "direct-message-channels")
|
||||||
|
}}
|
||||||
|
data-toggleable="direct-message-channels"
|
||||||
|
>
|
||||||
|
{{dIcon "angle-up"}}
|
||||||
|
</span>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
{{#if this.showDirectMessageChannels}}
|
<span class="channel-title">{{i18n
|
||||||
{{#if this.site.desktopView}}
|
"chat.direct_messages.title"
|
||||||
<div class="chat-channel-divider direct-message-channels-section">
|
}}</span>
|
||||||
{{#if this.inSidebar}}
|
|
||||||
<span
|
|
||||||
class="title-caret"
|
|
||||||
id="direct-message-channels-caret"
|
|
||||||
role="button"
|
|
||||||
title="toggle nav list"
|
|
||||||
{{on
|
|
||||||
"click"
|
|
||||||
(fn this.toggleChannelSection "direct-message-channels")
|
|
||||||
}}
|
|
||||||
data-toggleable="direct-message-channels"
|
|
||||||
>
|
|
||||||
{{dIcon "angle-up"}}
|
|
||||||
</span>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
<span class="channel-title">{{i18n
|
{{#if this.canCreateDirectMessageChannel}}
|
||||||
"chat.direct_messages.title"
|
<DButton
|
||||||
}}</span>
|
@icon="plus"
|
||||||
|
class="no-text btn-flat open-new-message-btn"
|
||||||
{{#if this.canCreateDirectMessageChannel}}
|
@action={{this.openNewMessageModal}}
|
||||||
<DButton
|
title={{i18n this.createDirectMessageChannelLabel}}
|
||||||
@icon="plus"
|
|
||||||
class="no-text btn-flat open-new-message-btn"
|
|
||||||
@action={{this.openNewMessageModal}}
|
|
||||||
title={{i18n this.createDirectMessageChannelLabel}}
|
|
||||||
/>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
<div
|
|
||||||
id="direct-message-channels"
|
|
||||||
class={{this.directMessageChannelClasses}}
|
|
||||||
>
|
|
||||||
{{#if this.directMessageChannelsEmpty}}
|
|
||||||
<div class="channel-list-empty-message">
|
|
||||||
<span class="channel-title">{{i18n
|
|
||||||
"chat.no_direct_message_channels"
|
|
||||||
}}</span>
|
|
||||||
</div>
|
|
||||||
{{else}}
|
|
||||||
{{#each
|
|
||||||
this.chatChannelsManager.truncatedDirectMessageChannels
|
|
||||||
as |channel|
|
|
||||||
}}
|
|
||||||
<ChatChannelRow
|
|
||||||
@channel={{channel}}
|
|
||||||
@options={{hash leaveButton=true}}
|
|
||||||
/>
|
/>
|
||||||
{{/each}}
|
{{/if}}
|
||||||
{{/if}}
|
</div>
|
||||||
</div>
|
{{/if}}
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="direct-message-channels"
|
||||||
|
class={{this.directMessageChannelClasses}}
|
||||||
|
>
|
||||||
|
{{#if this.directMessageChannelsEmpty}}
|
||||||
|
<div class="channel-list-empty-message">
|
||||||
|
<span class="channel-title">{{i18n
|
||||||
|
"chat.no_direct_message_channels"
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
{{else}}
|
||||||
|
{{#each
|
||||||
|
this.chatChannelsManager.truncatedDirectMessageChannels
|
||||||
|
as |channel|
|
||||||
|
}}
|
||||||
|
<ChatChannelRow
|
||||||
|
@channel={{channel}}
|
||||||
|
@options={{hash leaveButton=true}}
|
||||||
|
/>
|
||||||
|
{{/each}}
|
||||||
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
}
|
}
|
||||||
|
|||||||
@ -51,91 +51,81 @@ export default class ChannelsListPublic extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
{{#if this.site.desktopView}}
|
||||||
role="region"
|
<LinkTo @route="chat.threads" class="chat-channel-row --threads">
|
||||||
aria-label={{i18n "chat.aria_roles.channels_list"}}
|
<span class="chat-channel-title">
|
||||||
class="channels-list"
|
{{dIcon "discourse-threads" class="chat-user-threads__icon"}}
|
||||||
>
|
{{i18n "chat.my_threads.title"}}
|
||||||
|
</span>
|
||||||
{{#if this.site.desktopView}}
|
{{#if this.hasUnreadThreads}}
|
||||||
<LinkTo @route="chat.threads" class="chat-channel-row --threads">
|
<div class="c-unread-indicator">
|
||||||
<span class="chat-channel-title">
|
<div class="c-unread-indicator__number"> </div>
|
||||||
{{dIcon "discourse-threads" class="chat-user-threads__icon"}}
|
|
||||||
{{i18n "chat.my_threads.title"}}
|
|
||||||
</span>
|
|
||||||
{{#if this.hasUnreadThreads}}
|
|
||||||
<div class="c-unread-indicator">
|
|
||||||
<div class="c-unread-indicator__number"> </div>
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
</LinkTo>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{#if this.displayPublicChannels}}
|
|
||||||
{{#if this.site.desktopView}}
|
|
||||||
<div class="chat-channel-divider public-channels-section">
|
|
||||||
{{#if this.inSidebar}}
|
|
||||||
<span
|
|
||||||
class="title-caret"
|
|
||||||
id="public-channels-caret"
|
|
||||||
role="button"
|
|
||||||
title="toggle nav list"
|
|
||||||
{{on "click" (fn this.toggleChannelSection "public-channels")}}
|
|
||||||
data-toggleable="public-channels"
|
|
||||||
>
|
|
||||||
{{dIcon "angle-up"}}
|
|
||||||
</span>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
<span class="channel-title">{{i18n "chat.chat_channels"}}</span>
|
|
||||||
|
|
||||||
<LinkTo
|
|
||||||
@route="chat.browse"
|
|
||||||
class="btn no-text btn-flat open-browse-page-btn title-action"
|
|
||||||
title={{i18n "chat.channels_list_popup.browse"}}
|
|
||||||
>
|
|
||||||
{{dIcon "pencil-alt"}}
|
|
||||||
</LinkTo>
|
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
</LinkTo>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
<div
|
{{#if this.displayPublicChannels}}
|
||||||
id="public-channels"
|
{{#if this.site.desktopView}}
|
||||||
class={{concatClass
|
<div class="chat-channel-divider public-channels-section">
|
||||||
"channels-list-container"
|
{{#if this.inSidebar}}
|
||||||
"public-channels"
|
<span
|
||||||
(if this.inSidebar "collapsible-sidebar-section")
|
class="title-caret"
|
||||||
}}
|
id="public-channels-caret"
|
||||||
>
|
role="button"
|
||||||
{{#if this.publicMessageChannelsEmpty}}
|
title="toggle nav list"
|
||||||
<div class="channel-list-empty-message">
|
{{on "click" (fn this.toggleChannelSection "public-channels")}}
|
||||||
<span class="channel-title">{{i18n
|
data-toggleable="public-channels"
|
||||||
"chat.no_public_channels"
|
>
|
||||||
}}</span>
|
{{dIcon "angle-up"}}
|
||||||
<LinkTo @route="chat.browse">
|
</span>
|
||||||
{{i18n "chat.click_to_join"}}
|
|
||||||
</LinkTo>
|
|
||||||
</div>
|
|
||||||
{{else}}
|
|
||||||
{{#each
|
|
||||||
this.chatChannelsManager.publicMessageChannels
|
|
||||||
as |channel|
|
|
||||||
}}
|
|
||||||
<ChatChannelRow
|
|
||||||
@channel={{channel}}
|
|
||||||
@options={{hash settingsButton=true}}
|
|
||||||
/>
|
|
||||||
{{/each}}
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
|
<span class="channel-title">{{i18n "chat.chat_channels"}}</span>
|
||||||
|
|
||||||
|
<LinkTo
|
||||||
|
@route="chat.browse"
|
||||||
|
class="btn no-text btn-flat open-browse-page-btn title-action"
|
||||||
|
title={{i18n "chat.channels_list_popup.browse"}}
|
||||||
|
>
|
||||||
|
{{dIcon "pencil-alt"}}
|
||||||
|
</LinkTo>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
<PluginOutlet
|
<div
|
||||||
@name="below-public-chat-channels"
|
id="public-channels"
|
||||||
@tagName=""
|
class={{concatClass
|
||||||
@outletArgs={{hash inSidebar=this.inSidebar}}
|
"channels-list-container"
|
||||||
/>
|
"public-channels"
|
||||||
</div>
|
(if this.inSidebar "collapsible-sidebar-section")
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{{#if this.publicMessageChannelsEmpty}}
|
||||||
|
<div class="channel-list-empty-message">
|
||||||
|
<span class="channel-title">{{i18n
|
||||||
|
"chat.no_public_channels"
|
||||||
|
}}</span>
|
||||||
|
<LinkTo @route="chat.browse">
|
||||||
|
{{i18n "chat.click_to_join"}}
|
||||||
|
</LinkTo>
|
||||||
|
</div>
|
||||||
|
{{else}}
|
||||||
|
{{#each this.chatChannelsManager.publicMessageChannels as |channel|}}
|
||||||
|
<ChatChannelRow
|
||||||
|
@channel={{channel}}
|
||||||
|
@options={{hash settingsButton=true}}
|
||||||
|
/>
|
||||||
|
{{/each}}
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<PluginOutlet
|
||||||
|
@name="below-public-chat-channels"
|
||||||
|
@tagName=""
|
||||||
|
@outletArgs={{hash inSidebar=this.inSidebar}}
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import Component from "@glimmer/component";
|
import Component from "@glimmer/component";
|
||||||
import { inject as service } from "@ember/service";
|
import { inject as service } from "@ember/service";
|
||||||
|
import i18n from "discourse-common/helpers/i18n";
|
||||||
import ChannelsListDirect from "discourse/plugins/chat/discourse/components/channels-list-direct";
|
import ChannelsListDirect from "discourse/plugins/chat/discourse/components/channels-list-direct";
|
||||||
import ChannelsListPublic from "discourse/plugins/chat/discourse/components/channels-list-public";
|
import ChannelsListPublic from "discourse/plugins/chat/discourse/components/channels-list-public";
|
||||||
|
|
||||||
@ -7,10 +8,16 @@ export default class ChannelsList extends Component {
|
|||||||
@service chat;
|
@service chat;
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ChannelsListPublic />
|
<div
|
||||||
|
role="region"
|
||||||
|
aria-label={{i18n "chat.aria_roles.channels_list"}}
|
||||||
|
class="channels-list"
|
||||||
|
>
|
||||||
|
<ChannelsListPublic />
|
||||||
|
|
||||||
{{#if this.chat.userCanAccessDirectMessages}}
|
{{#if this.chat.userCanAccessDirectMessages}}
|
||||||
<ChannelsListDirect />
|
<ChannelsListDirect />
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user