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

Shared pages refactoring part 2

Browse Source
This commit is contained in:
Čarodej
2022-02-08 12:58:47 +01:00
parent f04c057490
commit 7b0f9a19de
15 changed files with 273 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilePreview/FilePreviewMedia.vue
+8 -6
View File
@@ -3,11 +3,11 @@
<!--Arrow navigation-->
<div v-if="!$isMobile() && files.length > 1" class="">
<div @click.prevent="prev" class="fixed top-1/2 left-0 p-3 cursor-pointer">
<div @click.prevent="prev" class="fixed top-1/2 left-0 p-3 cursor-pointer z-20">
<chevron-left-icon size="20" />
</div>
<div @click.prevent="next" class="fixed top-1/2 right-0 p-3 cursor-pointer">
<div @click.prevent="next" class="fixed top-1/2 right-0 p-3 cursor-pointer z-20">
<chevron-right-icon size="20" />
</div>
</div>
@@ -148,11 +148,13 @@ export default {
})
// Scroll to the selected item
this.$nextTick(() => {
let element = document.getElementById(`group-${this.files[this.currentIndex].data.id}`)
if (this.$isMobile()) {
this.$nextTick(() => {
let element = document.getElementById(`group-${this.files[this.currentIndex].data.id}`)
this.$refs.scrollBox.scrollLeft = element.getBoundingClientRect().left
})
this.$refs.scrollBox.scrollLeft = element.getBoundingClientRect().left
})
}
},
next() {
if (!this.files.length > 1) return
resources/js/components/FilePreview/FilePreviewToolbar.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div v-if="currentFile" class="items-center px-3.5 py-4 lg:grid lg:grid-cols-3 lg:py-3">
<div v-if="currentFile" class="items-center px-3.5 py-4 lg:grid lg:grid-cols-3 lg:py-3 select-none">
<div class="flex items-center justify-between lg:w-auto lg:justify-start">
<!--Close icon-->
<div @click="closeFullPreview" class="order-last -m-3 cursor-pointer p-3 lg:order-none">
resources/js/components/FilesView/DesktopSharepageToolbar.vue
+133
View File
@@ -0,0 +1,133 @@
<template>
<div class="hidden lg:block">
<div class="flex items-center justify-between py-3">
<NavigationBar />
<div class="flex items-center">
<!--Create button-->
<PopoverWrapper v-if="canEdit">
<ToolbarButton
@click.stop.native="showCreateMenu"
source="cloud-plus"
:action="$t('actions.create')"
/>
<PopoverItem name="desktop-create" side="left">
<OptionGroup :title="$t('Upload')">
<OptionUpload :title="$t('actions.upload')" type="file" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup :title="$t('Create')">
<Option
@click.stop.native="$createFolder"
:title="$t('actions.create_folder')"
icon="folder-plus"
/>
</OptionGroup>
</PopoverItem>
</PopoverWrapper>
<!--Search bar-->
<SearchBar class="ml-5 hidden lg:block xl:ml-8" />
<!--File Controls-->
<div class="ml-5 flex items-center xl:ml-8">
<!--Action buttons-->
<div v-if="canEdit && !$isMobile()" class="flex items-center">
<ToolbarButton
@click.native="$moveFileOrFolder(clipboard[0])"
:class="{
'is-inactive': ! canManipulate,
}"
source="move"
:action="$t('actions.move')"
/>
<ToolbarButton
@click.native="$deleteFileOrFolder(clipboard[0])"
:class="{
'is-inactive': ! canManipulate,
}"
source="trash"
:action="$t('actions.delete')"
/>
</div>
</div>
<!--View Controls-->
<div class="ml-5 flex items-center xl:ml-8">
<PopoverWrapper>
<ToolbarButton
@click.stop.native="showSortingMenu"
source="preview-sorting"
:action="$t('actions.sorting_view')"
/>
<PopoverItem name="desktop-sorting" side="left">
<FileSortingOptions />
</PopoverItem>
</PopoverWrapper>
<ToolbarButton
@click.native="$store.dispatch('fileInfoToggle')"
:action="$t('actions.info_panel')"
source="info"
/>
</div>
</div>
</div>
<UploadProgress />
</div>
</template>
<script>
import PopoverWrapper from '../Desktop/PopoverWrapper'
import FileSortingOptions from './FileSortingOptions'
import PopoverItem from '../Desktop/PopoverItem'
import UploadProgress from './UploadProgress'
import NavigationBar from './NavigationBar'
import ToolbarButton from './ToolbarButton'
import OptionUpload from './OptionUpload'
import OptionGroup from './OptionGroup'
import SearchBar from './SearchBar'
import { events } from '../../bus'
import { mapGetters } from 'vuex'
import Option from './Option'
export default {
name: 'DesktopSharepageToolbar',
components: {
FileSortingOptions,
UploadProgress,
PopoverWrapper,
NavigationBar,
ToolbarButton,
OptionUpload,
OptionGroup,
PopoverItem,
SearchBar,
Option,
},
computed: {
...mapGetters([
'isVisibleNavigationBars',
'currentTeamFolder',
'currentFolder',
'sharedDetail',
'clipboard',
]),
canEdit() {
return this.sharedDetail && this.sharedDetail.data.attributes.permission === 'editor'
},
canManipulate() {
return this.clipboard[0]
}
},
methods: {
showCreateMenu() {
events.$emit('popover:open', 'desktop-create')
},
showSortingMenu() {
events.$emit('popover:open', 'desktop-sorting')
},
},
}
</script>
resources/js/components/FilesView/DesktopToolbar.vue
-3
View File
@@ -236,9 +236,6 @@ export default {
showSortingMenu() {
events.$emit('popover:open', 'desktop-sorting')
},
folderActions() {
events.$emit('context-menu:current-folder', this.currentFolder)
},
},
}
</script>
resources/js/components/FilesView/FileActionsMobile.vue
+2 -4
View File
@@ -1,12 +1,10 @@
<template>
<div class="sticky top-14 z-20 block overflow-x-auto whitespace-nowrap bg-white px-4 pb-3 dark:bg-dark-background lg:hidden">
<!--Show Buttons-->
<div v-if="!isMultiSelectMode" class="mobile-actions">
<slot></slot>
</div>
<slot v-if="!isMultiSelectMode" />
<!-- Multi select mode -->
<div v-if="isMultiSelectMode" class="mobile-actions">
<div v-if="isMultiSelectMode">
<MobileActionButton @click.native="selectAll" icon="check-square">
{{ $t('mobile_selecting.select_all') }}
</MobileActionButton>
resources/js/components/FilesView/InfoSidebar.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="hidden h-screen 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] w-[320px] 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">
resources/js/components/FilesView/NavigationBar.vue
+6 -6
View File
@@ -9,15 +9,15 @@
<chevron-left-icon
size="17"
:class="{
'-translate-x-3 opacity-0': !isLoadedFolder,
'translate-x-0 opacity-100': isLoadedFolder,
'-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"
/>
<!--Folder Title-->
<b
:class="{ '-translate-x-4': !isLoadedFolder }"
: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]"
>
{{ $getCurrentLocationName() }}
@@ -26,8 +26,8 @@
<div
@click.stop="showItemActions"
:class="{
'-translate-x-4 opacity-0': !currentFolder,
'translate-x-0 opacity-100': currentFolder,
'-translate-x-4 opacity-0': !currentFolder || !isNotHomepage,
'translate-x-0 opacity-100': currentFolder && isNotHomepage,
}"
class="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"
@@ -56,7 +56,7 @@ export default {
]),
isNotHomepage() {
if (this.$isThisRoute(this.$route, ['Public'])) {
return this.sharedDetail && this.sharedDetail.data.attributes.item_id === this.$route.params.id
return this.sharedDetail && this.sharedDetail.data.attributes.item_id !== this.$route.params.id
}
return this.$route.params.id
resources/js/components/Spotlight/Spotlight.vue
+37 -27
View File
@@ -44,7 +44,7 @@
</div>
<!--Show tips-->
<div v-if="isEmptyQuery && !activeFilter" class="relative z-50 px-4 pb-4">
<div v-if="isEmptyQuery && !activeFilter && ! $isThisRoute($route, ['Public'])" class="relative z-50 px-4 pb-4">
<CategoryName>
{{ $t('Suggested Filters') }}
</CategoryName>
@@ -236,7 +236,7 @@ export default {
XIcon,
},
computed: {
...mapGetters(['config', 'user']),
...mapGetters(['config', 'user', 'sharedDetail']),
actionList() {
let adminLocations = [
{
@@ -381,6 +381,20 @@ export default {
value: 'Billing',
},
},
{
title: this.$t('Empty Your Trash'),
action: {
type: 'function',
value: 'empty-trash',
},
},
{
title: this.$t('Log Out'),
action: {
type: 'function',
value: 'log-out',
},
},
]
let createList = [
@@ -415,20 +429,6 @@ export default {
value: 'full-screen-mode',
},
},
{
title: this.$t('Empty Your Trash'),
action: {
type: 'function',
value: 'empty-trash',
},
},
{
title: this.$t('Log Out'),
action: {
type: 'function',
value: 'log-out',
},
},
]
// Available only for apple users
@@ -442,6 +442,12 @@ export default {
})
}
// Return commands for public page
if (this.$isThisRoute(this.$route, ['Public'])) {
return [].concat.apply([], [functionList])
}
// Return commands for logged admin
if (this.user.data.attributes.role === 'admin') {
// Available only for fixed subscription
if (this.config.subscriptionType === 'fixed') {
@@ -468,7 +474,8 @@ export default {
return [].concat.apply([], [functionList, createList, userSettings, fileLocations, adminLocations, adminActions])
}
if (this.user.data.attributes.role === 'user') {
// Return commands for logged user
if (this.user.data.attributes.role === 'user') {
return [].concat.apply([], [functionList, createList, userSettings, fileLocations])
}
},
@@ -616,7 +623,16 @@ export default {
openItem(file) {
// Show folder
if (file.data.type === 'folder') {
if (file.data.attributes.isTeamFolder) {
if (this.$isThisRoute(this.$route, ['Public'])) {
this.$router.push({
name: 'Public',
params: {
token: this.sharedDetail.data.attributes.token,
id: file.data.id,
},
})
} else if (file.data.attributes.isTeamFolder) {
if (file.data.relationships.owner.data.id === this.user.data.id) {
this.$router.push({
name: 'TeamFolders',
@@ -654,15 +670,9 @@ export default {
this.isLoading = true
// Get route
let route = undefined
if (this.$store.getters.sharedDetail) {
let permission = this.$store.getters.sharedDetail.data.attributes.protected ? 'private' : 'public'
route = `/api/browse/search/${permission}/${this.$router.currentRoute.params.token}`
} else {
route = '/api/browse/search'
}
let route = this.$store.getters.sharedDetail
? `/api/browse/search/${this.$router.currentRoute.params.token}`
: '/api/browse/search'
axios
.get(`${route}?filter=${this.activeFilter}`, {