mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-05 18:23:48 +00:00
refactoring sorting and preview component
This commit is contained in:
Milos Holba
@@ -28,9 +28,10 @@
|
||||
"/chunks/database.js": "/chunks/database.js?id=ce57f3e69798319aab7b",
|
||||
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=f7ff36abf37571173944",
|
||||
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=48efd0b887fbc804ac90",
|
||||
"/chunks/files.js": "/chunks/files.js?id=aedd3b50fcff6f480666",
|
||||
"/chunks/files.js": "/chunks/files.js?id=bde4326bbabd3f0bdeb0",
|
||||
"/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js?id=b646ec02fb9d6a497e74",
|
||||
"/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=ed091eaefb05cf66c62e",
|
||||
"/chunks/files~chunks/shared-files.js": "/chunks/files~chunks/shared-files.js?id=901d5a1126b7dbbcdda8",
|
||||
"/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=8d6864bd2b6d92b8dadf",
|
||||
"/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=47ade53389e84dd64310",
|
||||
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=d5e39543eeb619cb5513",
|
||||
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=f037ea11689d01ea489e",
|
||||
@@ -56,8 +57,8 @@
|
||||
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=0ec77e47b2622ee5e253",
|
||||
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=00c6bca64820c4fd3a89",
|
||||
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=b671f4f3198119b48449",
|
||||
"/chunks/shared-files.js": "/chunks/shared-files.js?id=6b49b705eabc281a0ed4",
|
||||
"/chunks/shared-page.js": "/chunks/shared-page.js?id=8f18a860a223c27f8d81",
|
||||
"/chunks/shared-files.js": "/chunks/shared-files.js?id=07cc644014b02adafc69",
|
||||
"/chunks/shared-page.js": "/chunks/shared-page.js?id=2048702b2eb7d0043bc9",
|
||||
"/chunks/sign-in.js": "/chunks/sign-in.js?id=0212907c9bf1cdbd99ed",
|
||||
"/chunks/sign-up.js": "/chunks/sign-up.js?id=91001c0d2c2522eb0d03",
|
||||
"/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=0e90002c41282e286785",
|
||||
@@ -76,21 +77,7 @@
|
||||
"/chunks/user-storage.js": "/chunks/user-storage.js?id=5cfec8a8f8a8aef24ef2",
|
||||
"/chunks/user-subscription.js": "/chunks/user-subscription.js?id=34603496ceacb8bd2da3",
|
||||
"/chunks/users.js": "/chunks/users.js?id=d97166d7e60c1ec9facb",
|
||||
"/chunks/files.bc88c2ffdbf69cc44471.hot-update.js": "/chunks/files.bc88c2ffdbf69cc44471.hot-update.js",
|
||||
"/chunks/shared-files.bc88c2ffdbf69cc44471.hot-update.js": "/chunks/shared-files.bc88c2ffdbf69cc44471.hot-update.js",
|
||||
"/chunks/files.b8c6561b654744789845.hot-update.js": "/chunks/files.b8c6561b654744789845.hot-update.js",
|
||||
"/chunks/shared-files.b8c6561b654744789845.hot-update.js": "/chunks/shared-files.b8c6561b654744789845.hot-update.js",
|
||||
"/chunks/files.abc94da00c803b8c75d4.hot-update.js": "/chunks/files.abc94da00c803b8c75d4.hot-update.js",
|
||||
"/chunks/shared-files.abc94da00c803b8c75d4.hot-update.js": "/chunks/shared-files.abc94da00c803b8c75d4.hot-update.js",
|
||||
"/chunks/files.836f0c5a855c1cef741e.hot-update.js": "/chunks/files.836f0c5a855c1cef741e.hot-update.js",
|
||||
"/chunks/shared-files.836f0c5a855c1cef741e.hot-update.js": "/chunks/shared-files.836f0c5a855c1cef741e.hot-update.js",
|
||||
"/chunks/files.ca107009e6991438d582.hot-update.js": "/chunks/files.ca107009e6991438d582.hot-update.js",
|
||||
"/chunks/shared-files.ca107009e6991438d582.hot-update.js": "/chunks/shared-files.ca107009e6991438d582.hot-update.js",
|
||||
"/chunks/files~chunks/shared-files~chunks/shared-page.404d243a58ecc659da43.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.404d243a58ecc659da43.hot-update.js",
|
||||
"/chunks/files~chunks/shared-files~chunks/shared-page.10ac0bc160a8455ab413.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.10ac0bc160a8455ab413.hot-update.js",
|
||||
"/chunks/files~chunks/shared-files~chunks/shared-page.50bcf4db8de43be79fbf.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.50bcf4db8de43be79fbf.hot-update.js",
|
||||
"/chunks/files.2cd4c521383beff94fe8.hot-update.js": "/chunks/files.2cd4c521383beff94fe8.hot-update.js",
|
||||
"/chunks/shared-files.2cd4c521383beff94fe8.hot-update.js": "/chunks/shared-files.2cd4c521383beff94fe8.hot-update.js",
|
||||
"/js/main.ccc1b32b1d8155a9569c.hot-update.js": "/js/main.ccc1b32b1d8155a9569c.hot-update.js",
|
||||
"/chunks/files~chunks/shared-files~chunks/shared-page.a61ed53b6caab3d4095d.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.a61ed53b6caab3d4095d.hot-update.js"
|
||||
"/js/main.b9f23bd6fac9e569cb87.hot-update.js": "/js/main.b9f23bd6fac9e569cb87.hot-update.js",
|
||||
"/chunks/shared-page.b9f23bd6fac9e569cb87.hot-update.js": "/chunks/shared-page.b9f23bd6fac9e569cb87.hot-update.js",
|
||||
"/js/main.c8942aac993bcf5a1632.hot-update.js": "/js/main.c8942aac993bcf5a1632.hot-update.js"
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div id="vue-file-manager" v-cloak @click="close">
|
||||
<div id="vue-file-manager" v-cloak @click="unClick">
|
||||
|
||||
<!--System alerts-->
|
||||
<Alert/>
|
||||
@@ -136,7 +136,7 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
unClick () {
|
||||
events.$emit('sortingAndPreview', false)
|
||||
}
|
||||
},
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div v-if="isVisible" class="sorting-preview">
|
||||
<SortingAndPreviewMenu />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SortingAndPreviewMenu from '@/components/FilesView/SortingAndPreviewMenu'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { events } from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'DesktopSortingAndPreview',
|
||||
components: {SortingAndPreviewMenu},
|
||||
data () {
|
||||
return {
|
||||
isVisible: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
events.$on('sortingAndPreview', (state) => {
|
||||
this.isVisible = state
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/vue-file-manager/_variables";
|
||||
@import "@assets/vue-file-manager/_mixins";
|
||||
|
||||
.sorting-preview {
|
||||
min-width: 250px;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
box-shadow: $shadow;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
right: 66px;
|
||||
top: 63px;
|
||||
|
||||
&.showed {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/deep/.menu-option {
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
.text-label {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
path,
|
||||
/deep/ line,
|
||||
/deep/ polyline,
|
||||
rect,
|
||||
circle,
|
||||
polygon {
|
||||
stroke: $theme !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.sorting-preview {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
/deep/ .menu-option {
|
||||
&:hover {
|
||||
background: rgba($theme, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,188 +1,34 @@
|
||||
<template>
|
||||
<transition name="context-menu" class="options-wrapper">
|
||||
<div class="options" v-if="isVisible">
|
||||
<div class="menu-options">
|
||||
<ul class="menu-option-group">
|
||||
<li v-if="isList" class="menu-option" @click="changePreview('grid')">
|
||||
<div class="icon">
|
||||
<grid-icon size="17"/>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('preview_sorting.grid_view') }}
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="isGrid" class="menu-option" @click="changePreview('list')">
|
||||
<div class="icon">
|
||||
<list-icon size="17"/>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('preview_sorting.list_view') }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="sort('created_at')">
|
||||
<div class="icon">
|
||||
<calendar-icon size="17"/>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('preview_sorting.sort_date') }}
|
||||
</div>
|
||||
<div class="show-icon">
|
||||
<arrow-up-icon size="17" v-if="filter.field === 'created_at'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="sort('name')">
|
||||
<div class="icon">
|
||||
<alphabet-icon size="17" class="alphabet-icon"/>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{ $t('preview_sorting.sort_alphabet') }}
|
||||
</div>
|
||||
<div class="show-icon">
|
||||
<arrow-up-icon size="17" v-if="filter.field === 'name'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<transition v-if="isVisible" name="preview-menu" >
|
||||
<SortingAndPreviewMenu class="options"/>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { CalendarIcon, ListIcon, GridIcon, ArrowUpIcon, CheckIcon } from 'vue-feather-icons'
|
||||
import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
|
||||
import SortingAndPreviewMenu from '@/components/FilesView/SortingAndPreviewMenu'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { events } from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'MobileSortingAndPreview',
|
||||
components: {
|
||||
CalendarIcon,
|
||||
AlphabetIcon,
|
||||
ArrowUpIcon,
|
||||
CheckIcon,
|
||||
ListIcon,
|
||||
GridIcon
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['FilePreviewType']),
|
||||
isGrid() {
|
||||
return this.FilePreviewType === 'grid'
|
||||
},
|
||||
isList() {
|
||||
return this.FilePreviewType === 'list'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: false,
|
||||
filter: {
|
||||
sort: 'DESC',
|
||||
field: undefined
|
||||
export default {
|
||||
name: 'MobileSortingAndPreview',
|
||||
components: {SortingAndPreviewMenu},
|
||||
data () {
|
||||
return {
|
||||
isVisible: false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.isVisible = false
|
||||
events.$emit('mobileSortingAndPreview', false)
|
||||
},
|
||||
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 using the application location
|
||||
this.$getDataByLocation()
|
||||
},
|
||||
changePreview(previewType) {
|
||||
|
||||
this.$store.dispatch('changePreviewType', previewType)
|
||||
|
||||
this.close()
|
||||
mounted () {
|
||||
events.$on('mobileSortingAndPreview', (state) => {
|
||||
this.isVisible = state
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
let sorting = JSON.parse(localStorage.getItem('sorting'))
|
||||
|
||||
// Set default sorting if is not setup in LocalStorage
|
||||
this.filter.sort = sorting ? sorting.sort : 'DESC'
|
||||
this.filter.field = sorting ? sorting.field : 'created_at'
|
||||
|
||||
events.$on('mobileSortingAndPreview', (state) => {
|
||||
this.isVisible = state
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/vue-file-manager/_variables";
|
||||
@import "@assets/vue-file-manager/_mixins";
|
||||
|
||||
.show-icon {
|
||||
margin-left: auto;
|
||||
max-height: 19px;
|
||||
|
||||
.arrow-down {
|
||||
@include transform(rotate(180deg));
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 20px;
|
||||
line-height: 0;
|
||||
|
||||
.alphabet-icon {
|
||||
/deep/ line,
|
||||
/deep/ polyline {
|
||||
stroke: $text;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.menu-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-right: 20px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.text-label {
|
||||
@include font-size(16);
|
||||
}
|
||||
}
|
||||
|
||||
.vignette {
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.options {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@@ -193,79 +39,22 @@ export default {
|
||||
background: white;
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
|
||||
.menu-options {
|
||||
margin-top: 10px;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
|
||||
.menu-option-group {
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid $light_mode_border;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-option {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.15px;
|
||||
@include font-size(14);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
padding: 17px 20px;
|
||||
text-align: center;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.vignette {
|
||||
background: $dark_mode_vignette;
|
||||
}
|
||||
|
||||
.options {
|
||||
background: $dark_mode_background;
|
||||
|
||||
.menu-options {
|
||||
background: $dark_mode_background;
|
||||
|
||||
.menu-option-group {
|
||||
border-color: $dark_mode_border_color;
|
||||
}
|
||||
|
||||
.menu-option {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
.alphabet-icon {
|
||||
/deep/ line,
|
||||
/deep/ polyline {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Transition
|
||||
.context-menu-enter-active,
|
||||
.preview-menu-enter-active,
|
||||
.fade-enter-active {
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
.context-menu-leave-active,
|
||||
.preview-menu-leave-active,
|
||||
.fade-leave-active {
|
||||
transition: all 200ms;
|
||||
}
|
||||
@@ -275,13 +64,14 @@ export default {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.context-menu-enter,
|
||||
.context-menu-leave-to {
|
||||
.preview-menu-enter,
|
||||
.preview-menu-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.context-menu-leave-active {
|
||||
.preview-menu-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<template>
|
||||
<div v-if="isVisible" class="sorting-preview">
|
||||
|
||||
<div class="menu-options" id="menu-list">
|
||||
<ul class="menu-option-group">
|
||||
<li v-if="isList" class="menu-option" @click="changePreview('grid')">
|
||||
@@ -45,7 +43,6 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -56,7 +53,7 @@ import { mapGetters } from 'vuex'
|
||||
import { events } from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'SortingAndPreview',
|
||||
name: 'SortingAndPreviewMenu',
|
||||
components: {
|
||||
CalendarIcon,
|
||||
AlphabetIcon,
|
||||
@@ -76,7 +73,6 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: false,
|
||||
filter: {
|
||||
sort: 'DESC',
|
||||
field: undefined
|
||||
@@ -108,9 +104,9 @@ export default {
|
||||
|
||||
this.$store.dispatch('changePreviewType', previewType)
|
||||
|
||||
this.isVisible = false
|
||||
|
||||
events.$emit('sortingAndPreview', false)
|
||||
if(this.$isMobile()) {
|
||||
events.$emit('mobileSortingAndPreview', false )
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -121,9 +117,6 @@ export default {
|
||||
this.filter.sort = sorting ? sorting.sort : 'DESC'
|
||||
this.filter.field = sorting ? sorting.field : 'created_at'
|
||||
|
||||
events.$on('sortingAndPreview', (state) => {
|
||||
this.isVisible = state
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
@@ -207,50 +200,25 @@ export default {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
color: $text;
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
.text-label {
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
path,
|
||||
/deep/ line,
|
||||
/deep/ polyline,
|
||||
rect,
|
||||
circle,
|
||||
polygon {
|
||||
stroke: $theme !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.sorting-preview {
|
||||
background: $dark_mode_foreground;
|
||||
.menu-options {
|
||||
.menu-option-group {
|
||||
border-color: $dark_mode_border_color;
|
||||
}
|
||||
|
||||
.menu-options {
|
||||
.menu-option-group {
|
||||
border-color: $dark_mode_border_color;
|
||||
}
|
||||
.menu-option {
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
.menu-option {
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
.icon {
|
||||
.alphabet-icon {
|
||||
/deep/ line,
|
||||
/deep/ polyline {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
.icon {
|
||||
.alphabet-icon {
|
||||
/deep/ line,
|
||||
/deep/ polyline {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,14 +3,14 @@
|
||||
@contextmenu.prevent.capture="contextMenu($event, undefined)"
|
||||
id="files-view">
|
||||
<ContextMenu/>
|
||||
<SortingAndPreview/>
|
||||
<DesktopSortingAndPreview/>
|
||||
<DesktopToolbar/>
|
||||
<FileBrowser/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SortingAndPreview from '@/components/FilesView/SortingAndPreview'
|
||||
import DesktopSortingAndPreview from '@/components/FilesView/DesktopSortingAndPreview'
|
||||
import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
|
||||
import FileBrowser from '@/components/FilesView/FileBrowser'
|
||||
import ContextMenu from '@/components/FilesView/ContextMenu'
|
||||
@@ -20,7 +20,7 @@
|
||||
export default {
|
||||
name: 'FilesView',
|
||||
components: {
|
||||
SortingAndPreview,
|
||||
DesktopSortingAndPreview,
|
||||
DesktopToolbar,
|
||||
FileBrowser,
|
||||
ContextMenu,
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
<FileBrowser/>
|
||||
|
||||
<!-- Selecting preview list and sorting -->
|
||||
<SortingAndPreview/>
|
||||
<DesktopSortingAndPreview/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -116,7 +116,7 @@
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import MobileSortingAndPreview from '@/components/FilesView/MobileSortingAndPreview'
|
||||
import MobileMultiSelectMenu from '@/components/FilesView/MobileMultiSelectMenu'
|
||||
import SortingAndPreview from '@/components/FilesView/SortingAndPreview'
|
||||
import DesktopSortingAndPreview from '@/components/FilesView/DesktopSortingAndPreview'
|
||||
import TreeMenuNavigator from '@/components/Others/TreeMenuNavigator'
|
||||
import FileFullPreview from '@/components/FilesView/FileFullPreview'
|
||||
import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
|
||||
@@ -149,7 +149,7 @@
|
||||
MobileSortingAndPreview,
|
||||
MobileMultiSelectMenu,
|
||||
ValidationProvider,
|
||||
SortingAndPreview,
|
||||
DesktopSortingAndPreview,
|
||||
ValidationObserver,
|
||||
TreeMenuNavigator,
|
||||
FileFullPreview,
|
||||
|
||||
Reference in New Issue
Block a user