From 847bcec22f2734ae990e8b5a07c49bc8a0c3d0f3 Mon Sep 17 00:00:00 2001
From: Milos Holba <milosholba78@gmail.com>
Date: Sat, 6 Feb 2021 16:12:21 +0100
Subject: [PATCH] add emojis groups navigation, add X icon to select input for
 reset emoji

---
 public/mix-manifest.json                      |  52 +++++--
 resources/js/components/Others/RenameItem.vue |   2 +-
 .../js/components/Others/SetFolderIcon.vue    | 146 ++++++++++++++++--
 resources/js/store/modules/emojisList.js      |  81 +++++++++-
 4 files changed, 257 insertions(+), 24 deletions(-)

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index b87a3116..ba7ba1c0 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -75,13 +75,47 @@
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=5cfec8a8f8a8aef24ef2",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=c001bef2d6d5171cb359",
     "/chunks/users.js": "/chunks/users.js?id=6e68cb068f69fba3199c",
-    "/js/main.54f937bc27802b0b6645.hot-update.js": "/js/main.54f937bc27802b0b6645.hot-update.js",
-    "/js/main.9d3bf7841cb200c6ba91.hot-update.js": "/js/main.9d3bf7841cb200c6ba91.hot-update.js",
-    "/js/main.6edd3eea0698ea9f3ca6.hot-update.js": "/js/main.6edd3eea0698ea9f3ca6.hot-update.js",
-    "/js/main.6af8617e3072c622e2e8.hot-update.js": "/js/main.6af8617e3072c622e2e8.hot-update.js",
-    "/js/main.9c881698e404ca3e8bc3.hot-update.js": "/js/main.9c881698e404ca3e8bc3.hot-update.js",
-    "/js/main.a3580d40229cde81108d.hot-update.js": "/js/main.a3580d40229cde81108d.hot-update.js",
-    "/js/main.4871c6b7e7141afe7f8a.hot-update.js": "/js/main.4871c6b7e7141afe7f8a.hot-update.js",
-    "/js/main.a7187aa96510d512e70c.hot-update.js": "/js/main.a7187aa96510d512e70c.hot-update.js",
-    "/js/main.c493681d78252428ae34.hot-update.js": "/js/main.c493681d78252428ae34.hot-update.js"
+    "/js/main.4e29a386090b114584ea.hot-update.js": "/js/main.4e29a386090b114584ea.hot-update.js",
+    "/js/main.2fdefb69f54e4b8c00e6.hot-update.js": "/js/main.2fdefb69f54e4b8c00e6.hot-update.js",
+    "/js/main.271588bda7c0940a4033.hot-update.js": "/js/main.271588bda7c0940a4033.hot-update.js",
+    "/js/main.8e3b6cf5a0d361f1b845.hot-update.js": "/js/main.8e3b6cf5a0d361f1b845.hot-update.js",
+    "/js/main.b8522fe8b5cab05205f4.hot-update.js": "/js/main.b8522fe8b5cab05205f4.hot-update.js",
+    "/js/main.8e67e210f52f898100c2.hot-update.js": "/js/main.8e67e210f52f898100c2.hot-update.js",
+    "/js/main.8471decdbdcd43cd398d.hot-update.js": "/js/main.8471decdbdcd43cd398d.hot-update.js",
+    "/js/main.a358c3d297609a98eac2.hot-update.js": "/js/main.a358c3d297609a98eac2.hot-update.js",
+    "/js/main.9e31f51ba6b5c6a365e1.hot-update.js": "/js/main.9e31f51ba6b5c6a365e1.hot-update.js",
+    "/js/main.842b53f7b7ceff459f4c.hot-update.js": "/js/main.842b53f7b7ceff459f4c.hot-update.js",
+    "/js/main.19c7adbbf0f219e6e254.hot-update.js": "/js/main.19c7adbbf0f219e6e254.hot-update.js",
+    "/js/main.6dfda574e47791c34f14.hot-update.js": "/js/main.6dfda574e47791c34f14.hot-update.js",
+    "/js/main.a56035dd2c712e1131bb.hot-update.js": "/js/main.a56035dd2c712e1131bb.hot-update.js",
+    "/js/main.61571eb2fa8385232639.hot-update.js": "/js/main.61571eb2fa8385232639.hot-update.js",
+    "/js/main.ceef7c69e12ee366591c.hot-update.js": "/js/main.ceef7c69e12ee366591c.hot-update.js",
+    "/js/main.a14fa7b4d5eb18432fe9.hot-update.js": "/js/main.a14fa7b4d5eb18432fe9.hot-update.js",
+    "/js/main.dce1cbc02573395e84a5.hot-update.js": "/js/main.dce1cbc02573395e84a5.hot-update.js",
+    "/js/main.fefb1a0a3b3c24a23785.hot-update.js": "/js/main.fefb1a0a3b3c24a23785.hot-update.js",
+    "/js/main.c3dafff76cd8bb437e12.hot-update.js": "/js/main.c3dafff76cd8bb437e12.hot-update.js",
+    "/js/main.0a6e85fd56ce3c4d96d4.hot-update.js": "/js/main.0a6e85fd56ce3c4d96d4.hot-update.js",
+    "/js/main.8b7b19418ef42d51c267.hot-update.js": "/js/main.8b7b19418ef42d51c267.hot-update.js",
+    "/js/main.a3e8447618aad63432f7.hot-update.js": "/js/main.a3e8447618aad63432f7.hot-update.js",
+    "/js/main.273bb322dc0a3fac4efb.hot-update.js": "/js/main.273bb322dc0a3fac4efb.hot-update.js",
+    "/js/main.cd83ad023a8887e21b43.hot-update.js": "/js/main.cd83ad023a8887e21b43.hot-update.js",
+    "/js/main.6119137c47b0b6b7d1ca.hot-update.js": "/js/main.6119137c47b0b6b7d1ca.hot-update.js",
+    "/js/main.42f5fc1356c297eac494.hot-update.js": "/js/main.42f5fc1356c297eac494.hot-update.js",
+    "/js/main.ed009554f42acc7059fb.hot-update.js": "/js/main.ed009554f42acc7059fb.hot-update.js",
+    "/js/main.8af6aed088cce9d2503a.hot-update.js": "/js/main.8af6aed088cce9d2503a.hot-update.js",
+    "/js/main.b4e7551d1a7f420c8f0e.hot-update.js": "/js/main.b4e7551d1a7f420c8f0e.hot-update.js",
+    "/js/main.145b9cc816f7a7d1b022.hot-update.js": "/js/main.145b9cc816f7a7d1b022.hot-update.js",
+    "/js/main.214f22daa6757ca9f68f.hot-update.js": "/js/main.214f22daa6757ca9f68f.hot-update.js",
+    "/js/main.fe0320b4f10ad980f85e.hot-update.js": "/js/main.fe0320b4f10ad980f85e.hot-update.js",
+    "/js/main.a2572a909190641e2778.hot-update.js": "/js/main.a2572a909190641e2778.hot-update.js",
+    "/js/main.05f2d326ed98de34d1f5.hot-update.js": "/js/main.05f2d326ed98de34d1f5.hot-update.js",
+    "/js/main.fba9ee79f2a35d48634d.hot-update.js": "/js/main.fba9ee79f2a35d48634d.hot-update.js",
+    "/js/main.233edbc80eb26071c8bd.hot-update.js": "/js/main.233edbc80eb26071c8bd.hot-update.js",
+    "/js/main.6a8993c29429334b8bed.hot-update.js": "/js/main.6a8993c29429334b8bed.hot-update.js",
+    "/js/main.c8936cee582db6351854.hot-update.js": "/js/main.c8936cee582db6351854.hot-update.js",
+    "/js/main.7327a6d5abc5e53338b6.hot-update.js": "/js/main.7327a6d5abc5e53338b6.hot-update.js",
+    "/js/main.94786b794f722913db2f.hot-update.js": "/js/main.94786b794f722913db2f.hot-update.js",
+    "/js/main.5b97e99de82c004b7040.hot-update.js": "/js/main.5b97e99de82c004b7040.hot-update.js",
+    "/js/main.0994c3cbbe38c708be78.hot-update.js": "/js/main.0994c3cbbe38c708be78.hot-update.js",
+    "/js/main.1743a74cb9afb57f23a8.hot-update.js": "/js/main.1743a74cb9afb57f23a8.hot-update.js"
 }
diff --git a/resources/js/components/Others/RenameItem.vue b/resources/js/components/Others/RenameItem.vue
index 3654cbf4..aba6c441 100644
--- a/resources/js/components/Others/RenameItem.vue
+++ b/resources/js/components/Others/RenameItem.vue
@@ -144,7 +144,7 @@
             })
 
               events.$on('setFolderIcon', (icon) => {
-                this.setFolderIcon = icon.value
+                this.setFolderIcon = ! icon ? undefined : icon.value
             })
         }
     }
diff --git a/resources/js/components/Others/SetFolderIcon.vue b/resources/js/components/Others/SetFolderIcon.vue
index e526875c..1d03e300 100644
--- a/resources/js/components/Others/SetFolderIcon.vue
+++ b/resources/js/components/Others/SetFolderIcon.vue
@@ -2,11 +2,14 @@
     <div class="set-folder-icon">
 
         <TabWrapper >
+
+            <!-- Emojis -->
             <TabOption :selected="true" id="emoji-list" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
                 <div class="select-emoji-wrapper">
                     <label class="main-label">Pick Yout Emoji Icon:</label>
 
-                    <div @click="openMenu" v-if="!selectOpen" class="select-input-wrapper">
+                    <!-- Selected Emoji input -->
+                    <div @click.stop="openMenu"  class="select-input-wrapper">
 
                         <div class="select-input" v-if="selectedEmoji">
                             <Emoji class="emoji-preview" :emoji="selectedEmoji" size="25"></Emoji>
@@ -17,16 +20,28 @@
                             <span> {{$t('popup_rename.set_emoji_input_placeholder')}}</span>
                         </div>
 
-                        <chevron-down-icon size="19" class="chevron-icon"/>
+                        <chevron-down-icon v-if="!selectOpen" size="19"/>
+
+                        <div v-if="selectOpen" @click="resetEmoji" class="select-input-icon-wrapper">
+                            <x-icon size="14" class="select-input-icon"/>
+                        </div>
                     </div>
 
+                    <!-- Emojis List -->
                     <transition v-if="selectOpen" name="slide-in">
                         <div class="emoji-wrapper">
-                            <input @input="filterEmojis" v-model="searchInput" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')" >
+                            <input @click.stop @input="filterEmojis" v-model="searchInput" class="emoji-input" :placeholder="$t('popup_rename.search_emoji_input_placeholder')" >
+
+                            <!-- Navigation of Emojis Groups -->
+                            <ul v-show="searchInput.length < 1" class="groups-list">
+                                <li @click.stop="scrollToGroup(group.name)" v-for="(group,i) in emojiGroups" :key="i" class="group-option" :class="{'active' : group.name === groupInView}">
+                                    <Emoji :emoji="group.emoji" size="33"/>
+                                </li>
+                            </ul>
 
                              <!-- All Emojis -->
-                            <div v-show="searchInput.length < 1"  class="group-wrapper">
-                                <div v-for="(group, name) in allEmoji" :key="name" class="options-wrapper">
+                            <div v-show="searchInput.length < 1" @scroll="checkGroupInView" id="group-box"  class="group-wrapper">
+                                <div v-for="(group, name) in allEmoji" :key="name" class="options-wrapper" :id="`group-${name}`">
                                     <label class="group-name-label">{{name}}</label>
                                     <ul class="options-list">
                                         <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in group" :key="i"  class="option"> 
@@ -53,6 +68,7 @@
                 </div>
             </TabOption>
 
+            <!-- Colors -->
             <TabOption :title="$t('popup_rename.tab_color_title')" icon="folder">
                 <div class="color-pick-wrapper">
                 <label class="main-label">{{$t('popup_rename.color_pick_label')}}</label>
@@ -71,7 +87,7 @@
 </template>
 
 <script>
-    import {SmileIcon, FolderIcon, ChevronDownIcon   } from 'vue-feather-icons'
+    import {SmileIcon, FolderIcon, ChevronDownIcon, XIcon} from 'vue-feather-icons'
     import TabWrapper from '@/components/Others/TabWrapper'
     import TabOption from '@/components/Others/TabOption'
     import Emoji from '@/components/Others/Emoji'
@@ -88,13 +104,11 @@
             TabOption,
             FolderIcon,
             SmileIcon,
+            XIcon,
             Emoji
         },
         computed: {
-            ...mapGetters(['emojis']),
-            setEmoji(){
-                return this.selectedEmoji, false
-            },
+            ...mapGetters(['emojis', 'emojiGroups']),
             allEmoji() {
                 return  _.groupBy(this.emojis,'group')                
             },
@@ -106,12 +120,34 @@
                 searchInput: '',
                 filteredEmojis: [],
                 selectOpen: false,
+                groupInView: 'Smileys & Emotion',
                 colors: ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
                         '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
                         '#80B300', '#809900', '#E6B3B3', '#6680B3']
             }
         },
         methods: {
+            checkGroupInView: _.debounce(function() {
+
+                 this.emojiGroups.forEach(group => { 
+
+                    let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
+                    let groupBox = document.getElementById('group-box').getBoundingClientRect()
+
+                    // Check if the group is in the viewport of group-box
+                    if(element.top < groupBox.top && element.bottom > groupBox.top){
+                        this.groupInView = group.name
+                    }
+                })
+            }, 200),
+            scrollToGroup(name) {
+
+                let group = document.getElementById(`group-${name}`)
+
+                group.scrollIntoView({behavior: "smooth"})
+
+                this.groupInView = name
+            },
             filterEmojis: _.debounce(function(emoji){
 
                this.filteredEmojis = this.emojis.filter(emoji => emoji.name.includes(this.searchInput))
@@ -121,6 +157,8 @@
                 this.selectOpen = ! this.selectOpen
 
                 this.searchInput = ''
+
+                this.groupInView = 'Smileys & Emotion'
             },
             setIcon(value) {
                 if(value.emoji){
@@ -137,9 +175,18 @@
 
                 this.selectOpen = false
             },
+            resetEmoji(){
+                this.selectedEmoji = undefined
+
+                events.$emit('setFolderIcon', undefined)
+            }
         },
         mounted () {
             this.selectOpen = false
+
+            events.$on('unClick', () => {
+                this.selectOpen = false
+            })
         }
         
     }
@@ -196,13 +243,38 @@
         display: flex;
         flex-direction: column;
         padding: 10px;
-        top: 89px;
+        top: 152px;
 
         .loader {
         width: 100%;
         height: 100%;
         position: relative;
-    }
+        }
+
+        .groups-list{
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                margin-bottom: 20px;
+
+                .active {
+                    background: $light_background;
+                    border-radius: 8px;
+                }
+
+                .group-option {
+                    list-style: none;
+                    width: 45px;
+                    height: 45px;
+                    padding: 6px;
+                    cursor: pointer;
+
+                    &:hover {
+                        background: $light_background;
+                        border-radius: 8px;
+                    }
+                }
+            }
 
         .emoji-input {
             width: 100%;
@@ -278,7 +350,6 @@
         }
     }
     
-
     .select-input-wrapper{
         height: 50px;
         padding: 13px 20px;
@@ -290,6 +361,30 @@
         justify-content: space-between;
         align-items: center;
 
+        .select-input-icon-wrapper {
+            width: 22px;
+            height: 22px;
+            border-radius: 6px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            &:hover {
+                background: $light_background !important;
+
+                .select-input-icon {
+                    line {
+                    stroke: $theme;
+                    }
+                }
+            }            
+
+            .select-input-icon {
+                line {
+                stroke: $text;
+                }
+            }
+        }
+
         .select-input {
             @include font-size(16);
             font-weight: 700;
@@ -349,6 +444,16 @@
             .emoji-input {
                 background: $dark_mode_foreground ;
             }
+            .groups-list{
+                .active{
+                    background: $dark_mode_foreground !important;
+                }
+                .group-option {
+                     &:hover {
+                        background: $dark_mode_foreground !important;
+                    }
+                }
+            }
             .options-wrapper {
                 .option {
                     &:hover {
@@ -368,6 +473,21 @@
                     color:$dark_mode_text_secondary;
                 }
             }
+            .select-input-icon-wrapper {
+                &:hover {
+                    background: rgba($theme, 0.1) !important;
+                    .select-input-icon {
+                        line {
+                            stroke: $theme !important;
+                        }
+                    }
+                }
+                .select-input-icon {
+                    line {
+                        stroke:$dark_mode_text_primary !important;
+                    }
+                }            
+            }
         }
     }
 
diff --git a/resources/js/store/modules/emojisList.js b/resources/js/store/modules/emojisList.js
index a2dcb567..7feeb545 100644
--- a/resources/js/store/modules/emojisList.js
+++ b/resources/js/store/modules/emojisList.js
@@ -13946,11 +13946,90 @@ const defaultState = {
             "group": "Flags",
             "subgroup": "subdivision-flag"
         }
+    ],
+
+    emojiGroups : [
+        {
+            "name": "Smileys & Emotion",
+            "emoji": {
+                "codes": "1F600",
+                "char": "😀",
+                "name": "grinning face",
+            }
+        },
+        {
+            "name": "People & Body",
+            "emoji": {
+                "codes": "1F91A",
+                "char": "🤚",
+                "name": "raised back of hand",
+            }
+        },
+        {
+            "name": "Animals & Nature",
+            "emoji": {
+                "codes": "1F435",
+                "char": "🐵",
+                "name": "monkey face",
+            }
+        },
+        {
+            "name": "Food & Drink",
+            "emoji": {
+                "codes": "1F34F",
+                "char": "🍏",
+                "name": "green apple",
+            }
+        },
+        {
+            "name": "Travel & Places",
+            "emoji": {
+                "codes": "1F697",
+                "char": "🚗",
+                "name": "automobile",
+            }
+        },
+        {
+            "name": "Activities",
+            "emoji": {
+                "codes": "26BD",
+                "char": "⚽",
+                "name": "soccer ball",
+            }
+        },
+        {
+            "name": "Objects",
+            "emoji": {
+                "codes": "231A",
+                "char": "⌚",
+                "name": "watch",
+            }
+        },
+        {
+            "name": "Symbols",
+            "emoji": {
+                "codes": "2764",
+                "char": "❤",
+                "name": "red heart",
+            }
+        },
+        {
+            "name": "Flags",
+            "emoji": {
+                "codes": "1F3F3",
+                "char": "🏳",
+                "name": "white flag",
+            }
+        },
+
+
     ]
 }
 
 const getters = {
-    emojis: state=> state.emojis,
+    emojis: state => state.emojis,
+    emojiGroups: state => state.emojiGroups
+
 }
 
 export default {