mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-27 18:40:39 +00:00
vue components refactoring
This commit is contained in:
Čarodej
@@ -0,0 +1,328 @@
|
||||
<template>
|
||||
<li
|
||||
class="flex items-center justify-between lg:py-3.5 py-4 px-5"
|
||||
:class="{ 'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': !isHoverDisabled }"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<div class="mr-4">
|
||||
<calendar-icon
|
||||
v-if="icon === 'calendar'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<grid-icon
|
||||
v-if="icon === 'grid'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<list-icon
|
||||
v-if="icon === 'list'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<trash-2-icon
|
||||
v-if="icon === 'trash'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<life-buoy-icon
|
||||
v-if="icon === 'restore'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<trash-icon
|
||||
v-if="icon === 'empty-trash'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<eye-icon
|
||||
v-if="icon === 'detail'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<download-cloud-icon
|
||||
v-if="icon === 'download'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<edit2-icon
|
||||
v-if="icon === 'rename'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<corner-down-right-icon
|
||||
v-if="icon === 'move-item'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<link-icon
|
||||
v-if="icon === 'share'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<star-icon
|
||||
v-if="icon === 'favourites'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<folder-plus-icon
|
||||
v-if="icon === 'create-folder'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<smile-icon
|
||||
v-if="icon === 'no-options'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<paperclip-icon
|
||||
v-if="icon === 'zip-folder'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<alphabet-icon
|
||||
v-if="icon === 'alphabet'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<star-icon
|
||||
v-if="icon === 'star'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<hard-drive-icon
|
||||
v-if="icon === 'hard-drive'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<upload-cloud-icon
|
||||
v-if="icon === 'upload-cloud'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<users-icon
|
||||
v-if="icon === 'users'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<user-icon
|
||||
v-if="icon === 'user'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<user-plus-icon
|
||||
v-if="icon === 'user-plus'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<user-minus-icon
|
||||
v-if="icon === 'user-minus'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<user-check-icon
|
||||
v-if="icon === 'user-check'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<settings-icon
|
||||
v-if="icon === 'settings'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<power-icon
|
||||
v-if="icon === 'power'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<lock-icon
|
||||
v-if="icon === 'lock'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<cloud-icon
|
||||
v-if="icon === 'cloud'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<credit-card-icon
|
||||
v-if="icon === 'credit-card'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<file-text-icon
|
||||
v-if="icon === 'file-text'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<database-icon
|
||||
v-if="icon === 'database'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<globe-icon
|
||||
v-if="icon === 'globe'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<monitor-icon
|
||||
v-if="icon === 'monitor'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<box-icon
|
||||
v-if="icon === 'box'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<folder-plus-icon
|
||||
v-if="icon === 'folder-plus'"
|
||||
size="17"
|
||||
class="vue-feather group-hover-text-theme"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
</div>
|
||||
<b class="group-hover-text-theme text-sm font-bold" :class="{ 'text-theme': isActive }">
|
||||
{{ title }}
|
||||
</b>
|
||||
</div>
|
||||
<div v-if="arrow" class="ml-2">
|
||||
<chevron-right-icon
|
||||
v-if="arrow === 'right'"
|
||||
size="14"
|
||||
class="vue-feather group-hover-text-theme opacity-50"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<arrow-up-icon
|
||||
v-if="arrow === 'up'"
|
||||
size="14"
|
||||
class="vue-feather group-hover-text-theme opacity-50"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
<arrow-down-icon
|
||||
v-if="arrow === 'down'"
|
||||
size="14"
|
||||
class="vue-feather group-hover-text-theme opacity-50"
|
||||
:class="{ 'text-theme': isActive }"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AlphabetIcon from '../../Icons/AlphabetIcon'
|
||||
import {
|
||||
UserMinusIcon,
|
||||
UserCheckIcon,
|
||||
UserPlusIcon,
|
||||
ArrowUpIcon,
|
||||
ArrowDownIcon,
|
||||
ChevronRightIcon,
|
||||
BoxIcon,
|
||||
MonitorIcon,
|
||||
GlobeIcon,
|
||||
FileTextIcon,
|
||||
CreditCardIcon,
|
||||
CloudIcon,
|
||||
LockIcon,
|
||||
PowerIcon,
|
||||
SettingsIcon,
|
||||
UsersIcon,
|
||||
UserIcon,
|
||||
UploadCloudIcon,
|
||||
HardDriveIcon,
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
FolderPlusIcon,
|
||||
PaperclipIcon,
|
||||
LifeBuoyIcon,
|
||||
Trash2Icon,
|
||||
Edit2Icon,
|
||||
TrashIcon,
|
||||
StarIcon,
|
||||
LinkIcon,
|
||||
EyeIcon,
|
||||
SmileIcon,
|
||||
GridIcon,
|
||||
ListIcon,
|
||||
CalendarIcon,
|
||||
DatabaseIcon,
|
||||
} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'Option',
|
||||
props: ['isHoverDisabled', 'isActive', 'title', 'arrow', 'icon'],
|
||||
components: {
|
||||
UserMinusIcon,
|
||||
UserCheckIcon,
|
||||
UserPlusIcon,
|
||||
ArrowUpIcon,
|
||||
ArrowDownIcon,
|
||||
BoxIcon,
|
||||
MonitorIcon,
|
||||
GlobeIcon,
|
||||
DatabaseIcon,
|
||||
ChevronRightIcon,
|
||||
FileTextIcon,
|
||||
CreditCardIcon,
|
||||
CloudIcon,
|
||||
LockIcon,
|
||||
CornerDownRightIcon,
|
||||
DownloadCloudIcon,
|
||||
UploadCloudIcon,
|
||||
FolderPlusIcon,
|
||||
HardDriveIcon,
|
||||
PaperclipIcon,
|
||||
SettingsIcon,
|
||||
LifeBuoyIcon,
|
||||
CalendarIcon,
|
||||
AlphabetIcon,
|
||||
Trash2Icon,
|
||||
SmileIcon,
|
||||
PowerIcon,
|
||||
UsersIcon,
|
||||
Edit2Icon,
|
||||
TrashIcon,
|
||||
LinkIcon,
|
||||
StarIcon,
|
||||
GridIcon,
|
||||
ListIcon,
|
||||
UserIcon,
|
||||
EyeIcon,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
<b v-if="title" class="dark-text-theme mt-2 block py-0.5 px-4 text-xs text-gray-400">
|
||||
{{ title }}
|
||||
</b>
|
||||
<ul class="option-group py-1">
|
||||
<slot />
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'OptionGroup',
|
||||
props: ['title'],
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<label
|
||||
class="flex items-center lg:py-3.5 py-4 px-5"
|
||||
: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="group-hover-text-theme text-left text-sm font-bold">
|
||||
{{ title }}
|
||||
|
||||
<input
|
||||
v-if="type === 'file'"
|
||||
@change="emmitFiles"
|
||||
v-show="false"
|
||||
id="file"
|
||||
type="file"
|
||||
name="files[]"
|
||||
multiple
|
||||
/>
|
||||
<input
|
||||
v-if="type === 'folder'"
|
||||
@change="emmitFolder"
|
||||
v-show="false"
|
||||
id="folder"
|
||||
type="file"
|
||||
name="folders[]"
|
||||
webkitdirectory
|
||||
mozdirectory
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FolderUploadIcon from '../../Icons/FolderUploadIcon'
|
||||
import { UploadCloudIcon } from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'Option',
|
||||
props: ['title', 'type', 'isHoverDisabled'],
|
||||
components: {
|
||||
FolderUploadIcon,
|
||||
UploadCloudIcon,
|
||||
},
|
||||
methods: {
|
||||
emmitFiles(e) {
|
||||
this.$uploadFiles(e.target.files)
|
||||
},
|
||||
emmitFolder(e) {
|
||||
this.$store.commit('UPDATE_UPLOADING_FOLDER_STATE', true)
|
||||
|
||||
this.$uploadFiles(e.target.files)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div
|
||||
v-show="isVisible"
|
||||
:style="{ top: positionY + 'px', left: positionX + 'px' }"
|
||||
@click="closeAndResetContextMenu"
|
||||
class="fixed z-20 w-60 select-none overflow-hidden rounded-xl bg-white shadow-lg dark:bg-2x-dark-foreground"
|
||||
ref="contextmenu"
|
||||
>
|
||||
<div class="w-full">
|
||||
<!--Show empty select contextmenu-->
|
||||
<slot name="empty-select" v-if="!item" />
|
||||
|
||||
<!--Show single select contextmenu-->
|
||||
<slot name="single-select" v-if="isMultiSelectContextMenu" />
|
||||
|
||||
<!--Show multiple select contextmenu-->
|
||||
<slot name="multiple-select" v-if="!isMultiSelectContextMenu" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { events } from '../../bus'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'ContextMenu',
|
||||
computed: {
|
||||
...mapGetters(['clipboard', 'user']),
|
||||
isMultiSelectContextMenu() {
|
||||
// If is context Menu open on multi selected items open just options for the multi selected items
|
||||
if (this.clipboard.length > 1 && this.clipboard.includes(this.item)) return false
|
||||
|
||||
// If is context Menu open for the non selected item open options for the single item
|
||||
if (this.clipboard.length < 2 || !this.clipboard.includes(this.item)) return true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
item: undefined,
|
||||
isVisible: false,
|
||||
positionX: 0,
|
||||
positionY: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeAndResetContextMenu() {
|
||||
// Close context menu
|
||||
this.isVisible = false
|
||||
|
||||
// Reset item container
|
||||
this.item = undefined
|
||||
},
|
||||
showContextMenu(event) {
|
||||
let menu = this.$refs.contextmenu
|
||||
|
||||
let hiddenAreaX = window.innerWidth - event.clientX - menu.clientWidth - 25
|
||||
let hiddenAreaY = window.innerHeight - event.clientY - menu.clientHeight - 25
|
||||
|
||||
this.positionX = hiddenAreaX < 0 ? event.clientX + hiddenAreaX : event.clientX
|
||||
this.positionY = hiddenAreaY < 0 ? event.clientY + hiddenAreaY : event.clientY
|
||||
|
||||
// Show context menu
|
||||
this.isVisible = true
|
||||
},
|
||||
},
|
||||
created() {
|
||||
events.$on('context-menu:hide', () => this.closeAndResetContextMenu())
|
||||
|
||||
events.$on('context-menu:show', (event, item) => {
|
||||
// Store item
|
||||
this.item = item
|
||||
|
||||
// Show context menu
|
||||
setTimeout(() => this.showContextMenu(event, item), 10)
|
||||
})
|
||||
|
||||
events.$on('context-menu:current-folder', (folder) => {
|
||||
this.item = folder
|
||||
|
||||
this.isVisible = !this.isVisible
|
||||
|
||||
if (this.isVisible) {
|
||||
let container = document.getElementById('folder-actions').getBoundingClientRect()
|
||||
|
||||
this.positionX = container.x
|
||||
this.positionY = container.y + 20
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<MenuMobile name="file-filter">
|
||||
<MenuMobileGroup>
|
||||
<OptionGroup :title="$t('base')">
|
||||
<Option
|
||||
@click.native="goToFiles"
|
||||
:title="$t('sidebar.home')"
|
||||
icon="hard-drive"
|
||||
:is-active="$isThisRoute($route, 'Files')"
|
||||
:is-hover-disabled="true"
|
||||
/>
|
||||
<Option
|
||||
@click.native="goToLatest"
|
||||
:title="$t('menu.latest')"
|
||||
icon="upload-cloud"
|
||||
:is-active="$isThisRoute($route, 'RecentUploads')"
|
||||
:is-hover-disabled="true"
|
||||
/>
|
||||
<Option
|
||||
@click.native="goToShared"
|
||||
:title="$t('publicly_shared')"
|
||||
icon="share"
|
||||
:is-active="$isThisRoute($route, 'MySharedItems')"
|
||||
:is-hover-disabled="true"
|
||||
/>
|
||||
<Option
|
||||
@click.native="goToTrash"
|
||||
:title="$t('trash')"
|
||||
icon="trash"
|
||||
:is-active="$isThisRoute($route, 'Trash')"
|
||||
:is-hover-disabled="true"
|
||||
/>
|
||||
</OptionGroup>
|
||||
<OptionGroup :title="$t('collaboration')">
|
||||
<Option
|
||||
@click.native="goToTeamFolders"
|
||||
:title="$t('team_folders')"
|
||||
icon="users"
|
||||
:is-active="$isThisRoute($route, 'TeamFolders')"
|
||||
:is-hover-disabled="true"
|
||||
/>
|
||||
<Option
|
||||
@click.native="goToSharedWithMe"
|
||||
:title="$t('shared_with_me')"
|
||||
icon="user-check"
|
||||
:is-active="$isThisRoute($route, 'SharedWithMe')"
|
||||
:is-hover-disabled="true"
|
||||
/>
|
||||
</OptionGroup>
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuMobileGroup from '../Mobile/MenuMobileGroup'
|
||||
import OptionGroup from './Components/OptionGroup'
|
||||
import MenuMobile from '../Mobile/MenuMobile'
|
||||
import Option from './Components/Option'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'MobileContextMenu',
|
||||
components: {
|
||||
MenuMobileGroup,
|
||||
OptionGroup,
|
||||
MenuMobile,
|
||||
Option,
|
||||
},
|
||||
methods: {
|
||||
goToFiles() {
|
||||
this.$router.push({ name: 'Files' })
|
||||
},
|
||||
goToLatest() {
|
||||
this.$router.push({ name: 'RecentUploads' })
|
||||
},
|
||||
goToShared() {
|
||||
this.$router.push({ name: 'MySharedItems' })
|
||||
},
|
||||
goToTrash() {
|
||||
this.$router.push({ name: 'Trash' })
|
||||
},
|
||||
goToTeamFolders() {
|
||||
this.$router.push({ name: 'TeamFolders' })
|
||||
},
|
||||
goToSharedWithMe() {
|
||||
this.$router.push({ name: 'SharedWithMe' })
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<MenuMobile name="file-sorting">
|
||||
<MenuMobileGroup>
|
||||
<FileSortingOptions />
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FileSortingOptions from './FileSortingOptions'
|
||||
import MenuMobileGroup from '../Mobile/MenuMobileGroup'
|
||||
import MenuMobile from '../Mobile/MenuMobile'
|
||||
|
||||
export default {
|
||||
name: 'FileSortingMobile',
|
||||
components: {
|
||||
FileSortingOptions,
|
||||
MenuMobileGroup,
|
||||
MenuMobile,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div>
|
||||
<OptionGroup :title="$t('view')">
|
||||
<Option
|
||||
v-if="isList"
|
||||
@click.native="changePreview('grid')"
|
||||
:title="$t('preview_sorting.grid_view')"
|
||||
icon="grid"
|
||||
/>
|
||||
<Option
|
||||
v-if="isGrid"
|
||||
@click.native="changePreview('list')"
|
||||
:title="$t('preview_sorting.list_view')"
|
||||
icon="list"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OptionGroup from './Components/OptionGroup'
|
||||
import Option from './Components/Option'
|
||||
import { ArrowUpIcon } from 'vue-feather-icons'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'FileSortingOptions',
|
||||
components: {
|
||||
OptionGroup,
|
||||
ArrowUpIcon,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['itemViewType']),
|
||||
isGrid() {
|
||||
return this.itemViewType === 'grid'
|
||||
},
|
||||
isList() {
|
||||
return this.itemViewType === 'list'
|
||||
},
|
||||
arrowForCreatedAtField() {
|
||||
if (this.filter.field !== 'created_at') return undefined
|
||||
|
||||
return this.filter.sort === 'DESC' ? 'up' : 'down'
|
||||
},
|
||||
arrowForNameField() {
|
||||
if (this.filter.field !== 'name') return undefined
|
||||
|
||||
return this.filter.sort === 'DESC' ? 'up' : 'down'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
filter: {
|
||||
sort: 'DESC',
|
||||
field: undefined,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sort(field) {
|
||||
this.filter.field = field
|
||||
|
||||
// Set sorting direction
|
||||
if (this.filter.sort === 'DESC') this.filter.sort = 'ASC'
|
||||
else if (this.filter.sort === 'ASC') this.filter.sort = 'DESC'
|
||||
|
||||
// Save to localStorage sorting options
|
||||
localStorage.setItem(
|
||||
'sorting',
|
||||
JSON.stringify({
|
||||
sort: this.filter.sort,
|
||||
field: this.filter.field,
|
||||
})
|
||||
)
|
||||
|
||||
// Update sorting state in vuex
|
||||
this.$store.commit('UPDATE_SORTING')
|
||||
|
||||
// Get data of user with favourites tree
|
||||
this.$store.dispatch('getAppData')
|
||||
|
||||
// Get data of Navigator tree
|
||||
this.$store.dispatch('getFolderTree')
|
||||
|
||||
this.$getDataByLocation()
|
||||
},
|
||||
changePreview(previewType) {
|
||||
this.$store.dispatch('togglePreviewType', previewType)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
let sorting = JSON.parse(localStorage.getItem('sorting'))
|
||||
|
||||
// Set default sorting if in not setup in LocalStorage
|
||||
this.filter.sort = sorting ? sorting.sort : 'DESC'
|
||||
this.filter.field = sorting ? sorting.field : 'created_at'
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<MenuMobile name="file-menu">
|
||||
<ThumbnailItem class="m-5" :item="clipboard[0]" />
|
||||
|
||||
<MenuMobileGroup v-if="$slots.default">
|
||||
<slot />
|
||||
</MenuMobileGroup>
|
||||
|
||||
<MenuMobileGroup v-if="$slots.editor && $checkPermission('editor')">
|
||||
<slot name="editor" />
|
||||
</MenuMobileGroup>
|
||||
|
||||
<MenuMobileGroup v-if="$slots.visitor && $checkPermission('visitor')">
|
||||
<slot name="visitor" />
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuMobileGroup from '../Mobile/MenuMobileGroup'
|
||||
import ThumbnailItem from '../UI/Entries/ThumbnailItem'
|
||||
import MenuMobile from '../Mobile/MenuMobile'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'MobileContextMenu',
|
||||
components: {
|
||||
MenuMobileGroup,
|
||||
ThumbnailItem,
|
||||
MenuMobile,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['clipboard']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<MenuMobile @click.native.capture="closeMenu" name="create-list">
|
||||
<MenuMobileGroup>
|
||||
<slot />
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuMobileGroup from '../Mobile/MenuMobileGroup'
|
||||
import MenuMobile from '../Mobile/MenuMobile'
|
||||
import { events } from '../../bus'
|
||||
|
||||
export default {
|
||||
name: 'MobileContextMenu',
|
||||
components: {
|
||||
MenuMobileGroup,
|
||||
MenuMobile,
|
||||
},
|
||||
methods: {
|
||||
closeMenu() {
|
||||
events.$emit('mobile-menu:hide')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<MenuMobile name="team-menu">
|
||||
<TeamFolderPreview />
|
||||
|
||||
<MenuMobileGroup v-if="$slots.default">
|
||||
<slot />
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuMobileGroup from '../Mobile/MenuMobileGroup'
|
||||
import TeamFolderPreview from '../Teams/Components/TeamFolderPreview'
|
||||
import MenuMobile from '../Mobile/MenuMobile'
|
||||
|
||||
export default {
|
||||
name: 'MobileTeamContextMenu',
|
||||
components: {
|
||||
TeamFolderPreview,
|
||||
MenuMobileGroup,
|
||||
MenuMobile,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user