mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-29 11:15:58 +00:00
merge with sorting
This commit is contained in:
Milos Holba
@@ -31,6 +31,9 @@
|
||||
<!-- Drag & Drop UI -->
|
||||
<DragUI/>
|
||||
|
||||
<!-- Mobile menu for selecting view and sorting -->
|
||||
<MobileSortingAndPreview/>
|
||||
|
||||
<!--Mobile Menu-->
|
||||
<MobileMenu/>
|
||||
|
||||
@@ -56,6 +59,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MobileSortingAndPreview from '@/components/FilesView/MobileSortingAndPreview'
|
||||
import MobileMultiSelectMenu from '@/components/FilesView/MobileMultiSelectMenu'
|
||||
import ToastrWrapper from '@/components/Others/Notifications/ToastrWrapper'
|
||||
import FileFullPreview from '@/components/FilesView/FileFullPreview'
|
||||
@@ -78,6 +82,7 @@
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
MobileSortingAndPreview,
|
||||
MobileMultiSelectMenu,
|
||||
MobileNavigation,
|
||||
CookieDisclaimer,
|
||||
|
||||
@@ -81,11 +81,13 @@
|
||||
|
||||
<!--View options-->
|
||||
<div class="toolbar-button-wrapper">
|
||||
<ToolbarButton
|
||||
:source="preview"
|
||||
:action="$t('actions.preview')"
|
||||
@click.native="$store.dispatch('changePreviewType')"
|
||||
<ToolbarButton
|
||||
source="preview-sorting"
|
||||
class="preview-sorting"
|
||||
:class="{ active: sortingAndPreview }"
|
||||
@click.native=" sortingAndPreview = !sortingAndPreview"
|
||||
/>
|
||||
|
||||
<ToolbarButton
|
||||
:class="{ active: fileInfoVisible }"
|
||||
@click.native="$store.dispatch('fileInfoToggle')"
|
||||
@@ -186,6 +188,22 @@ export default {
|
||||
return !this.$isThisLocation(locations) || this.fileInfoDetail.length > 1
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
sortingAndPreview: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
sortingAndPreview () {
|
||||
if(this.sortingAndPreview) {
|
||||
events.$emit('sortingAndPreview-open')
|
||||
}
|
||||
|
||||
if(!this.sortingAndPreview) {
|
||||
events.$emit('sortingAndPreview-close')
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
// Get previous folder
|
||||
@@ -352,10 +370,15 @@ export default {
|
||||
&.active {
|
||||
/deep/ svg {
|
||||
line,
|
||||
circle {
|
||||
circle,
|
||||
rect {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
&.preview-sorting{
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-inactive {
|
||||
@@ -409,5 +432,11 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
&.preview-sorting{
|
||||
background: $dark_mode_foreground !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
},
|
||||
moveItem() {
|
||||
// Move item fire popup
|
||||
events.$emit('popup:open', {name: 'move', item: this.fileInfoDetail[0]})
|
||||
events.$emit("popup:open", { name: "move", item: this.fileInfoDetail});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<svg width="13px" height="15px" viewBox="0 0 13 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="VueFileManager" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g id="Storage-Alert-Copy" transform="translate(-888.000000, -238.000000)" stroke="#000000" stroke-width="1.6">
|
||||
<g id="Sorting-Menu" transform="translate(865.000000, 67.000000)">
|
||||
<g id="alphabet-icon" transform="translate(24.000000, 172.000000)">
|
||||
<polyline id="Path" points="11.1999993 13.1999991 5.59999967 0.199999094 0 13.1999991 5.59999967 0.199999094"></polyline>
|
||||
<line x1="2.25" y1="8" x2="8.75" y2="8" id="Line-2"></line>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -8,6 +8,24 @@
|
||||
<grid-icon v-if="icon === 'th'" size="15" class="icon"></grid-icon>
|
||||
<user-plus-icon v-if="icon === 'user-plus'" size="15" class="icon"></user-plus-icon>
|
||||
<plus-icon v-if="icon === 'plus'" size="15" class="icon"></plus-icon>
|
||||
<svg v-if="icon === 'preview-sorting'" size="15" class="icon"
|
||||
width="15px" height="15px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="VueFileManager" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g id="Storage-Alert-Copy" transform="translate(-1092.000000, -28.000000)" stroke="#000000" stroke-width="1.4">
|
||||
<g id="Toolbar" transform="translate(331.000000, 19.000000)">
|
||||
<g id="Tools" transform="translate(581.000000, 9.000000)">
|
||||
<g id="sort-icon" transform="translate(181.000000, 1.000000)">
|
||||
<rect id="Rectangle" x="9.77777778" y="0" width="6.22222222" height="6.22222222"></rect>
|
||||
<rect id="Rectangle" x="9.77777778" y="9.77777778" width="6.22222222" height="6.22222222"></rect>
|
||||
<line x1="0" y1="2" x2="6" y2="2" id="Path"></line>
|
||||
<line x1="0" y1="8" x2="6" y2="8" id="Path"></line>
|
||||
<line x1="0" y1="14" x2="6" y2="14" id="Path"></line>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="label">
|
||||
<slot></slot>
|
||||
</span>
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
|
||||
<!--Actions for trash location with MASTER permission--->
|
||||
<div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" class="mobile-actions">
|
||||
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
|
||||
{{ previewText }}
|
||||
<MobileActionButton :class="{'active' : mobileSortingAndPreview}" @click.native="mobileSortingAndPreview = ! mobileSortingAndPreview" icon="preview-sorting">
|
||||
{{$t('preview_sorting.preview_sorting_button')}}
|
||||
</MobileActionButton>
|
||||
<MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
|
||||
{{ $t('context_menu.select') }}
|
||||
@@ -25,15 +25,15 @@
|
||||
<MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
|
||||
{{ $t('context_menu.select') }}
|
||||
</MobileMultiSelectButton>
|
||||
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
|
||||
{{ previewText }}
|
||||
<MobileActionButton :class="{'active' : mobileSortingAndPreview}" @click.native="mobileSortingAndPreview = ! mobileSortingAndPreview" icon="preview-sorting">
|
||||
{{$t('preview_sorting.preview_sorting_button')}}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
|
||||
<!--ContextMenu for Base location with VISITOR permission-->
|
||||
<div v-if="($isThisLocation(['base', 'shared', 'public']) && $checkPermission('visitor')) || ($isThisLocation(['latest', 'shared']) && $checkPermission('master'))" class="mobile-actions">
|
||||
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
|
||||
{{ previewText }}
|
||||
<MobileActionButton :class="{'active' : mobileSortingAndPreview}" @click.native="mobileSortingAndPreview = ! mobileSortingAndPreview" icon="preview-sorting">
|
||||
{{$t('preview_sorting.preview_sorting_button')}}
|
||||
</MobileActionButton>
|
||||
<MobileMultiSelectButton @click.native="mobileMultiSelect = !mobileMultiSelect">
|
||||
{{ $t('context_menu.select') }}
|
||||
@@ -67,14 +67,12 @@
|
||||
previewIcon() {
|
||||
return this.FilePreviewType === 'list' ? 'th' : 'th-list'
|
||||
},
|
||||
previewText() {
|
||||
return this.FilePreviewType === 'list' ? this.$t('preview_type.grid') : this.$t('preview_type.list')
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
mobileMultiSelect: false,
|
||||
turnOff:false
|
||||
turnOff:false,
|
||||
mobileSortingAndPreview: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -86,13 +84,19 @@
|
||||
if(!this.mobileMultiSelect) {
|
||||
events.$emit('mobileSelecting-stop')
|
||||
}
|
||||
},
|
||||
mobileSortingAndPreview (oldValue , newValue) {
|
||||
if(this.mobileSortingAndPreview) {
|
||||
events.$emit('mobileSortingAndPreview-open')
|
||||
this.mobileMultiSelect = false
|
||||
}
|
||||
|
||||
if(!this.mobileSortingAndPreview) {
|
||||
events.$emit('mobileSortingAndPreview-close')
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchPreview() {
|
||||
this.$store.dispatch('changePreviewType')
|
||||
events.$emit('mobileSelecting-stop')
|
||||
},
|
||||
createFolder() {
|
||||
if (this.$isMobile()) {
|
||||
// Get folder name
|
||||
@@ -111,6 +115,11 @@
|
||||
this.mobileMultiSelect = false
|
||||
})
|
||||
|
||||
events.$on('mobileSortingAndPreview-close', () => {
|
||||
this.mobileSortingAndPreview = false
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -118,6 +127,11 @@
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
.active {
|
||||
/deep/.label {
|
||||
color: $theme !important;
|
||||
}
|
||||
}
|
||||
|
||||
#mobile-actions-wrapper {
|
||||
display: none;
|
||||
|
||||
@@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div class="options-wrapper" >
|
||||
<transition name="context-menu">
|
||||
<div
|
||||
class="options"
|
||||
v-if="isVisible"
|
||||
>
|
||||
<div class="menu-options">
|
||||
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="changePreview('grid')"
|
||||
>
|
||||
<div class="icon">
|
||||
<grid-icon size="17"/>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{$t('preview_sorting.grid_view')}}
|
||||
</div>
|
||||
<div class="show-icon" v-if="isGrid">
|
||||
<check-icon size="17"/>
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="changePreview('list')">
|
||||
<div class="icon">
|
||||
<list-icon size="17"/>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{$t('preview_sorting.list_view')}}
|
||||
</div>
|
||||
<div class="show-icon" v-if="isList">
|
||||
<check-icon size="17"/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="menu-option-group">
|
||||
<li c 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="aplhabet-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>
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-show="isVisible"
|
||||
class="vignette"
|
||||
@click.self="close"
|
||||
></div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { CalendarIcon, ListIcon, GridIcon, ArrowUpIcon, CheckIcon } from 'vue-feather-icons'
|
||||
import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
|
||||
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,
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.isVisible = false
|
||||
events.$emit('mobileSortingAndPreview-close')
|
||||
},
|
||||
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)
|
||||
}
|
||||
},
|
||||
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-open', () => {
|
||||
this.isVisible = true
|
||||
})
|
||||
|
||||
events.$on('mobileSortingAndPreview-close', () => {
|
||||
this.isVisible = false
|
||||
})
|
||||
}
|
||||
};
|
||||
</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;
|
||||
.aplhabet-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;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
overflow: hidden;
|
||||
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 {
|
||||
.aplhabet-icon {
|
||||
/deep/line,
|
||||
/deep/polyline {
|
||||
stroke:$dark_mode_text_primary ;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Transition
|
||||
.context-menu-enter-active,
|
||||
.fade-enter-active {
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
.context-menu-leave-active,
|
||||
.fade-leave-active {
|
||||
transition: all 200ms;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.context-menu-enter,
|
||||
.context-menu-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.context-menu-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<div v-if="isVisible" class="sorting-preview" >
|
||||
|
||||
<div class="menu-options" id="menu-list">
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="changePreview('grid')" >
|
||||
<div class="icon">
|
||||
<grid-icon size="17"/>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{$t('preview_sorting.grid_view')}}
|
||||
</div>
|
||||
<div class="show-icon" v-if="isGrid">
|
||||
<check-icon size="17"/>
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="changePreview('list')">
|
||||
<div class="icon">
|
||||
<list-icon size="17"/>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{$t('preview_sorting.list_view')}}
|
||||
</div>
|
||||
<div class="show-icon" v-if="isList">
|
||||
<check-icon size="17"/>
|
||||
</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="aplhabet-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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { CalendarIcon, ListIcon, GridIcon, ArrowUpIcon, CheckIcon } from 'vue-feather-icons'
|
||||
import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { events } from '@/bus'
|
||||
|
||||
export default {
|
||||
name:'SortingAndPreview',
|
||||
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,
|
||||
}
|
||||
}
|
||||
},
|
||||
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 using the application location
|
||||
this.$getDataByLocation()
|
||||
},
|
||||
changePreview(previewType) {
|
||||
this.$store.dispatch('changePreviewType' , 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'
|
||||
|
||||
events.$on('sortingAndPreview-open', () => {
|
||||
this.isVisible = true
|
||||
})
|
||||
|
||||
events.$on('sortingAndPreview-close', () => {
|
||||
this.isVisible = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
</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));
|
||||
}
|
||||
}
|
||||
|
||||
.menu-option {
|
||||
display: flex;
|
||||
|
||||
.icon {
|
||||
margin-right: 20px;
|
||||
line-height: 0;
|
||||
.aplhabet-icon {
|
||||
/deep/line,
|
||||
/deep/polyline {
|
||||
stroke:$text ;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.text-label {
|
||||
@include font-size(16);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-options {
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.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 {
|
||||
white-space: nowrap;
|
||||
font-weight: 700;
|
||||
@include font-size(14);
|
||||
padding: 15px 20px;
|
||||
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-option {
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
.icon {
|
||||
.aplhabet-icon {
|
||||
/deep/line,
|
||||
/deep/polyline {
|
||||
stroke:$dark_mode_text_primary ;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -20,6 +20,25 @@
|
||||
<grid-icon v-if="source === 'th'" size="19"></grid-icon>
|
||||
<link-icon v-if="source === 'share'" size="19"></link-icon>
|
||||
<x-icon v-if="source === 'close'" size="19"></x-icon>
|
||||
|
||||
<svg v-if="source === 'preview-sorting'" size="19"
|
||||
width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="VueFileManager" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<g id="Storage-Alert-Copy" transform="translate(-1092.000000, -28.000000)" stroke="#000000" stroke-width="1.4">
|
||||
<g id="Toolbar" transform="translate(331.000000, 19.000000)">
|
||||
<g id="Tools" transform="translate(581.000000, 9.000000)">
|
||||
<g id="sort-icon" transform="translate(181.000000, 1.000000)">
|
||||
<rect id="Rectangle" x="9.77777778" y="0" width="6.22222222" height="6.22222222"></rect>
|
||||
<rect id="Rectangle" x="9.77777778" y="9.77777778" width="6.22222222" height="6.22222222"></rect>
|
||||
<line x1="0" y1="2" x2="6" y2="2" id="Path"></line>
|
||||
<line x1="0" y1="8" x2="6" y2="8" id="Path"></line>
|
||||
<line x1="0" y1="14" x2="6" y2="14" id="Path"></line>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -3,12 +3,14 @@
|
||||
@contextmenu.prevent.capture="contextMenu($event, undefined)"
|
||||
id="files-view">
|
||||
<ContextMenu/>
|
||||
<SortingAndPreview/>
|
||||
<DesktopToolbar/>
|
||||
<FileBrowser/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SortingAndPreview from '@/components/FilesView/SortingAndPreview'
|
||||
import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
|
||||
import FileBrowser from '@/components/FilesView/FileBrowser'
|
||||
import ContextMenu from '@/components/FilesView/ContextMenu'
|
||||
@@ -18,6 +20,7 @@
|
||||
export default {
|
||||
name: 'FilesView',
|
||||
components: {
|
||||
SortingAndPreview,
|
||||
DesktopToolbar,
|
||||
FileBrowser,
|
||||
ContextMenu,
|
||||
|
||||
Vendored
+21
@@ -307,6 +307,27 @@ const Helpers = {
|
||||
}
|
||||
return validated
|
||||
}
|
||||
Vue.prototype.$getDataByLocation = function() {
|
||||
|
||||
let folder = store.getters.currentFolder
|
||||
|
||||
let actions = {
|
||||
'base' : ['getFolder', [{ folder: folder, back: true, init: false, sorting:true}]],
|
||||
'public' : ['browseShared', [{ folder: folder, back: true, init: false, sorting:true}]],
|
||||
'latest' : ['getLatest'],
|
||||
'shared' : ['getShared'],
|
||||
'trash-root' : ['getTrash'],
|
||||
'participant_uploads' : ['getParticipantUploads'],
|
||||
}
|
||||
|
||||
this.$store.dispatch(...actions[folder.location])
|
||||
|
||||
// Get dara of user with favourites tree
|
||||
this.$store.dispatch('getAppData')
|
||||
|
||||
// Get data of Navigator tree
|
||||
this.$store.dispatch('getFolderTree')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -279,6 +279,13 @@
|
||||
"upload": "上传",
|
||||
"select": "Select"
|
||||
},
|
||||
"preview_sorting": {
|
||||
"grid_view": "Grid View",
|
||||
"list_view": "List View",
|
||||
"sort_date": "Sort By Date",
|
||||
"sort_alphabet": "Sort By Aplhabet",
|
||||
"preview_sorting_button": "View"
|
||||
},
|
||||
"cookie_disclaimer": {
|
||||
"button": "cookies policy",
|
||||
"description": "By browsing this website you are agreeing to our {0}."
|
||||
@@ -585,10 +592,6 @@
|
||||
"message": "您的订阅已重新激活，并且将按原始计费周期计费。",
|
||||
"title": "订阅已取消"
|
||||
},
|
||||
"preview_type": {
|
||||
"grid": "方块",
|
||||
"list": "列表"
|
||||
},
|
||||
"profile": {
|
||||
"change_pass": "修改您的密码",
|
||||
"profile_info": "用户信息",
|
||||
|
||||
@@ -281,6 +281,13 @@
|
||||
"upload": "Upload",
|
||||
"select": "Select"
|
||||
},
|
||||
"preview_sorting": {
|
||||
"grid_view": "Grid View",
|
||||
"list_view": "List View",
|
||||
"sort_date": "Sort By Date",
|
||||
"sort_alphabet": "Sort By Aplhabet",
|
||||
"preview_sorting_button": "View"
|
||||
},
|
||||
"cookie_disclaimer": {
|
||||
"button": "cookies policy",
|
||||
"description": "By browsing this website you are agreeing to our {0}."
|
||||
@@ -587,10 +594,6 @@
|
||||
"message": "Your subscription was re-activated, and they will be billed on the original billing cycle.",
|
||||
"title": "Subscription Was Resumed"
|
||||
},
|
||||
"preview_type": {
|
||||
"grid": "Grid",
|
||||
"list": "List"
|
||||
},
|
||||
"profile": {
|
||||
"change_pass": "Change Password",
|
||||
"profile_info": "Profile Information",
|
||||
|
||||
@@ -281,6 +281,13 @@
|
||||
"upload": "Nahrať",
|
||||
"select": "Výber"
|
||||
},
|
||||
"preview_sorting": {
|
||||
"grid_view": "Mriežka",
|
||||
"list_view": "List",
|
||||
"sort_date": "Zoradiť podľa dátumu",
|
||||
"sort_alphabet": "Zoradiť podľa náyvu",
|
||||
"preview_sorting_button": "Zobrazenie"
|
||||
},
|
||||
"cookie_disclaimer": {
|
||||
"button": "politikou cookies",
|
||||
"description": "Prehliadaním tejto stránky súhlasim s našou"
|
||||
@@ -587,10 +594,6 @@
|
||||
"message": "Váš odber bol znova aktivovaný a budú vám účtované poplatky podľa pôvodného fakturačného cyklu.",
|
||||
"title": "Predplatné bolo obnovené"
|
||||
},
|
||||
"preview_type": {
|
||||
"grid": "Mriežka",
|
||||
"list": "List"
|
||||
},
|
||||
"profile": {
|
||||
"change_pass": "Zmeniť heslo",
|
||||
"profile_info": "Profil",
|
||||
|
||||
Vendored
+1
@@ -97,6 +97,7 @@ document.addEventListener('drag', (event) => {
|
||||
|
||||
},false)
|
||||
|
||||
// Handle for drop
|
||||
document.addEventListener("dragend", () => {
|
||||
events.$emit('drop')
|
||||
}, false);
|
||||
|
||||
Vendored
+14
-2
@@ -8,6 +8,10 @@ const defaultState = {
|
||||
authorized: undefined,
|
||||
homeDirectory: undefined,
|
||||
requestedPlan: undefined,
|
||||
sorting: {
|
||||
sort: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).sort : 'DESC',
|
||||
field: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).field : 'created_at',
|
||||
},
|
||||
roles: [
|
||||
{
|
||||
label: i18n.t('roles.admin'),
|
||||
@@ -837,9 +841,10 @@ const defaultState = {
|
||||
],
|
||||
}
|
||||
const actions = {
|
||||
changePreviewType: ({commit, state}) => {
|
||||
changePreviewType: ({commit, state}, preview) => {
|
||||
|
||||
// Get preview type
|
||||
let previewType = state.FilePreviewType == 'grid' ? 'list' : 'grid'
|
||||
let previewType = preview
|
||||
|
||||
// Store preview type to localStorage
|
||||
localStorage.setItem('preview_type', previewType)
|
||||
@@ -860,6 +865,10 @@ const actions = {
|
||||
},
|
||||
}
|
||||
const mutations = {
|
||||
UPDATE_SORTING(state) {
|
||||
state.sorting.field = JSON.parse(localStorage.getItem('sorting')).field
|
||||
state.sorting.sort = JSON.parse(localStorage.getItem('sorting')).sort
|
||||
},
|
||||
INIT(state, data) {
|
||||
state.config = data.config
|
||||
state.authorized = data.authCookie
|
||||
@@ -901,6 +910,9 @@ const getters = {
|
||||
config: state => state.config,
|
||||
index: state => state.index,
|
||||
roles: state => state.roles,
|
||||
sorting: (state) => {
|
||||
return {sorting: state.sorting , URI: '?sort=' + state.sorting.field + '&direction=' + state.sorting.sort}
|
||||
},
|
||||
}
|
||||
|
||||
export default {
|
||||
|
||||
+9
-8
@@ -32,7 +32,7 @@ const actions = {
|
||||
// Set folder location
|
||||
payload.folder.location = payload.folder.deleted_at || payload.folder.location === 'trash' ? 'trash' : 'base'
|
||||
|
||||
if (! payload.back)
|
||||
if (! payload.back && !payload.sorting)
|
||||
commit('STORE_PREVIOUS_FOLDER', getters.currentFolder)
|
||||
|
||||
let url = payload.folder.location === 'trash'
|
||||
@@ -40,12 +40,12 @@ const actions = {
|
||||
: '/folders/' + payload.folder.unique_id
|
||||
|
||||
axios
|
||||
.get(getters.api + url)
|
||||
.get(getters.api + url + getters.sorting.URI)
|
||||
.then(response => {
|
||||
commit('LOADING_STATE', {loading: false, data: response.data})
|
||||
commit('STORE_CURRENT_FOLDER', payload.folder)
|
||||
|
||||
if (payload.back)
|
||||
if (payload.back && !payload.sorting)
|
||||
commit('REMOVE_BROWSER_HISTORY')
|
||||
|
||||
events.$emit('scrollTop')
|
||||
@@ -79,7 +79,7 @@ const actions = {
|
||||
})
|
||||
|
||||
axios
|
||||
.get(getters.api + '/latest')
|
||||
.get(getters.api + '/latest' + getters.sorting.URI)
|
||||
.then(response => {
|
||||
commit('LOADING_STATE', {loading: false, data: response.data})
|
||||
events.$emit('scrollTop')
|
||||
@@ -90,6 +90,7 @@ const actions = {
|
||||
commit('LOADING_STATE', {loading: true, data: []})
|
||||
commit('FLUSH_FOLDER_HISTORY')
|
||||
|
||||
|
||||
let currentFolder = {
|
||||
name: i18n.t('sidebar.my_shared'),
|
||||
location: 'shared',
|
||||
@@ -99,7 +100,7 @@ const actions = {
|
||||
commit('STORE_CURRENT_FOLDER', currentFolder)
|
||||
|
||||
axios
|
||||
.get(getters.api + '/shared-all')
|
||||
.get(getters.api + '/shared-all' + getters.sorting.URI)
|
||||
.then(response => {
|
||||
commit('LOADING_STATE', {loading: false, data: response.data})
|
||||
commit('STORE_PREVIOUS_FOLDER', currentFolder)
|
||||
@@ -119,7 +120,7 @@ const actions = {
|
||||
})
|
||||
|
||||
axios
|
||||
.get(getters.api + '/participant-uploads')
|
||||
.get(getters.api + '/participant-uploads' + getters.sorting.URI)
|
||||
.then(response => {
|
||||
commit('LOADING_STATE', {loading: false, data: response.data})
|
||||
|
||||
@@ -140,7 +141,7 @@ const actions = {
|
||||
commit('STORE_CURRENT_FOLDER', trash)
|
||||
|
||||
axios
|
||||
.get(getters.api + '/trash')
|
||||
.get(getters.api + '/trash' + getters.sorting.URI)
|
||||
.then(response => {
|
||||
commit('LOADING_STATE', {loading: false, data: response.data})
|
||||
commit('STORE_PREVIOUS_FOLDER', trash)
|
||||
@@ -187,7 +188,7 @@ const actions = {
|
||||
route = '/api/navigation'
|
||||
|
||||
axios
|
||||
.get(route)
|
||||
.get(route + getters.sorting.URI)
|
||||
.then(response => {
|
||||
resolve(response)
|
||||
|
||||
|
||||
+3
-3
@@ -32,7 +32,7 @@ const actions = {
|
||||
events.$emit('clear-query')
|
||||
}
|
||||
|
||||
if (! payload.back)
|
||||
if (! payload.back && !payload.sorting)
|
||||
commit('STORE_PREVIOUS_FOLDER', getters.currentFolder)
|
||||
|
||||
payload.folder.location = 'public'
|
||||
@@ -43,13 +43,13 @@ const actions = {
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
axios
|
||||
.get(route)
|
||||
.get(route + getters.sorting.URI)
|
||||
.then(response => {
|
||||
commit('LOADING_STATE', {loading: false, data: response.data})
|
||||
commit('STORE_CURRENT_FOLDER', payload.folder)
|
||||
events.$emit('scrollTop')
|
||||
|
||||
if (payload.back)
|
||||
if (payload.back && !payload.sorting)
|
||||
commit('REMOVE_BROWSER_HISTORY')
|
||||
|
||||
resolve(response)
|
||||
|
||||
+2
-1
@@ -11,9 +11,10 @@ const defaultState = {
|
||||
|
||||
const actions = {
|
||||
getAppData: ({commit, getters}) => {
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
axios
|
||||
.get(getters.api + '/user')
|
||||
.get(getters.api + '/user' + getters.sorting.URI)
|
||||
.then((response) => {
|
||||
resolve(response)
|
||||
|
||||
|
||||
@@ -21,6 +21,9 @@
|
||||
<!--Mobile Menu-->
|
||||
<MobileMenu/>
|
||||
|
||||
<!-- Mobile menu for selecting view and sorting -->
|
||||
<MobileSortingAndPreview/>
|
||||
|
||||
<!--System alerts-->
|
||||
<Alert />
|
||||
|
||||
@@ -101,6 +104,9 @@
|
||||
|
||||
<!--File browser-->
|
||||
<FileBrowser/>
|
||||
|
||||
<!-- Selecting preview list and sorting -->
|
||||
<SortingAndPreview/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -108,7 +114,9 @@
|
||||
|
||||
<script>
|
||||
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 TreeMenuNavigator from '@/components/Others/TreeMenuNavigator'
|
||||
import FileFullPreview from '@/components/FilesView/FileFullPreview'
|
||||
import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
|
||||
@@ -138,8 +146,10 @@
|
||||
export default {
|
||||
name: 'SharedPage',
|
||||
components: {
|
||||
MobileSortingAndPreview,
|
||||
MobileMultiSelectMenu,
|
||||
ValidationProvider,
|
||||
SortingAndPreview,
|
||||
ValidationObserver,
|
||||
TreeMenuNavigator,
|
||||
FileFullPreview,
|
||||
|
||||
Reference in New Issue
Block a user