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

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
resources/js/components/FilesView/InfoSidebar.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <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--> <!--Is empty clipboard-->
<div v-if="isEmpty" class="flex h-full items-center justify-center"> <div v-if="isEmpty" class="flex h-full items-center justify-center">
<div class="text-center"> <div class="text-center">
resources/js/components/FilesView/ItemGrid.vue
+48 -16
View File
@@ -2,7 +2,7 @@
<div <div
:class="{ :class="{
'bg-light-background dark:bg-dark-foreground': isClicked, 'bg-light-background dark:bg-dark-foreground': isClicked,
'dark:hover:bg-dark-foreground lg:hover:bg-light-background': canHover '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" 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" :draggable="canDrag"
@@ -15,13 +15,24 @@
<!--Item thumbnail--> <!--Item thumbnail-->
<div class="relative mx-auto"> <div class="relative mx-auto">
<!--Emoji Icon--> <!--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--> <!--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--> <!--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--> <!--Member thumbnail for team folders-->
<MemberAvatar <MemberAvatar
v-if="user && canShowAuthor" 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" 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> </div>
<!--Image thumbnail--> <!--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--> <!--Member thumbnail for team folders-->
<MemberAvatar <MemberAvatar
v-if="user && canShowAuthor" v-if="user && canShowAuthor"
@@ -45,7 +62,12 @@
class="absolute -right-3 -bottom-2.5 z-10 scale-75 transform lg:scale-100" 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>
</div> </div>
@@ -53,8 +75,8 @@
<div class="text-center"> <div class="text-center">
<!--Item Title--> <!--Item Title-->
<b <b
class="tracking-tight inline-block w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-3 md:px-6" class="inline-block w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-3 tracking-tight md:px-6"
:class="{'hover:underline': canEditName}" :class="{ 'hover:underline': canEditName }"
ref="name" ref="name"
@input="renameItem" @input="renameItem"
@keydown.delete.stop @keydown.delete.stop
@@ -72,20 +94,24 @@
</div> </div>
<!--File & Image sub line--> <!--File & Image 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">
{{ entry.data.attributes.filesize }}<span class="hidden text-xs text-gray-500 lg:inline-block">, {{ timeStamp }}</span> {{ entry.data.attributes.filesize }}
<span class="hidden text-xs text-gray-500 dark:text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
</small> </small>
<!--Folder sub line--> <!--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) {{ 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> </small>
</div> </div>
</div> </div>
<!-- Mobile item action button--> <!-- 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"> <div @mouseup.stop="$openInDetailPanel(entry)" class="hidden p-2.5 sm:block">
<eye-icon size="18" class="vue-feather inline-block opacity-30" /> <eye-icon size="18" class="vue-feather inline-block opacity-30" />
</div> </div>
@@ -163,10 +189,16 @@ export default {
) )
}, },
folderItems() { 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() { 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() { canShowLinkIcon() {
return this.entry.data.relationships.shared && !this.$isThisRoute(this.$route, ['SharedSingleFile']) return this.entry.data.relationships.shared && !this.$isThisRoute(this.$route, ['SharedSingleFile'])
resources/js/components/FilesView/ItemList.vue
+6 -3
View File
@@ -39,7 +39,8 @@
<div class="pl-2"> <div class="pl-2">
<!--Item Title--> <!--Item Title-->
<b <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" style="max-width: 240px"
ref="name" ref="name"
@input="renameItem" @input="renameItem"
@@ -58,10 +59,12 @@
</div> </div>
<!--File & Image sub line--> <!--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--> <!--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 }} {{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }}
</small> </small>
</div> </div>
resources/js/components/FilesView/OptionGroup.vue
-12
View File
@@ -17,15 +17,3 @@ export default {
] ]
} }
</script> </script>
<style scoped lang="scss">
.option-group {
&:first-child {
padding-top: 0 !important;
}
&:last-child {
padding-bottom: 0 !important;
}
}
</style>
resources/js/components/FilesView/OptionUpload.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<label <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"> <div class="mr-4">
<upload-cloud-icon v-if="type === 'file'" size="17" class="vue-feather group-hover-text-theme" /> <upload-cloud-icon v-if="type === 'file'" size="17" class="vue-feather group-hover-text-theme" />
resources/js/components/FilesView/ToolbarButton.vue
+7 -1
View File
@@ -10,7 +10,7 @@
<printer-icon v-if="source === 'print'" size="19" class="vue-feather group-hover-text-theme" /> <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" /> <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" /> <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" /> <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" /> <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" /> <x-icon v-if="source === 'close'" size="19" class="vue-feather group-hover-text-theme" />
@@ -42,10 +42,16 @@ import {
LinkIcon, LinkIcon,
XIcon, XIcon,
} from 'vue-feather-icons' } from 'vue-feather-icons'
import {mapGetters} from "vuex";
export default { export default {
name: 'ToolbarButton', name: 'ToolbarButton',
props: ['source', 'action'], props: ['source', 'action'],
computed: {
...mapGetters([
'isVisibleSidebar'
])
},
components: { components: {
SearchIcon, SearchIcon,
CloudPlusIcon, CloudPlusIcon,
resources/js/components/Others/Forms/ImageInput.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <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--> <!--Reset Image-->
<div <div
resources/js/components/Others/Forms/SelectInput.vue
+1 -6
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="select"> <div class="select">
<!--Area--> <!--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--> <!--If is selected-->
<div class="selected flex w-full items-center" v-if="selected"> <div class="selected flex w-full items-center" v-if="selected">
<div class="option-icon" v-if="selected.icon"> <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 { .popup-wrapper {
.input-area { .input-area {
background: lighten($dark_mode_foreground, 3%); background: lighten($dark_mode_foreground, 3%);
resources/js/components/Sidebar/ContentGroup.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="ml-6 mb-6" :class="{ 'is-collapsed': !isVisible, collapsable: canCollapse }"> <div class="ml-6 mb-6" :class="{ 'is-collapsed': !isVisible, collapsable: canCollapse }">
<div @click="hideGroup" class="mb-2 flex items-center justify-between"> <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 }} {{ title }}
</small> </small>
<chevron-up-icon v-if="canCollapseWrapper" size="12" class="vue-feather mr-5 transform cursor-pointer text-gray-300" :class="{ 'rotate-180': !isVisible }" /> <chevron-up-icon v-if="canCollapseWrapper" size="12" class="vue-feather mr-5 transform cursor-pointer text-gray-300" :class="{ 'rotate-180': !isVisible }" />
resources/js/views/SharedSingleFile.vue
+1 -1
View File
@@ -48,7 +48,7 @@
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<!--File & Image sub line--> <!--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> {{ file.data.attributes.filesize }}<span class="text-xs text-gray-500 lg:inline-block">, {{ file.data.attributes.created_at }}</span>
</small> </small>
</div> </div>
tailwind.config.js
Vendored
+1 -1
View File
@@ -37,7 +37,7 @@ module.exports = {
}, },
backgroundColor: theme => ({ backgroundColor: theme => ({
'dark-background': '#151515', 'dark-background': '#151515',
'dark-foreground': '#161718', 'dark-foreground': '#171819',
'2x-dark-foreground': '#191b1e', '2x-dark-foreground': '#191b1e',
'4x-dark-foreground': '#1e2124', '4x-dark-foreground': '#1e2124',
'light-background': '#f4f5f6', 'light-background': '#f4f5f6',