nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 16:22: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

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

@@ -1,53 +1,84 @@
<template>
<ContentSidebar v-if="(navigationTree && navigationTree.length >= 1) && isVisibleNavigationBars" class="relative lg:!grid">
<!--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">
<ContentSidebar
v-if="navigationTree && navigationTree.length >= 1 && isVisibleNavigationBars"
class="relative lg:!grid"
>
<!--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"
>
<chevrons-left-icon size="18" />
</div>
<div class="mb-auto">
<!--Locations-->
<ContentGroup :title="$t('Base')">
<b @click="goHome" class="flex items-center py-2.5 cursor-pointer" :class="{'router-link-active': $route.params.id === sharedDetail.data.attributes.item_id}">
<home-icon size="17" class="vue-feather icon-active mr-2.5" />
<small class="text-active text-xs font-bold">
{{ $t('Home') }}
</small>
</b>
</ContentGroup>
<div class="mb-auto">
<!--Locations-->
<ContentGroup :title="$t('Base')">
<b
@click="goHome"
class="flex cursor-pointer items-center py-2.5"
:class="{ 'router-link-active': $route.params.id === sharedDetail.data.attributes.item_id }"
>
<home-icon size="17" class="vue-feather icon-active mr-2.5" />
<small class="text-active text-xs font-bold">
{{ $t('Home') }}
</small>
</b>
</ContentGroup>
<!--Navigator-->
<ContentGroup :title="$t('sidebar.navigator_title')" can-collapse="true">
<TreeMenuNavigator class="folder-tree" :depth="0" :nodes="folder" v-for="folder in navigationTree" :key="folder.id" />
</ContentGroup>
</div>
<!--Navigator-->
<ContentGroup :title="$t('sidebar.navigator_title')" can-collapse="true">
<TreeMenuNavigator
class="folder-tree"
:depth="0"
:nodes="folder"
v-for="folder in navigationTree"
:key="folder.id"
/>
</ContentGroup>
</div>
<ContentGroup class="mt-auto">
<router-link v-if="! config.isAuthenticated" :to="{name: 'SignIn'}" class="flex items-center cursor-pointer group py-2.5">
<ContentGroup class="mt-auto">
<router-link
v-if="!config.isAuthenticated"
:to="{ name: 'SignIn' }"
class="group flex cursor-pointer items-center py-2.5"
>
<div class="button-icon inline-block cursor-pointer rounded-xl pr-3">
<user-icon size="14" class="vue-feather group-hover-text-theme" />
</div>
<b class="text-xs group-hover-text-theme">
Sign In or Create Account
</b>
<b class="group-hover-text-theme text-xs"> Sign In or Create Account </b>
</router-link>
<div @click="$store.dispatch('toggleThemeMode')" :title="$t('dark_mode_toggle')" class="flex items-center cursor-pointer group py-2.5">
<div
@click="$store.dispatch('toggleThemeMode')"
:title="$t('dark_mode_toggle')"
class="group flex cursor-pointer items-center py-2.5"
>
<div class="button-icon inline-block cursor-pointer rounded-xl pr-3">
<sun-icon v-if="isDarkMode" size="14" class="vue-feather group-hover-text-theme" />
<moon-icon v-if="!isDarkMode" size="14" class="vue-feather group-hover-text-theme" />
</div>
<b class="text-xs group-hover-text-theme">
Set {{ isDarkMode ? 'Light' : 'Dark' }} Mode
</b>
<b class="group-hover-text-theme text-xs"> Set {{ isDarkMode ? 'Light' : 'Dark' }} Mode </b>
</div>
</ContentGroup>
</ContentGroup>
</ContentSidebar>
</template>
<script>
import { UserIcon, SunIcon, MoonIcon, ChevronsLeftIcon, FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon } from 'vue-feather-icons'
import {
UserIcon,
SunIcon,
MoonIcon,
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'
@@ -60,11 +91,11 @@ export default {
TreeMenuNavigator,
ContentSidebar,
ContentGroup,
UserIcon,
SunIcon,
MoonIcon,
UserIcon,
SunIcon,
MoonIcon,
UploadCloudIcon,
ChevronsLeftIcon,
ChevronsLeftIcon,
UserCheckIcon,
FolderIcon,
Trash2Icon,
@@ -74,7 +105,15 @@ export default {
XIcon,
},
computed: {
...mapGetters(['sharedDetail', 'navigation', 'clipboard', 'config', 'user', 'isVisibleNavigationBars', 'isDarkMode']),
...mapGetters([
'sharedDetail',
'navigation',
'clipboard',
'config',
'user',
'isVisibleNavigationBars',
'isDarkMode',
]),
favourites() {
return this.user.data.relationships.favourites.data.attributes.folders
},

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

@@ -54,8 +54,8 @@
@dragover.prevent="dragEnter"
@dragleave="dragLeave"
@drop="dragFinish($event)"
:class="{'border-theme': area}"
class="pl-5 -ml-5 rounded-lg border-2 border-dashed border-transparent"
:class="{ 'border-theme': area }"
class="-ml-5 rounded-lg border-2 border-dashed border-transparent pl-5"
>
<!--Empty message-->
<small v-if="favourites.length === 0" class="text-xs text-gray-500 dark:text-gray-500" :key="0">
@@ -86,12 +86,9 @@
{{ folder.data.attributes.name }}
</span>
</div>
<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 @click.stop="$removeFavourite(folder)" class="-m-2 p-2">
<x-icon size="12" class="mr-5 opacity-0 group-hover:opacity-100" />
</div>
</div>
</div>
</ContentGroup>

100
resources/js/views/FileView/Files.vue
View File

@@ -4,7 +4,11 @@
<OptionGroup v-if="item && isFolder">
<Option
@click.native="addToFavourites"
:title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
:title="
isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')
"
icon="favourites"
/>
</OptionGroup>
@@ -14,8 +18,17 @@
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item">
<Option @click.native="$shareFileOrFolder(item)" :title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$convertAsTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="users" />
<Option
@click.native="$shareFileOrFolder(item)"
:title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')"
icon="share"
/>
<Option
@click.native="$convertAsTeamFolder(item)"
v-if="isFolder"
:title="$t('Convert as Team Folder')"
icon="users"
/>
</OptionGroup>
<OptionGroup v-if="item">
@@ -25,12 +38,27 @@
<MobileCreateMenu>
<OptionGroup :title="$t('Upload')">
<OptionUpload :class="{ 'is-inactive': !hasCapacity }" :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
<OptionUpload
:class="{ 'is-inactive': !hasCapacity }"
:title="$t('actions.upload')"
type="file"
:is-hover-disabled="true"
/>
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup :title="$t('Create')">
<Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" :is-hover-disabled="true" />
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
<Option
@click.stop.native="$createTeamFolder"
:title="$t('Create Team Folder')"
icon="users"
:is-hover-disabled="true"
/>
<Option
@click.stop.native="createFolder"
:title="$t('actions.create_folder')"
icon="folder-plus"
:is-hover-disabled="true"
/>
</OptionGroup>
</MobileCreateMenu>
@@ -49,7 +77,12 @@
:class="{ 'is-inactive': clipboard.length < 1 }"
:action="$t('actions.delete')"
/>
<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
<ToolbarButton
@click.native="$downloadSelection(item)"
class="action-btn"
source="download"
:action="$t('actions.download')"
/>
</MobileMultiSelectToolbar>
<ContextMenu>
@@ -59,7 +92,11 @@
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
<Option
@click.native="$createFolder"
:title="$t('context_menu.create_folder')"
icon="create-folder"
/>
</OptionGroup>
</template>
@@ -67,26 +104,51 @@
<OptionGroup v-if="isFolder">
<Option
@click.native="addToFavourites"
:title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
:title="
isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')
"
icon="favourites"
/>
</OptionGroup>
<OptionGroup>
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option
@click.native="$renameFileOrFolder(item)"
:title="$t('context_menu.rename')"
icon="rename"
/>
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option
@click.native="$shareFileOrFolder(item)"
:title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')"
:title="
item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')
"
icon="share"
/>
<Option @click.native="$convertAsTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="user-plus" />
<Option
@click.native="$convertAsTeamFolder(item)"
v-if="isFolder"
:title="$t('Convert as Team Folder')"
icon="user-plus"
/>
<Option
@click.native="$convertAsTeamFolder(item)"
v-if="isFolder"
:title="$t('Send Upload Request')"
icon="upload-cloud"
/>
</OptionGroup>
<OptionGroup>
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
<Option
@click.native="$downloadSelection(item)"
:title="$t('context_menu.download')"
icon="download"
/>
</OptionGroup>
</template>
@@ -94,7 +156,11 @@
<OptionGroup v-if="!hasFile">
<Option
@click.native="addToFavourites"
:title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
:title="
isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')
"
icon="favourites"
/>
</OptionGroup>
@@ -115,7 +181,11 @@
<MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('create-list')" v-if="$checkPermission(['master', 'editor'])" icon="cloud-plus">
<MobileActionButton
@click.native="$showMobileMenu('create-list')"
v-if="$checkPermission(['master', 'editor'])"
icon="cloud-plus"
>
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">

51
resources/js/views/FileView/MySharedItems.vue
View File

@@ -5,24 +5,38 @@
<OptionGroup v-if="isFolder">
<Option
@click.native="addToFavourites"
:title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
:title="
isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')
"
icon="favourites"
/>
</OptionGroup>
<OptionGroup>
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option
@click.native="$renameFileOrFolder(item)"
:title="$t('context_menu.rename')"
icon="rename"
/>
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option
@click.native="$shareFileOrFolder(item)"
:title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')"
:title="
item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')
"
icon="share"
/>
</OptionGroup>
<OptionGroup>
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
<Option
@click.native="$downloadSelection(item)"
:title="$t('context_menu.download')"
icon="download"
/>
</OptionGroup>
</template>
@@ -30,7 +44,11 @@
<OptionGroup v-if="!hasFile">
<Option
@click.native="addToFavourites"
:title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
:title="
isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')
"
icon="favourites"
/>
</OptionGroup>
@@ -48,7 +66,11 @@
<OptionGroup v-if="isFolder">
<Option
@click.native="addToFavourites"
:title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
:title="
isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')
"
icon="favourites"
/>
</OptionGroup>
@@ -57,7 +79,15 @@
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$shareFileOrFolder(item)" :title="item && item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option
@click.native="$shareFileOrFolder(item)"
:title="
item && item.data.relationships.shared
? $t('context_menu.share_edit')
: $t('context_menu.share')
"
icon="share"
/>
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
@@ -86,7 +116,12 @@
<FileBrowser />
<MobileMultiSelectToolbar>
<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
<ToolbarButton
@click.native="$downloadSelection(item)"
class="action-btn"
source="download"
:action="$t('actions.download')"
/>
<ToolbarButton @click.native="$shareCancel" class="action-btn" source="shared-off" />
</MobileMultiSelectToolbar>
</div>

69
resources/js/views/FileView/Public.vue
View File

@@ -3,17 +3,35 @@
<MobileContextMenu>
<template v-slot:editor>
<OptionGroup>
<Option v-if="item" @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option v-if="item" @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
<Option
v-if="item"
@click.native="$renameFileOrFolder(item)"
:title="$t('context_menu.rename')"
icon="rename"
/>
<Option
v-if="item"
@click.native="$moveFileOrFolder(item)"
:title="$t('context_menu.move')"
icon="move-item"
/>
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
<Option
@click.native="$downloadSelection(item)"
:title="$t('context_menu.download')"
icon="download"
/>
</OptionGroup>
</template>
<template v-slot:visitor>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
<Option
@click.native="$downloadSelection(item)"
:title="$t('context_menu.download')"
icon="download"
/>
</OptionGroup>
</template>
</MobileContextMenu>
@@ -24,13 +42,23 @@
<OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
</OptionGroup>
<OptionGroup>
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
<Option
@click.stop.native="createFolder"
:title="$t('actions.create_folder')"
icon="folder-plus"
:is-hover-disabled="true"
/>
</OptionGroup>
</MobileCreateMenu>
<MobileMultiSelectToolbar>
<template v-slot:visitor>
<ToolbarButton @click.native="$downloadSelection()" class="action-btn" source="download" :action="$t('actions.download')" />
<ToolbarButton
@click.native="$downloadSelection()"
class="action-btn"
source="download"
:action="$t('actions.download')"
/>
</template>
<template v-slot:editor>
<ToolbarButton
@@ -47,7 +75,12 @@
:class="{ 'is-inactive': clipboard.length < 1 }"
:action="$t('actions.delete')"
/>
<ToolbarButton @click.native="$downloadSelection()" class="action-btn" source="download" :action="$t('actions.download')" />
<ToolbarButton
@click.native="$downloadSelection()"
class="action-btn"
source="download"
:action="$t('actions.download')"
/>
</template>
</MobileMultiSelectToolbar>
@@ -58,19 +91,31 @@
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
<Option
@click.native="$createFolder"
:title="$t('context_menu.create_folder')"
icon="create-folder"
/>
</OptionGroup>
</template>
<template v-slot:single-select v-if="item">
<OptionGroup v-if="$checkPermission('editor')">
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option
@click.native="$renameFileOrFolder(item)"
:title="$t('context_menu.rename')"
icon="rename"
/>
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
<Option
@click.native="$downloadSelection(item)"
:title="$t('context_menu.download')"
icon="download"
/>
</OptionGroup>
</template>
@@ -188,7 +233,7 @@ export default {
events.$on('context-menu:show', (event, item) => (this.item = item))
events.$on('mobile-context-menu:show', (item) => (this.item = item))
events.$on('context-menu:current-folder', (folder) => (this.item = folder))
},
events.$on('context-menu:current-folder', (folder) => (this.item = folder))
},
}
</script>

33
resources/js/views/FileView/RecentUploads.vue
View File

@@ -3,20 +3,30 @@
<ContextMenu>
<template v-slot:single-select v-if="item">
<OptionGroup>
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option
@click.native="$renameFileOrFolder(item)"
:title="$t('context_menu.rename')"
icon="rename"
/>
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option
@click.native="$shareFileOrFolder(item)"
:title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')"
:title="
item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')
"
icon="share"
/>
</OptionGroup>
<OptionGroup>
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
<Option
@click.native="$downloadSelection(item)"
:title="$t('context_menu.download')"
icon="download"
/>
</OptionGroup>
</template>
@@ -36,7 +46,15 @@
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="$shareFileOrFolder(item)" :title="item && item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option
@click.native="$shareFileOrFolder(item)"
:title="
item && item.data.relationships.shared
? $t('context_menu.share_edit')
: $t('context_menu.share')
"
icon="share"
/>
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
@@ -83,7 +101,12 @@
:class="{ 'is-inactive': clipboard.length < 1 }"
:action="$t('actions.delete')"
/>
<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
<ToolbarButton
@click.native="$downloadSelection(item)"
class="action-btn"
source="download"
:action="$t('actions.download')"
/>
</MobileMultiSelectToolbar>
</div>
</template>

42
resources/js/views/FileView/SharedWithMe.vue
View File

@@ -17,13 +17,22 @@
<OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
</OptionGroup>
<OptionGroup :title="$t('Create')">
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
<Option
@click.stop.native="createFolder"
:title="$t('actions.create_folder')"
icon="folder-plus"
:is-hover-disabled="true"
/>
</OptionGroup>
</MobileCreateMenu>
<MobileTeamContextMenu>
<OptionGroup>
<Option @click.native="$detachMeFromTeamFolder(teamFolder)" :title="$t('Leave the Team Folder')" icon="user-minus" />
<Option
@click.native="$detachMeFromTeamFolder(teamFolder)"
:title="$t('Leave the Team Folder')"
icon="user-minus"
/>
</OptionGroup>
</MobileTeamContextMenu>
@@ -44,7 +53,12 @@
:class="{ 'is-inactive': clipboard.length < 1 }"
:action="$t('actions.delete')"
/>
<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
<ToolbarButton
@click.native="$downloadSelection(item)"
class="action-btn"
source="download"
:action="$t('actions.download')"
/>
</MobileMultiSelectToolbar>
<ContextMenu>
@@ -54,19 +68,31 @@
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup v-if="!isTeamFolderHomepage">
<Option @click.stop.native="$createFolder" :title="$t('actions.create_folder')" icon="folder-plus" />
<Option
@click.stop.native="$createFolder"
:title="$t('actions.create_folder')"
icon="folder-plus"
/>
</OptionGroup>
</template>
<template v-slot:single-select v-if="item">
<OptionGroup v-if="canEdit">
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option
@click.native="$renameFileOrFolder(item)"
:title="$t('context_menu.rename')"
icon="rename"
/>
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
<Option
@click.native="$downloadSelection(item)"
:title="$t('context_menu.download')"
icon="download"
/>
</OptionGroup>
</template>
@@ -182,7 +208,9 @@ export default {
},
canEdit() {
if (this.currentTeamFolder && this.user) {
let member = this.currentTeamFolder.data.relationships.members.data.find((member) => member.data.id === this.user.data.id)
let member = this.currentTeamFolder.data.relationships.members.data.find(
(member) => member.data.id === this.user.data.id
)
return member.data.attributes.permission === 'can-edit'
}

87
resources/js/views/FileView/TeamFolders.vue
View File

@@ -4,7 +4,11 @@
<OptionGroup v-if="item && isFolder">
<Option
@click.native="addToFavourites"
:title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
:title="
isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')
"
icon="favourites"
/>
</OptionGroup>
@@ -15,8 +19,17 @@
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item">
<Option @click.native="$shareFileOrFolder(item)" :title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$updateTeamFolder(item)" v-if="isFolder" :title="$t('Edit Team Members')" icon="users" />
<Option
@click.native="$shareFileOrFolder(item)"
:title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')"
icon="share"
/>
<Option
@click.native="$updateTeamFolder(item)"
v-if="isFolder"
:title="$t('Edit Team Members')"
icon="users"
/>
</OptionGroup>
<OptionGroup v-if="item">
@@ -30,8 +43,18 @@
<OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
</OptionGroup>
<OptionGroup :title="$t('Create')">
<Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" :is-hover-disabled="true" />
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
<Option
@click.stop.native="$createTeamFolder"
:title="$t('Create Team Folder')"
icon="users"
:is-hover-disabled="true"
/>
<Option
@click.stop.native="createFolder"
:title="$t('actions.create_folder')"
icon="folder-plus"
:is-hover-disabled="true"
/>
</OptionGroup>
</MobileCreateMenu>
@@ -57,7 +80,12 @@
:class="{ 'is-inactive': clipboard.length < 1 }"
:action="$t('actions.delete')"
/>
<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
<ToolbarButton
@click.native="$downloadSelection(item)"
class="action-btn"
source="download"
:action="$t('actions.download')"
/>
</MobileMultiSelectToolbar>
<ContextMenu>
@@ -65,7 +93,11 @@
<OptionGroup v-if="!isTeamFolderHomepage">
<OptionUpload :title="$t('actions.upload')" type="file" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
<Option @click.stop.native="$createFolder" :title="$t('actions.create_folder')" icon="folder-plus" />
<Option
@click.stop.native="$createFolder"
:title="$t('actions.create_folder')"
icon="folder-plus"
/>
</OptionGroup>
<OptionGroup v-if="isTeamFolderHomepage">
<Option @click.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" />
@@ -76,26 +108,45 @@
<OptionGroup v-if="isFolder">
<Option
@click.native="addToFavourites"
:title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
:title="
isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')
"
icon="favourites"
/>
</OptionGroup>
<OptionGroup>
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option
@click.native="$renameFileOrFolder(item)"
:title="$t('context_menu.rename')"
icon="rename"
/>
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option
@click.native="$shareFileOrFolder(item)"
:title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')"
:title="
item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')
"
icon="share"
/>
<Option @click.native="$updateTeamFolder(item)" v-if="isFolder" :title="$t('Edit Team Members')" icon="users" />
<Option
@click.native="$updateTeamFolder(item)"
v-if="isFolder"
:title="$t('Edit Team Members')"
icon="users"
/>
</OptionGroup>
<OptionGroup>
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
<Option
@click.native="$downloadSelection(item)"
:title="$t('context_menu.download')"
icon="download"
/>
</OptionGroup>
</template>
@@ -103,7 +154,11 @@
<OptionGroup v-if="!hasFile">
<Option
@click.native="addToFavourites"
:title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
:title="
isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')
"
icon="favourites"
/>
</OptionGroup>
@@ -124,7 +179,11 @@
<MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
{{ $getCurrentSectionName() }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('create-list')" v-if="$checkPermission(['master', 'editor'])" icon="cloud-plus">
<MobileActionButton
@click.native="$showMobileMenu('create-list')"
v-if="$checkPermission(['master', 'editor'])"
icon="cloud-plus"
>
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">

41
resources/js/views/FileView/Trash.vue
View File

@@ -9,19 +9,38 @@
<template v-slot:single-select v-if="item">
<OptionGroup>
<Option @click.native="$restoreFileOrFolder(item)" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
<Option @click.native="$deleteFileOrFolder(item)" v-if="item" :title="$t('context_menu.delete')" icon="trash" />
<Option
@click.native="$restoreFileOrFolder(item)"
v-if="item"
:title="$t('context_menu.restore')"
icon="restore"
/>
<Option
@click.native="$deleteFileOrFolder(item)"
v-if="item"
:title="$t('context_menu.delete')"
icon="trash"
/>
<Option @click.native="$emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
<Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
<Option
@click.native="$downloadSelection(item)"
:title="$t('context_menu.download')"
icon="download"
/>
</OptionGroup>
</template>
<template v-slot:multiple-select v-if="item">
<OptionGroup>
<Option @click.native="$restoreFileOrFolder(item)" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
<Option
@click.native="$restoreFileOrFolder(item)"
v-if="item"
:title="$t('context_menu.restore')"
icon="restore"
/>
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="$emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
</OptionGroup>
@@ -33,7 +52,12 @@
<MobileContextMenu>
<OptionGroup v-if="item">
<Option @click.native="$restoreFileOrFolder(item)" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
<Option
@click.native="$restoreFileOrFolder(item)"
v-if="item"
:title="$t('context_menu.restore')"
icon="restore"
/>
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
@@ -74,7 +98,12 @@
:class="{ 'is-inactive': clipboard.length < 1 }"
:action="$t('actions.delete')"
/>
<ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
<ToolbarButton
@click.native="$downloadSelection(item)"
class="action-btn"
source="download"
:action="$t('actions.download')"
/>
</MobileMultiSelectToolbar>
</div>
</template>

198
resources/js/views/FileView/UploadRequestFiles.vue Normal file
View File

@@ -0,0 +1,198 @@
<template>
<div>
<MobileContextMenu>
<OptionGroup v-if="item">
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
</MobileContextMenu>
<MobileCreateMenu>
<OptionGroup :title="$t('Upload')">
<OptionUpload :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
<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"
:is-hover-disabled="true"
/>
</OptionGroup>
</MobileCreateMenu>
<MobileMultiSelectToolbar>
<ToolbarButton
@click.native="$moveFileOrFolder(clipboard)"
class="action-btn"
source="move"
:action="$t('actions.move')"
:class="{ 'is-inactive': clipboard.length < 1 }"
/>
<ToolbarButton
@click.native="$deleteFileOrFolder(clipboard)"
class="action-btn"
source="trash"
:class="{ 'is-inactive': clipboard.length < 1 }"
:action="$t('actions.delete')"
/>
</MobileMultiSelectToolbar>
<ContextMenu>
<template v-slot:empty-select>
<OptionGroup>
<OptionUpload :title="$t('actions.upload')" type="file" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup>
<Option
@click.native="$createFolder"
:title="$t('context_menu.create_folder')"
icon="create-folder"
/>
</OptionGroup>
</template>
<template v-slot:single-select v-if="item">
<OptionGroup>
<Option
@click.native="$renameFileOrFolder(item)"
:title="$t('context_menu.rename')"
icon="rename"
/>
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
</OptionGroup>
</template>
<template v-slot:multiple-select v-if="item">
<OptionGroup>
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
<Option @click.native="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</template>
</ContextMenu>
<FileActionsMobile v-if="entries.length">
<MobileActionButton @click.native="$openSpotlight()" icon="search">
{{ $t('Spotlight') }}
</MobileActionButton>
<MobileActionButton
@click.native="$showMobileMenu('create-list')"
v-if="$checkPermission(['master', 'editor'])"
icon="cloud-plus"
>
{{ $t('mobile.create') }}
</MobileActionButton>
<MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
{{ $t('context_menu.select') }}
</MobileActionButton>
<MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
{{ $t('preview_sorting.preview_sorting_button') }}
</MobileActionButton>
</FileActionsMobile>
<EmptyFilePage>
<div v-if="uploadRequest" class="relative mx-auto mb-8 w-24 text-center">
<VueFolderIcon class="inline-block w-28" />
<MemberAvatar
:member="uploadRequest.user"
class="absolute -bottom-2.5 -right-2"
:is-border="true"
:size="32"
/>
</div>
<h1 class="title">
{{ $t('Jane Request You for File Upload') }}
</h1>
<p class="description max-w-[420px]">
{{
$t(
'Your files will be uploaded automatically and after that, you can organize your files in folders.'
)
}}
</p>
<ButtonUpload button-style="theme">
{{ $t('empty_page.call_to_action') }}
</ButtonUpload>
</EmptyFilePage>
<FileBrowser />
</div>
</template>
<script>
import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
import MobileActionButton from '../../components/FilesView/MobileActionButton'
import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
import VueFolderIcon from '../../components/FilesView/Icons/VueFolderIcon'
import MobileCreateMenu from '../../components/FilesView/MobileCreateMenu'
import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
import ToolbarButton from '../../components/FilesView/ToolbarButton'
import MemberAvatar from '../../components/FilesView/MemberAvatar'
import ButtonUpload from '../../components/FilesView/ButtonUpload'
import OptionUpload from '../../components/FilesView/OptionUpload'
import FileBrowser from '../../components/FilesView/FileBrowser'
import ContextMenu from '../../components/FilesView/ContextMenu'
import OptionGroup from '../../components/FilesView/OptionGroup'
import Option from '../../components/FilesView/Option'
import { events } from '../../bus'
import { mapGetters } from 'vuex'
export default {
name: 'Files',
components: {
MobileMultiSelectToolbar,
MobileActionButton,
FileActionsMobile,
MobileContextMenu,
MobileCreateMenu,
EmptyFilePage,
VueFolderIcon,
ToolbarButton,
MemberAvatar,
ButtonUpload,
OptionUpload,
OptionGroup,
FileBrowser,
ContextMenu,
Option,
},
computed: {
...mapGetters(['fastPreview', 'clipboard', 'config', 'user', 'entries', 'uploadRequest']),
isFolder() {
return this.item && this.item.data.type === 'folder'
},
},
data() {
return {
item: undefined,
}
},
methods: {
createFolder() {
events.$emit('popup:open', { name: 'create-folder' })
},
},
created() {
//this.$store.dispatch('getFolder', this.$route.params.id)
this.$store.commit('LOADING_STATE', { loading: false, data: [] })
axios.get('/api/request').then((response) => this.$store.commit('SET_UPLOAD_REQUEST', response.data))
events.$on('context-menu:show', (event, item) => (this.item = item))
events.$on('context-menu:current-folder', (folder) => (this.item = folder))
events.$on('mobile-context-menu:show', (item) => (this.item = item))
},
}
</script>