mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 16:22:14 +00:00
added prettier
This commit is contained in:
Čarodej
@@ -1,380 +1,399 @@
|
||||
<template>
|
||||
<div id="desktop-toolbar" class="lg:block hidden">
|
||||
<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 @click="goBack" class="location">
|
||||
<div v-if="!isVisibleNavigationBars" @click="toggleNavigationBars" class="mr-2">
|
||||
<menu-icon size="17" />
|
||||
</div>
|
||||
|
||||
<chevron-left-icon :class="{'opacity-0 -translate-x-3': ! currentFolder, 'opacity-100 translate-x-0': currentFolder }" class="icon-back transform transition-all duration-200" size="17" />
|
||||
<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"
|
||||
/>
|
||||
|
||||
<span :class="{'-translate-x-4': ! currentFolder}" class="location-title transform transition-all duration-200">
|
||||
{{ $getCurrentLocationName() }}
|
||||
</span>
|
||||
<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="transform location-more group transition-all duration-200" id="folder-actions">
|
||||
<more-horizontal-icon size="14" class="icon-more group-hover-text-theme" />
|
||||
</span>
|
||||
</div>
|
||||
<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>
|
||||
<ToolbarWrapper>
|
||||
<!--Search bar-->
|
||||
<ToolbarGroup class="ml-0">
|
||||
<SearchBar class="hidden lg:block" />
|
||||
</ToolbarGroup>
|
||||
|
||||
<!--Search bar-->
|
||||
<ToolbarGroup class="ml-0">
|
||||
<SearchBar class="lg:block hidden" />
|
||||
</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>
|
||||
|
||||
<!--Create button for all pages except SharedWithMe-->
|
||||
<ToolbarGroup v-if="$checkPermission(['master', 'editor']) && ! $isThisRoute($route, ['SharedWithMe'])">
|
||||
<PopoverWrapper>
|
||||
<ToolbarButton @click.stop.native="showCreateMenu" source="cloud-plus" :action="$t('actions.create')" />
|
||||
|
||||
<span class="lg:hidden block">
|
||||
<ToolbarButton @click.stop.native="$openSpotlight()" source="search" :action="$t('Search files or folders')" />
|
||||
</span>
|
||||
<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>
|
||||
|
||||
<PopoverWrapper>
|
||||
<ToolbarButton @click.stop.native="showCreateMenu" source="cloud-plus" :action="$t('actions.create')" />
|
||||
<!--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>
|
||||
|
||||
<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>
|
||||
<PopoverWrapper>
|
||||
<ToolbarButton @click.stop.native="showCreateMenu" source="cloud-plus" :class="{ 'is-inactive': !canEdit }" :action="$t('actions.create')" />
|
||||
|
||||
<!--Create button for shared with me page-->
|
||||
<ToolbarGroup v-if="$isThisRoute($route, ['SharedWithMe'])">
|
||||
<span class="lg:hidden block">
|
||||
<ToolbarButton @click.stop.native="$openSpotlight()" source="search" :action="$t('Search files or folders')" />
|
||||
</span>
|
||||
<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>
|
||||
|
||||
<PopoverWrapper>
|
||||
<ToolbarButton @click.stop.native="showCreateMenu" source="cloud-plus" :class="{'is-inactive': ! canEdit}" :action="$t('actions.create')" />
|
||||
<!--File Controls-->
|
||||
<ToolbarGroup v-if="$checkPermission(['master', 'editor']) || ($isMobile() && $isThisRoute($route, ['SharedWithMe', 'TeamFolders']))">
|
||||
<!--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="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>
|
||||
<PopoverItem name="team-folder" side="left">
|
||||
<TeamFolderPreview />
|
||||
|
||||
<!--File Controls-->
|
||||
<ToolbarGroup v-if="$checkPermission(['master', 'editor']) || ($isMobile() && $isThisRoute($route, ['SharedWithMe', 'TeamFolders']))">
|
||||
<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>
|
||||
|
||||
<!--Team Heads-->
|
||||
<PopoverWrapper v-if="$isThisRoute($route, ['TeamFolders', 'SharedWithMe'])">
|
||||
<TeamMembersButton @click.stop.native="showTeamFolderMenu" size="32" class="dark:hover:bg-dark-foreground hover:bg-light-background rounded-lg cursor-pointer py-0.5 pl-2 pr-0.5" />
|
||||
<OptionGroup v-if="$isThisRoute($route, ['SharedWithMe'])">
|
||||
<Option @click.native="$detachMeFromTeamFolder(teamFolder)" :title="$t('Leave the Team Folder')" icon="user-minus" />
|
||||
</OptionGroup>
|
||||
</PopoverItem>
|
||||
</PopoverWrapper>
|
||||
|
||||
<PopoverItem name="team-folder" side="left">
|
||||
<TeamFolderPreview />
|
||||
<!--Item actions-->
|
||||
<span v-if="!$isMobile()" class="whitespace-nowrap">
|
||||
<ToolbarButton
|
||||
v-if="canShowConvertToTeamFolder"
|
||||
@click.native="$convertAsTeamFolder(clipboard[0])"
|
||||
:class="{
|
||||
'is-inactive': !canCreateTeamFolderInView,
|
||||
}"
|
||||
source="user-plus"
|
||||
:action="$t('actions.convert_into_team_folder')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
v-if="!$isThisRoute($route, ['SharedWithMe', 'Public'])"
|
||||
@click.native="$shareFileOrFolder(clipboard[0])"
|
||||
:class="{ 'is-inactive': canShareInView }"
|
||||
source="share"
|
||||
:action="$t('actions.share')"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<ToolbarButton
|
||||
@click.native="$moveFileOrFolder(clipboard[0])"
|
||||
:class="{
|
||||
'is-inactive': canMoveInView && !canEdit,
|
||||
}"
|
||||
source="move"
|
||||
:action="$t('actions.move')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
@click.native="$deleteFileOrFolder(clipboard[0])"
|
||||
:class="{
|
||||
'is-inactive': canDeleteInView && !canEdit,
|
||||
}"
|
||||
source="trash"
|
||||
:action="$t('actions.delete')"
|
||||
/>
|
||||
</span>
|
||||
</ToolbarGroup>
|
||||
|
||||
<OptionGroup v-if="$isThisRoute($route, ['SharedWithMe'])">
|
||||
<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">
|
||||
<ToolbarButton v-if="canShowConvertToTeamFolder" @click.native="$convertAsTeamFolder(clipboard[0])" :class="{'is-inactive': ! canCreateTeamFolderInView }" source="user-plus" :action="$t('actions.convert_into_team_folder')" />
|
||||
<ToolbarButton v-if="! $isThisRoute($route, ['SharedWithMe', 'Public'])" @click.native="$shareFileOrFolder(clipboard[0])" :class="{'is-inactive': canShareInView }" source="share" :action="$t('actions.share')" />
|
||||
|
||||
<ToolbarButton @click.native="$moveFileOrFolder(clipboard[0])" :class="{'is-inactive': canMoveInView && ! canEdit }" source="move" :action="$t('actions.move')" />
|
||||
<ToolbarButton @click.native="$deleteFileOrFolder(clipboard[0])" :class="{'is-inactive': canDeleteInView && ! canEdit }" source="trash" :action="$t('actions.delete')" />
|
||||
</span>
|
||||
</ToolbarGroup>
|
||||
|
||||
<!--View Controls-->
|
||||
<ToolbarGroup>
|
||||
<PopoverWrapper>
|
||||
<ToolbarButton @click.stop.native="showSortingMenu" source="preview-sorting" :action="$t('actions.sorting_view')" />
|
||||
<PopoverItem name="desktop-sorting" side="left">
|
||||
<FileSortingOptions />
|
||||
</PopoverItem>
|
||||
</PopoverWrapper>
|
||||
<!--View Controls-->
|
||||
<ToolbarGroup>
|
||||
<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" />
|
||||
</ToolbarGroup>
|
||||
</ToolbarWrapper>
|
||||
</ToolbarGroup>
|
||||
</ToolbarWrapper>
|
||||
</div>
|
||||
|
||||
<UploadProgress />
|
||||
<UploadProgress />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileSortingOptions from "./FileSortingOptions";
|
||||
import UploadProgress from "./UploadProgress";
|
||||
import PopoverWrapper from "../Desktop/PopoverWrapper";
|
||||
import ToolbarWrapper from "../Desktop/ToolbarWrapper";
|
||||
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 FileSortingOptions from './FileSortingOptions'
|
||||
import UploadProgress from './UploadProgress'
|
||||
import PopoverWrapper from '../Desktop/PopoverWrapper'
|
||||
import ToolbarWrapper from '../Desktop/ToolbarWrapper'
|
||||
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'
|
||||
|
||||
export default {
|
||||
name: 'DesktopToolbar',
|
||||
components: {
|
||||
TeamMembersButton,
|
||||
FileSortingOptions,
|
||||
MoreHorizontalIcon,
|
||||
TeamFolderPreview,
|
||||
ChevronLeftIcon,
|
||||
ToolbarWrapper,
|
||||
UploadProgress,
|
||||
PopoverWrapper,
|
||||
ToolbarButton,
|
||||
OptionUpload,
|
||||
ToolbarGroup,
|
||||
OptionGroup,
|
||||
PopoverItem,
|
||||
SearchBar,
|
||||
MenuIcon,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...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)
|
||||
export default {
|
||||
name: 'DesktopToolbar',
|
||||
components: {
|
||||
TeamMembersButton,
|
||||
FileSortingOptions,
|
||||
MoreHorizontalIcon,
|
||||
TeamFolderPreview,
|
||||
ChevronLeftIcon,
|
||||
ToolbarWrapper,
|
||||
UploadProgress,
|
||||
PopoverWrapper,
|
||||
ToolbarButton,
|
||||
OptionUpload,
|
||||
ToolbarGroup,
|
||||
OptionGroup,
|
||||
PopoverItem,
|
||||
SearchBar,
|
||||
MenuIcon,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...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)
|
||||
|
||||
return member.data.attributes.permission === 'can-edit'
|
||||
}
|
||||
return member.data.attributes.permission === 'can-edit'
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
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 false
|
||||
},
|
||||
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() {
|
||||
return ! this.$isThisRoute(this.$route, ['Files', 'Public', 'TeamFolders', 'SharedWithMe'])
|
||||
},
|
||||
canShowConvertToTeamFolder() {
|
||||
return this.$isThisRoute(this.$route, ['Files', 'MySharedItems'])
|
||||
},
|
||||
canUploadInView() {
|
||||
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
|
||||
},
|
||||
canCreateTeamFolderInView() {
|
||||
let routes = [
|
||||
'MySharedItems',
|
||||
'Files',
|
||||
]
|
||||
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() {
|
||||
return !this.$isThisRoute(this.$route, ['Files', 'Public', 'TeamFolders', 'SharedWithMe'])
|
||||
},
|
||||
canShowConvertToTeamFolder() {
|
||||
return this.$isThisRoute(this.$route, ['Files', 'MySharedItems'])
|
||||
},
|
||||
canUploadInView() {
|
||||
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
|
||||
},
|
||||
canCreateTeamFolderInView() {
|
||||
let routes = ['MySharedItems', 'Files']
|
||||
|
||||
return this.$isThisRoute(this.$route, routes)
|
||||
&& 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')
|
||||
},
|
||||
showCreateMenu() {
|
||||
events.$emit('popover:open', 'desktop-create')
|
||||
},
|
||||
showSortingMenu() {
|
||||
events.$emit('popover:open', 'desktop-sorting')
|
||||
},
|
||||
folderActions() {
|
||||
events.$emit('context-menu:current-folder', this.currentFolder)
|
||||
},
|
||||
},
|
||||
}
|
||||
return this.$isThisRoute(this.$route, routes) && 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')
|
||||
},
|
||||
showCreateMenu() {
|
||||
events.$emit('popover:open', 'desktop-create')
|
||||
},
|
||||
showSortingMenu() {
|
||||
events.$emit('popover:open', 'desktop-sorting')
|
||||
},
|
||||
folderActions() {
|
||||
events.$emit('context-menu:current-folder', this.currentFolder)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "resources/sass/vuefilemanager/_variables";
|
||||
@import "resources/sass/vuefilemanager/_mixins";
|
||||
@import 'resources/sass/vuefilemanager/_variables';
|
||||
@import 'resources/sass/vuefilemanager/_mixins';
|
||||
|
||||
.is-inactive {
|
||||
opacity: 0.25;
|
||||
pointer-events: none;
|
||||
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;
|
||||
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;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
||||
.icon-back {
|
||||
@include transition(150ms);
|
||||
pointer-events: none;
|
||||
margin-right: 6px;
|
||||
shrink: 0;
|
||||
}
|
||||
.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-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;
|
||||
.location-more {
|
||||
margin-left: 6px;
|
||||
padding: 1px 4px;
|
||||
line-height: 0;
|
||||
border-radius: 3px;
|
||||
|
||||
svg circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
svg circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
svg circle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
svg circle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-position {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
@include font-size(17);
|
||||
font-weight: 600;
|
||||
}
|
||||
span {
|
||||
@include font-size(17);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.location {
|
||||
.location {
|
||||
.location-title {
|
||||
max-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.location-title {
|
||||
max-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
.button {
|
||||
margin-left: 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
.toolbar-tools {
|
||||
.button {
|
||||
margin-left: 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
.toolbar .directory-name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.toolbar .directory-name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
.location {
|
||||
.location-title {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.location {
|
||||
.location-title {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.location-more {
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
.location-more {
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user