diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html index 3d759f2e5..20063f928 100644 --- a/packages/core/demo/index.html +++ b/packages/core/demo/index.html @@ -53,7 +53,7 @@

Explanation

A normal conversation

- + Hey guys, I'm new here! Glad to be able to join you all! ('light-theme'); export const messagesCompactMode = createContext('compact-mode'); @@ -55,6 +61,35 @@ export class DiscordMessages extends LitElement implements LightTheme { margin-bottom: 0.5rem; border-bottom-width: 0; } + + :host .discord-channel-header { + display: flex; + align-items: center; + padding: 0.5rem 1rem; + box-shadow: + 0 2px 0 0 rgba(0, 0, 0, 0.05), + 0 1.5px 0 0 rgba(0, 0, 0, 0.05), + 0 1px 0 0 rgba(0, 0, 0, 0.16); + } + + :host .discord-channel-icon { + height: 24px; + width: auto; + margin: 0 8px; + position: relative; + flex: 0 0 auto; + color: #80848e; + } + + :host([light-theme]) .discord-channel-icon { + color: #6d6f78; + } + + :host .discord-channel-name { + margin: 0 8px 0 0; + flex: 0 0 auto; + min-width: auto; + } `; /** @@ -78,6 +113,20 @@ export class DiscordMessages extends LitElement implements LightTheme { @property({ type: Boolean, reflect: true, attribute: 'compact-mode' }) public accessor compactMode = false; + /** + * The type of channel this should be, this will be displayed above the message and only applies if {@link DiscordMessages.channelName} is set. + * Valid values are: `text`, `forum`, `locked`, `thread`, and `voice`. + */ + @property({ reflect: true, attribute: 'channel-type' }) + public accessor channelType: 'forum' | 'locked' | 'text' | 'thread' | 'voice'; + + /** + * The name of the channel, this will be displayed above the message and only applies if {@link DiscordMessages.channelType} is set. + */ + + @property({ reflect: true, attribute: 'channel-name' }) + public accessor channelName: string; + public override connectedCallback(): void { super.connectedCallback(); @@ -95,7 +144,36 @@ export class DiscordMessages extends LitElement implements LightTheme { } protected override render() { - return html``; + let channelIcon: ReturnType; + switch (this.channelType) { + case 'text': + channelIcon = html`${ChannelIcon()}`; + break; + case 'voice': + channelIcon = html`${VoiceChannel()}`; + break; + case 'locked': + channelIcon = html`${LockedVoiceChannel()}`; + break; + case 'thread': + channelIcon = html`${ChannelThread()}`; + break; + case 'forum': + channelIcon = html`${ChannelForum()}`; + break; + } + + return html` + ${when( + this.channelType && this.channelName, + () => + html`
+
${channelIcon}
+
${this.channelName}
+
` + )} + + `; } }