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

UI improvements 2

Browse Source
This commit is contained in:
Čarodej
2022-02-03 18:19:10 +01:00
parent 78f69ca816
commit cad8c31422
22 changed files with 316 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config/language-translations.php
View File

@@ -749,7 +749,7 @@ return [
'popup.share.password_description' => 'Protect your item by your custom password.',
'sharelink.share_via_email' => 'Share Link on Emails',
'sharelink.copy_embed' => 'Copy Web Insert Code',
'popup.move_into_team_disclaimer' => 'Your folder <b class="text-theme dark-text-theme">will be moved</b> into Team Folders.',
'popup.move_into_team_disclaimer' => 'Your folder <b class="text-theme dark-text-theme">will be moved</b> into Team Folders section.',
'actions.upload_folder' => 'Upload Folder',
],
];

4
resources/css/tailwind.css vendored
View File

@@ -16,4 +16,8 @@
.text-limit {
@apply whitespace-nowrap text-ellipsis overflow-x-hidden block
}
.is-inactive {
@apply pointer-events-none opacity-40
}

2
resources/js/components/Desktop/PopoverItem.vue
View File

@@ -3,7 +3,7 @@
<!--Overlay component-->
<div
@click.capture="hidePopover"
class="absolute top-12 z-20 w-60 overflow-hidden rounded-lg bg-white shadow-xl dark:bg-dark-foreground"
class="absolute top-12 z-20 w-60 overflow-hidden rounded-xl bg-white shadow-xl dark:bg-dark-foreground"
:class="{ 'right-0': side === 'left', 'left-0': side === 'right' }"
>
<slot></slot>

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

@@ -3,7 +3,7 @@
v-show="isVisible"
:style="{ top: positionY + 'px', left: positionX + 'px' }"
@click="closeAndResetContextMenu"
class="absolute z-20 w-60 overflow-hidden rounded-xl bg-white shadow-lg dark:bg-2x-dark-foreground"
class="absolute z-20 w-60 overflow-hidden rounded-xl bg-white shadow-lg dark:bg-2x-dark-foreground select-none"
ref="contextmenu"
>
<div id="menu-list" class="w-full">

353
resources/js/components/FilesView/DesktopToolbar.vue
View File

@@ -1,106 +1,43 @@
<template>
<div id="desktop-toolbar" class="hidden lg:block">
<div class="toolbar-wrapper">
<div @click="goBack" class="location">
<div v-if="!isVisibleNavigationBars" @click="toggleNavigationBars" class="mr-2">
<menu-icon size="17" />
</div>
<div class="hidden lg:block">
<div class="flex items-center justify-between py-3">
<NavigationBar />
<chevron-left-icon
:class="{
'-translate-x-3 opacity-0': !currentFolder,
'translate-x-0 opacity-100': currentFolder,
}"
class="icon-back transform transition-all duration-200"
size="17"
/>
<div class="flex items-center">
<!--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')" :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 }"
:title="$t('actions.create_folder')"
icon="folder-plus"
/>
<Option
@click.stop.native="$createTeamFolder"
:class="{ 'is-inactive': canCreateTeamFolder || isSharedWithMeHomepage }"
:title="$t('Create Team Folder')"
icon="users"
/>
</OptionGroup>
</PopoverItem>
</PopoverWrapper>
<span :class="{ '-translate-x-4': !currentFolder }" class="location-title transform transition-all duration-200">
{{ $getCurrentLocationName() }}
</span>
<span
:class="{
'-translate-x-4 opacity-0': !currentFolder,
'translate-x-0 opacity-100': currentFolder,
}"
@click.stop="folderActions"
class="location-more group transform transition-all duration-200"
id="folder-actions"
>
<more-horizontal-icon size="14" class="icon-more group-hover-text-theme" />
</span>
</div>
<ToolbarWrapper>
<!--Search bar-->
<ToolbarGroup class="ml-0">
<SearchBar class="hidden lg:block" />
</ToolbarGroup>
<!--Create button for all pages except SharedWithMe-->
<ToolbarGroup v-if="$checkPermission(['master', 'editor']) && !$isThisRoute($route, ['SharedWithMe'])">
<span class="block lg:hidden">
<ToolbarButton @click.stop.native="$openSpotlight()" source="search" :action="$t('Search files or folders')" />
</span>
<PopoverWrapper>
<ToolbarButton @click.stop.native="showCreateMenu" source="cloud-plus" :action="$t('actions.create')" />
<PopoverItem name="desktop-create" side="left">
<OptionGroup :class="{ 'is-inactive': canUploadInView }">
<OptionUpload :title="$t('actions.upload')" type="file" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" />
</OptionGroup>
<OptionGroup>
<Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" />
<Option
@click.stop.native="$createFolder"
:class="{
'is-inactive': canCreateFolderInView || isTeamFolderHomepage,
}"
:title="$t('actions.create_folder')"
icon="folder-plus"
/>
</OptionGroup>
</PopoverItem>
</PopoverWrapper>
</ToolbarGroup>
<!--Create button for shared with me page-->
<ToolbarGroup v-if="$isThisRoute($route, ['SharedWithMe'])">
<span class="block lg:hidden">
<ToolbarButton @click.stop.native="$openSpotlight()" source="search" :action="$t('Search files or folders')" />
</span>
<PopoverWrapper>
<ToolbarButton @click.stop.native="showCreateMenu" source="cloud-plus" :class="{ 'is-inactive': !canEdit }" :action="$t('actions.create')" />
<PopoverItem name="desktop-create" side="left">
<OptionGroup>
<OptionUpload
:class="{
'is-inactive': canUploadInView || isSharedWithMeHomepage,
}"
:title="$t('actions.upload')"
/>
</OptionGroup>
<OptionGroup>
<Option
@click.stop.native="$createFolder"
:class="{
'is-inactive': canCreateFolderInView || isSharedWithMeHomepage,
}"
:title="$t('actions.create_folder')"
icon="folder-plus"
/>
</OptionGroup>
</PopoverItem>
</PopoverWrapper>
</ToolbarGroup>
<SearchBar class="ml-5 hidden lg:block xl:ml-8" />
<!--File Controls-->
<ToolbarGroup v-if="$checkPermission(['master', 'editor']) || ($isMobile() && $isThisRoute($route, ['SharedWithMe', 'TeamFolders']))">
<div class="ml-5 flex items-center xl:ml-8">
<!--Team Heads-->
<PopoverWrapper v-if="$isThisRoute($route, ['TeamFolders', 'SharedWithMe'])">
<TeamMembersButton
@@ -112,24 +49,36 @@
<PopoverItem name="team-folder" side="left">
<TeamFolderPreview />
<OptionGroup v-if="$isThisRoute($route, ['TeamFolders'])">
<Option @click.native="$updateTeamFolder(teamFolder)" :title="$t('Edit Members')" icon="rename" />
<Option @click.native="$dissolveTeamFolder(teamFolder)" :title="$t('Dissolve Team')" icon="trash" />
<OptionGroup v-if="$isThisRoute($route, ['TeamFolders'])" :title="$t('Options')">
<Option
@click.native="$updateTeamFolder(teamFolder)"
:title="$t('Edit Members')"
icon="rename"
/>
<Option
@click.native="$dissolveTeamFolder(teamFolder)"
:title="$t('Dissolve Team')"
icon="trash"
/>
</OptionGroup>
<OptionGroup v-if="$isThisRoute($route, ['SharedWithMe'])">
<Option @click.native="$detachMeFromTeamFolder(teamFolder)" :title="$t('Leave the Team Folder')" icon="user-minus" />
<OptionGroup v-if="$isThisRoute($route, ['SharedWithMe'])" :title="$t('Options')">
<Option
@click.native="$detachMeFromTeamFolder(teamFolder)"
:title="$t('Leave the Team Folder')"
icon="user-minus"
/>
</OptionGroup>
</PopoverItem>
</PopoverWrapper>
<!--Item actions-->
<span v-if="!$isMobile()" class="whitespace-nowrap">
<!--Action buttons-->
<div v-if="!$isMobile()" class="flex items-center">
<ToolbarButton
v-if="canShowConvertToTeamFolder"
@click.native="$convertAsTeamFolder(clipboard[0])"
:class="{
'is-inactive': !canCreateTeamFolderInView,
'is-inactive': !canCreateTeamFolder,
}"
source="user-plus"
:action="$t('actions.convert_into_team_folder')"
@@ -137,11 +86,12 @@
<ToolbarButton
v-if="!$isThisRoute($route, ['SharedWithMe', 'Public'])"
@click.native="$shareFileOrFolder(clipboard[0])"
:class="{ 'is-inactive': canShareInView }"
:class="{
'is-inactive': canShareInView,
}"
source="share"
:action="$t('actions.share')"
/>
<ToolbarButton
@click.native="$moveFileOrFolder(clipboard[0])"
:class="{
@@ -158,20 +108,28 @@
source="trash"
:action="$t('actions.delete')"
/>
</span>
</ToolbarGroup>
</div>
</div>
<!--View Controls-->
<ToolbarGroup>
<div class="ml-5 flex items-center xl:ml-8">
<PopoverWrapper>
<ToolbarButton @click.stop.native="showSortingMenu" source="preview-sorting" :action="$t('actions.sorting_view')" />
<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" />
</ToolbarGroup>
</ToolbarWrapper>
<ToolbarButton
@click.native="$store.dispatch('fileInfoToggle')"
:action="$t('actions.info_panel')"
source="info"
/>
</div>
</div>
</div>
<UploadProgress />
@@ -179,48 +137,51 @@
</template>
<script>
import FileSortingOptions from './FileSortingOptions'
import UploadProgress from './UploadProgress'
import TeamMembersButton from '../Teams/Components/TeamMembersButton'
import TeamFolderPreview from '../Teams/Components/TeamFolderPreview'
import PopoverWrapper from '../Desktop/PopoverWrapper'
import ToolbarWrapper from '../Desktop/ToolbarWrapper'
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 ToolbarGroup from '../Desktop/ToolbarGroup'
import OptionGroup from './OptionGroup'
import TeamMembersButton from '../Teams/Components/TeamMembersButton'
import PopoverItem from '../Desktop/PopoverItem'
import TeamFolderPreview from '../Teams/Components/TeamFolderPreview'
import { MenuIcon, ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
import SearchBar from './SearchBar'
import Option from './Option'
import { events } from '../../bus'
import { mapGetters } from 'vuex'
import Option from './Option'
export default {
name: 'DesktopToolbar',
components: {
TeamMembersButton,
FileSortingOptions,
MoreHorizontalIcon,
TeamMembersButton,
TeamFolderPreview,
ChevronLeftIcon,
ToolbarWrapper,
UploadProgress,
PopoverWrapper,
NavigationBar,
ToolbarButton,
OptionUpload,
ToolbarGroup,
OptionGroup,
PopoverItem,
SearchBar,
MenuIcon,
Option,
},
computed: {
...mapGetters(['isVisibleNavigationBars', 'currentTeamFolder', 'currentFolder', 'sharedDetail', 'clipboard', 'user']),
...mapGetters([
'isVisibleNavigationBars',
'currentTeamFolder',
'currentFolder',
'sharedDetail',
'clipboard',
'user',
]),
canEdit() {
if (this.currentTeamFolder && this.user && this.clipboard[0]) {
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'
}
@@ -230,20 +191,13 @@ export default {
teamFolder() {
return this.currentTeamFolder ? this.currentTeamFolder : this.clipboard[0]
},
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
},
isTeamFolderHomepage() {
return this.$isThisRoute(this.$route, ['TeamFolders']) && !this.$route.params.id
},
isSharedWithMeHomepage() {
return this.$isThisRoute(this.$route, ['SharedWithMe']) && !this.$route.params.id
},
canCreateFolderInView() {
canCreateFolder() {
return !this.$isThisRoute(this.$route, ['Files', 'Public', 'TeamFolders', 'SharedWithMe'])
},
canShowConvertToTeamFolder() {
@@ -264,19 +218,15 @@ export default {
let routes = ['TeamFolders', 'RecentUploads', 'MySharedItems', 'Public', 'Files']
return !this.$isThisRoute(this.$route, routes) || this.clipboard.length > 1 || this.clipboard.length === 0
},
canCreateTeamFolderInView() {
let routes = ['MySharedItems', 'Files']
return this.$isThisRoute(this.$route, routes) && this.clipboard.length === 1 && this.clipboard[0].data.type === 'folder'
canCreateTeamFolder() {
return (
this.$isThisRoute(this.$route, ['MySharedItems', 'Files']) &&
this.clipboard.length === 1 &&
this.clipboard[0].data.type === 'folder'
)
},
},
methods: {
toggleNavigationBars() {
this.$store.dispatch('toggleNavigationBars')
},
goBack() {
if (this.isNotHomepage) this.$router.back()
},
showTeamFolderMenu() {
if (this.teamFolder) events.$emit('popover:open', 'team-folder')
},
@@ -292,108 +242,3 @@ export default {
},
}
</script>
<style scoped lang="scss">
@import 'resources/sass/vuefilemanager/_variables';
@import 'resources/sass/vuefilemanager/_mixins';
.is-inactive {
opacity: 0.25;
pointer-events: none;
}
.toolbar-wrapper {
padding-top: 10px;
padding-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 2;
}
.location {
align-items: center;
cursor: pointer;
display: flex;
.icon-back {
@include transition(150ms);
pointer-events: none;
margin-right: 6px;
shrink: 0;
}
.location-title {
@include font-size(15);
line-height: 1;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: $text;
}
.location-more {
margin-left: 6px;
padding: 1px 4px;
line-height: 0;
border-radius: 3px;
svg circle {
@include transition(150ms);
}
&:hover {
background: $light_background;
svg circle {
color: inherit;
}
}
}
}
.toolbar-position {
text-align: center;
span {
@include font-size(17);
font-weight: 600;
}
}
@media only screen and (max-width: 1024px) {
.location {
.location-title {
max-width: 120px;
}
}
.toolbar-tools {
.button {
margin-left: 0;
height: 40px;
width: 40px;
}
}
}
.dark {
.toolbar .directory-name {
color: $dark_mode_text_primary;
}
.location {
.location-title {
color: $dark_mode_text_primary;
}
.location-more {
&:hover {
background: $dark_mode_foreground;
}
}
}
}
</style>

4
resources/js/components/FilesView/FileFilterMobile.vue
View File

@@ -1,13 +1,13 @@
<template>
<MenuMobile name="file-filter">
<MenuMobileGroup>
<OptionGroup>
<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" />
</OptionGroup>
<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="goToSharedWithMe"

4
resources/js/components/FilesView/FileSortingOptions.vue
View File

@@ -1,10 +1,10 @@
<template>
<div>
<OptionGroup>
<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" />
</OptionGroup>
<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" />
</OptionGroup>

8
resources/js/components/FilesView/InfoSidebar.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="hidden h-screen 2xl:w-[360px] w-[320px] shrink-0 overflow-y-auto overflow-x-hidden px-2.5 lg:block">
<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">
<!--Is empty clipboard-->
<div v-if="isEmpty" class="flex h-full items-center justify-center">
<div class="text-center">
<eye-off-icon size="28" class="vue-feather mb-3 inline-block text-gray-400" />
<small class="block text-sm text-gray-400">
<eye-off-icon size="22" class="vue-feather mb-3 inline-block text-gray-500" />
<small class="block text-xs text-gray-500">
{{ $t('messages.nothing_to_preview') }}
</small>
</div>
@@ -60,7 +60,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="font-sm ml-3 block font-bold">
<span class="text-sm ml-3 block font-bold">
{{ singleFile.data.relationships.owner.data.attributes.name }}
</span>
</div>

82
resources/js/components/FilesView/MobileToolbar.vue
View File

@@ -1,43 +1,24 @@
<template>
<div class="sticky top-0 z-20 block flex w-full items-center justify-between bg-white py-5 px-4 text-center dark:bg-dark-background lg:hidden">
<!-- Go back-->
<div @click="goBack" class="go-back-button flex items-center text-left">
<chevron-left-icon
size="17"
:class="{
'-translate-x-3 opacity-0': !isLoadedFolder,
'translate-x-0 opacity-100': isLoadedFolder,
}"
class="mr-2 -ml-1 transform cursor-pointer align-middle transition-all duration-200"
/>
<!--Folder Title-->
<div
:class="{ '-translate-x-4': !isLoadedFolder }"
class="inline-block transform overflow-hidden text-ellipsis whitespace-nowrap align-middle text-sm font-bold transition-all duration-200 lg:text-base"
style="max-width: 200px"
>
{{ $getCurrentLocationName() }}
</div>
<span
@click.stop="showItemActions"
:class="{
'-translate-x-4 opacity-0': !currentFolder,
'translate-x-0 opacity-100': currentFolder,
}"
class="ml-3 transform rounded-md bg-light-background py-0.5 px-1.5 transition-all duration-200 dark:bg-dark-foreground"
>
<more-horizontal-icon size="14" />
</span>
</div>
<div
class="sticky top-0 z-20 block flex w-full items-center justify-between bg-white py-5 px-4 text-center dark:bg-dark-background lg:hidden"
>
<NavigationBar />
<div class="relative flex items-center">
<TeamMembersButton v-if="$isThisRoute($route, ['TeamFolders', 'SharedWithMe'])" size="28" @click.stop.native="$showMobileMenu('team-menu')" class="absolute right-9" />
<TeamMembersButton
v-if="$isThisRoute($route, ['TeamFolders', 'SharedWithMe'])"
size="28"
@click.stop.native="$showMobileMenu('team-menu')"
class="absolute right-9"
/>
<!--More Actions-->
<div class="relative">
<div v-if="$checkPermission('master')" @click="showMobileNavigation" class="absolute right-0 -mr-2 -translate-y-2/4 transform p-4">
<div
v-if="$checkPermission('master')"
@click="showMobileNavigation"
class="absolute right-0 -mr-2 -translate-y-2/4 transform p-4"
>
<menu-icon size="17" />
</div>
</div>
@@ -48,49 +29,22 @@
<script>
import TeamMembersPreview from '../Teams/Components/TeamMembersPreview'
import TeamMembersButton from '../Teams/Components/TeamMembersButton'
import ToolbarButton from './ToolbarButton'
import SearchBar from './SearchBar'
import { MenuIcon, ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
import { mapGetters } from 'vuex'
import { events } from '../../bus'
import { MenuIcon } from 'vue-feather-icons'
import NavigationBar from './NavigationBar'
export default {
name: 'MobileToolBar',
components: {
NavigationBar,
TeamMembersPreview,
MoreHorizontalIcon,
TeamMembersButton,
ChevronLeftIcon,
ToolbarButton,
SearchBar,
MenuIcon,
},
computed: {
...mapGetters(['currentTeamFolder', 'isVisibleSidebar', 'currentFolder', 'itemViewType', 'clipboard']),
isLoadedFolder() {
return this.$route.params.id
},
},
methods: {
showItemActions() {
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)
},
showMobileNavigation() {
this.$showMobileMenu('user-navigation')
this.$store.commit('DISABLE_MULTISELECT_MODE')
},
goBack() {
if (this.isLoadedFolder) this.$router.back()
},
},
created() {
events.$on('show:content', () => {
if (this.isSidebarMenu) this.isSidebarMenu = false
})
},
}
</script>

88
resources/js/components/FilesView/NavigationBar.vue Normal file
View File

@@ -0,0 +1,88 @@
<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">
<menu-icon size="17" />
</div>
<chevron-left-icon
size="17"
:class="{
'-translate-x-3 opacity-0': !isLoadedFolder,
'translate-x-0 opacity-100': isLoadedFolder,
}"
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="inline-block transform overflow-hidden text-ellipsis whitespace-nowrap align-middle text-sm font-bold transition-all duration-200 max-w-[200px]"
>
{{ $getCurrentLocationName() }}
</b>
<div
@click.stop="showItemActions"
:class="{
'-translate-x-4 opacity-0': !currentFolder,
'translate-x-0 opacity-100': currentFolder,
}"
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"
>
<more-horizontal-icon size="14" />
</div>
</div>
</template>
<script>
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
}
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')
},
}
}
</script>

4
resources/js/components/FilesView/Option.vue
View File

@@ -1,9 +1,7 @@
<template>
<li
class="flex items-center justify-between py-4 px-5 lg:py-3 2xl:py-4"
:class="{
'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': !isHoverDisabled,
}"
:class="{'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': !isHoverDisabled,}"
>
<div class="flex items-center">
<div class="mr-4">

30
resources/js/components/FilesView/OptionGroup.vue
View File

@@ -1,23 +1,31 @@
<template>
<ul class="option-group py-1">
<slot></slot>
</ul>
<div>
<b v-if="title" class="py-0.5 px-4 mt-2 block text-xs text-gray-500 dark-text-theme">
{{ title }}
</b>
<ul class="option-group py-1">
<slot></slot>
</ul>
</div>
</template>
<script>
export default {
name: 'OptionGroup',
props: [
'title'
]
}
</script>
<style scoped lang="scss">
.option-group {
&:first-child {
padding-top: 0 !important;
}
.option-group {
&:first-child {
padding-top: 0 !important;
}
&:last-child {
padding-bottom: 0 !important;
}
}
&:last-child {
padding-bottom: 0 !important;
}
}
</style>

63
resources/js/components/FilesView/OptionUpload.vue
View File

@@ -1,14 +1,16 @@
<template>
<label class="menu-option group">
<div class="icon-left group-hover-text-theme">
<upload-cloud-icon v-if="type === 'file'" size="17" class="group-hover-text-theme" />
<folder-upload-icon v-if="type === 'folder'" size="17" class="group-hover-text-theme" />
<label
class="flex items-center py-4 px-5 lg:py-3 2xl:py-4"
:class="{'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': ! isHoverDisabled,}"
>
<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="text-label group-hover-text-theme">
<div class="group-hover-text-theme text-sm font-bold text-left">
{{ title }}
<input v-if="type === 'file'" @change="emmitFiles" v-show="false" id="file" type="file" name="files[]" multiple />
<input v-if="type === 'folder'" @change="emmitFiles" v-show="false" id="folder" type="file" name="folders[]" webkitdirectory mozdirectory />
</div>
</label>
@@ -32,52 +34,3 @@ export default {
},
}
</script>
<style scoped lang="scss">
@import 'resources/sass/vuefilemanager/_variables';
@import 'resources/sass/vuefilemanager/_mixins';
.menu-option {
white-space: nowrap;
font-weight: 700;
@include font-size(14);
padding: 15px 20px;
cursor: pointer;
width: 100%;
color: $text;
display: flex;
align-items: center;
.icon-left {
margin-right: 20px;
line-height: 0;
path,
line,
polyline,
rect,
circle,
polygon {
color: inherit;
}
}
.text-label {
@include font-size(16);
}
&:hover {
background: $light_background;
}
}
.dark {
.menu-option {
color: $dark_mode_text_primary;
&:hover {
background: lighten($dark_mode_foreground, 2%);
}
}
}
</style>

6
resources/js/components/FilesView/SearchBar.vue
View File

@@ -1,13 +1,13 @@
<template>
<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-5 py-2.5 text-left xl:w-72">
<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" />
<span class="pl-2.5 text-xs font-bold text-gray-400 dark:text-gray-600 xl:text-sm">
<span class="pl-2.5 text-xs font-bold text-gray-400 dark:text-gray-600">
{{ $t('inputs.placeholder_search_files') }}
</span>
</div>
<span class="rounded border px-1 py-0.5 text-xs font-bold tracking-normal text-gray-400 dark:border-opacity-5 dark:text-gray-600 xl:text-sm">
<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">
{{ metaKeyIcon }}+K
</span>
</div>

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

@@ -1,5 +1,5 @@
<template>
<button class="group h-[42px] w-[42px] inline-flex items-center justify-center cursor-pointer rounded-lg hover:bg-light-background" :title="action">
<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">
<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" />

22
resources/js/components/Spotlight/Spotlight.vue
View File

@@ -91,6 +91,7 @@
<trash-icon v-if="result.action.value === 'empty-trash'" size="18" class="vue-feather text-theme" />
<grid-icon v-if="result.action.value === 'toggle-grid-list'" size="18" class="vue-feather text-theme" />
<smile-icon v-if="result.action.value === 'toggle-emoji'" size="18" class="vue-feather text-theme" />
<folder-plus-icon v-if="result.action.value === 'create-team-folder'" size="18" class="vue-feather text-theme" />
<b class="ml-3.5 text-sm font-bold">
{{ result.title }}
@@ -171,6 +172,7 @@ import KeyboardHints from './KeyboardHints'
import axios from 'axios'
import { debounce } from 'lodash'
import {
FolderPlusIcon,
SmileIcon,
BoxIcon,
CreditCardIcon,
@@ -201,6 +203,7 @@ import { mapGetters } from 'vuex'
export default {
name: 'Spotlight',
components: {
FolderPlusIcon,
SmileIcon,
KeyboardHints,
CreditCardIcon,
@@ -380,6 +383,16 @@ export default {
},
]
let createList = [
{
title: this.$t('Create Team Folder'),
action: {
type: 'function',
value: 'create-team-folder',
},
},
]
let functionList = [
{
title: this.$t('Toggle Grid/List View'),
@@ -452,11 +465,11 @@ export default {
})
}
return [].concat.apply([], [functionList, userSettings, fileLocations, adminLocations, adminActions])
return [].concat.apply([], [functionList, createList, userSettings, fileLocations, adminLocations, adminActions])
}
if (this.user.data.attributes.role === 'user') {
return [].concat.apply([], [functionList, userSettings, fileLocations])
return [].concat.apply([], [functionList, createList, userSettings, fileLocations])
}
},
isAdmin() {
@@ -584,6 +597,10 @@ export default {
if (arg.action.value === 'empty-trash') {
this.$emptyTrashQuietly()
}
if (arg.action.value === 'create-team-folder') {
this.$createTeamFolder()
}
}
this.exitSpotlight()
@@ -673,7 +690,6 @@ export default {
this.results = []
this.query = ''
this.isVisible = false
events.$emit('popup:close')
},
onPageDown() {
let results = this.results.length

21
resources/js/components/Teams/Components/TeamFolderPreview.vue
View File

@@ -1,10 +1,12 @@
<template>
<div class="team-folder-preview py-3 px-5 text-left">
<div class="py-3 px-5 text-left">
<div class="info">
<b class="title text-sm">
{{ teamFolder.data.attributes.name }}
</b>
<span class="subtitle mb-2 block text-tiny text-gray-600 dark:text-gray-500"> Created at {{ teamFolder.data.attributes.created_at }} </span>
<span class="subtitle mb-2 block text-tiny text-gray-600 dark:text-gray-500">
{{ $t('Created at') }} {{ teamFolder.data.attributes.created_at }}
</span>
<TeamMembersPreview :folder="teamFolder" :avatar-size="32" class="members" />
</div>
</div>
@@ -27,18 +29,3 @@ export default {
},
}
</script>
<style lang="scss" scoped>
@import 'resources/sass/vuefilemanager/_variables';
@import 'resources/sass/vuefilemanager/_mixins';
.team-folder-preview {
border-bottom: 1px solid $light_mode_border;
}
.dark {
.team-folder-preview {
border-color: $dark_mode_border_color;
}
}
</style>

34
resources/js/components/Teams/CreateTeamFolderPopup.vue
View File

@@ -50,19 +50,20 @@
<!--Member list-->
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Members" rules="required" v-slot="{ errors }">
<label class="input-label">{{ $t('Your Members') }}:</label>
<span v-if="errors[0]" class="error-message" style="margin-top: -5px">
{{ $t('Please add at least one member.') }}
</span>
<AppInputText :title="$t('Your Members')" :error="errors[0]" :is-last="true">
<span v-if="errors[0]" class="error-message" style="margin-top: -5px">
{{ $t('Please add at least one member.') }}
</span>
<TeamList v-model="invitations" />
<TeamList v-model="invitations" />
<p v-if="Object.values(invitations).length === 0" class="text-xs dark:text-gray-500">
{{ $t('Please add at least one member into your Team Folder.') }}
</p>
<p v-if="Object.values(invitations).length === 0" class="text-xs dark:text-gray-500">
{{ $t('Please add at least one member into your Team Folders.') }}
</p>
</AppInputText>
</ValidationProvider>
<InfoBox v-if="!isNewFolderTeamCreation" style="margin-bottom: 0">
<InfoBox v-if="!isNewFolderTeamCreation" class="mt-2.5 !mb-0">
<p v-html="$t('popup.move_into_team_disclaimer')"></p>
</InfoBox>
</ValidationObserver>
@@ -215,7 +216,7 @@ export default {
this.email = undefined
},
},
mounted() {
created() {
events.$on('popup:open', (args) => {
if (args.name !== 'create-team-folder') return
@@ -226,7 +227,7 @@ export default {
if (this.item) this.$refs.email.focus()
if (!this.item) this.$refs.name.focus()
if (!this.item && this.$refs.name) this.$refs.name.focus()
})
})
@@ -238,17 +239,6 @@ export default {
this.invitations = []
}, 150)
})
console.log()
},
}
</script>
<style scoped lang="scss">
@import 'resources/sass/vuefilemanager/_inapp-forms.scss';
@import '../../../sass/vuefilemanager/forms';
.item-thumbnail {
margin-bottom: 20px;
}
</style>

43
resources/js/helpers/itemHelpers.js vendored
View File

@@ -65,7 +65,8 @@ const itemHelpers = {
store.dispatch('downloadZip')
}
}
;(Vue.prototype.$dissolveTeamFolder = function (folder) {
Vue.prototype.$dissolveTeamFolder = function (folder) {
events.$emit('confirm:open', {
title: i18n.t('Are you sure you want to dissolve this team?'),
message: i18n.t('All team members will lose access to your files and existing folder will be moved into your "Files" section.'),
@@ -74,27 +75,29 @@ const itemHelpers = {
operation: 'dissolve-team-folder',
},
})
}),
(Vue.prototype.$detachMeFromTeamFolder = function (folder) {
events.$emit('confirm:open', {
title: i18n.t('Are you sure you want to leave this team folder?'),
message: i18n.t("You will don't have access to the files and all your previously uploaded content will be part of this Team Folder you are leaving."),
action: {
id: folder.data.id,
operation: 'leave-team-folder',
},
})
}),
(Vue.prototype.$createTeamFolder = function () {
// Show alert message when create folder is disabled
if (!store.getters.user.data.meta.restrictions.canCreateTeamFolder) {
Vue.prototype.$temporarilyDisabledFolderCreate()
}
return
}
events.$emit('popup:open', { name: 'create-team-folder' })
Vue.prototype.$detachMeFromTeamFolder = function (folder) {
events.$emit('confirm:open', {
title: i18n.t('Are you sure you want to leave this team folder?'),
message: i18n.t("You will don't have access to the files and all your previously uploaded content will be part of this Team Folder you are leaving."),
action: {
id: folder.data.id,
operation: 'leave-team-folder',
},
})
}
Vue.prototype.$createTeamFolder = function () {
// Show alert message when create folder is disabled
if (!store.getters.user.data.meta.restrictions.canCreateTeamFolder) {
Vue.prototype.$temporarilyDisabledFolderCreate()
return
}
events.$emit('popup:open', { name: 'create-team-folder' })
}
Vue.prototype.$convertAsTeamFolder = function (entry) {
events.$emit('popup:open', {

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

@@ -8,7 +8,6 @@
icon="favourites"
/>
</OptionGroup>
<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" />
@@ -25,11 +24,11 @@
</MobileContextMenu>
<MobileCreateMenu>
<OptionGroup>
<OptionGroup :title="$t('Upload')">
<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>
<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" />
</OptionGroup>

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

@@ -12,11 +12,11 @@
</MobileContextMenu>
<MobileCreateMenu>
<OptionGroup>
<OptionGroup :title="$t('Upload')">
<OptionUpload :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
</OptionGroup>
<OptionGroup>
<OptionGroup :title="$t('Create')">
<Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
</OptionGroup>
</MobileCreateMenu>

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

@@ -25,11 +25,11 @@
</MobileContextMenu>
<MobileCreateMenu>
<OptionGroup>
<OptionGroup :title="$t('Upload')">
<OptionUpload :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
<OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
</OptionGroup>
<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" />
</OptionGroup>