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

emoji component refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-20 09:19:14 +01:00
parent 34fcbdc55c
commit e1de316774
14 changed files with 552 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/FolderIcon.vue
+5 -105
View File
@@ -1,127 +1,27 @@
<template>
<div :class="[{'is-apple': $isApple()}, location]">
<Emoji
v-if="emoji"
:emoji="emoji"
class="emoji-icon"
/>
<div>
<VueFolderIcon
v-if="!emoji && !item.data.attributes.isTeamFolder"
:class="[{'is-deleted':isDeleted},{'default-color': ! color && ! isDeleted}, 'folder-icon' ]"
:style="{fill: color}"
v-if="!item.data.attributes.isTeamFolder"
/>
<VueFolderTeamIcon
v-if="!emoji && item.data.attributes.isTeamFolder"
:class="[{'is-deleted':isDeleted},{'default-color': ! color && ! isDeleted}, 'folder-icon' ]"
:style="{fill: color}"
v-if="item.data.attributes.isTeamFolder"
style="width: 53px; height: 52px"
/>
</div>
</template>
<script>
import Emoji from '/resources/js/components/Others/Emoji'
import VueFolderIcon from "./Icons/VueFolderIcon"
import VueFolderTeamIcon from "./Icons/VueFolderTeamIcon"
import VueFolderIcon from "./Icons/VueFolderIcon"
export default {
name: 'FolderIcon',
props: [
'folderIcon',
'location',
'item',
],
components: {
VueFolderTeamIcon,
VueFolderIcon,
Emoji,
},
computed: {
isDeleted() {
return this.item.data.attributes.deleted_at
},
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.data.attributes.emoji ? this.item.data.attributes.emoji : false
},
color() {
// Return color if is changed from rename popup
if (this.folderIcon)
return this.folderIcon.color ? this.folderIcon.color : false
// Return color if is already set
return this.item.data.attributes.color ? this.item.data.attributes.color : false
}
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_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;
}
}
.emoji-picker-preview {
&.is-apple .emoji-icon {
font-size: 22px;
line-height: 1.1;
}
}
.folder-icon {
path {
fill: inherit;
}
&.is-deleted {
path {
fill: $dark_background;
}
}
&.is-team {
path {
fill: transparent;
stroke-width: 26px;
stroke: inherit;
}
}
}
.dark {
.folder-icon {
&.is-deleted {
path {
fill: lighten($dark_mode_foreground, 5%);
}
}
}
}
</style>
</script>
resources/js/components/FilesView/ItemGrid.vue
+16 -7
View File
@@ -13,8 +13,15 @@
<!--Item thumbnail-->
<div class="relative mx-auto">
<!--Emoji Icon-->
<Emoji
v-if="entry.data.attributes.emoji"
:emoji="entry.data.attributes.emoji"
class="text-5xl transform scale-150 inline-block mb-10"
/>
<!--Folder Icon-->
<FolderIcon v-if="isFolder" :item="entry" location="file-item-list" class="inline-block transform scale-150 lg:mt-2 lg:mb-8 mt-3 mb-5" />
<FolderIcon v-if="isFolder && !entry.data.attributes.emoji" :item="entry" class="inline-block transform scale-150 lg:mt-2 lg:mb-8 mt-3 mb-5" />
<!--File Icon-->
<div v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)" class="relative w-24 mx-auto">
@@ -92,12 +99,13 @@
<script>
import FolderIcon from '/resources/js/components/FilesView/FolderIcon'
import {LinkIcon, MoreHorizontalIcon, EyeIcon} from 'vue-feather-icons'
import FileIconThumbnail from "./FileIconThumbnail";
import MemberAvatar from "./MemberAvatar";
import CheckBox from "./CheckBox";
import {debounce} from "lodash";
import {mapGetters} from "vuex";
import {events} from "../../bus";
import FileIconThumbnail from "./FileIconThumbnail"
import MemberAvatar from "./MemberAvatar"
import Emoji from "../Others/Emoji"
import CheckBox from "./CheckBox"
import {debounce} from "lodash"
import {mapGetters} from "vuex"
import {events} from "../../bus"
export default {
name: 'ItemList',
@@ -109,6 +117,7 @@
CheckBox,
LinkIcon,
EyeIcon,
Emoji,
},
props: [
'mobileHandler',
resources/js/components/FilesView/ItemList.vue
+10 -1
View File
@@ -16,8 +16,15 @@
class="absolute right-1.5 -bottom-2 z-10"
/>
<!--Emoji Icon-->
<Emoji
v-if="entry.data.attributes.emoji"
:emoji="entry.data.attributes.emoji"
class="text-5xl ml-1 transform scale-110"
/>
<!--Folder Icon-->
<FolderIcon v-if="isFolder" :item="entry" location="file-item-list" />
<FolderIcon v-if="isFolder && !entry.data.attributes.emoji" :item="entry" />
<!--File Icon-->
<FileIconThumbnail v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)" :entry="entry" class="pr-2" />
@@ -67,6 +74,7 @@
</template>
<script>
import Emoji from "../Others/Emoji";
import FolderIcon from '/resources/js/components/FilesView/FolderIcon'
import {LinkIcon, MoreVerticalIcon, EyeIcon} from 'vue-feather-icons'
import FileIconThumbnail from "./FileIconThumbnail";
@@ -86,6 +94,7 @@
CheckBox,
LinkIcon,
EyeIcon,
Emoji,
},
props: [
'mobileHandler',
resources/js/components/FilesView/MobileContextMenu.vue
+1 -11
View File
@@ -1,6 +1,6 @@
<template>
<MenuMobile name="file-menu">
<ThumbnailItem class="mb-5" :item="clipboard[0]" info="metadata" />
<ThumbnailItem class="m-5" :item="clipboard[0]" />
<MenuMobileGroup v-if="$slots.default">
<slot></slot>
@@ -36,13 +36,3 @@ export default {
},
}
</script>
<style scoped lang="scss">
@import "resources/sass/vuefilemanager/_variables";
@import "resources/sass/vuefilemanager/_mixins";
.item-thumbnail {
padding: 20px 20px 10px;
margin-bottom: 0;
}
</style>