more work on emoji component (wip)

client/src/components/chat.vue

@@ -35,8 +35,16 @@
     <div v-if="!muted" class="chat-send">
       <div class="accent" />
       <div class="text-container">
-        <textarea ref="chat" placeholder="Send a message" @keydown="onKeyDown" v-model="content" />
+        <textarea
-        <div class="emoji"><neko-emoji /></div>
+          ref="input"
+          placeholder="Send a message"
+          @keydown="onKeyDown"
+          v-model="content"
+          @click.stop.prevent="emoji = false"
+        />
+        <div class="emoji" @click.stop.prevent="emoji = !emoji">
+          <neko-emoji v-if="emoji" @picked="onEmojiPicked" />
+        </div>
       </div>
     </div>
   </div>
@@ -336,9 +344,11 @@
     },
   })
   export default class extends Vue {
+    @Ref('input') readonly _input!: HTMLTextAreaElement
     @Ref('history') readonly _history!: HTMLElement
     @Ref('context') readonly _context!: any
 
+    emoji = false
     content = ''
 
     get id() {
@@ -360,6 +370,11 @@
       })
     }
 
+    @Watch('emoji')
+    onEmojiChange() {
+      this._input.focus()
+    }
+
     @Watch('muted')
     onMutedChange(muted: boolean) {
       if (muted) {
@@ -382,6 +397,22 @@
       return `${str.charAt(0).toUpperCase()}${str.slice(1)}`
     }
 
+    onEmojiPicked(emoji: string) {
+      const text = `:${emoji}:`
+      if (this._input.selectionStart || this._input.selectionStart === 0) {
+        var startPos = this._input.selectionStart
+        var endPos = this._input.selectionEnd
+        this.content = this.content.substring(0, startPos) + text + this.content.substring(endPos, this.content.length)
+        this.$nextTick(() => {
+          this._input.selectionStart = startPos + text.length
+          this._input.selectionEnd = startPos + text.length
+        })
+      } else {
+        this.content += text
+      }
+      this.emoji = false
+    }
+
     onContext(event: MouseEvent, data: any) {
       this._context.open(event, data)
     }

client/src/components/emoji.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="neko-emoji">
     <div class="search">
+      <div class="search-contianer">
         <input type="text" ref="search" v-model="search" />
       </div>
+    </div>
     <div class="list" ref="scroll" @scroll="onScroll">
       <ul :class="[search === '' ? 'group-list' : 'emoji-list']">
         <template v-if="search === ''">
@@ -35,9 +37,9 @@
       </ul>
     </div>
     <div class="details">
-      <template v-if="hovered !== ''">
+      <div class="icon-container" v-if="hovered !== ''">
         <span :class="['icon', 'emoji-20', `e-${hovered}`]"></span><span class="emoji">:{{ hovered }}:</span>
-      </template>
+      </div>
     </div>
     <div class="groups">
       <ul>
@@ -47,7 +49,7 @@
           :class="[group.id, active === group.id && search === '' ? 'active' : '']"
           @click.stop.prevent="scrollTo($event, index)"
         >
-          <i class="fas fa-angry"></i>
+          <span :class="[`group-${group.id}`]" />
         </li>
       </ul>
     </div>
@@ -55,12 +57,13 @@
 </template>
 
 <style lang="scss" scoped>
-  $emoji-width: 350px;
+  $emoji-width: 300px;
 
   .neko-emoji {
     position: absolute;
+    z-index: 10000;
     width: $emoji-width;
-    height: 200px;
+    height: 350px;
     background: $background-secondary;
     bottom: 30px;
     right: 0;
@@ -68,13 +71,46 @@
     flex-direction: column;
     border-radius: 5px;
     overflow: hidden;
+    box-shadow: $elevation-high;
 
     .search {
       flex-shrink: 0;
-      height: 38px;
       border-bottom: 1px solid $background-tertiary;
+      padding: 10px;
+
+      .search-contianer {
+        border-radius: 5px;
+        color: $interactive-normal;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+        overflow: hidden;
+
+        &::before {
+          content: '\f002';
+          font-weight: 900;
+          font-family: 'Font Awesome 5 Free';
+          position: absolute;
+          width: 15px;
+          height: 15px;
+          top: 6px;
+          right: 6px;
+          opacity: 0.5;
+        }
 
         input {
+          border: none;
+          background-color: $background-floating;
+          color: $interactive-normal;
+          padding: 5px;
+          font-weight: 500;
+
+          &::placeholder {
+            color: $text-muted;
+            font-weight: 500;
+          }
+        }
       }
     }
 
@@ -118,11 +154,11 @@
               font-weight: 500;
               font-size: 12px;
               position: sticky;
-              top: 0;
+              top: -5px;
-            }
+              background-color: rgba($color: $background-secondary, $alpha: 0.9);
-
+              width: 100%;
-            .emoji-list {
+              display: block;
-              margin: 10px 0;
+              padding: 8px 0;
             }
           }
         }
@@ -136,9 +172,10 @@
           &.emoji {
             padding: 2px;
             border-radius: 3px;
+            cursor: pointer;
 
             &.active {
-              background-color: #fff;
+              background-color: $background-floating;
             }
           }
         }
@@ -147,22 +184,40 @@
 
     .details {
       flex-shrink: 0;
+      display: flex;
+      align-content: center;
+      justify-content: center;
+      flex-direction: column;
       height: 36px;
       background: $background-tertiary;
 
+      .icon-container {
+        display: flex;
+        align-content: center;
+        flex-direction: row;
+        height: 20px;
+
         span {
+          cursor: default;
+
           &.icon {
+            margin: 0 5px 0 10px;
           }
 
           &.emoji {
+            line-height: 20px;
+            font-size: 16px;
+            font-weight: 500;
+          }
         }
       }
     }
 
     .groups {
       flex-shrink: 0;
-      height: 28px;
+      height: 30px;
       background: $background-floating;
+      padding: 0 5px;
 
       ul {
         display: flex;
@@ -171,10 +226,53 @@
 
         li {
           flex-grow: 1;
-          height: 23px;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-content: center;
+          flex-direction: column;
+          height: 27px;
+          cursor: pointer;
 
           &.active {
-            border-bottom: 2px solid $style-primary;
+            border-bottom: 3px solid $style-primary;
+          }
+
+          span {
+            margin: 0 auto;
+            height: 20px;
+            width: 20px;
+
+            &.group-recent {
+              background-color: #fff;
+            }
+            &.group-neko {
+              background-color: #fff;
+            }
+            &.group-people {
+              background-color: #fff;
+            }
+            &.group-nature {
+              background-color: #fff;
+            }
+            &.group-food {
+              background-color: #fff;
+            }
+            &.group-activity {
+              background-color: #fff;
+            }
+            &.group-travel {
+              background-color: #fff;
+            }
+            &.group-objects {
+              background-color: #fff;
+            }
+            &.group-symbols {
+              background-color: #fff;
+            }
+            &.group-flags {
+              background-color: #fff;
+            }
           }
         }
       }
@@ -265,7 +363,7 @@
     }
 
     onClick(event: MouseEvent, emoji: string) {
-      this.$emit('done', emoji)
+      this.$emit('picked', emoji)
     }
   }
 </script>

client/src/components/emoji/groups.ts

@@ -1,16 +1,16 @@
 export const groups: Array<{ name: string; id: string; list: string[] }> = [
   {
-    id: 'Recent',
+    id: 'recent',
     name: 'Recent',
     list: [],
   },
   {
-    id: 'Neko',
+    id: 'neko',
     name: 'Neko',
     list: [],
   },
   {
-    id: 'People',
+    id: 'people',
     name: 'People',
     list: [
       'grinning',
@@ -362,7 +362,7 @@ export const groups: Array<{ name: string; id: string; list: string[] }> = [
     ],
   },
   {
-    id: 'Nature',
+    id: 'nature',
     name: 'Nature',
     list: [
       'dog',
@@ -545,7 +545,7 @@ export const groups: Array<{ name: string; id: string; list: string[] }> = [
     ],
   },
   {
-    id: 'Food',
+    id: 'food',
     name: 'Food',
     list: [
       'green_apple',
@@ -656,7 +656,7 @@ export const groups: Array<{ name: string; id: string; list: string[] }> = [
     ],
   },
   {
-    id: 'Activity',
+    id: 'activity',
     name: 'Activity',
     list: [
       'soccer',
@@ -757,7 +757,7 @@ export const groups: Array<{ name: string; id: string; list: string[] }> = [
     ],
   },
   {
-    id: 'Travel',
+    id: 'travel',
     name: 'Travel',
     list: [
       'red_car',
@@ -882,7 +882,7 @@ export const groups: Array<{ name: string; id: string; list: string[] }> = [
     ],
   },
   {
-    id: 'Objects',
+    id: 'objects',
     name: 'Objects',
     list: [
       'watch',
@@ -1090,7 +1090,7 @@ export const groups: Array<{ name: string; id: string; list: string[] }> = [
     ],
   },
   {
-    id: 'Symbols',
+    id: 'symbols',
     name: 'Symbols',
     list: [
       '100',
@@ -1370,7 +1370,7 @@ export const groups: Array<{ name: string; id: string; list: string[] }> = [
     ],
   },
   {
-    id: 'Flags',
+    id: 'flags',
     name: 'Flags',
     list: [
       'afghanistan',