mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 19:10:40 +00:00
UI improvements 2
This commit is contained in:
Čarodej
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user