mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-21 17:12:15 +00:00
vue components refactoring
This commit is contained in:
Čarodej
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="hidden lg:block">
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<NavigationBar />
|
||||
|
||||
<div class="flex items-center">
|
||||
<!--Create button-->
|
||||
<PopoverWrapper v-if="canEdit">
|
||||
<ToolbarButton
|
||||
@click.stop.native="showCreateMenu"
|
||||
source="cloud-plus"
|
||||
:action="$t('create_something')"
|
||||
/>
|
||||
<PopoverItem name="desktop-create" side="left">
|
||||
<OptionGroup :title="$t('upload')">
|
||||
<OptionUpload :title="$t('upload_files')" type="file" />
|
||||
<OptionUpload :title="$t('upload_folder')" type="folder" />
|
||||
</OptionGroup>
|
||||
<OptionGroup :title="$t('create')">
|
||||
<Option
|
||||
@click.native="$createFolder"
|
||||
:title="$t('create_folder')"
|
||||
icon="folder-plus"
|
||||
/>
|
||||
</OptionGroup>
|
||||
</PopoverItem>
|
||||
</PopoverWrapper>
|
||||
|
||||
<!--Search bar-->
|
||||
<SearchBarButton class="ml-5 hidden lg:block xl:ml-8" />
|
||||
|
||||
<!--File Controls-->
|
||||
<div class="ml-5 flex items-center xl:ml-8">
|
||||
<!--Action buttons-->
|
||||
<div v-if="canEdit && !$isMobile()" class="flex items-center">
|
||||
<ToolbarButton
|
||||
@click.native="$moveFileOrFolder(clipboard[0])"
|
||||
:class="{
|
||||
'is-inactive': !canManipulate,
|
||||
}"
|
||||
source="move"
|
||||
:action="$t('move')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
@click.native="$deleteFileOrFolder(clipboard[0])"
|
||||
:class="{
|
||||
'is-inactive': !canManipulate,
|
||||
}"
|
||||
source="trash"
|
||||
:action="$t('delete')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--View Controls-->
|
||||
<div class="ml-5 flex items-center xl:ml-8">
|
||||
<PopoverWrapper>
|
||||
<ToolbarButton
|
||||
@click.stop.native="showSortingMenu"
|
||||
source="preview-sorting"
|
||||
:action="$t('sorting_view')"
|
||||
/>
|
||||
<PopoverItem name="desktop-sorting" side="left">
|
||||
<FileSortingOptions />
|
||||
</PopoverItem>
|
||||
</PopoverWrapper>
|
||||
<ToolbarButton
|
||||
@click.native="$store.dispatch('fileInfoToggle')"
|
||||
:action="$t('info_panel')"
|
||||
source="info"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UploadProgress />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PopoverWrapper from '../../UI/Popover/PopoverWrapper'
|
||||
import FileSortingOptions from '../../Menus/FileSortingOptions'
|
||||
import PopoverItem from '../../UI/Popover/PopoverItem'
|
||||
import UploadProgress from '../../UI/Others/UploadProgress'
|
||||
import NavigationBar from './NavigationBar'
|
||||
import ToolbarButton from '../../UI/Buttons/ToolbarButton'
|
||||
import OptionUpload from '../../Menus/Components/OptionUpload'
|
||||
import OptionGroup from '../../Menus/Components/OptionGroup'
|
||||
import SearchBarButton from '../../UI/Buttons/SearchBarButton'
|
||||
import { events } from '../../../bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
import Option from '../../Menus/Components/Option'
|
||||
|
||||
export default {
|
||||
name: 'DesktopSharepageToolbar',
|
||||
components: {
|
||||
FileSortingOptions,
|
||||
SearchBarButton,
|
||||
UploadProgress,
|
||||
PopoverWrapper,
|
||||
NavigationBar,
|
||||
ToolbarButton,
|
||||
OptionUpload,
|
||||
OptionGroup,
|
||||
PopoverItem,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isVisibleNavigationBars', 'currentTeamFolder', 'currentFolder', 'sharedDetail', 'clipboard']),
|
||||
canEdit() {
|
||||
return this.sharedDetail && this.sharedDetail.data.attributes.permission === 'editor'
|
||||
},
|
||||
canManipulate() {
|
||||
return this.clipboard[0]
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showCreateMenu() {
|
||||
events.$emit('popover:open', 'desktop-create')
|
||||
},
|
||||
showSortingMenu() {
|
||||
events.$emit('popover:open', 'desktop-sorting')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
268
resources/js/components/Layout/Toolbars/DesktopToolbar.vue
Normal file
268
resources/js/components/Layout/Toolbars/DesktopToolbar.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div class="hidden lg:block">
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<NavigationBar />
|
||||
|
||||
<div class="flex items-center">
|
||||
<!--Create button-->
|
||||
<PopoverWrapper>
|
||||
<ToolbarButton
|
||||
@click.stop.native="showCreateMenu"
|
||||
source="cloud-plus"
|
||||
:action="$t('create_something')"
|
||||
/>
|
||||
<PopoverItem name="desktop-create" side="left">
|
||||
<OptionGroup
|
||||
:title="$t('frequently_used')"
|
||||
>
|
||||
<OptionUpload
|
||||
:title="$t('upload_files')"
|
||||
type="file"
|
||||
:class="{
|
||||
'is-inactive': (isSharedWithMe && !canEdit) || canUploadInView || isTeamFolderHomepage || isSharedWithMeHomepage,
|
||||
}"
|
||||
/>
|
||||
<Option
|
||||
@click.native="$createFolder"
|
||||
:class="{
|
||||
'is-inactive': (isSharedWithMe && !canEdit) || canCreateFolder || isTeamFolderHomepage || isSharedWithMeHomepage,
|
||||
}"
|
||||
:title="$t('create_folder')"
|
||||
icon="folder-plus"
|
||||
/>
|
||||
</OptionGroup>
|
||||
<OptionGroup :title="$t('others')">
|
||||
<OptionUpload
|
||||
:class="{
|
||||
'is-inactive': (isSharedWithMe && !canEdit) || canUploadFolderInView || isTeamFolderHomepage || isSharedWithMeHomepage,
|
||||
}"
|
||||
:title="$t('upload_folder')"
|
||||
type="folder"
|
||||
/>
|
||||
<Option
|
||||
@click.stop.native="$createTeamFolder"
|
||||
:class="{ 'is-inactive': canCreateTeamFolder }"
|
||||
:title="$t('create_team_folder')"
|
||||
icon="users"
|
||||
/>
|
||||
<Option
|
||||
@click.native="$createFileRequest"
|
||||
:title="$t('create_file_request')"
|
||||
icon="upload-cloud"
|
||||
/>
|
||||
</OptionGroup>
|
||||
</PopoverItem>
|
||||
</PopoverWrapper>
|
||||
|
||||
<!--Search bar-->
|
||||
<SearchBarButton class="ml-5 hidden lg:block xl:ml-8" />
|
||||
|
||||
<!--File Controls-->
|
||||
<div class="ml-5 flex items-center xl:ml-8">
|
||||
<!--Team Heads-->
|
||||
<PopoverWrapper v-if="$isThisRoute($route, ['TeamFolders', 'SharedWithMe'])">
|
||||
<TeamMembersButton
|
||||
@click.stop.native="showTeamFolderMenu"
|
||||
size="32"
|
||||
class="cursor-pointer rounded-lg py-0.5 pl-2 pr-0.5 hover:bg-light-background dark:hover:bg-dark-foreground"
|
||||
/>
|
||||
|
||||
<PopoverItem name="team-folder" side="left">
|
||||
<TeamFolderPreview />
|
||||
|
||||
<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'])" :title="$t('options')">
|
||||
<Option
|
||||
@click.native="$detachMeFromTeamFolder(teamFolder)"
|
||||
:title="$t('leave_team_folder')"
|
||||
icon="user-minus"
|
||||
/>
|
||||
</OptionGroup>
|
||||
</PopoverItem>
|
||||
</PopoverWrapper>
|
||||
|
||||
<!--Action buttons-->
|
||||
<div v-if="!$isMobile()" class="flex items-center">
|
||||
<ToolbarButton
|
||||
v-if="canShowConvertToTeamFolder"
|
||||
@click.native="$convertAsTeamFolder(clipboard[0])"
|
||||
:class="{
|
||||
'is-inactive': !canCreateTeamFolder,
|
||||
}"
|
||||
source="user-plus"
|
||||
:action="$t('convert_into_team_folder')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
v-if="!$isThisRoute($route, ['SharedWithMe', 'Public'])"
|
||||
@click.native="$shareFileOrFolder(clipboard[0])"
|
||||
:class="{
|
||||
'is-inactive': canShareInView,
|
||||
}"
|
||||
source="share"
|
||||
:action="$t('share_item')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
@click.native="$moveFileOrFolder(clipboard[0])"
|
||||
:class="{
|
||||
'is-inactive': canMoveInView && !canEdit,
|
||||
}"
|
||||
source="move"
|
||||
:action="$t('move')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
@click.native="$deleteFileOrFolder(clipboard[0])"
|
||||
:class="{
|
||||
'is-inactive': canDeleteInView && !canEdit,
|
||||
}"
|
||||
source="trash"
|
||||
:action="$t('delete')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--View Controls-->
|
||||
<div class="ml-5 flex items-center xl:ml-8">
|
||||
<PopoverWrapper>
|
||||
<ToolbarButton
|
||||
@click.stop.native="showSortingMenu"
|
||||
source="preview-sorting"
|
||||
:action="$t('sorting_view')"
|
||||
/>
|
||||
<PopoverItem name="desktop-sorting" side="left">
|
||||
<FileSortingOptions />
|
||||
</PopoverItem>
|
||||
</PopoverWrapper>
|
||||
<ToolbarButton
|
||||
@click.native="$store.dispatch('fileInfoToggle')"
|
||||
:action="$t('info_panel')"
|
||||
source="info"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UploadProgress />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TeamMembersButton from '../../Teams/Components/TeamMembersButton'
|
||||
import TeamFolderPreview from '../../Teams/Components/TeamFolderPreview'
|
||||
import PopoverWrapper from '../../UI/Popover/PopoverWrapper'
|
||||
import FileSortingOptions from '../../Menus/FileSortingOptions'
|
||||
import PopoverItem from '../../UI/Popover/PopoverItem'
|
||||
import UploadProgress from '../../UI/Others/UploadProgress'
|
||||
import NavigationBar from './NavigationBar'
|
||||
import ToolbarButton from '../../UI/Buttons/ToolbarButton'
|
||||
import OptionUpload from '../../Menus/Components/OptionUpload'
|
||||
import OptionGroup from '../../Menus/Components/OptionGroup'
|
||||
import SearchBarButton from '../../UI/Buttons/SearchBarButton'
|
||||
import { events } from '../../../bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
import Option from '../../Menus/Components/Option'
|
||||
|
||||
export default {
|
||||
name: 'DesktopToolbar',
|
||||
components: {
|
||||
FileSortingOptions,
|
||||
TeamMembersButton,
|
||||
TeamFolderPreview,
|
||||
SearchBarButton,
|
||||
UploadProgress,
|
||||
PopoverWrapper,
|
||||
NavigationBar,
|
||||
ToolbarButton,
|
||||
OptionUpload,
|
||||
OptionGroup,
|
||||
PopoverItem,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isVisibleNavigationBars',
|
||||
'currentTeamFolder',
|
||||
'currentFolder',
|
||||
'sharedDetail',
|
||||
'clipboard',
|
||||
'user',
|
||||
]),
|
||||
canEdit() {
|
||||
if (this.currentTeamFolder && this.user) {
|
||||
let member = this.currentTeamFolder.data.relationships.members.data.find(
|
||||
(member) => member.data.id === this.user.data.id
|
||||
)
|
||||
|
||||
return member.data.attributes.permission === 'can-edit'
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
teamFolder() {
|
||||
return this.currentTeamFolder ? this.currentTeamFolder : this.clipboard[0]
|
||||
},
|
||||
isTeamFolderHomepage() {
|
||||
return this.$isThisRoute(this.$route, ['TeamFolders']) && !this.$route.params.id
|
||||
},
|
||||
isSharedWithMe() {
|
||||
return this.$isThisRoute(this.$route, ['SharedWithMe'])
|
||||
},
|
||||
isSharedWithMeHomepage() {
|
||||
return this.$isThisRoute(this.$route, ['SharedWithMe']) && !this.$route.params.id
|
||||
},
|
||||
canCreateFolder() {
|
||||
return !this.$isThisRoute(this.$route, ['Files', 'Public', 'TeamFolders', 'SharedWithMe'])
|
||||
},
|
||||
canShowConvertToTeamFolder() {
|
||||
return this.$isThisRoute(this.$route, ['Files', 'MySharedItems'])
|
||||
},
|
||||
canUploadInView() {
|
||||
return !this.$isThisRoute(this.$route, ['Files', 'RecentUploads', 'Public', 'TeamFolders', 'SharedWithMe'])
|
||||
},
|
||||
canUploadFolderInView() {
|
||||
return !this.$isThisRoute(this.$route, ['Files', 'Public', 'TeamFolders', 'SharedWithMe'])
|
||||
},
|
||||
canDeleteInView() {
|
||||
let routes = ['TeamFolders', 'SharedWithMe', 'RecentUploads', 'MySharedItems', 'Trash', 'Public', 'Files']
|
||||
return !this.$isThisRoute(this.$route, routes) || this.clipboard.length === 0
|
||||
},
|
||||
canMoveInView() {
|
||||
let routes = ['SharedWithMe', 'RecentUploads', 'MySharedItems', 'Public', 'Files', 'TeamFolders']
|
||||
return !this.$isThisRoute(this.$route, routes) || this.clipboard.length === 0
|
||||
},
|
||||
canShareInView() {
|
||||
let routes = ['TeamFolders', 'RecentUploads', 'MySharedItems', 'Public', 'Files']
|
||||
return !this.$isThisRoute(this.$route, routes) || this.clipboard.length > 1 || this.clipboard.length === 0
|
||||
},
|
||||
canCreateTeamFolder() {
|
||||
return (
|
||||
this.$isThisRoute(this.$route, ['MySharedItems', 'Files']) &&
|
||||
this.clipboard.length === 1 &&
|
||||
this.clipboard[0].data.type === 'folder'
|
||||
)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showTeamFolderMenu() {
|
||||
if (this.teamFolder) events.$emit('popover:open', 'team-folder')
|
||||
},
|
||||
showCreateMenu() {
|
||||
events.$emit('popover:open', 'desktop-create')
|
||||
},
|
||||
showSortingMenu() {
|
||||
events.$emit('popover:open', 'desktop-sorting')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<div class="hidden lg:block">
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<NavigationBar />
|
||||
|
||||
<div class="flex items-center">
|
||||
|
||||
<!--I am Done-->
|
||||
<div @click="uploadingDone" class="bg-theme-200 mr-6 flex cursor-pointer items-center rounded-lg py-1 pr-1 pl-4">
|
||||
<b class="text-theme mr-3 text-sm leading-3">
|
||||
{{ $t('tell_you_are_done', {name: uploadRequest.data.relationships.user.data.attributes.name}) }}
|
||||
</b>
|
||||
<MemberAvatar
|
||||
:member="uploadRequest.data.relationships.user"
|
||||
:size="34"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--Create button-->
|
||||
<PopoverWrapper>
|
||||
<ToolbarButton
|
||||
@click.stop.native="showCreateMenu"
|
||||
source="cloud-plus"
|
||||
:action="$t('create_something')"
|
||||
/>
|
||||
<PopoverItem name="desktop-create" side="left">
|
||||
<OptionGroup :title="$t('upload')">
|
||||
<OptionUpload :title="$t('upload_files')" type="file" />
|
||||
<OptionUpload :title="$t('upload_folder')" type="folder" />
|
||||
</OptionGroup>
|
||||
<OptionGroup :title="$t('create')">
|
||||
<Option
|
||||
@click.native="$createFolder"
|
||||
:title="$t('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('move')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
@click.native="$deleteFileOrFolder(clipboard[0])"
|
||||
:class="{
|
||||
'is-inactive': !canManipulate,
|
||||
}"
|
||||
source="trash"
|
||||
:action="$t('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('sorting_view')"
|
||||
/>
|
||||
<PopoverItem name="desktop-sorting" side="left">
|
||||
<FileSortingOptions />
|
||||
</PopoverItem>
|
||||
</PopoverWrapper>
|
||||
<ToolbarButton
|
||||
@click.native="$store.dispatch('fileInfoToggle')"
|
||||
:action="$t('info_panel')"
|
||||
source="info"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UploadProgress />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PopoverWrapper from '../../UI/Popover/PopoverWrapper'
|
||||
import FileSortingOptions from '../../Menus/FileSortingOptions'
|
||||
import PopoverItem from '../../UI/Popover/PopoverItem'
|
||||
import UploadProgress from '../../UI/Others/UploadProgress'
|
||||
import NavigationBar from './NavigationBar'
|
||||
import ToolbarButton from '../../UI/Buttons/ToolbarButton'
|
||||
import MemberAvatar from "../../UI/Others/MemberAvatar"
|
||||
import OptionUpload from '../../Menus/Components/OptionUpload'
|
||||
import OptionGroup from '../../Menus/Components/OptionGroup'
|
||||
import { events } from '../../../bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
import Option from '../../Menus/Components/Option'
|
||||
|
||||
export default {
|
||||
name: 'DesktopUploadRequestToolbar',
|
||||
components: {
|
||||
FileSortingOptions,
|
||||
UploadProgress,
|
||||
PopoverWrapper,
|
||||
NavigationBar,
|
||||
ToolbarButton,
|
||||
MemberAvatar,
|
||||
OptionUpload,
|
||||
OptionGroup,
|
||||
PopoverItem,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isVisibleNavigationBars', 'currentTeamFolder', 'currentFolder', 'sharedDetail', 'clipboard', 'uploadRequest']),
|
||||
canManipulate() {
|
||||
return this.clipboard[0]
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
uploadingDone() {
|
||||
events.$emit('confirm:open', {
|
||||
title: this.$t('closing_request_for_upload', {name: this.uploadRequest.data.relationships.user.data.attributes.name}),
|
||||
message: this.$t('closing_request_for_upload_warn'),
|
||||
action: {
|
||||
id: this.$router.currentRoute.params.token,
|
||||
operation: 'close-upload-request',
|
||||
},
|
||||
})
|
||||
},
|
||||
showCreateMenu() {
|
||||
events.$emit('popover:open', 'desktop-create')
|
||||
},
|
||||
showSortingMenu() {
|
||||
events.$emit('popover:open', 'desktop-sorting')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<transition name="context-menu">
|
||||
<div v-if="isMultiSelectMode" class="multiselect-actions">
|
||||
<slot v-if="$slots.default" />
|
||||
<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('close')"
|
||||
/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ToolbarButton from '../../UI/Buttons/ToolbarButton'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'MobileMultiSelectToolbar',
|
||||
components: {
|
||||
ToolbarButton,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['isMultiSelectMode', 'clipboard']),
|
||||
},
|
||||
methods: {
|
||||
closeSelecting() {
|
||||
this.$store.commit('TOGGLE_MULTISELECT_MODE')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../../../sass/vuefilemanager/variables';
|
||||
@import '../../../../sass/vuefilemanager/mixins';
|
||||
|
||||
.multiselect-actions {
|
||||
display: flex;
|
||||
padding: 10px 15px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 9;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
|
||||
.action-btn {
|
||||
margin-right: 25px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-inactive {
|
||||
opacity: 0.25 !important;
|
||||
pointer-events: none !important;
|
||||
|
||||
.menu-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.options {
|
||||
&.is-active {
|
||||
opacity: 1 !important;
|
||||
pointer-events: initial !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.multiselect-actions {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
|
||||
// Transition
|
||||
.context-menu-enter-active,
|
||||
.fade-enter-active {
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
.context-menu-leave-active,
|
||||
.fade-leave-active {
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.context-menu-enter,
|
||||
.context-menu-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.context-menu-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
47
resources/js/components/Layout/Toolbars/MobileToolbar.vue
Normal file
47
resources/js/components/Layout/Toolbars/MobileToolbar.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div
|
||||
class="sticky top-0 z-[19] 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-10"
|
||||
/>
|
||||
|
||||
<!--More Actions-->
|
||||
<div class="flex items-center relative mr-[4px]">
|
||||
|
||||
<div @click="showMobileNavigation" class="cursor-pointer p-1.5 -m-1.5">
|
||||
<menu-icon size="17" class="vue-feather dark:text-gray-100" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TeamMembersPreview from '../../Teams/Components/TeamMembersPreview'
|
||||
import TeamMembersButton from '../../Teams/Components/TeamMembersButton'
|
||||
import { MenuIcon } from 'vue-feather-icons'
|
||||
import NavigationBar from './NavigationBar'
|
||||
|
||||
export default {
|
||||
name: 'MobileToolBar',
|
||||
components: {
|
||||
NavigationBar,
|
||||
TeamMembersPreview,
|
||||
TeamMembersButton,
|
||||
MenuIcon,
|
||||
},
|
||||
methods: {
|
||||
showMobileNavigation() {
|
||||
this.$showMobileMenu('user-navigation')
|
||||
this.$store.commit('DISABLE_MULTISELECT_MODE')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div
|
||||
class="sticky top-0 z-[19] block flex w-full items-center justify-between bg-white py-5 px-4 text-center dark:bg-dark-background lg:hidden"
|
||||
>
|
||||
<NavigationBar />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TeamMembersPreview from '../../Teams/Components/TeamMembersPreview'
|
||||
import TeamMembersButton from '../../Teams/Components/TeamMembersButton'
|
||||
import { MenuIcon } from 'vue-feather-icons'
|
||||
import NavigationBar from './NavigationBar'
|
||||
|
||||
export default {
|
||||
name: 'MobileUploadRequestToolBar',
|
||||
components: {
|
||||
NavigationBar,
|
||||
TeamMembersPreview,
|
||||
TeamMembersButton,
|
||||
MenuIcon,
|
||||
},
|
||||
methods: {
|
||||
showMobileNavigation() {
|
||||
this.$showMobileMenu('user-navigation')
|
||||
this.$store.commit('DISABLE_MULTISELECT_MODE')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
87
resources/js/components/Layout/Toolbars/NavigationBar.vue
Normal file
87
resources/js/components/Layout/Toolbars/NavigationBar.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<chevron-left-icon
|
||||
size="17"
|
||||
:class="{
|
||||
'-translate-x-3 opacity-0': !isLoadedFolder || !isNotHomepage,
|
||||
'translate-x-0 opacity-100': isLoadedFolder && isNotHomepage,
|
||||
}"
|
||||
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 lg:max-w-[210px] max-w-[190px] transform overflow-hidden text-ellipsis whitespace-nowrap align-middle text-sm font-bold transition-all duration-200 dark:text-gray-100"
|
||||
>
|
||||
{{ $getCurrentLocationName() }}
|
||||
</b>
|
||||
|
||||
<div
|
||||
@click.stop="showItemActions"
|
||||
:class="{
|
||||
'-translate-x-4 opacity-0': !currentFolder || !isNotHomepage,
|
||||
'translate-x-0 opacity-100': currentFolder && isNotHomepage,
|
||||
}"
|
||||
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 { 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>
|
||||
Reference in New Issue
Block a user