Emote Palette UI Complete

src/views/partial/panels/emote.ejs

@@ -14,21 +14,36 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <https://www.gnu.org/licenses/>.-->
 <link rel="stylesheet" type="text/css" href="/css/panel/emote.css">
+<div id="emote-panel-search" class="panel-control-prompt control-prompt">
+    <input placeholder="Search Emotes..." id="emote-panel-search-prompt" class="control-prompt">
+</div>
 <span class="title-span">
     <span class="title-filler-span"></span>
-    <h3>Site Emotes <i class="bi-caret-down-fill" id="site-emotes-toggle"></i></h3>
+    <h3 id="personal-emotes-title" class="interactive">Personal Emotes</h3><h3><i class="bi-caret-down-fill" id="personal-emotes-toggle"></i></h3>
+    <span class="title-filler-span"></span>
+</span>
+<div id="emote-panel-personal-section">
+    <span id="emote-panel-personal-prompts">
+        <div class="panel-control-prompt control-prompt">
+            <input placeholder="Emote Link..." id="new-emote-link-input" class="control-prompt">
+        </div>
+        <div class="panel-control-prompt control-prompt">
+            <!-- Probably not the cleanest way to do this but fuggit -->
+            [<input placeholder="Emote Name..." id="new-emote-name-input" class="control-prompt">]
+            <button id="new-emote-button" class="positive-button">Add</button>
+        </div>
+    </span>
+    <div class="emote-panel-list" id="emote-panel-personal-list"></div>
+</div>
+<span class="title-span">
+    <span class="title-filler-span"></span>
+    <h3 id="site-emotes-title" class="interactive">Site Emotes</h3><h3><i class="bi-caret-down-fill" id="site-emotes-toggle"></i></h3>
     <span class="title-filler-span"></span>
 </span>
 <div class="emote-panel-list" id="emote-panel-site-list"></div>
 <span class="title-span">
     <span class="title-filler-span"></span>
-    <h3>Channel Emotes <i class="bi-caret-down-fill" id="chan-emotes-toggle"></i></h3>
+    <h3 id="chan-emotes-title" class="interactive">Channel Emotes</h3><h3><i class="bi-caret-down-fill" id="chan-emotes-toggle"></i></h3>
     <span class="title-filler-span"></span>
 </span>
 <div class="emote-panel-list" id="emote-panel-chan-list"></div>
-<span class="title-span">
-    <span class="title-filler-span"></span>
-    <h3>Personal Emotes <i class="bi-caret-down-fill" id="personal-emotes-toggle"></i></h3>
-    <span class="title-filler-span"></span>
-</span>
-<div class="emote-panel-list" id="emote-panel-personal-list"></div>

www/css/adminPanel.css

@@ -126,6 +126,10 @@ i.toke-command-list{
     margin: 0.2em;
 }
 
+#new-emote-button{
+    margin-left: 0.3em;
+}
+
 #emote-list{
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));

www/css/channel.css

@@ -101,6 +101,7 @@ div#chat-panel-main-div{
 
 .right-drag-handle{
     right: 0;
+    width: 0.6em;
 }
 
 #chat-panel-multipanel-div{
@@ -236,10 +237,14 @@ span.user-entry{
     top: 0;
     bottom: 0;
     left: 0;
+    overflow-y: auto;
+    scrollbar-width: thin;
 }
 
 #cpanel-pinned-div{
     position: relative;
+    overflow-y: auto;
+    scrollbar-width: thin;
 }
 
 .cpanel-div{

www/css/panel/emote.css

@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: row;
     text-wrap: nowrap;
+    user-select: none;
 }
 
 .title-filler-span{
@@ -13,6 +14,7 @@
 .emote-panel-list{
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
+    flex-direction: column;
     padding: 1em;
     justify-items: center;
 }
@@ -23,6 +25,13 @@ div.emote-panel-list-emote{
     flex-direction:  column;
     padding: 0.5em 0;
     margin: 0.5em;
+    user-select: none;
+    cursor: pointer;
+}
+
+div.emote-panel-list-big-emote{
+    width: 100%;
+    margin: 0.5em auto;
 }
 
 p.emote-list-title{
@@ -35,3 +44,22 @@ p.emote-list-title{
     max-width: 8em;
     margin: auto;
 }
+
+.emote-list-big-media{
+    max-height: 80VH;
+    max-width: 100%;
+    margin: 0.5em;
+}
+
+div.panel-control-prompt{
+    margin: 0.5em;
+    flex: 1;
+}
+
+#emote-panel-personal-prompts{
+    display: flex;
+}
+
+#new-emote-button{
+    margin-left: 0.3em;
+}

www/css/theme/movie-night.css

@@ -37,7 +37,9 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
     --focus0-alt0: rgb(229, 255, 229);
     --focus0-alt1: rgb(12, 85, 12);
     --focus-glow0: 2px 2px 3px var(--focus0), -2px 2px 3px var(--focus0), 2px -2px 3px var(--focus0), -2px -2px 3px var(--focus0);
+    --focus-glow0-inset: 2px 2px 3px var(--focus0) inset, -2px 2px 3px var(--focus0) inset, 2px -2px 3px var(--focus0) inset, -2px -2px 3px var(--focus0) inset;
     --focus-glow0-alt0: 2px 2px 3px var(--focus0-alt0), -2px 2px 3px var(--focus0-alt0), 2px -2px 3px var(--focus0-alt0), -2px -2px 3px var(--focus0-alt0);
+    --focus-glow0-alt0-inset: 2px 2px 3px var(--focus0-alt0) inset, -2px 2px 3px var(--focus0-alt0) inset, 2px -2px 3px var(--focus0-alt0) inset, -2px -2px 3px var(--focus0-alt0) inset;
 
     --danger0: firebrick;
     --danger0-alt0: rgb(121, 11, 11);
@@ -71,12 +73,12 @@ a{
     color: var(--accent0);
 }
 
-a:hover, i:hover{
+a:hover, i:hover, .interactive:hover{
     color: var(--focus0-alt0);
     text-shadow: var(--focus-glow0);
 }
 
-a:active, i:active{
+a:active, i:active, .interactive:active{
     color: var(--focus0-alt1);
     text-shadow: var(--focus-glow0-alt0);
 }
@@ -347,7 +349,20 @@ select.panel-head-element{
     background-color: var(--accent0);
 }
 
-
 div.emote-panel-list-emote{
     border: 1px solid var(--accent0);
 }
+
+.emote-panel-list-emote:hover{
+    color: var(--focus0-alt0);
+    border: 1px solid var(--focus0-alt0);
+    text-shadow: var(--focus-glow0);
+    box-shadow: var(--focus-glow0), var(--focus-glow0-inset);
+}
+
+.emote-panel-list-emote:active{
+    color: var(--focus0-alt1);
+    text-shadow: var(--focus-glow0-alt0);
+    border: 1px solid var(--focus0-alt1);
+    box-shadow: var(--focus-glow0-alt0), var(--focus-glow0-alt0-inset);
+}

www/js/channel/panels/emotePanel.js

@@ -1,22 +1,27 @@
 class emotePanel extends panelObj{
     constructor(client, panelDocument){
-        super(client, "Emote Panel", "/panel/emote", panelDocument);
+        super(client, "Emote Palette", "/panel/emote", panelDocument);
     }
 
     docSwitch(){
+        this.siteEmoteTitle = this.panelDocument.querySelector('#site-emotes-title');
+        this.chanEmoteTitle = this.panelDocument.querySelector('#chan-emotes-title');
+        this.personalEmoteTitle = this.panelDocument.querySelector('#personal-emotes-title');
+
         this.siteEmoteToggle = this.panelDocument.querySelector('#site-emotes-toggle');
         this.chanEmoteToggle = this.panelDocument.querySelector('#chan-emotes-toggle');
         this.personalEmoteToggle = this.panelDocument.querySelector('#personal-emotes-toggle');
 
         this.siteEmoteList = this.panelDocument.querySelector('#emote-panel-site-list');
         this.chanEmoteList = this.panelDocument.querySelector('#emote-panel-chan-list');
+        this.personalEmoteSection = this.panelDocument.querySelector('#emote-panel-personal-section');
         this.personalEmoteList = this.panelDocument.querySelector('#emote-panel-personal-list');
 
+        this.searchPrompt = this.panelDocument.querySelector('#emote-panel-search-prompt');
+
         this.setupInput();
 
-        this.renderEmotes(this.client.chatBox.commandPreprocessor.emotes.site, this.siteEmoteList);
-        this.renderEmotes(this.client.chatBox.commandPreprocessor.emotes.chan, this.chanEmoteList);
-        this.renderEmotes(this.client.chatBox.commandPreprocessor.emotes.personal, this.personalEmoteList);
+        this.renderEmoteLists();
     }
 
     setupInput(){
@@ -29,6 +34,18 @@ class emotePanel extends panelObj{
 
         this.personalEmoteToggle.removeEventListener("click", this.togglePersonalEmotes.bind(this));
         this.personalEmoteToggle.addEventListener("click", this.togglePersonalEmotes.bind(this));
+
+        this.siteEmoteTitle.removeEventListener("click", this.toggleSiteEmotes.bind(this));
+        this.siteEmoteTitle.addEventListener("click", this.toggleSiteEmotes.bind(this));
+
+        this.chanEmoteTitle.removeEventListener("click", this.toggleChanEmotes.bind(this));
+        this.chanEmoteTitle.addEventListener("click", this.toggleChanEmotes.bind(this));
+
+        this.personalEmoteTitle.removeEventListener("click", this.togglePersonalEmotes.bind(this));
+        this.personalEmoteTitle.addEventListener("click", this.togglePersonalEmotes.bind(this));
+
+        this.searchPrompt.removeEventListener('keyup', this.renderEmoteLists.bind(this));
+        this.searchPrompt.addEventListener('keyup', this.renderEmoteLists.bind(this));
     }
 
     toggleSiteEmotes(event){
@@ -40,7 +57,7 @@ class emotePanel extends panelObj{
     }
 
     togglePersonalEmotes(event){
-        this.toggleEmotes(this.personalEmoteToggle, this.personalEmoteList);
+        this.toggleEmotes(this.personalEmoteToggle, this.personalEmoteSection);
     }
 
     toggleEmotes(icon, list){
@@ -64,16 +81,56 @@ class emotePanel extends panelObj{
         this.client.chatBox.chatPrompt.value += `[${emote}]`;
     }
 
+    renderEmoteLists(){
+        var search = this.searchPrompt.value;
+
+        var siteEmotes = this.client.chatBox.commandPreprocessor.emotes.site;
+        var chanEmotes = this.client.chatBox.commandPreprocessor.emotes.chan;
+        var personalEmotes = this.client.chatBox.commandPreprocessor.emotes.personal;
+
+
+        if(search != ''){
+            siteEmotes = siteEmotes.filter(filterQuery);
+            chanEmotes = chanEmotes.filter(filterQuery);
+            personalEmotes = personalEmotes.filter(filterQuery);
+
+            function filterQuery(emote){
+                //return true for anyany case-insensitive matches
+                return (emote.name.toLowerCase().match(search.toLowerCase())) != null;
+            }
+        }
+
+        this.renderEmotes(siteEmotes, this.siteEmoteList);
+        this.renderEmotes(chanEmotes, this.chanEmoteList);
+        this.renderEmotes(personalEmotes, this.personalEmoteList);
+    }
+
     renderEmotes(emoteList, container){
         //Clear out the container
         container.innerHTML = '';
 
+        //If we have two or less emotes
+        if(emoteList.length <= 2){
+            //Set the container display to flex
+            container.style.display = 'flex';
+        //otherwise
+        }else{
+            //Set the container display to grid
+            container.style.display = 'grid';
+        }
+
         //For each emote
         emoteList.forEach((emote) => {
             //Create div to hold emote
             const emoteDiv = document.createElement('div');
             emoteDiv.classList.add('emote-panel-list-emote');
 
+            //If we have a low emote count
+            if(emoteList.length <= 2){
+                //render them huuuuuge
+                emoteDiv.classList.add('emote-panel-list-big-emote');
+            }
+
             //If the emote is an image
             if(emote.type == 'image'){
                 //Create image node
@@ -94,6 +151,13 @@ class emotePanel extends panelObj{
             //Set media class
             emoteMedia.classList.add('emote-list-media');
 
+            //if we have a low emote count
+            if(emoteList.length <= 2){
+                //render them huuuuuge
+                emoteMedia.classList.add('emote-list-big-media');
+            }
+
+
             //Create paragraph tag
             const emoteTitle = document.createElement('p');
             //Set title class