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

UI enhancements

Browse Source
This commit is contained in:
Čarodej
2022-02-09 08:40:28 +01:00
parent e7d9fca9c2
commit a9e4daed35
11 changed files with 73 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/FilesView/InfoSidebar.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="hidden 2xl:w-[360px] w-[320px] shrink-0 overflow-y-auto overflow-x-hidden px-2.5 pt-2 lg:block">
<div class="hidden 2xl:w-[360px] xl:w-[320px] w-[300px] shrink-0 overflow-y-auto overflow-x-hidden px-2.5 pt-2 lg:block">
<!--Is empty clipboard-->
<div v-if="isEmpty" class="flex h-full items-center justify-center">
<div class="text-center">

74
resources/js/components/FilesView/ItemGrid.vue
View File

@@ -1,9 +1,9 @@
<template>
<div
:class="{
'bg-light-background dark:bg-dark-foreground': isClicked,
'dark:hover:bg-dark-foreground lg:hover:bg-light-background': canHover
}"
'bg-light-background dark:bg-dark-foreground': isClicked,
'dark:hover:bg-dark-foreground lg:hover:bg-light-background': canHover,
}"
class="relative z-0 flex h-48 select-none flex-wrap items-center justify-center rounded-lg border-2 border-dashed border-transparent px-1 pt-2 text-center sm:h-56 lg:h-60"
:draggable="canDrag"
spellcheck="false"
@@ -15,13 +15,24 @@
<!--Item thumbnail-->
<div class="relative mx-auto">
<!--Emoji Icon-->
<Emoji v-if="entry.data.attributes.emoji" :emoji="entry.data.attributes.emoji" class="mb-10 inline-block scale-150 transform text-5xl" />
<Emoji
v-if="entry.data.attributes.emoji"
:emoji="entry.data.attributes.emoji"
class="mb-10 inline-block scale-150 transform text-5xl"
/>
<!--Folder Icon-->
<FolderIcon v-if="isFolder && !entry.data.attributes.emoji" :item="entry" class="mt-3 mb-5 inline-block scale-150 transform lg:mt-2 lg:mb-8" />
<FolderIcon
v-if="isFolder && !entry.data.attributes.emoji"
:item="entry"
class="mt-3 mb-5 inline-block scale-150 transform lg:mt-2 lg:mb-8"
/>
<!--File Icon-->
<div v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)" class="relative mx-auto w-24">
<div
v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)"
class="relative mx-auto w-24"
>
<!--Member thumbnail for team folders-->
<MemberAvatar
v-if="user && canShowAuthor"
@@ -31,11 +42,17 @@
class="absolute right-2 -bottom-5 z-10 z-10 scale-75 transform lg:-bottom-7 lg:scale-100"
/>
<FileIconThumbnail :entry="entry" class="z-0 mt-5 mb-10 scale-125 transform lg:mb-12 lg:mt-6 lg:scale-150" />
<FileIconThumbnail
:entry="entry"
class="z-0 mt-5 mb-10 scale-125 transform lg:mb-12 lg:mt-6 lg:scale-150"
/>
</div>
<!--Image thumbnail-->
<div v-if="isImage && entry.data.attributes.thumbnail" class="relative mb-4 inline-block h-24 w-28 lg:h-28 lg:w-36">
<div
v-if="isImage && entry.data.attributes.thumbnail"
class="relative mb-4 inline-block h-24 w-28 lg:h-28 lg:w-36"
>
<!--Member thumbnail for team folders-->
<MemberAvatar
v-if="user && canShowAuthor"
@@ -45,7 +62,12 @@
class="absolute -right-3 -bottom-2.5 z-10 scale-75 transform lg:scale-100"
/>
<img class="h-full w-full rounded-lg object-cover shadow-lg" :src="entry.data.attributes.thumbnail.sm" :alt="entry.data.attributes.name" loading="lazy" />
<img
class="h-full w-full rounded-lg object-cover shadow-lg"
:src="entry.data.attributes.thumbnail.sm"
:alt="entry.data.attributes.name"
loading="lazy"
/>
</div>
</div>
@@ -53,8 +75,8 @@
<div class="text-center">
<!--Item Title-->
<b
class="tracking-tight inline-block w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-3 md:px-6"
:class="{'hover:underline': canEditName}"
class="inline-block w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-3 tracking-tight md:px-6"
:class="{ 'hover:underline': canEditName }"
ref="name"
@input="renameItem"
@keydown.delete.stop
@@ -72,20 +94,24 @@
</div>
<!--File & Image sub line-->
<small v-if="!isFolder" class="block text-xs text-gray-500">
{{ entry.data.attributes.filesize }}<span class="hidden text-xs text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
<small v-if="!isFolder" class="block text-xs text-gray-500 dark:text-gray-500">
{{ entry.data.attributes.filesize }}
<span class="hidden text-xs text-gray-500 dark:text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
</small>
<!--Folder sub line-->
<small v-if="isFolder" class="block text-xs text-gray-500">
<small v-if="isFolder" class="block text-xs text-gray-500 dark:text-gray-500">
{{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems)
}}<span class="hidden text-xs text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
}}<span class="hidden text-xs text-gray-500 dark:text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
</small>
</div>
</div>
<!-- Mobile item action button-->
<div v-if="mobileHandler && !isMultiSelectMode && $isMobile()" class="relative flex items-center justify-center py-0.5 px-2">
<div
v-if="mobileHandler && !isMultiSelectMode && $isMobile()"
class="relative flex items-center justify-center py-0.5 px-2"
>
<div @mouseup.stop="$openInDetailPanel(entry)" class="hidden p-2.5 sm:block">
<eye-icon size="18" class="vue-feather inline-block opacity-30" />
</div>
@@ -163,14 +189,20 @@ export default {
)
},
folderItems() {
return this.entry.data.attributes.deleted_at ? this.entry.data.attributes.trashed_items : this.entry.data.attributes.items
return this.entry.data.attributes.deleted_at
? this.entry.data.attributes.trashed_items
: this.entry.data.attributes.items
},
canShowAuthor() {
return this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders']) && !this.isFolder && this.user.data.id !== this.entry.data.relationships.owner.data.id
return (
this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders']) &&
!this.isFolder &&
this.user.data.id !== this.entry.data.relationships.owner.data.id
)
},
canShowLinkIcon() {
return this.entry.data.relationships.shared && !this.$isThisRoute(this.$route, ['SharedSingleFile'])
},
canShowLinkIcon() {
return this.entry.data.relationships.shared && !this.$isThisRoute(this.$route, ['SharedSingleFile'])
},
canDrag() {
return !this.isDeleted && this.$checkPermission(['master', 'editor'])
},

9
resources/js/components/FilesView/ItemList.vue
View File

@@ -39,7 +39,8 @@
<div class="pl-2">
<!--Item Title-->
<b
class="mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-sm hover:underline"
class="mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-sm"
:class="{'hover:underline': canEditName}"
style="max-width: 240px"
ref="name"
@input="renameItem"
@@ -58,10 +59,12 @@
</div>
<!--File & Image sub line-->
<small v-if="!isFolder" class="block text-xs text-gray-500"> {{ entry.data.attributes.filesize }}, {{ timeStamp }} </small>
<small v-if="!isFolder" class="block text-xs text-gray-500 dark:text-gray-500">
{{ entry.data.attributes.filesize }}, {{ timeStamp }}
</small>
<!--Folder sub line-->
<small v-if="isFolder" class="block text-xs text-gray-500">
<small v-if="isFolder" class="block text-xs text-gray-500 dark:text-gray-500">
{{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }}
</small>
</div>

12
resources/js/components/FilesView/OptionGroup.vue
View File

@@ -17,15 +17,3 @@ export default {
]
}
</script>
<style scoped lang="scss">
.option-group {
&:first-child {
padding-top: 0 !important;
}
&:last-child {
padding-bottom: 0 !important;
}
}
</style>

2
resources/js/components/FilesView/OptionUpload.vue
View File

@@ -1,6 +1,6 @@
<template>
<label
class="flex items-center py-4 px-5 lg:py-3 2xl:py-4 group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground"
class="flex items-center py-4 px-5 group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground"
>
<div class="mr-4">
<upload-cloud-icon v-if="type === 'file'" size="17" class="vue-feather group-hover-text-theme" />

8
resources/js/components/FilesView/ToolbarButton.vue
View File

@@ -10,7 +10,7 @@
<printer-icon v-if="source === 'print'" size="19" class="vue-feather group-hover-text-theme" />
<trash-2-icon v-if="source === 'trash'" size="19" class="vue-feather group-hover-text-theme" />
<list-icon v-if="source === 'th-list'" size="19" class="vue-feather group-hover-text-theme" />
<info-icon v-if="source === 'info'" size="19" class="vue-feather group-hover-text-theme" />
<info-icon v-if="source === 'info'" size="19" class="vue-feather group-hover-text-theme" :class="{'text-theme': isVisibleSidebar}" />
<grid-icon v-if="source === 'th'" size="19" class="vue-feather group-hover-text-theme" />
<link-icon v-if="source === 'share'" size="19" class="vue-feather group-hover-text-theme" />
<x-icon v-if="source === 'close'" size="19" class="vue-feather group-hover-text-theme" />
@@ -42,10 +42,16 @@ import {
LinkIcon,
XIcon,
} from 'vue-feather-icons'
import {mapGetters} from "vuex";
export default {
name: 'ToolbarButton',
props: ['source', 'action'],
computed: {
...mapGetters([
'isVisibleSidebar'
])
},
components: {
SearchIcon,
CloudPlusIcon,

2
resources/js/components/Others/Forms/ImageInput.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex items-center justify-center rounded-lg relative h-[175px] bg-light-background" :class="{ 'is-error': error }">
<div class="flex items-center justify-center rounded-lg relative h-[175px] dark:bg-2x-dark-foreground bg-light-background" :class="{ 'is-error': error }">
<!--Reset Image-->
<div

7
resources/js/components/Others/Forms/SelectInput.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="select">
<!--Area-->
<div class="input-area rounded-lg bg-light-background" :class="{ 'is-active': isOpen, 'is-error': isError }" @click="openMenu">
<div class="input-area rounded-lg dark:bg-2x-dark-foreground bg-light-background" :class="{ 'is-active': isOpen, 'is-error': isError }" @click="openMenu">
<!--If is selected-->
<div class="selected flex w-full items-center" v-if="selected">
<div class="option-icon" v-if="selected.icon">
@@ -226,11 +226,6 @@ export default {
}
}
.input-area {
background: $dark_mode_foreground;
border-color: $dark_mode_foreground;
}
.popup-wrapper {
.input-area {
background: lighten($dark_mode_foreground, 3%);

2
resources/js/components/Sidebar/ContentGroup.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="ml-6 mb-6" :class="{ 'is-collapsed': !isVisible, collapsable: canCollapse }">
<div @click="hideGroup" class="mb-2 flex items-center justify-between">
<small class="text-xs font-bold text-gray-400 dark:text-gray-700">
<small class="text-xs font-bold text-gray-400 dark:text-gray-600">
{{ title }}
</small>
<chevron-up-icon v-if="canCollapseWrapper" size="12" class="vue-feather mr-5 transform cursor-pointer text-gray-300" :class="{ 'rotate-180': !isVisible }" />

2
resources/js/views/SharedSingleFile.vue
View File

@@ -48,7 +48,7 @@
<div class="flex items-center justify-center">
<!--File & Image sub line-->
<small class="block text-xs text-gray-500">
<small class="block text-xs text-gray-500 dark:text-gray-500">
{{ file.data.attributes.filesize }}<span class="text-xs text-gray-500 lg:inline-block">, {{ file.data.attributes.created_at }}</span>
</small>
</div>

2
tailwind.config.js vendored
View File

@@ -37,7 +37,7 @@ module.exports = {
},
backgroundColor: theme => ({
'dark-background': '#151515',
'dark-foreground': '#161718',
'dark-foreground': '#171819',
'2x-dark-foreground': '#191b1e',
'4x-dark-foreground': '#1e2124',
'light-background': '#f4f5f6',