diff --git a/src/views/partial/panels/emote.ejs b/src/views/partial/panels/emote.ejs
index cc5d3f2..84b4955 100644
--- a/src/views/partial/panels/emote.ejs
+++ b/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 .-->
+
+
+
- Site Emotes
+ Personal Emotes
+
+
+
+
+
+
+
+
+
+ [ ]
+ Add
+
+
+
+
+
+
+ Site Emotes
- Channel Emotes
+ Channel Emotes
-
-
-
- Personal Emotes
-
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/www/css/adminPanel.css b/www/css/adminPanel.css
index 98fdd00..c94607d 100644
--- a/www/css/adminPanel.css
+++ b/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));
diff --git a/www/css/channel.css b/www/css/channel.css
index da4f2a7..ff5c10b 100644
--- a/www/css/channel.css
+++ b/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{
diff --git a/www/css/panel/emote.css b/www/css/panel/emote.css
index 519550e..cb0a565 100644
--- a/www/css/panel/emote.css
+++ b/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{
@@ -34,4 +43,23 @@ p.emote-list-title{
max-height: 8em;
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;
}
\ No newline at end of file
diff --git a/www/css/theme/movie-night.css b/www/css/theme/movie-night.css
index e0580d8..c74f983 100644
--- a/www/css/theme/movie-night.css
+++ b/www/css/theme/movie-night.css
@@ -37,7 +37,9 @@ along with this program. If not, see .*/
--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);
}
\ No newline at end of file
diff --git a/www/js/channel/panels/emotePanel.js b/www/js/channel/panels/emotePanel.js
index ea8a55d..efbc593 100644
--- a/www/js/channel/panels/emotePanel.js
+++ b/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