nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 00:02:15 +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

3
resources/js/components/FilesView/FileItemGrid.vue
View File

@@ -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-->

3
resources/js/components/FilesView/FileItemList.vue
View File

@@ -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-->

95
resources/js/components/FilesView/FolderIcon.vue
View File

@@ -1,45 +1,82 @@
<template>
<div>
<Emoji v-if="folderEmoji" :emoji="folderEmoji"/>
<FontAwesomeIcon v-if="!folderEmoji" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" :style="{fill: folderColor}"/>
<div :class="[{'is-apple': $isApple()}, location]">
<Emoji
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",
props: ['item' , 'folderIcon'],
components: {Emoji},
computed: {
isDeleted() {
return this.item.deleted_at ? true : false
import Emoji from '@/components/Others/Emoji'
export default {
name: 'FolderIcon',
props: [
'item',
'folderIcon',
'location'
],
components: {
Emoji
},
folderEmoji(){
// Return emoji if is changed from rename popup
if(this.folderIcon)
return this.folderIcon.emoji ? this.folderIcon.emoji : false
// Return emoji if is already set
return this.item.icon_emoji ? this.item.icon_emoji : false
},
folderColor() {
// Return color if is changed from rename popup
if(this.folderIcon)
return this.folderIcon.color ? this.folderIcon.color : '#00BC7E'
// Return color if is already set
return this.item.icon_color ? this.item.icon_color : '#00BC7E'
computed: {
isDeleted() {
return this.item.deleted_at ? true : false
},
emoji() {
// Return emoji if is changed from rename popup
if (this.folderIcon)
return this.folderIcon.emoji ? this.folderIcon.emoji : false
// Return emoji if is already set
return this.item.icon_emoji ? this.item.icon_emoji : false
},
color() {
// Return color if is changed from rename popup
if (this.folderIcon)
return this.folderIcon.color ? this.folderIcon.color : '#00BC7E'
// Return color if is already set
return this.item.icon_color ? this.item.icon_color : '#00BC7E'
}
}
}
}
</script>
<style lang="scss" scoped>
@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 {
@@ -54,7 +91,7 @@ export default {
}
@media (prefers-color-scheme: dark) {
.folder-icon {
&.is-deleted {
path {