apple emojis

resources/js/components/Others/Emoji.vue

@@ -1,7 +1,7 @@
 <template>
-    <div>
-        <span v-if="transferEmoji && !isApple" class="twemoji-emoji" v-html="transferEmoji"></span>
-        <span v-if="transferEmoji && isApple" class="apple-emoji">{{ transferEmoji }}</span>
+    <div :class="[location, 'emoji-container', {'is-apple': $isApple}]">
+        <span v-if="!$isApple()" class="twemoji-emoji emoji-icon" v-html="transferEmoji"></span>
+        <span v-if="$isApple()" class="apple-emoji emoji-icon">{{ this.emoji.char }}</span>
     </div>
 </template>
 
@@ -10,28 +10,21 @@ import twemoji from 'twemoji'
 
 export default {
     name: 'Emoji',
-    props: ['emoji'],
+    props: [
+        'emoji',
+        'location',
+    ],
     computed: {
         transferEmoji() {
-
-            // Transfer single emoji to twemoji
-            let tweomjiParse = twemoji.parse(this.emoji.char, {
+            return twemoji.parse(this.emoji.char, {
                 folder: 'svg',
                 ext: '.svg',
                 attributes: () => ({
                     loading: 'lazy'
                 })
             })
-
-            // Check the OS, if is OS not iOS return transfered emoji to twemoji
-            return !this.isApple ? tweomjiParse : this.emoji.char
         }
     },
-    data() {
-        return {
-            isApple: this.$isApple()
-        }
-    }
 }
 </script>
 
@@ -39,9 +32,26 @@ export default {
 @import "@assets/vue-file-manager/_inapp-forms.scss";
 @import '@assets/vue-file-manager/_forms';
 
-.apple-emoji {
-    font-size: 49px;
-    line-height: 1.2;
+.emoji-container {
+    font-size: inherit;
+
+    .emoji-icon {
+        font-size: inherit;
+    }
+}
+
+.emoji-picker {
+    .apple-emoji {
+        font-size: 34px;
+        line-height: 1.1;
+    }
+}
+
+.emoji-picker-preview {
+    .apple-emoji {
+        font-size: 28px;
+        line-height: 1.1;
+    }
 }
 
 </style>

resources/js/components/Others/SetFolderIcon.vue

@@ -14,7 +14,7 @@
                         <div @click.stop="resetEmoji" class="select-input-icon-wrapper">
                             <x-icon size="14" class="select-input-icon"/>
                         </div>
-                        <Emoji class="emoji-preview" :emoji="selectedEmoji" size="25"></Emoji>
+                        <Emoji class="emoji-preview" :emoji="selectedEmoji" location="emoji-picker-preview" />
                         <span>{{ selectedEmoji.name }}</span>
                     </div>
 
@@ -43,7 +43,7 @@
                             <!-- Navigation of Emojis Groups -->
                             <ul v-show="searchInput.length < 1" class="groups-list">
                                 <li @click.stop="scrollToGroup(group.name)" v-for="(group,i) in emojis.emojisGroups" :key="i" class="group-option" :class="{'active' : group.name === groupInView}">
-                                    <Emoji :emoji="group.emoji" size="33"/>
+                                    <Emoji :emoji="group.emoji" location="emoji-picker" />
                                 </li>
                             </ul>
 
@@ -53,7 +53,7 @@
                                     <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">
-                                            <Emoji :emoji="emoji" size="33"/>
+                                            <Emoji :emoji="emoji" location="emoji-picker" />
                                         </li>
                                     </ul>
                                 </div>
@@ -64,7 +64,7 @@
                                 <div class="options-wrapper">
                                     <ul class="options-list">
                                         <li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in filteredEmojis" :key="i" class="option">
-                                            <Emoji :emoji="emoji" size="33" />
+                                            <Emoji :emoji="emoji" location="emoji-picker" />
                                         </li>
                                     </ul>
                                     <span class="not-found" v-if="filteredEmojis.length === 0"> {{ $t('popup_rename.emoji_list_not_found') }}</span>
@@ -444,10 +444,8 @@ export default {
         align-items: center;
 
         .emoji-preview {
-            width: 25px;
-            height: 25px;
+            margin-left: 5px;
             margin-right: 10px;
-            margin-left: 6px;
         }
 
         .select-input-icon-wrapper {
@@ -457,6 +455,7 @@ export default {
             display: flex;
             justify-content: center;
             align-items: center;
+            margin-left: -7px;
 
             &:hover {
 

resources/js/components/Others/ThumbnailItem.vue

@@ -14,8 +14,7 @@
             <img v-if="isImage" class="image" :src="item.thumbnail" :alt="item.name"/>
 
             <!--Else show only folder icon-->
-            <FolderIcon v-if="isFolder" :item="item" :folder-icon="setFolderIcon" class="folder" />
-
+            <FolderIcon v-if="isFolder" :item="item" :folder-icon="setFolderIcon" location="thumbnail-item" class="folder" />
         </div>
 
         <!--Name-->