nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 11:00:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

apple emojis

Browse Source
This commit is contained in:
Peter Papp
2021-02-13 12:05:47 +01:00
parent 86090b5870
commit ba0b2bd3b9
7 changed files with 104 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/chunks/files~chunks/shared-files~chunks/shared-page.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
resources/js/components/FilesView/FileItemGrid.vue
+1 -2
View File
@@ -26,8 +26,7 @@
<img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/> <img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
<!--Else show only folder icon--> <!--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> </div>
<!--Name--> <!--Name-->
resources/js/components/FilesView/FileItemList.vue
+1 -2
View File
@@ -32,8 +32,7 @@
<img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/> <img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
<!--Else show only folder icon--> <!--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> </div>
<!--Name--> <!--Name-->
resources/js/components/FilesView/FolderIcon.vue
+51 -14
View File
@@ -1,45 +1,82 @@
<template> <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> </div>
</template> </template>
<script> <script>
import Emoji from '@/components/Others/Emoji' import Emoji from '@/components/Others/Emoji'
export default {
name:"FolderIcon", export default {
props: ['item' , 'folderIcon'], name: 'FolderIcon',
components: {Emoji}, props: [
'item',
'folderIcon',
'location'
],
components: {
Emoji
},
computed: { computed: {
isDeleted() { isDeleted() {
return this.item.deleted_at ? true : false return this.item.deleted_at ? true : false
}, },
folderEmoji(){ emoji() {
// Return emoji if is changed from rename popup // Return emoji if is changed from rename popup
if(this.folderIcon) if (this.folderIcon)
return this.folderIcon.emoji ? this.folderIcon.emoji : false return this.folderIcon.emoji ? this.folderIcon.emoji : false
// Return emoji if is already set // Return emoji if is already set
return this.item.icon_emoji ? this.item.icon_emoji : false return this.item.icon_emoji ? this.item.icon_emoji : false
}, },
folderColor() { color() {
// Return color if is changed from rename popup // Return color if is changed from rename popup
if(this.folderIcon) if (this.folderIcon)
return this.folderIcon.color ? this.folderIcon.color : '#00BC7E' return this.folderIcon.color ? this.folderIcon.color : '#00BC7E'
// Return color if is already set // Return color if is already set
return this.item.icon_color ? this.item.icon_color : '#00BC7E' return this.item.icon_color ? this.item.icon_color : '#00BC7E'
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables'; @import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins'; @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 { .folder-icon {
path { path {
resources/js/components/Others/Emoji.vue
+28 -18
View File
@@ -1,7 +1,7 @@
<template> <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> </div>
</template> </template>
@@ -10,28 +10,21 @@ import twemoji from 'twemoji'
export default { export default {
name: 'Emoji', name: 'Emoji',
props: ['emoji'], props: [
'emoji',
'location',
],
computed: { computed: {
transferEmoji() { transferEmoji() {
return twemoji.parse(this.emoji.char, {
// Transfer single emoji to twemoji
let tweomjiParse = twemoji.parse(this.emoji.char, {
folder: 'svg', folder: 'svg',
ext: '.svg', ext: '.svg',
attributes: () => ({ attributes: () => ({
loading: 'lazy' 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> </script>
@@ -39,9 +32,26 @@ export default {
@import "@assets/vue-file-manager/_inapp-forms.scss"; @import "@assets/vue-file-manager/_inapp-forms.scss";
@import '@assets/vue-file-manager/_forms'; @import '@assets/vue-file-manager/_forms';
.apple-emoji { .emoji-container {
font-size: 49px; font-size: inherit;
line-height: 1.2;
.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> </style>
resources/js/components/Others/SetFolderIcon.vue
+6 -7
View File
@@ -14,7 +14,7 @@
<div @click.stop="resetEmoji" class="select-input-icon-wrapper"> <div @click.stop="resetEmoji" class="select-input-icon-wrapper">
<x-icon size="14" class="select-input-icon"/> <x-icon size="14" class="select-input-icon"/>
</div> </div>
<Emoji class="emoji-preview" :emoji="selectedEmoji" size="25"></Emoji> <Emoji class="emoji-preview" :emoji="selectedEmoji" location="emoji-picker-preview" />
<span>{{ selectedEmoji.name }}</span> <span>{{ selectedEmoji.name }}</span>
</div> </div>
@@ -43,7 +43,7 @@
<!-- Navigation of Emojis Groups --> <!-- Navigation of Emojis Groups -->
<ul v-show="searchInput.length < 1" class="groups-list"> <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}"> <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> </li>
</ul> </ul>
@@ -53,7 +53,7 @@
<label class="group-name-label">{{ name }}</label> <label class="group-name-label">{{ name }}</label>
<ul class="options-list"> <ul class="options-list">
<li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in group" :key="i" class="option"> <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> </li>
</ul> </ul>
</div> </div>
@@ -64,7 +64,7 @@
<div class="options-wrapper"> <div class="options-wrapper">
<ul class="options-list"> <ul class="options-list">
<li @click="setIcon({'emoji':emoji})" v-for="(emoji,i) in filteredEmojis" :key="i" class="option"> <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> </li>
</ul> </ul>
<span class="not-found" v-if="filteredEmojis.length === 0"> {{ $t('popup_rename.emoji_list_not_found') }}</span> <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; align-items: center;
.emoji-preview { .emoji-preview {
width: 25px; margin-left: 5px;
height: 25px;
margin-right: 10px; margin-right: 10px;
margin-left: 6px;
} }
.select-input-icon-wrapper { .select-input-icon-wrapper {
@@ -457,6 +455,7 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: -7px;
&:hover { &:hover {
resources/js/components/Others/ThumbnailItem.vue
+1 -2
View File
@@ -14,8 +14,7 @@
<img v-if="isImage" class="image" :src="item.thumbnail" :alt="item.name"/> <img v-if="isImage" class="image" :src="item.thumbnail" :alt="item.name"/>
<!--Else show only folder icon--> <!--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> </div>
<!--Name--> <!--Name-->