nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-25 10:20:38 +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
resources/js/components/FilesView/Alert.vue
+3 -1
View File
@@ -10,7 +10,9 @@
<p v-if="message" class="message">{{ message }}</p>
</div>
<div class="popup-actions">
<ButtonBase @click.native="closePopup" :button-style="buttonStyle" class="action-confirm">{{ button }} </ButtonBase>
<ButtonBase @click.native="closePopup" :button-style="buttonStyle" class="action-confirm"
>{{ button }}
</ButtonBase>
</div>
</div>
</div>
resources/js/components/FilesView/DesktopSharepageToolbar.vue
+6 -13
View File
@@ -31,13 +31,12 @@
<!--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,
'is-inactive': !canManipulate,
}"
source="move"
:action="$t('actions.move')"
@@ -45,7 +44,7 @@
<ToolbarButton
@click.native="$deleteFileOrFolder(clipboard[0])"
:class="{
'is-inactive': ! canManipulate,
'is-inactive': !canManipulate,
}"
source="trash"
:action="$t('actions.delete')"
@@ -107,19 +106,13 @@ export default {
Option,
},
computed: {
...mapGetters([
'isVisibleNavigationBars',
'currentTeamFolder',
'currentFolder',
'sharedDetail',
'clipboard',
]),
...mapGetters(['isVisibleNavigationBars', 'currentTeamFolder', 'currentFolder', 'sharedDetail', 'clipboard']),
canEdit() {
return this.sharedDetail && this.sharedDetail.data.attributes.permission === 'editor'
},
canManipulate() {
return this.clipboard[0]
}
canManipulate() {
return this.clipboard[0]
},
},
methods: {
showCreateMenu() {
resources/js/components/FilesView/DesktopToolbar.vue
+10 -3
View File
@@ -12,20 +12,27 @@
:action="$t('actions.create')"
/>
<PopoverItem name="desktop-create" side="left">
<OptionGroup :title="$t('Upload')" :class="{'is-inactive': canUploadInView || isTeamFolderHomepage || isSharedWithMeHomepage}">
<OptionGroup
:title="$t('Upload')"
:class="{
'is-inactive': canUploadInView || isTeamFolderHomepage || isSharedWithMeHomepage,
}"
>
<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"
:class="{ 'is-inactive': canCreateFolder || isTeamFolderHomepage || isSharedWithMeHomepage }"
:class="{
'is-inactive': canCreateFolder || isTeamFolderHomepage || isSharedWithMeHomepage,
}"
:title="$t('actions.create_folder')"
icon="folder-plus"
/>
<Option
@click.stop.native="$createTeamFolder"
:class="{ 'is-inactive': canCreateTeamFolder || isSharedWithMeHomepage }"
:class="{ 'is-inactive': canCreateTeamFolder || isSharedWithMeHomepage }"
:title="$t('Create Team Folder')"
icon="users"
/>
resources/js/components/FilesView/DesktopUploadRequestToolbar.vue
+147
View File
@@ -0,0 +1,147 @@
<template>
<div class="hidden lg:block">
<div class="flex items-center justify-between py-3">
<NavigationBar />
<div class="flex items-center">
<div class="bg-theme-200 mr-6 flex cursor-pointer items-center rounded-lg py-1 pr-1 pl-4">
<b @click="uploadingDone" class="text-theme mr-3 text-xs">
{{ isDone ? $t('Awesome!') : $t('Tell Jane you are done!') }}
</b>
<img
class="w-8 rounded-lg"
src="http://192.168.1.112:8000/avatars/md-f45abbe5-962c-4229-aef2-9991e96d54d9.png"
alt="Avatar"
/>
</div>
<!--Create button-->
<PopoverWrapper>
<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>
<!--File Controls-->
<div v-if="!$isMobile()" class="ml-5 flex items-center xl:ml-8">
<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>
<!--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: 'DesktopUploadRequestToolbar',
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]
},
},
data() {
return {
isDone: false,
}
},
methods: {
uploadingDone() {
// TODO: add name to the message
if (!this.isDone) {
events.$emit('toaster', {
type: 'success',
message: this.$t('We notified Jane about your new uploads successfully.'),
})
}
this.isDone = true
},
showCreateMenu() {
events.$emit('popover:open', 'desktop-create')
},
showSortingMenu() {
events.$emit('popover:open', 'desktop-sorting')
},
},
}
</script>
resources/js/components/FilesView/DragUI.vue
+10 -4
View File
@@ -1,7 +1,11 @@
<template>
<div v-show="isVisible" id="drag-ui" class="w-64 fixed z-20 pointer-events-none p-5 rounded-xl shadow-lg dark:bg-dark-foreground bg-white">
<TitlePreview icon="check-square" :title="title" :subtitle="subtitle" />
</div>
<div
v-show="isVisible"
id="drag-ui"
class="pointer-events-none fixed z-20 w-64 rounded-xl bg-white p-5 shadow-lg dark:bg-dark-foreground"
>
<TitlePreview icon="check-square" :title="title" :subtitle="subtitle" />
</div>
</template>
<script>
@@ -42,7 +46,9 @@ export default {
if ((filesLength < 2 || !hasDraggedItem) && this.draggedItem) {
// Subtitle for single folder
if (this.draggedItem.data.type === 'folder') {
return this.draggedItem.items == 0 ? this.$t('folder.empty') : this.$tc('folder.item_counts', this.draggedItem.items)
return this.draggedItem.items == 0
? this.$t('folder.empty')
: this.$tc('folder.item_counts', this.draggedItem.items)
}
// Subtitle for single file
resources/js/components/FilesView/FileActionsMobile.vue
+4 -2
View File
@@ -1,7 +1,9 @@
<template>
<div class="sticky top-14 z-[19] block overflow-x-auto whitespace-nowrap bg-white px-4 pb-3 dark:bg-dark-background lg:hidden">
<div
class="sticky top-14 z-[19] block overflow-x-auto whitespace-nowrap bg-white px-4 pb-3 dark:bg-dark-background lg:hidden"
>
<!--Show Buttons-->
<slot v-if="!isMultiSelectMode" />
<slot v-if="!isMultiSelectMode" />
<!-- Multi select mode -->
<div v-if="isMultiSelectMode">
resources/js/components/FilesView/FileBrowser.vue
+1 -11
View File
@@ -109,7 +109,7 @@ export default {
})
}
} else {
console.log(data.data.type);
console.log(data.data.type)
// Get id from current folder
const id = data.data.type !== 'folder' ? this.currentFolder?.data.id : data.data.id
@@ -144,13 +144,3 @@ export default {
},
}
</script>
<style>
.grid-view {
@apply grid grid-cols-3 content-start sm:grid-cols-4 lg:gap-2 xl:grid-cols-6 xl:gap-4;
}
.grid-view-sidebar {
@apply grid grid-cols-3 content-start md:grid-cols-2 lg:grid-cols-3 lg:gap-2 xl:grid-cols-4 xl:gap-4 2xl:grid-cols-5;
}
</style>
resources/js/components/FilesView/FileFilterMobile.vue
+35 -5
View File
@@ -2,13 +2,43 @@
<MenuMobile name="file-filter">
<MenuMobileGroup>
<OptionGroup :title="$t('Base')">
<Option @click.native="goToFiles" :title="$t('sidebar.home')" icon="hard-drive" :is-active="$isThisRoute($route, 'Files')" :is-hover-disabled="true" />
<Option @click.native="goToLatest" :title="$t('menu.latest')" icon="upload-cloud" :is-active="$isThisRoute($route, 'RecentUploads')" :is-hover-disabled="true" />
<Option @click.native="goToShared" :title="$t('sidebar.my_shared')" icon="share" :is-active="$isThisRoute($route, 'MySharedItems')" :is-hover-disabled="true" />
<Option @click.native="goToTrash" :title="$t('menu.trash')" icon="trash" :is-active="$isThisRoute($route, 'Trash')" :is-hover-disabled="true" />
<Option
@click.native="goToFiles"
:title="$t('sidebar.home')"
icon="hard-drive"
:is-active="$isThisRoute($route, 'Files')"
:is-hover-disabled="true"
/>
<Option
@click.native="goToLatest"
:title="$t('menu.latest')"
icon="upload-cloud"
:is-active="$isThisRoute($route, 'RecentUploads')"
:is-hover-disabled="true"
/>
<Option
@click.native="goToShared"
:title="$t('sidebar.my_shared')"
icon="share"
:is-active="$isThisRoute($route, 'MySharedItems')"
:is-hover-disabled="true"
/>
<Option
@click.native="goToTrash"
:title="$t('menu.trash')"
icon="trash"
:is-active="$isThisRoute($route, 'Trash')"
:is-hover-disabled="true"
/>
</OptionGroup>
<OptionGroup :title="$t('Collaboration')">
<Option @click.native="goToTeamFolders" :title="$t('Team Folders')" icon="users" :is-active="$isThisRoute($route, 'TeamFolders')" :is-hover-disabled="true" />
<Option
@click.native="goToTeamFolders"
:title="$t('Team Folders')"
icon="users"
:is-active="$isThisRoute($route, 'TeamFolders')"
:is-hover-disabled="true"
/>
<Option
@click.native="goToSharedWithMe"
:title="$t('Shared with Me')"
resources/js/components/FilesView/FileIconThumbnail.vue
+11 -2
View File
@@ -1,10 +1,19 @@
<template>
<div class="flex items-center justify-center">
<span class="text-theme absolute z-10 mx-auto mt-1 inline-block w-7 overflow-hidden text-ellipsis text-center font-semibold text-[9px]">
<span
class="text-theme absolute z-10 mx-auto mt-1 inline-block w-7 overflow-hidden text-ellipsis text-center text-[9px] font-semibold"
>
{{ entry.data.attributes.mimetype }}
</span>
<svg width="38px" height="51px" viewBox="0 0 38 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg
width="38px"
height="51px"
viewBox="0 0 38 51"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
stroke-width="0"
fill="#f4f5f6"
resources/js/components/FilesView/FileSortingOptions.vue
+24 -4
View File
@@ -1,12 +1,32 @@
<template>
<div>
<OptionGroup :title="$t('View')">
<Option v-if="isList" @click.native="changePreview('grid')" :title="$t('preview_sorting.grid_view')" icon="grid" />
<Option v-if="isGrid" @click.native="changePreview('list')" :title="$t('preview_sorting.list_view')" icon="list" />
<Option
v-if="isList"
@click.native="changePreview('grid')"
:title="$t('preview_sorting.grid_view')"
icon="grid"
/>
<Option
v-if="isGrid"
@click.native="changePreview('list')"
:title="$t('preview_sorting.list_view')"
icon="list"
/>
</OptionGroup>
<OptionGroup :title="$t('Sorting')">
<Option @click.native.stop="sort('created_at')" :arrow="arrowForCreatedAtField" :title="$t('preview_sorting.sort_date')" icon="calendar" />
<Option @click.native.stop="sort('name')" :arrow="arrowForNameField" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
<Option
@click.native.stop="sort('created_at')"
:arrow="arrowForCreatedAtField"
:title="$t('preview_sorting.sort_date')"
icon="calendar"
/>
<Option
@click.native.stop="sort('name')"
:arrow="arrowForNameField"
:title="$t('preview_sorting.sort_alphabet')"
icon="alphabet"
/>
</OptionGroup>
</div>
</template>
resources/js/components/FilesView/Icons/AlphabetIcon.vue
+4 -1
View File
@@ -14,7 +14,10 @@
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<polyline id="Path" points="11.1999993 13.1999991 5.59999967 0.199999094 0 13.1999991 5.59999967 0.199999094"></polyline>
<polyline
id="Path"
points="11.1999993 13.1999991 5.59999967 0.199999094 0 13.1999991 5.59999967 0.199999094"
></polyline>
<line x1="2.25" y1="8" x2="8.75" y2="8" id="Line-2"></line>
</svg>
</template>
resources/js/components/FilesView/Icons/VueFolderIcon.vue
+8 -1
View File
@@ -1,5 +1,12 @@
<template>
<svg width="53px" height="52px" viewBox="0 0 53 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg
width="53px"
height="52px"
viewBox="0 0 53 39"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
d="M48.03125,6.5 L29.790833,6.5 C28.7431613,6.5 27.7373076,6.08896217 26.9894703,5.35523504 L22.6980297,1.14476496 C21.9501924,0.41103783 20.9443387,-6.36543387e-16 19.896667,0 L4.96875,0 L4.96875,0 C2.22455078,0 0,2.18257812 0,4.875 L0,34.125 C0,36.8174219 2.22455078,39 4.96875,39 L48.03125,39 C50.7754492,39 53,36.8174219 53,34.125 L53,11.375 C53,8.68257813 50.7754492,6.5 48.03125,6.5 Z"
class="svg-color-theme"
resources/js/components/FilesView/Icons/VueFolderTeamIcon.vue
+9 -2
View File
@@ -1,5 +1,10 @@
<template>
<svg viewBox="0 0 53 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg
viewBox="0 0 53 39"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<g id="V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="team-folder">
<path
@@ -35,7 +40,9 @@
d="M9.59999943,10.7999994 L9.59999943,9.59999943 C9.59999943,8.27451611 8.52548289,7.19999957 7.19999957,7.19999957 L2.39999986,7.19999957 C1.07451654,7.19999957 0,8.27451611 0,9.59999943 L0,10.7999994"
></path>
<circle cx="4.79999971" cy="2.39999986" r="2.39999986"></circle>
<path d="M13.1999992,10.7999994 L13.1999992,9.59999943 C13.1991834,8.50627014 12.4589985,7.55143166 11.3999993,7.27799957"></path>
<path
d="M13.1999992,10.7999994 L13.1999992,9.59999943 C13.1991834,8.50627014 12.4589985,7.55143166 11.3999993,7.27799957"
></path>
<path
d="M8.99999946,0.0779999954 C10.0619483,0.349901852 10.8047053,1.30679461 10.8047053,2.40299986 C10.8047053,3.4992051 10.0619483,4.45609786 8.99999946,4.72799972"
></path>
resources/js/components/FilesView/InfoSidebar.vue
+39 -9
View File
@@ -1,5 +1,7 @@
<template>
<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">
<div
class="hidden w-[300px] shrink-0 overflow-y-auto overflow-x-hidden px-2.5 pt-2 lg:block xl:w-[320px] 2xl:w-[360px]"
>
<!--Is empty clipboard-->
<div v-if="isEmpty" class="flex h-full items-center justify-center">
<div class="text-center">
@@ -23,10 +25,19 @@
<div v-if="isSingleFile && !isEmpty">
<FilePreviewDetail />
<TitlePreview class="mb-6" :icon="clipboard[0].data.type" :title="clipboard[0].data.attributes.name" :subtitle="clipboard[0].data.attributes.mimetype" />
<TitlePreview
class="mb-6"
:icon="clipboard[0].data.type"
:title="clipboard[0].data.attributes.name"
:subtitle="clipboard[0].data.attributes.mimetype"
/>
<!--Filesize-->
<ListInfoItem v-if="singleFile.data.attributes.filesize" :title="$t('file_detail.size')" :content="singleFile.data.attributes.filesize" />
<ListInfoItem
v-if="singleFile.data.attributes.filesize"
:title="$t('file_detail.size')"
:content="singleFile.data.attributes.filesize"
/>
<!--Created At-->
<ListInfoItem :title="$t('file_detail.created_at')" :content="singleFile.data.attributes.created_at" />
@@ -35,14 +46,21 @@
<ListInfoItem v-if="$checkPermission(['master'])" :title="$t('file_detail.where')">
<div @click="$moveFileOrFolder(singleFile)" class="flex cursor-pointer items-center">
<b class="inline-block text-sm font-bold">
{{ singleFile.data.relationships.parent ? singleFile.data.relationships.parent.data.attributes.name : $getCurrentLocationName() }}
{{
singleFile.data.relationships.parent
? singleFile.data.relationships.parent.data.attributes.name
: $getCurrentLocationName()
}}
</b>
<Edit2Icon size="10" class="ml-2" />
</div>
</ListInfoItem>
<!--Shared-->
<ListInfoItem v-if="$checkPermission('master') && singleFile.data.relationships.shared" :title="$t('file_detail.shared')">
<ListInfoItem
v-if="$checkPermission('master') && singleFile.data.relationships.shared"
:title="$t('file_detail.shared')"
>
<div @click="$shareFileOrFolder(singleFile)" class="mb-2 flex cursor-pointer items-center">
<span class="inline-block text-sm font-bold">
{{ sharedInfo }}
@@ -50,8 +68,18 @@
<Edit2Icon size="10" class="ml-2" />
</div>
<div class="flex w-full items-center">
<lock-icon v-if="isLocked" @click="$shareFileOrFolder(singleFile)" size="17" class="hover-text-theme vue-feather cursor-pointer" />
<unlock-icon v-if="!isLocked" @click="$shareFileOrFolder(singleFile)" size="17" class="hover-text-theme vue-feather cursor-pointer" />
<lock-icon
v-if="isLocked"
@click="$shareFileOrFolder(singleFile)"
size="17"
class="hover-text-theme vue-feather cursor-pointer"
/>
<unlock-icon
v-if="!isLocked"
@click="$shareFileOrFolder(singleFile)"
size="17"
class="hover-text-theme vue-feather cursor-pointer"
/>
<CopyShareLink :item="singleFile" size="small" class="w-full pl-2.5" />
</div>
</ListInfoItem>
@@ -60,7 +88,7 @@
<ListInfoItem v-if="canShowAuthor" :title="$t('Author')">
<div class="mt-1.5 flex items-center">
<MemberAvatar :size="32" :member="singleFile.data.relationships.owner" />
<span class="text-sm ml-3 block font-bold">
<span class="ml-3 block text-sm font-bold">
{{ singleFile.data.relationships.owner.data.attributes.name }}
</span>
</div>
@@ -112,7 +140,9 @@ export default {
return this.clipboard[0]
},
canShowMetaData() {
return this.clipboard[0].data.attributes.metadata && this.clipboard[0].data.attributes.metadata.ExifImageWidth
return (
this.clipboard[0].data.attributes.metadata && this.clipboard[0].data.attributes.metadata.ExifImageWidth
)
},
isLocked() {
return this.clipboard[0].data.relationships.shared.protected
resources/js/components/FilesView/ItemGrid.vue
+6 -2
View File
@@ -96,13 +96,17 @@
<!--File & Image sub line-->
<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 dark: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>
<!--Folder sub line-->
<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)
}}<span class="hidden text-xs text-gray-500 dark: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>
</div>
</div>
resources/js/components/FilesView/ItemHandler.vue
+5 -2
View File
@@ -18,7 +18,7 @@
:entry="item"
:highlight="true"
:mobile-handler="true"
:can-hover="true"
:can-hover="true"
@mouseup.stop.native="clickFilter"
@dragstart.native="$emit('dragstart')"
@drop.native="drop()"
@@ -184,7 +184,10 @@ export default {
events.$emit('file-preview:show')
} else if (this.isFile || (!this.isFolder && !this.isVideo && !this.isAudio && !this.isImage)) {
this.$downloadFile(this.item.data.attributes.file_url, this.item.data.attributes.name + '.' + this.item.data.attributes.mimetype)
this.$downloadFile(
this.item.data.attributes.file_url,
this.item.data.attributes.name + '.' + this.item.data.attributes.mimetype
)
} else if (this.isFolder) {
this.$goToFileView(this.item.data.id)
}
resources/js/components/FilesView/ItemList.vue
+33 -13
View File
@@ -14,16 +14,30 @@
<!--Item thumbnail-->
<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" />
<MemberAvatar
v-if="user && canShowAuthor"
:size="28"
:is-border="true"
:member="entry.data.relationships.owner"
class="absolute right-1.5 -bottom-2 z-10"
/>
<!--Emoji Icon-->
<Emoji v-if="entry.data.attributes.emoji" :emoji="entry.data.attributes.emoji" class="ml-1 scale-110 transform text-5xl" />
<Emoji
v-if="entry.data.attributes.emoji"
:emoji="entry.data.attributes.emoji"
class="ml-1 scale-110 transform text-5xl"
/>
<!--Folder Icon-->
<FolderIcon v-if="isFolder && !entry.data.attributes.emoji" :item="entry" />
<!--File Icon-->
<FileIconThumbnail v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)" :entry="entry" class="pr-2" />
<FileIconThumbnail
v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)"
:entry="entry"
class="pr-2"
/>
<!--Image thumbnail-->
<img
@@ -40,7 +54,7 @@
<!--Item Title-->
<b
class="mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-sm"
:class="{'hover:underline': canEditName}"
:class="{ 'hover:underline': canEditName }"
style="max-width: 240px"
ref="name"
@input="renameItem"
@@ -60,19 +74,23 @@
<!--File & Image sub line-->
<small v-if="!isFolder" class="block text-xs text-gray-500 dark:text-gray-500">
{{ entry.data.attributes.filesize }}, {{ timeStamp }}
</small>
{{ entry.data.attributes.filesize }}, {{ timeStamp }}
</small>
<!--Folder sub line-->
<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>
</div>
</div>
<!-- Mobile item action button-->
<div v-if="mobileHandler && !isMultiSelectMode && $isMobile()" class="relative flex-grow pr-1 text-right">
<div @mouseup.stop="$openInDetailPanel(entry)" class="absolute right-10 -mr-4 hidden -translate-y-2/4 transform p-2.5 lg:block">
<div
@mouseup.stop="$openInDetailPanel(entry)"
class="absolute right-10 -mr-4 hidden -translate-y-2/4 transform p-2.5 lg:block"
>
<eye-icon size="18" class="vue-feather inline-block opacity-30" />
</div>
<div @mouseup.stop="showItemActions" class="absolute right-0 -mr-4 -translate-y-2/4 transform p-2.5">
@@ -149,7 +167,9 @@ export default {
)
},
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() {
return !this.isFolder && this.user.data.id !== this.entry.data.relationships.owner.data.id
@@ -182,14 +202,14 @@ export default {
this.itemName = this.entry.data.attributes.name
// Change item name
events.$on('change:name', item => {
events.$on('change:name', (item) => {
if (this.entry.data.id === item.id) {
this.itemName = item.name
}
this.itemName = item.name
}
})
// Autofocus after newly created folder
events.$on('newFolder:focus', id => {
events.$on('newFolder:focus', (id) => {
if (!this.$isMobile() && this.entry.data.id === id) {
this.$refs.name.focus()
document.execCommand('selectAll')
resources/js/components/FilesView/MemberAvatar.vue
+3 -1
View File
@@ -39,7 +39,9 @@ export default {
props: ['isBorder', 'member', 'size'],
computed: {
letter() {
let string = this.member.data.attributes.name ? this.member.data.attributes.name : this.member.data.attributes.email
let string = this.member.data.attributes.name
? this.member.data.attributes.name
: this.member.data.attributes.email
return string.substr(0, 1)
},
resources/js/components/FilesView/MobileMultiSelectToolbar.vue
+6 -1
View File
@@ -5,7 +5,12 @@
<slot v-if="$slots.editor && $checkPermission('editor')" name="editor" />
<slot v-if="$slots.visitor && $checkPermission('visitor')" name="visitor" />
<ToolbarButton @click.native="closeSelecting" class="action-btn close-icon" source="close" :action="$t('actions.close')" />
<ToolbarButton
@click.native="closeSelecting"
class="action-btn close-icon"
source="close"
:action="$t('actions.close')"
/>
</div>
</transition>
</template>
resources/js/components/FilesView/NavigationBar.vue
+48 -49
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>
resources/js/components/FilesView/Option.vue
+230 -40
View File
@@ -1,54 +1,244 @@
<template>
<li
class="flex items-center justify-between py-4 px-5"
:class="{'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': !isHoverDisabled}"
class="flex items-center justify-between py-3.5 px-5"
:class="{ 'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': !isHoverDisabled }"
>
<div class="flex items-center">
<div class="mr-4">
<calendar-icon v-if="icon === 'calendar'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<grid-icon v-if="icon === 'grid'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<list-icon v-if="icon === 'list'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<trash-2-icon v-if="icon === 'trash'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<life-buoy-icon v-if="icon === 'restore'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<trash-icon v-if="icon === 'empty-trash'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<eye-icon v-if="icon === 'detail'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<download-cloud-icon v-if="icon === 'download'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<edit2-icon v-if="icon === 'rename'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<corner-down-right-icon v-if="icon === 'move-item'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<link-icon v-if="icon === 'share'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<star-icon v-if="icon === 'favourites'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<folder-plus-icon v-if="icon === 'create-folder'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<smile-icon v-if="icon === 'no-options'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<paperclip-icon v-if="icon === 'zip-folder'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<alphabet-icon v-if="icon === 'alphabet'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<star-icon v-if="icon === 'star'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<hard-drive-icon v-if="icon === 'hard-drive'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<upload-cloud-icon v-if="icon === 'upload-cloud'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<users-icon v-if="icon === 'users'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<user-icon v-if="icon === 'user'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<user-plus-icon v-if="icon === 'user-plus'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<user-minus-icon v-if="icon === 'user-minus'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<user-check-icon v-if="icon === 'user-check'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<settings-icon v-if="icon === 'settings'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<power-icon v-if="icon === 'power'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<lock-icon v-if="icon === 'lock'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<cloud-icon v-if="icon === 'cloud'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<credit-card-icon v-if="icon === 'credit-card'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<file-text-icon v-if="icon === 'file-text'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<database-icon v-if="icon === 'database'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<globe-icon v-if="icon === 'globe'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<monitor-icon v-if="icon === 'monitor'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<box-icon v-if="icon === 'box'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<folder-plus-icon v-if="icon === 'folder-plus'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<calendar-icon
v-if="icon === 'calendar'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<grid-icon
v-if="icon === 'grid'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<list-icon
v-if="icon === 'list'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<trash-2-icon
v-if="icon === 'trash'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<life-buoy-icon
v-if="icon === 'restore'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<trash-icon
v-if="icon === 'empty-trash'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<eye-icon
v-if="icon === 'detail'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<download-cloud-icon
v-if="icon === 'download'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<edit2-icon
v-if="icon === 'rename'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<corner-down-right-icon
v-if="icon === 'move-item'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<link-icon
v-if="icon === 'share'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<star-icon
v-if="icon === 'favourites'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<folder-plus-icon
v-if="icon === 'create-folder'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<smile-icon
v-if="icon === 'no-options'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<paperclip-icon
v-if="icon === 'zip-folder'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<alphabet-icon
v-if="icon === 'alphabet'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<star-icon
v-if="icon === 'star'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<hard-drive-icon
v-if="icon === 'hard-drive'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<upload-cloud-icon
v-if="icon === 'upload-cloud'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<users-icon
v-if="icon === 'users'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<user-icon
v-if="icon === 'user'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<user-plus-icon
v-if="icon === 'user-plus'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<user-minus-icon
v-if="icon === 'user-minus'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<user-check-icon
v-if="icon === 'user-check'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<settings-icon
v-if="icon === 'settings'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<power-icon
v-if="icon === 'power'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<lock-icon
v-if="icon === 'lock'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<cloud-icon
v-if="icon === 'cloud'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<credit-card-icon
v-if="icon === 'credit-card'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<file-text-icon
v-if="icon === 'file-text'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<database-icon
v-if="icon === 'database'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<globe-icon
v-if="icon === 'globe'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<monitor-icon
v-if="icon === 'monitor'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<box-icon
v-if="icon === 'box'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
<folder-plus-icon
v-if="icon === 'folder-plus'"
size="17"
class="vue-feather group-hover-text-theme"
:class="{ 'text-theme': isActive }"
/>
</div>
<b class="group-hover-text-theme text-sm font-bold" :class="{ 'text-theme': isActive }">
{{ title }}
</b>
</div>
<div v-if="arrow" class="ml-2">
<chevron-right-icon v-if="arrow === 'right'" size="14" class="vue-feather group-hover-text-theme opacity-50" :class="{ 'text-theme': isActive }" />
<arrow-up-icon v-if="arrow === 'up'" size="14" class="vue-feather group-hover-text-theme opacity-50" :class="{ 'text-theme': isActive }" />
<arrow-down-icon v-if="arrow === 'down'" size="14" class="vue-feather group-hover-text-theme opacity-50" :class="{ 'text-theme': isActive }" />
<chevron-right-icon
v-if="arrow === 'right'"
size="14"
class="vue-feather group-hover-text-theme opacity-50"
:class="{ 'text-theme': isActive }"
/>
<arrow-up-icon
v-if="arrow === 'up'"
size="14"
class="vue-feather group-hover-text-theme opacity-50"
:class="{ 'text-theme': isActive }"
/>
<arrow-down-icon
v-if="arrow === 'down'"
size="14"
class="vue-feather group-hover-text-theme opacity-50"
:class="{ 'text-theme': isActive }"
/>
</div>
</li>
</template>
resources/js/components/FilesView/OptionGroup.vue
+9 -11
View File
@@ -1,19 +1,17 @@
<template>
<div>
<b v-if="title" class="py-0.5 px-4 mt-2 block text-xs text-gray-400 dark-text-theme">
{{ title }}
</b>
<ul class="option-group py-1">
<slot></slot>
</ul>
</div>
<div>
<b v-if="title" class="dark-text-theme mt-2 block py-0.5 px-4 text-xs text-gray-400">
{{ title }}
</b>
<ul class="option-group py-1">
<slot></slot>
</ul>
</div>
</template>
<script>
export default {
name: 'OptionGroup',
props: [
'title'
]
props: ['title'],
}
</script>
resources/js/components/FilesView/OptionUpload.vue
+24 -7
View File
@@ -1,16 +1,33 @@
<template>
<label
class="flex items-center py-4 px-5 group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground"
>
class="group flex cursor-pointer items-center py-4 px-5 hover:bg-light-background dark:hover:bg-4x-dark-foreground"
>
<div class="mr-4">
<upload-cloud-icon v-if="type === 'file'" size="17" class="vue-feather group-hover-text-theme" />
<folder-upload-icon v-if="type === 'folder'" size="17" class="vue-feather group-hover-text-theme" />
</div>
<div class="group-hover-text-theme text-sm font-bold text-left">
<div class="group-hover-text-theme text-left text-sm font-bold">
{{ title }}
<input v-if="type === 'file'" @change="emmitFiles" v-show="false" id="file" type="file" name="files[]" multiple />
<input v-if="type === 'folder'" @change="emmitFolder" v-show="false" id="folder" type="file" name="folders[]" webkitdirectory mozdirectory />
<input
v-if="type === 'file'"
@change="emmitFiles"
v-show="false"
id="file"
type="file"
name="files[]"
multiple
/>
<input
v-if="type === 'folder'"
@change="emmitFolder"
v-show="false"
id="folder"
type="file"
name="folders[]"
webkitdirectory
mozdirectory
/>
</div>
</label>
</template>
@@ -30,8 +47,8 @@ export default {
emmitFiles(e) {
this.$uploadFiles(e.target.files)
},
emmitFolder(e) {
this.$store.commit('UPDATE_UPLOADING_FOLDER_STATE', true)
emmitFolder(e) {
this.$store.commit('UPDATE_UPLOADING_FOLDER_STATE', true)
this.$uploadFiles(e.target.files)
},
resources/js/components/FilesView/SearchBar.vue
+7 -2
View File
@@ -1,5 +1,8 @@
<template>
<div @click="$openSpotlight()" class="relative cursor-pointer rounded-lg bg-light-background dark:bg-dark-foreground">
<div
@click="$openSpotlight()"
class="relative cursor-pointer rounded-lg bg-light-background dark:bg-dark-foreground"
>
<div class="flex w-56 items-center justify-between px-4 py-2.5 text-left xl:w-64">
<div class="flex items-center">
<search-icon size="18" class="vue-feather text-gray-400 dark:text-gray-600" />
@@ -7,7 +10,9 @@
{{ $t('inputs.placeholder_search_files') }}
</span>
</div>
<span class="rounded dark:border-slate-200 border px-1 py-0.5 text-xs font-bold tracking-normal text-gray-400 dark:border-opacity-5 dark:text-gray-600">
<span
class="rounded border px-1 py-0.5 text-xs font-bold tracking-normal text-gray-400 dark:border-slate-200 dark:border-opacity-5 dark:text-gray-600"
>
{{ metaKeyIcon }}+K
</span>
</div>
resources/js/components/FilesView/ToolbarButton.vue
+17 -11
View File
@@ -1,5 +1,8 @@
<template>
<button class="group h-[42px] w-[42px] inline-flex items-center justify-center cursor-pointer rounded-lg dark:hover:bg-2x-dark-foreground hover:bg-light-background" :title="action">
<button
class="group inline-flex h-[42px] w-[42px] cursor-pointer items-center justify-center rounded-lg hover:bg-light-background dark:hover:bg-2x-dark-foreground"
:title="action"
>
<corner-down-right-icon v-if="source === 'move'" size="19" class="vue-feather group-hover-text-theme" />
<download-cloud-icon v-if="source === 'download'" size="19" class="vue-feather group-hover-text-theme" />
<folder-plus-icon v-if="source === 'folder-plus'" size="19" class="vue-feather group-hover-text-theme" />
@@ -10,14 +13,19 @@
<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" />
<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" :class="{'text-theme': isVisibleSidebar}" />
<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" />
<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" />
<search-icon v-if="source === 'search'" size="19" class="vue-feather group-hover-text-theme" />
<cloud-off-icon v-if="source === 'shared-off'" size="19" class="vue-feather group-hover-text-theme" />
<sorting-icon v-if="source === 'preview-sorting'" class="scale-125 vue-feather group-hover-text-theme" />
<CloudPlusIcon v-if="source === 'cloud-plus'" class="scale-125 vue-feather group-hover-text-theme" />
<sorting-icon v-if="source === 'preview-sorting'" class="vue-feather group-hover-text-theme scale-125" />
<CloudPlusIcon v-if="source === 'cloud-plus'" class="vue-feather group-hover-text-theme scale-125" />
</button>
</template>
@@ -42,16 +50,14 @@ import {
LinkIcon,
XIcon,
} from 'vue-feather-icons'
import {mapGetters} from "vuex";
import { mapGetters } from 'vuex'
export default {
name: 'ToolbarButton',
props: ['source', 'action'],
computed: {
...mapGetters([
'isVisibleSidebar'
])
},
computed: {
...mapGetters(['isVisibleSidebar']),
},
components: {
SearchIcon,
CloudPlusIcon,
@@ -73,4 +79,4 @@ export default {
XIcon,
},
}
</script>
</script>
resources/js/components/FilesView/UploadProgress.vue
+7 -1
View File
@@ -43,7 +43,13 @@ export default {
XIcon,
},
computed: {
...mapGetters(['filesInQueueUploaded', 'filesInQueueTotal', 'uploadingProgress', 'isProcessingFile', 'fileQueue']),
...mapGetters([
'filesInQueueUploaded',
'filesInQueueTotal',
'uploadingProgress',
'isProcessingFile',
'fileQueue',
]),
},
methods: {
cancelUpload() {