From 29459bbf5cb0c420685d5372838d9fed4c03b928 Mon Sep 17 00:00:00 2001
From: Jorik Kraaikamp <jorikkraaikamp@gmail.com>
Date: Mon, 13 Jun 2022 14:06:03 +0200
Subject: [PATCH] Made the emoji picker function better

---
 .../components/Messages/Messages.html         |  8 +++--
 .../js/components/emoji-button/index.js       | 33 ++++++++++++-------
 .../scss/components/Emoji/Emoji.scss          | 32 +++++++++++++-----
 .../scss/components/Form/Input.scss           |  4 +++
 .../scss/components/Messages/_Messages.scss   |  6 +++-
 5 files changed, 61 insertions(+), 22 deletions(-)

diff --git a/src/open_inwoner/components/templates/components/Messages/Messages.html b/src/open_inwoner/components/templates/components/Messages/Messages.html
index 3d7cb431ea..03b99ab18a 100644
--- a/src/open_inwoner/components/templates/components/Messages/Messages.html
+++ b/src/open_inwoner/components/templates/components/Messages/Messages.html
@@ -1,4 +1,4 @@
-{% load i18n button_tags form_tags messages_tags %}
+{% load i18n button_tags form_tags messages_tags icon_tags %}
 
 <section class="messages">
     <header class="messages__header">
@@ -48,7 +48,11 @@ <h4 class="p p--muted">{{ day.text }}</h4>
                         <div class="emoji">
                             {% button class="emoji__button" icon="tag_faces" text=_('Selecteer emoji') hide_text=True type="button" %}
                             <div class="emoji__popup">
-                                <input class="emoji__search input" type="search">
+                                <div class="emoji__header">
+                                    <input class="emoji__search input input--bordered" type="search" placeholder="{% trans "Zoek emoji" %}">
+                                    {% icon icon="close" %}
+                                </div>
+                                <div class="emoji__emojis"></div>
                             </div>
                         </div>
                     </div>
diff --git a/src/open_inwoner/js/components/emoji-button/index.js b/src/open_inwoner/js/components/emoji-button/index.js
index 629644b96a..89205c45e8 100644
--- a/src/open_inwoner/js/components/emoji-button/index.js
+++ b/src/open_inwoner/js/components/emoji-button/index.js
@@ -9,7 +9,13 @@ class Emoji {
     this.search = node.querySelector('.emoji__search')
     this.button = node.querySelector('.emoji__button')
     this.popup = node.querySelector('.emoji__popup')
+    this.container = node.querySelector('.emoji__emojis')
+    this.close = this.popup.querySelector('.material-icons')
     this.populatePopup()
+    this.addListeners()
+  }
+
+  addListeners() {
     this.button.addEventListener('click', (event) => {
       event.preventDefault()
       this.popup.classList.toggle('emoji__popup--open')
@@ -19,16 +25,21 @@ class Emoji {
         this.popup.classList.remove('emoji__popup--open')
       }
     })
-    this.search.addEventListener('keyup', (event) => {
-      const searchValue = event.currentTarget.value.toUpperCase()
-      document.querySelectorAll('.emoji__emoji-button').forEach((button) => {
-        const label = button.dataset.label.toUpperCase()
-        if (label.includes(searchValue)) {
-          button.classList.remove('emoji__emoji-button--hidden')
-        } else {
-          button.classList.add('emoji__emoji-button--hidden')
-        }
-      })
+    this.close.addEventListener('click', (event) => {
+      this.popup.classList.remove('emoji__popup--open')
+    })
+    this.search.addEventListener('keyup', this.searchEmoji.bind(this))
+  }
+
+  searchEmoji(event) {
+    const searchValue = event.currentTarget.value.toUpperCase()
+    document.querySelectorAll('.emoji__emoji-button').forEach((button) => {
+      const label = button.dataset.label.toUpperCase()
+      if (label.includes(searchValue)) {
+        button.classList.remove('emoji__emoji-button--hidden')
+      } else {
+        button.classList.add('emoji__emoji-button--hidden')
+      }
     })
   }
 
@@ -42,7 +53,7 @@ class Emoji {
       emojiButton.addEventListener('click', (event) => {
         this.content.append(emoji.emoji)
       })
-      this.popup.append(emojiButton)
+      this.container.append(emojiButton)
     })
   }
 }
diff --git a/src/open_inwoner/scss/components/Emoji/Emoji.scss b/src/open_inwoner/scss/components/Emoji/Emoji.scss
index ffea79e64b..aa5b075837 100644
--- a/src/open_inwoner/scss/components/Emoji/Emoji.scss
+++ b/src/open_inwoner/scss/components/Emoji/Emoji.scss
@@ -1,9 +1,19 @@
 .emoji {
-  &__button {
+  &__header {
+    display: grid;
+    grid-template-columns: 1fr 25px;
+    align-items: center;
+    padding: 8px 0 0 8px;
+    gap: 8px;
   }
 
   &__search {
-    grid-column: 1 / span 8;
+    // grid-column: 1 / span 8;
+    min-width: 0;
+  }
+
+  .material-icons {
+    cursor: pointer;
   }
 
   &__emoji-button {
@@ -16,17 +26,23 @@
 
   &__popup {
     display: none;
-    grid-template-columns: repeat(8, 1fr);
     position: absolute;
-    max-height: 200px;
-    overflow: auto;
     background-color: #fff;
-    padding: var(--spacing-medium);
     border: 1px solid #000;
-    gap: var(--spacing-medium);
+    width: 260px;
 
     &--open {
-      display: grid;
+      display: block;
     }
   }
+
+  &__emojis {
+    display: grid;
+    gap: var(--spacing-medium);
+    grid-template-columns: repeat(8, 1fr);
+    padding: var(--spacing-medium);
+    max-height: 200px;
+    overflow: auto;
+    text-align: center;
+  }
 }
diff --git a/src/open_inwoner/scss/components/Form/Input.scss b/src/open_inwoner/scss/components/Form/Input.scss
index efb50bf235..cb99533e81 100644
--- a/src/open_inwoner/scss/components/Form/Input.scss
+++ b/src/open_inwoner/scss/components/Form/Input.scss
@@ -20,6 +20,10 @@
   font-family: var(--font-family-body);
   font-size: var(--font-size-body);
   background-color: var(--color-white);
+
+  &.input--bordered {
+    border: 1px solid var(--color-mute);
+  }
 }
 
 textarea.input {
diff --git a/src/open_inwoner/scss/components/Messages/_Messages.scss b/src/open_inwoner/scss/components/Messages/_Messages.scss
index de91d84e2f..8d8293357e 100644
--- a/src/open_inwoner/scss/components/Messages/_Messages.scss
+++ b/src/open_inwoner/scss/components/Messages/_Messages.scss
@@ -70,8 +70,12 @@
   }
 
   .message {
-    max-width: 50%;
+    max-width: 85%;
     align-self: baseline;
+
+    @media (min-width: 768px) {
+      max-width: 50%;
+    }
   }
 
   .message--ours {