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 Fixes 4

Browse Source
This commit is contained in:
Čarodej
2022-02-15 18:30:58 +01:00
parent 5ee77da25f
commit 3fafc811fe
3 changed files with 56 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,7 +12,7 @@
<CheckBox v-if="isMultiSelectMode" v-model="isClicked" :is-clicked="isClicked" class="mr-5" />
<!--Item thumbnail-->
<div class="relative w-16">
<div class="relative w-16 shrink-0">
<!--Member thumbnail for team folders-->
<MemberAvatar v-if="user && canShowAuthor" :size="28" :is-border="true" :member="entry.data.relationships.owner" class="absolute right-1.5 -bottom-2 z-10" />

34
resources/js/views/FileView/Components/NavigationSharePanel.vue
View File

@@ -104,40 +104,6 @@ export default {
},
})
},
dragLeave() {
this.area = false
},
dragEnter() {
if (this.draggedItem && this.draggedItem.type !== 'folder') return
if (this.clipboard.length > 0 && this.clipboard.find((item) => item.type !== 'folder')) return
this.area = true
},
dragFinish() {
this.area = false
events.$emit('drop')
// Check if dragged item is folder
if (this.draggedItem && this.draggedItem.type !== 'folder') return
// Check if folder exist in favourites
if (this.favourites.find((folder) => folder.id === this.draggedItem.id)) return
// Prevent to move folders to self
if (this.clipboard.length > 0 && this.clipboard.find((item) => item.type !== 'folder')) return
//Add to favourites non selected folder
if (!this.clipboard.includes(this.draggedItem)) {
this.$store.dispatch('addToFavourites', this.draggedItem)
}
//Add to favourites selected folders
if (this.clipboard.includes(this.draggedItem)) {
this.$store.dispatch('addToFavourites', null)
}
},
},
created() {
// Listen for dragstart folder items

71
resources/js/views/FileView/Components/PanelNavigationFiles.vue
View File

@@ -1,15 +1,34 @@
<template>
<ContentSidebar v-if="isVisibleNavigationBars" class="relative">
<!--Full screen button-->
<div @click="$store.dispatch('toggleNavigationBars')" class="absolute top-2.5 right-0 inline-block cursor-pointer p-3 opacity-0 transition-all duration-200 hover:opacity-70">
<div
@click="$store.dispatch('toggleNavigationBars')"
class="absolute top-[11px] right-1 inline-block cursor-pointer p-3 opacity-20 transition-all duration-200 hover:opacity-70"
>
<chevrons-left-icon size="18" />
</div>
<!--Locations-->
<ContentGroup v-for="(menu, i) in nav" :key="i" :title="menu.groupTitle" :slug="menu.groupTitle" :can-collapse="menu.groupCollapsable">
<router-link v-for="(item, i) in menu.groupLinks" :key="i" @click.native="resetData" :to="{ name: item.route }" class="flex items-center py-2.5">
<ContentGroup
v-for="(menu, i) in nav"
:key="i"
:title="menu.groupTitle"
:slug="menu.groupTitle"
:can-collapse="menu.groupCollapsable"
>
<router-link
v-for="(item, i) in menu.groupLinks"
:key="i"
@click.native="resetData"
:to="{ name: item.route }"
class="flex items-center py-2.5"
>
<home-icon v-if="item.icon === 'home'" size="17" class="vue-feather icon-active mr-2.5" />
<upload-cloud-icon v-if="item.icon === 'upload-cloud'" size="17" class="vue-feather icon-active mr-2.5" />
<upload-cloud-icon
v-if="item.icon === 'upload-cloud'"
size="17"
class="vue-feather icon-active mr-2.5"
/>
<link-icon v-if="item.icon === 'link'" size="17" class="vue-feather icon-active mr-2.5" />
<trash2-icon v-if="item.icon === 'trash'" size="17" class="vue-feather icon-active mr-2.5" />
<users-icon size="17" v-if="item.icon === 'users'" class="vue-feather icon-active mr-2.5" />
@@ -35,8 +54,8 @@
@dragover.prevent="dragEnter"
@dragleave="dragLeave"
@drop="dragFinish($event)"
:class="{ 'border-theme': area }"
class="border-2 border-dashed border-transparent"
:class="{'border-theme': area}"
class="pl-5 -ml-5 rounded-lg border-2 border-dashed border-transparent"
>
<!--Empty message-->
<small v-if="favourites.length === 0" class="text-xs text-gray-500 dark:text-gray-500" :key="0">
@@ -44,7 +63,12 @@
</small>
<!--Folder item-->
<div @click="goToFolder(folder)" v-for="folder in favourites" :key="folder.data.id" class="group flex cursor-pointer items-center justify-between py-2.5">
<div
@click="goToFolder(folder)"
v-for="folder in favourites"
:key="folder.data.id"
class="group flex cursor-pointer items-center justify-between py-2.5"
>
<div class="flex items-center">
<folder-icon
size="17"
@@ -62,7 +86,12 @@
{{ folder.data.attributes.name }}
</span>
</div>
<x-icon @click.stop="$removeFavourite(folder)" size="12" class="mr-5 opacity-0 group-hover:opacity-100" />
<div @click.stop="$removeFavourite(folder)" class="p-2 -m-2">
<x-icon
size="12"
class="mr-5 opacity-0 group-hover:opacity-100"
/>
</div>
</div>
</div>
</ContentGroup>
@@ -70,7 +99,17 @@
</template>
<script>
import { ChevronsLeftIcon, FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon } from 'vue-feather-icons'
import {
ChevronsLeftIcon,
FolderIcon,
HomeIcon,
LinkIcon,
Trash2Icon,
UploadCloudIcon,
UserCheckIcon,
UsersIcon,
XIcon,
} from 'vue-feather-icons'
import TreeMenuNavigator from '../../../components/Others/TreeMenuNavigator'
import ContentSidebar from '../../../components/Sidebar/ContentSidebar'
import ContentGroup from '../../../components/Sidebar/ContentGroup'
@@ -175,9 +214,9 @@ export default {
this.area = false
},
dragEnter() {
if (this.draggedItem && this.draggedItem.type !== 'folder') return
if (this.draggedItem && this.draggedItem.data.type !== 'folder') return
if (this.clipboard.length > 0 && this.clipboard.find((item) => item.type !== 'folder')) return
if (this.clipboard.length > 0 && this.clipboard.find((item) => item.data.type !== 'folder')) return
this.area = true
},
@@ -187,20 +226,20 @@ export default {
events.$emit('drop')
// Check if dragged item is folder
if (this.draggedItem && this.draggedItem.type !== 'folder') return
if (this.draggedItem && this.draggedItem.data.type !== 'folder') return
// Check if folder exist in favourites
if (this.favourites.find((folder) => folder.id === this.draggedItem.id)) return
if (this.favourites.find((folder) => folder.data.id === this.draggedItem.data.id)) return
// Prevent to move folders to self
if (this.clipboard.length > 0 && this.clipboard.find((item) => item.type !== 'folder')) return
if (this.clipboard.length > 0 && this.clipboard.find((item) => item.data.type !== 'folder')) return
//Add to favourites non selected folder
// Add to favourites non selected folder
if (!this.clipboard.includes(this.draggedItem)) {
this.$store.dispatch('addToFavourites', this.draggedItem)
}
//Add to favourites selected folders
// Add to favourites selected folders
if (this.clipboard.includes(this.draggedItem)) {
this.$store.dispatch('addToFavourites', null)
}