Merge pull request #551 from zrowdotnet/#546

combine emote lists, pin favorited emotes to top
destinygg · Nov 14, 2024 · 143be41 · 143be41
2 parents 6b58004 + d8254dd
commit 143be41
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"