apple emojis

resources/js/components/FilesView/FileItemGrid.vue

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

resources/js/components/FilesView/FileItemList.vue

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

resources/js/components/FilesView/FolderIcon.vue

@@ -1,22 +1,37 @@
 <template>
-    <div>
+    <div :class="[{'is-apple': $isApple()}, location]">
-        <Emoji v-if="folderEmoji" :emoji="folderEmoji"/>
+        <Emoji
-        <FontAwesomeIcon v-if="!folderEmoji" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" :style="{fill: folderColor}"/>
+            v-if="emoji"
+            :emoji="emoji"
+            class="emoji-icon"
+        />
+        <FontAwesomeIcon
+            v-if="!emoji"
+            :class="[{ 'is-deleted': isDeleted }, 'folder-icon']"
+            :style="{fill: color}"
+            icon="folder"
+        />
     </div>
 </template>
 
-
 <script>
     import Emoji from '@/components/Others/Emoji'
+
     export default {
-    name:"FolderIcon",
+        name: 'FolderIcon',
-    props: ['item' , 'folderIcon'],
+        props: [
-    components: {Emoji},
+            'item',
+            'folderIcon',
+            'location'
+        ],
+        components: {
+            Emoji
+        },
         computed: {
             isDeleted() {
                 return this.item.deleted_at ? true : false
             },
-        folderEmoji(){
+            emoji() {
                 // Return emoji if is changed from rename popup
                 if (this.folderIcon)
                     return this.folderIcon.emoji ? this.folderIcon.emoji : false
@@ -24,7 +39,7 @@ export default {
                 // Return emoji if is already set
                 return this.item.icon_emoji ? this.item.icon_emoji : false
             },
-        folderColor() {
+            color() {
                 // Return color if is changed from rename popup
                 if (this.folderIcon)
                     return this.folderIcon.color ? this.folderIcon.color : '#00BC7E'
@@ -40,6 +55,28 @@ export default {
 @import '@assets/vue-file-manager/_variables';
 @import '@assets/vue-file-manager/_mixins';
 
+// Locations
+.file-item-list {
+    &.is-apple .emoji-icon {
+        font-size: 50px;
+        line-height: 1.1;
+    }
+}
+
+.file-item-grid {
+    &.is-apple .emoji-icon {
+        font-size: 80px;
+        line-height: 1.1;
+    }
+}
+
+.thumbnail-item {
+    &.is-apple .emoji-icon {
+        font-size: 36px;
+        line-height: 1.1;
+    }
+}
+
 .folder-icon {
 
     path {

resources/js/components/Others/Emoji.vue

@@ -1,7 +1,7 @@
 <template>
-    <div>
+    <div :class="[location, 'emoji-container', {'is-apple': $isApple}]">
-        <span v-if="transferEmoji && !isApple" class="twemoji-emoji" v-html="transferEmoji"></span>
+        <span v-if="!$isApple()" class="twemoji-emoji emoji-icon" v-html="transferEmoji"></span>
-        <span v-if="transferEmoji && isApple" class="apple-emoji">{{ 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() {
-
+            return twemoji.parse(this.emoji.char, {
-            // Transfer single emoji to twemoji
-            let tweomjiParse = 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';
 
+.emoji-container {
+    font-size: inherit;
+
+    .emoji-icon {
+        font-size: inherit;
+    }
+}
+
+.emoji-picker {
     .apple-emoji {
-    font-size: 49px;
+        font-size: 34px;
-    line-height: 1.2;
+        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;
+            margin-left: 5px;
-            height: 25px;
             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-->