diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html index 6606bad76..4875fb1de 100644 --- a/packages/core/demo/index.html +++ b/packages/core/demo/index.html @@ -225,6 +225,10 @@

Custom Discord Emojis

+ They can also be jumbo sized to represent if the message only has emojis: + + +

Server Invites

diff --git a/packages/core/src/components/discord-custom-emoji/DiscordCustomEmoji.ts b/packages/core/src/components/discord-custom-emoji/DiscordCustomEmoji.ts index 036edcbce..3b2f132c8 100644 --- a/packages/core/src/components/discord-custom-emoji/DiscordCustomEmoji.ts +++ b/packages/core/src/components/discord-custom-emoji/DiscordCustomEmoji.ts @@ -1,5 +1,6 @@ import { css, html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import type { Emoji } from '../../types.js'; import { getGlobalEmojiUrl } from '../../util.js'; @@ -22,6 +23,12 @@ export class DiscordCustomEmoji extends LitElement { vertical-align: bottom; } + .discord-custom-emoji .discord-custom-jumbo-emoji-image { + width: 3rem; + height: 3rem; + min-height: 3rem; + } + .discord-embed-custom-emoji { display: inline-block; } @@ -65,6 +72,14 @@ export class DiscordCustomEmoji extends LitElement { @property({ type: Boolean, attribute: 'embed-emoji' }) public accessor embedEmoji: boolean; + /** + * Determines whether or not the emoji is of "jumbo size", + * This means it is larger and is what Discord uses when the message exclusively has emojis, + * up to a maximum of 30 emojis. + */ + @property({ type: Boolean, attribute: 'jumbo' }) + public accessor jumbo: boolean; + public override willUpdate() { if (!this.url && Boolean(this.name)) { const emojiFromGlobal = getGlobalEmojiUrl(this.name) ?? this.customEmojisMap[this.name]; @@ -78,11 +93,24 @@ export class DiscordCustomEmoji extends LitElement { protected override render() { const name = `:${this.name}:`; - const emojiClassName = this.embedEmoji ? 'discord-embed-custom-emoji' : 'discord-custom-emoji'; - const emojiImageClassName = this.embedEmoji ? 'discord-embed-custom-emoji-image' : 'discord-custom-emoji-image'; - return html`${name}${name} `; } }