nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-19 08:32:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

upload request prototype UI

Browse Source
This commit is contained in:
Čarodej
2022-02-16 16:57:57 +01:00
parent 3fafc811fe
commit 394a7b6baf
197 changed files with 6927 additions and 2738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
resources/js/components/FilesView/NavigationBar.vue
View File

@@ -1,8 +1,11 @@
<template>
<div @click="goBack" class="flex items-center text-left select-none relative">
<!--Menu icon-->
<div v-if="!isVisibleNavigationBars" @click="toggleNavigationBars" class="-mt-0.5 mr-2 p-2 cursor-pointer lg:block hidden">
<div @click="goBack" class="relative flex select-none items-center text-left">
<!--Menu icon-->
<div
v-if="!isVisibleNavigationBars"
@click="toggleNavigationBars"
class="-mt-0.5 mr-2 hidden cursor-pointer p-2 lg:block"
>
<menu-icon size="17" />
</div>
@@ -12,13 +15,13 @@
'-translate-x-3 opacity-0': !isLoadedFolder || !isNotHomepage,
'translate-x-0 opacity-100': isLoadedFolder && isNotHomepage,
}"
class="lg:-mt-0.5 mr-2 -ml-1 cursor-pointer align-middle transition-all duration-200"
class="mr-2 -ml-1 cursor-pointer align-middle transition-all duration-200 lg:-mt-0.5"
/>
<!--Folder Title-->
<b
:class="{ '-translate-x-4': !isLoadedFolder || !isNotHomepage }"
class="inline-block transform overflow-hidden text-ellipsis whitespace-nowrap align-middle text-sm font-bold transition-all duration-200 max-w-[200px]"
class="inline-block max-w-[200px] transform overflow-hidden text-ellipsis whitespace-nowrap align-middle text-sm font-bold transition-all duration-200"
>
{{ $getCurrentLocationName() }}
</b>
@@ -29,60 +32,56 @@
'-translate-x-4 opacity-0': !currentFolder || !isNotHomepage,
'translate-x-0 opacity-100': currentFolder && isNotHomepage,
}"
class="relative ml-3 transform rounded-md bg-light-background py-0.5 px-1.5 transition-all duration-200 dark:bg-dark-foreground cursor-pointer"
id="folder-actions"
class="relative ml-3 transform cursor-pointer rounded-md bg-light-background py-0.5 px-1.5 transition-all duration-200 dark:bg-dark-foreground"
id="folder-actions"
>
<more-horizontal-icon size="14" />
</div>
</div>
</template>
<script>
import {mapGetters} from "vuex";
import {events} from "../../bus";
import { mapGetters } from 'vuex'
import { events } from '../../bus'
import { MenuIcon, ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
export default {
name: 'NavigationBar',
components: {
MoreHorizontalIcon,
ChevronLeftIcon,
MenuIcon,
},
computed: {
...mapGetters([
'isVisibleNavigationBars',
'currentFolder',
'sharedDetail',
]),
isNotHomepage() {
if (this.$isThisRoute(this.$route, ['Public'])) {
return this.sharedDetail && this.sharedDetail.data.attributes.item_id !== this.$route.params.id
}
components: {
MoreHorizontalIcon,
ChevronLeftIcon,
MenuIcon,
},
computed: {
...mapGetters(['isVisibleNavigationBars', 'currentFolder', 'sharedDetail']),
isNotHomepage() {
if (this.$isThisRoute(this.$route, ['Public'])) {
return this.sharedDetail && this.sharedDetail.data.attributes.item_id !== this.$route.params.id
}
return this.$route.params.id
},
isLoadedFolder() {
return this.$route.params.id
},
},
methods: {
goBack() {
if (this.isNotHomepage) this.$router.back()
},
showItemActions() {
if (window.innerWidth > 1024) {
events.$emit('context-menu:current-folder', this.currentFolder)
} else {
this.$store.commit('CLIPBOARD_CLEAR')
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.currentFolder)
return this.$route.params.id
},
isLoadedFolder() {
return this.$route.params.id
},
},
methods: {
goBack() {
if (this.isNotHomepage) this.$router.back()
},
showItemActions() {
if (window.innerWidth > 1024) {
events.$emit('context-menu:current-folder', this.currentFolder)
} else {
this.$store.commit('CLIPBOARD_CLEAR')
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.currentFolder)
this.$showMobileMenu('file-menu')
events.$emit('mobile-context-menu:show', this.currentFolder)
}
},
toggleNavigationBars() {
this.$store.dispatch('toggleNavigationBars')
},
}
this.$showMobileMenu('file-menu')
events.$emit('mobile-context-menu:show', this.currentFolder)
}
},
toggleNavigationBars() {
this.$store.dispatch('toggleNavigationBars')
},
},
}
</script>