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>
|
||||
<div
|
||||
role="region"
|
||||
aria-label={{i18n "chat.aria_roles.channels_list"}}
|
||||
class="channels-list"
|
||||
>
|
||||
<PluginOutlet
|
||||
@name="below-direct-chat-channels"
|
||||
@tagName=""
|
||||
@outletArgs={{hash inSidebar=this.inSidebar}}
|
||||
/>
|
||||
|
||||
<PluginOutlet
|
||||
@name="below-direct-chat-channels"
|
||||
@tagName=""
|
||||
@outletArgs={{hash inSidebar=this.inSidebar}}
|
||||
/>
|
||||
{{#if this.showDirectMessageChannels}}
|
||||
{{#if this.site.desktopView}}
|
||||
<div class="chat-channel-divider direct-message-channels-section">
|
||||
{{#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}}
|
||||
{{#if this.site.desktopView}}
|
||||
<div class="chat-channel-divider direct-message-channels-section">
|
||||
{{#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
|
||||
"chat.direct_messages.title"
|
||||
}}</span>
|
||||
|
||||
<span class="channel-title">{{i18n
|
||||
"chat.direct_messages.title"
|
||||
}}</span>
|
||||
|
||||
{{#if this.canCreateDirectMessageChannel}}
|
||||
<DButton
|
||||
@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}}
|
||||
{{#if this.canCreateDirectMessageChannel}}
|
||||
<DButton
|
||||
@icon="plus"
|
||||
class="no-text btn-flat open-new-message-btn"
|
||||
@action={{this.openNewMessageModal}}
|
||||
title={{i18n this.createDirectMessageChannelLabel}}
|
||||
/>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/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}}
|
||||
</div>
|
||||
</template>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,91 +51,81 @@ export default class ChannelsListPublic extends Component {
|
|||
}
|
||||
|
||||
<template>
|
||||
<div
|
||||
role="region"
|
||||
aria-label={{i18n "chat.aria_roles.channels_list"}}
|
||||
class="channels-list"
|
||||
>
|
||||
|
||||
{{#if this.site.desktopView}}
|
||||
<LinkTo @route="chat.threads" class="chat-channel-row --threads">
|
||||
<span class="chat-channel-title">
|
||||
{{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>
|
||||
{{#if this.site.desktopView}}
|
||||
<LinkTo @route="chat.threads" class="chat-channel-row --threads">
|
||||
<span class="chat-channel-title">
|
||||
{{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}}
|
||||
|
||||
<div
|
||||
id="public-channels"
|
||||
class={{concatClass
|
||||
"channels-list-container"
|
||||
"public-channels"
|
||||
(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 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>
|
||||
{{/if}}
|
||||
|
||||
<PluginOutlet
|
||||
@name="below-public-chat-channels"
|
||||
@tagName=""
|
||||
@outletArgs={{hash inSidebar=this.inSidebar}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
id="public-channels"
|
||||
class={{concatClass
|
||||
"channels-list-container"
|
||||
"public-channels"
|
||||
(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>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import Component from "@glimmer/component";
|
||||
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 ChannelsListPublic from "discourse/plugins/chat/discourse/components/channels-list-public";
|
||||
|
||||
|
|
@ -7,10 +8,16 @@ export default class ChannelsList extends Component {
|
|||
@service chat;
|
||||
|
||||
<template>
|
||||
<ChannelsListPublic />
|
||||
<div
|
||||
role="region"
|
||||
aria-label={{i18n "chat.aria_roles.channels_list"}}
|
||||
class="channels-list"
|
||||
>
|
||||
<ChannelsListPublic />
|
||||
|
||||
{{#if this.chat.userCanAccessDirectMessages}}
|
||||
<ChannelsListDirect />
|
||||
{{/if}}
|
||||
{{#if this.chat.userCanAccessDirectMessages}}
|
||||
<ChannelsListDirect />
|
||||
{{/if}}
|
||||
</div>
|
||||
</template>
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue