diff --git a/assets/chat/css/menus/_emote-list.scss b/assets/chat/css/menus/_emote-list.scss index a6382372..931a65e8 100644 --- a/assets/chat/css/menus/_emote-list.scss +++ b/assets/chat/css/menus/_emote-list.scss @@ -22,11 +22,6 @@ background: none; border-radius: 0; } - - .favorite { - flex: 0 88px; - border-top: 1px solid a.$color-surface-dark4; - } } .emote-group { @@ -36,6 +31,20 @@ margin: a.$gutter-lg; } +.favorite-emote { + position: relative; +} + +.favorite-emote:after { + content: url('../img/icon-pin.svg'); + position: absolute; + width: 1em; + height: 1em; + right: -0.5em; + top: -0.5em; + transform: rotate(45deg); +} + .emote-item { user-select: none; padding: a.$gutter-sm; diff --git a/assets/chat/js/chat.js b/assets/chat/js/chat.js index 37956368..cf74b956 100644 --- a/assets/chat/js/chat.js +++ b/assets/chat/js/chat.js @@ -994,7 +994,7 @@ class Chat { } this.settings.set('favoriteemotes', [...this.favoriteemotes]); this.applySettings(); - this.menus.get('emotes').buildFavoriteEmoteMenu(); + this.menus.get('emotes').buildEmoteMenu(); return !exists; } diff --git a/assets/chat/js/menus/ChatEmoteMenu.js b/assets/chat/js/menus/ChatEmoteMenu.js index dba61a99..7f01df9d 100644 --- a/assets/chat/js/menus/ChatEmoteMenu.js +++ b/assets/chat/js/menus/ChatEmoteMenu.js @@ -6,7 +6,6 @@ export default class ChatEmoteMenu extends ChatMenu { super(ui, btn, chat); this.searchterm = ''; this.emoteMenuContent = this.ui.find('.all .content'); - this.favoriteEmoteMenuContent = this.ui.find('.favorite .content'); this.searchinput = this.ui.find( '#chat-emote-list-search .form-control:first', ); @@ -23,7 +22,6 @@ export default class ChatEmoteMenu extends ChatMenu { () => { this.searchterm = this.searchinput.val(); this.buildEmoteMenu(); - this.buildFavoriteEmoteMenu(); }, { atBegin: false }, ), @@ -34,30 +32,13 @@ export default class ChatEmoteMenu extends ChatMenu { super.show(); this.searchinput.focus(); this.buildEmoteMenu(); - this.buildFavoriteEmoteMenu(); } - buildFavoriteEmoteMenu() { + buildEmoteMenu() { const favoriteEmotes = [...this.chat.favoriteemotes].filter((e) => this.chat.emoteService.hasEmote(e), ); - if (favoriteEmotes.length === 0) { - this.favoriteEmoteMenuContent.html(`<div class="emote-container"> - <div id="emote-subscribe-note">Favorite Emotes</div> - <p>Right click an emote and favorite it!</p> - </div>`); - return; - } - const emotesStr = favoriteEmotes - .map((e) => this.buildEmoteItem(e, false)) - .join(''); - this.favoriteEmoteMenuContent.html(`<div class="emote-container"> - <div id="emote-subscribe-note">Favorite Emotes</div> - <div class="emote-group">${emotesStr}</div> - </div>`); - } - buildEmoteMenu() { this.emoteMenuContent.empty(); this.chat.emoteService.tiers.forEach((tier) => { @@ -68,7 +49,7 @@ export default class ChatEmoteMenu extends ChatMenu { const locked = tier > this.chat.user.subTier && !this.chat.user.isPrivileged(); this.emoteMenuContent.append( - this.buildEmoteMenuSection(title, emotes, locked), + this.buildEmoteMenuSection(title, emotes, favoriteEmotes, locked), ); }); @@ -80,9 +61,19 @@ export default class ChatEmoteMenu extends ChatMenu { } } - buildEmoteMenuSection(title, emotes, disabled = false) { - const emotesStr = emotes - .map((e) => this.buildEmoteItem(e, disabled)) + buildEmoteMenuSection(title, emotes, favoriteEmotes, disabled = false) { + let emotesStr = ''; + if (favoriteEmotes.length > 0) { + emotesStr += favoriteEmotes + .map((e) => this.buildEmoteItem(e, true, disabled)) + .join(''); + } + emotesStr += emotes + .map((e) => + !favoriteEmotes.includes(e) + ? this.buildEmoteItem(e, false, disabled) + : null, + ) .join(''); if (emotesStr !== '') { return `<div> @@ -97,16 +88,16 @@ export default class ChatEmoteMenu extends ChatMenu { return ''; } - buildEmoteItem(emote, disabled) { + buildEmoteItem(emote, favorite, disabled) { if (this.searchterm && this.searchterm.length > 0) { if (emote.toLowerCase().indexOf(this.searchterm.toLowerCase()) >= 0) { - return `<div class="emote-item"><span title="${emote}" class="emote ${emote}${ + return `<div class="emote-item${favorite ? ' favorite-emote' : ''}"><span title="${emote}" class="emote ${emote}${ disabled ? ' disabled' : '' }">${emote}</span></div>`; } return ''; } - return `<div class="emote-item"><span title="${emote}" class="emote ${emote}${ + return `<div class="emote-item${favorite ? ' favorite-emote' : ''}"><span title="${emote}" class="emote ${emote}${ disabled ? ' disabled' : '' }">${emote}</span></div>`; } diff --git a/assets/chat/js/menus/ChatEmoteTooltip.js b/assets/chat/js/menus/ChatEmoteTooltip.js index 31ffc766..2e0436a3 100644 --- a/assets/chat/js/menus/ChatEmoteTooltip.js +++ b/assets/chat/js/menus/ChatEmoteTooltip.js @@ -32,6 +32,7 @@ export default class ChatEmoteTooltip extends ChatMenuFloating { this.ui.favorite.on('click', () => { const result = this.chat.toggleFavoriteEmote(this.emote); + this.hide(); this.favorite = result; }); } diff --git a/assets/views/embed.html b/assets/views/embed.html index 7725a32b..a1e854db 100644 --- a/assets/views/embed.html +++ b/assets/views/embed.html @@ -325,9 +325,6 @@ <h5><span>Emotes</span> <i class="chat-menu-close"></i></h5> <div class="scrollable all"> <div class="content"></div> </div> - <div class="scrollable favorite"> - <div class="content"></div> - </div> <div id="chat-emote-list-search"> <input type="text"