mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 08:12:15 +00:00
- download multiple files in private folder
- sorting context menu changes - download icon active only if files was selected
This commit is contained in:
Peter Papp
@@ -450,8 +450,6 @@ export default {
|
||||
}
|
||||
},
|
||||
downloadItem() {
|
||||
|
||||
// Zip and download multiple files
|
||||
if (this.fileInfoDetail.length > 1)
|
||||
this.$store.dispatch('downloadFiles')
|
||||
else {
|
||||
|
||||
@@ -1,269 +1,216 @@
|
||||
<template>
|
||||
<div id="desktop-toolbar">
|
||||
<div class="toolbar-wrapper">
|
||||
<!-- Go back-->
|
||||
<div class="toolbar-go-back" v-if="homeDirectory">
|
||||
<div @click="goBack" class="go-back-button">
|
||||
<chevron-left-icon
|
||||
size="17"
|
||||
:class="{ 'is-active': browseHistory.length > 1 }"
|
||||
class="icon-back"
|
||||
></chevron-left-icon>
|
||||
<div id="desktop-toolbar">
|
||||
<div class="toolbar-wrapper">
|
||||
<!-- Go back-->
|
||||
<div class="toolbar-go-back" v-if="homeDirectory">
|
||||
<div @click="goBack" class="go-back-button">
|
||||
<chevron-left-icon size="17" :class="{ 'is-active': browseHistory.length > 1 }" class="icon-back"></chevron-left-icon>
|
||||
|
||||
<span class="back-directory-title">
|
||||
<span class="back-directory-title">
|
||||
{{ directoryName }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
@click.stop="folderActions"
|
||||
v-if="
|
||||
<span @click.stop="folderActions" v-if="
|
||||
browseHistory.length > 1 && $isThisLocation(['base', 'public'])
|
||||
"
|
||||
class="folder-options"
|
||||
id="folder-actions"
|
||||
>
|
||||
<more-horizontal-icon
|
||||
size="14"
|
||||
class="icon-more"
|
||||
></more-horizontal-icon>
|
||||
" class="folder-options" id="folder-actions">
|
||||
<more-horizontal-icon size="14" class="icon-more"></more-horizontal-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tools-->
|
||||
<div class="toolbar-tools">
|
||||
<!--Search bar-->
|
||||
<div class="toolbar-button-wrapper">
|
||||
<SearchBar />
|
||||
</div>
|
||||
<!-- Tools-->
|
||||
<div class="toolbar-tools">
|
||||
<!--Search bar-->
|
||||
<div class="toolbar-button-wrapper">
|
||||
<SearchBar/>
|
||||
</div>
|
||||
|
||||
<!--Files controlls-->
|
||||
<div
|
||||
class="toolbar-button-wrapper"
|
||||
v-if="$checkPermission(['master', 'editor'])"
|
||||
>
|
||||
<ToolbarButtonUpload
|
||||
:class="{ 'is-inactive': canUploadInView || !hasCapacity }"
|
||||
:action="$t('actions.upload')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
:class="{ 'is-inactive': canCreateFolderInView }"
|
||||
@click.native="createFolder"
|
||||
source="folder-plus"
|
||||
:action="$t('actions.create_folder')"
|
||||
/>
|
||||
</div>
|
||||
<!--Files controlls-->
|
||||
<div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
|
||||
<ToolbarButtonUpload :class="{ 'is-inactive': canUploadInView || !hasCapacity }" :action="$t('actions.upload')"/>
|
||||
<ToolbarButton :class="{ 'is-inactive': canCreateFolderInView }" @click.native="createFolder" source="folder-plus" :action="$t('actions.create_folder')"/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="toolbar-button-wrapper"
|
||||
v-if="$checkPermission(['master', 'editor'])"
|
||||
>
|
||||
<ToolbarButton
|
||||
source="move"
|
||||
:class="{ 'is-inactive': canMoveInView }"
|
||||
:action="$t('actions.move')"
|
||||
@click.native="moveItem"
|
||||
/>
|
||||
<ToolbarButton
|
||||
v-if="!$isThisLocation(['public'])"
|
||||
source="share"
|
||||
:class="{ 'is-inactive': canShareInView }"
|
||||
:action="$t('actions.share')"
|
||||
@click.native="shareItem"
|
||||
/>
|
||||
<ToolbarButton
|
||||
source="trash"
|
||||
:class="{ 'is-inactive': canDeleteInView }"
|
||||
:action="$t('actions.delete')"
|
||||
@click.native="deleteItem"
|
||||
/>
|
||||
</div>
|
||||
<div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
|
||||
<ToolbarButton source="move" :class="{ 'is-inactive': canMoveInView }" :action="$t('actions.move')" @click.native="moveItem"/>
|
||||
<ToolbarButton v-if="!$isThisLocation(['public'])" source="share" :class="{ 'is-inactive': canShareInView }" :action="$t('actions.share')" @click.native="shareItem"/>
|
||||
<ToolbarButton source="trash" :class="{ 'is-inactive': canDeleteInView }" :action="$t('actions.delete')" @click.native="deleteItem"/>
|
||||
</div>
|
||||
|
||||
<!--View options-->
|
||||
<div class="toolbar-button-wrapper">
|
||||
<ToolbarButton
|
||||
source="preview-sorting"
|
||||
class="preview-sorting"
|
||||
:action="$t('actions.sorting_view')"
|
||||
:class="{ active: sortingAndPreview }"
|
||||
@click.native=" sortingAndPreview = !sortingAndPreview"
|
||||
/>
|
||||
<!--View options-->
|
||||
<div class="toolbar-button-wrapper">
|
||||
<ToolbarButton source="preview-sorting" class="preview-sorting" :action="$t('actions.sorting_view')" :class="{ active: sortingAndPreview }" @click.native="sortingAndPreview = !sortingAndPreview"/>
|
||||
|
||||
<ToolbarButton
|
||||
:action="$t('actions.info_panel')"
|
||||
:class="{ active: fileInfoVisible }"
|
||||
@click.native="$store.dispatch('fileInfoToggle')"
|
||||
source="info"
|
||||
/>
|
||||
<ToolbarButton :action="$t('actions.info_panel')" :class="{ active: fileInfoVisible }" @click.native="$store.dispatch('fileInfoToggle')" source="info"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UploadProgress/>
|
||||
</div>
|
||||
<UploadProgress />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ToolbarButtonUpload from "@/components/FilesView/ToolbarButtonUpload";
|
||||
import { ChevronLeftIcon, MoreHorizontalIcon } from "vue-feather-icons";
|
||||
import UploadProgress from "@/components/FilesView/UploadProgress";
|
||||
import ToolbarButton from "@/components/FilesView/ToolbarButton";
|
||||
import SearchBar from "@/components/FilesView/SearchBar";
|
||||
import { mapGetters } from "vuex";
|
||||
import { events } from "@/bus";
|
||||
import { last } from "lodash";
|
||||
import ToolbarButtonUpload from '@/components/FilesView/ToolbarButtonUpload'
|
||||
import { ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
|
||||
import UploadProgress from '@/components/FilesView/UploadProgress'
|
||||
import ToolbarButton from '@/components/FilesView/ToolbarButton'
|
||||
import SearchBar from '@/components/FilesView/SearchBar'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { events } from '@/bus'
|
||||
import { last } from 'lodash'
|
||||
|
||||
export default {
|
||||
name: "ToolBar",
|
||||
components: {
|
||||
ToolbarButtonUpload,
|
||||
MoreHorizontalIcon,
|
||||
ChevronLeftIcon,
|
||||
UploadProgress,
|
||||
ToolbarButton,
|
||||
SearchBar,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
"FilePreviewType",
|
||||
"fileInfoVisible",
|
||||
"fileInfoDetail",
|
||||
"currentFolder",
|
||||
"browseHistory",
|
||||
"homeDirectory",
|
||||
]),
|
||||
hasCapacity() {
|
||||
// Check if set storage limitation
|
||||
if (!this.$store.getters.config.storageLimit) return true;
|
||||
name: 'ToolBar',
|
||||
components: {
|
||||
ToolbarButtonUpload,
|
||||
MoreHorizontalIcon,
|
||||
ChevronLeftIcon,
|
||||
UploadProgress,
|
||||
ToolbarButton,
|
||||
SearchBar
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'FilePreviewType',
|
||||
'fileInfoVisible',
|
||||
'fileInfoDetail',
|
||||
'currentFolder',
|
||||
'browseHistory',
|
||||
'homeDirectory'
|
||||
]),
|
||||
hasCapacity() {
|
||||
// Check if set storage limitation
|
||||
if (!this.$store.getters.config.storageLimit) return true
|
||||
|
||||
// Check if is loaded user
|
||||
if (!this.$store.getters.user) return true;
|
||||
// Check if is loaded user
|
||||
if (!this.$store.getters.user) return true
|
||||
|
||||
// Check if user has storage
|
||||
return (
|
||||
this.$store.getters.user.relationships.storage.data.attributes.used <=
|
||||
100
|
||||
);
|
||||
},
|
||||
directoryName() {
|
||||
return this.currentFolder
|
||||
? this.currentFolder.name
|
||||
: this.homeDirectory.name;
|
||||
},
|
||||
preview() {
|
||||
return this.FilePreviewType === "list" ? "th" : "th-list";
|
||||
},
|
||||
canCreateFolderInView() {
|
||||
return !this.$isThisLocation(["base", "public"]);
|
||||
},
|
||||
canDeleteInView() {
|
||||
return !this.$isThisLocation([
|
||||
"trash",
|
||||
"trash-root",
|
||||
"base",
|
||||
"participant_uploads",
|
||||
"latest",
|
||||
"shared",
|
||||
"public",
|
||||
]);
|
||||
},
|
||||
canUploadInView() {
|
||||
return !this.$isThisLocation(["base", "public"]);
|
||||
},
|
||||
canMoveInView() {
|
||||
return !this.$isThisLocation([
|
||||
"base",
|
||||
"participant_uploads",
|
||||
"latest",
|
||||
"shared",
|
||||
"public",
|
||||
]);
|
||||
},
|
||||
canShareInView() {
|
||||
let locations = [
|
||||
"base",
|
||||
"participant_uploads",
|
||||
"latest",
|
||||
"shared",
|
||||
"public",
|
||||
]
|
||||
|
||||
return !this.$isThisLocation(locations) || this.fileInfoDetail.length > 1
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
sortingAndPreview: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
sortingAndPreview () {
|
||||
if(this.sortingAndPreview) {
|
||||
events.$emit('sortingAndPreview', true)
|
||||
}
|
||||
// Check if user has storage
|
||||
return (
|
||||
this.$store.getters.user.relationships.storage.data.attributes.used <=
|
||||
100
|
||||
)
|
||||
},
|
||||
directoryName() {
|
||||
return this.currentFolder
|
||||
? this.currentFolder.name
|
||||
: this.homeDirectory.name
|
||||
},
|
||||
preview() {
|
||||
return this.FilePreviewType === 'list' ? 'th' : 'th-list'
|
||||
},
|
||||
canCreateFolderInView() {
|
||||
return !this.$isThisLocation(['base', 'public'])
|
||||
},
|
||||
canDeleteInView() {
|
||||
return !this.$isThisLocation([
|
||||
'trash',
|
||||
'trash-root',
|
||||
'base',
|
||||
'participant_uploads',
|
||||
'latest',
|
||||
'shared',
|
||||
'public'
|
||||
])
|
||||
},
|
||||
canUploadInView() {
|
||||
return !this.$isThisLocation(['base', 'public'])
|
||||
},
|
||||
canMoveInView() {
|
||||
return !this.$isThisLocation([
|
||||
'base',
|
||||
'participant_uploads',
|
||||
'latest',
|
||||
'shared',
|
||||
'public'
|
||||
])
|
||||
},
|
||||
canShareInView() {
|
||||
let locations = [
|
||||
'base',
|
||||
'participant_uploads',
|
||||
'latest',
|
||||
'shared',
|
||||
'public'
|
||||
]
|
||||
|
||||
if(!this.sortingAndPreview) {
|
||||
events.$emit('sortingAndPreview', false)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
// Get previous folder
|
||||
let previousFolder = last(this.browseHistory);
|
||||
|
||||
if (!previousFolder) return;
|
||||
|
||||
if (previousFolder.location === "trash-root") {
|
||||
this.$store.dispatch("getTrash");
|
||||
} else if (previousFolder.location === "shared") {
|
||||
this.$store.dispatch("getShared");
|
||||
} else {
|
||||
if (this.$isThisLocation("public")) {
|
||||
this.$store.dispatch("browseShared", [
|
||||
{ folder: previousFolder, back: true, init: false },
|
||||
]);
|
||||
} else {
|
||||
this.$store.dispatch("getFolder", [
|
||||
{ folder: previousFolder, back: true, init: false },
|
||||
]);
|
||||
return !this.$isThisLocation(locations) || this.fileInfoDetail.length > 1
|
||||
}
|
||||
}
|
||||
},
|
||||
folderActions() {
|
||||
events.$emit("folder:actions", this.currentFolder);
|
||||
},
|
||||
deleteItem() {
|
||||
this.$store.dispatch('deleteItem')
|
||||
},
|
||||
createFolder() {
|
||||
this.$createFolder();
|
||||
},
|
||||
moveItem() {
|
||||
events.$emit("popup:open", { name: "move", item: this.fileInfoDetail });
|
||||
},
|
||||
shareItem() {
|
||||
if (this.fileInfoDetail[0]) {
|
||||
//ADD BY M
|
||||
if (this.fileInfoDetail[0].shared) {
|
||||
events.$emit("popup:open", {
|
||||
name: "share-edit",
|
||||
item: this.fileInfoDetail[0],
|
||||
});
|
||||
} else {
|
||||
events.$emit("popup:open", {
|
||||
name: "share-create",
|
||||
item: this.fileInfoDetail[0],
|
||||
});
|
||||
data() {
|
||||
return {
|
||||
sortingAndPreview: false
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
events.$on('sortingAndPreview', (state) => {
|
||||
this.sortingAndPreview = state
|
||||
})
|
||||
}
|
||||
};
|
||||
watch: {
|
||||
sortingAndPreview() {
|
||||
if (this.sortingAndPreview) {
|
||||
events.$emit('sortingAndPreview', true)
|
||||
}
|
||||
|
||||
if (!this.sortingAndPreview) {
|
||||
events.$emit('sortingAndPreview', false)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
// Get previous folder
|
||||
let previousFolder = last(this.browseHistory)
|
||||
|
||||
if (!previousFolder) return
|
||||
|
||||
if (previousFolder.location === 'trash-root') {
|
||||
this.$store.dispatch('getTrash')
|
||||
} else if (previousFolder.location === 'shared') {
|
||||
this.$store.dispatch('getShared')
|
||||
} else {
|
||||
if (this.$isThisLocation('public')) {
|
||||
this.$store.dispatch('browseShared', [
|
||||
{ folder: previousFolder, back: true, init: false }
|
||||
])
|
||||
} else {
|
||||
this.$store.dispatch('getFolder', [
|
||||
{ folder: previousFolder, back: true, init: false }
|
||||
])
|
||||
}
|
||||
}
|
||||
},
|
||||
folderActions() {
|
||||
events.$emit('folder:actions', this.currentFolder)
|
||||
},
|
||||
deleteItem() {
|
||||
this.$store.dispatch('deleteItem')
|
||||
},
|
||||
createFolder() {
|
||||
this.$createFolder()
|
||||
},
|
||||
moveItem() {
|
||||
events.$emit('popup:open', { name: 'move', item: this.fileInfoDetail })
|
||||
},
|
||||
shareItem() {
|
||||
if (this.fileInfoDetail[0]) {
|
||||
//ADD BY M
|
||||
if (this.fileInfoDetail[0].shared) {
|
||||
events.$emit('popup:open', {
|
||||
name: 'share-edit',
|
||||
item: this.fileInfoDetail[0]
|
||||
})
|
||||
} else {
|
||||
events.$emit('popup:open', {
|
||||
name: 'share-create',
|
||||
item: this.fileInfoDetail[0]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
events.$on('sortingAndPreview', (state) => {
|
||||
this.sortingAndPreview = state
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -271,179 +218,179 @@ export default {
|
||||
@import "@assets/vue-file-manager/_mixins";
|
||||
|
||||
.toolbar-wrapper {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
> div {
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.directory-name {
|
||||
vertical-align: middle;
|
||||
@include font-size(17);
|
||||
color: $text;
|
||||
font-weight: 700;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.icon-back {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
margin-right: 6px;
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
@include transition(150ms);
|
||||
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-go-back {
|
||||
cursor: pointer;
|
||||
|
||||
.folder-options {
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
padding: 1px 4px;
|
||||
line-height: 0;
|
||||
border-radius: 3px;
|
||||
@include transition(150ms);
|
||||
|
||||
svg circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
svg circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-more {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.back-directory-title {
|
||||
@include font-size(15);
|
||||
line-height: 1;
|
||||
@include font-size(17);
|
||||
color: $text;
|
||||
font-weight: 700;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.icon-back {
|
||||
vertical-align: middle;
|
||||
color: $text;
|
||||
}
|
||||
cursor: pointer;
|
||||
margin-right: 6px;
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
@include transition(150ms);
|
||||
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-go-back {
|
||||
cursor: pointer;
|
||||
|
||||
.folder-options {
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
padding: 1px 4px;
|
||||
line-height: 0;
|
||||
border-radius: 3px;
|
||||
@include transition(150ms);
|
||||
|
||||
svg circle {
|
||||
@include transition(150ms);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
|
||||
svg circle {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-more {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.back-directory-title {
|
||||
@include font-size(15);
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-position {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
@include font-size(17);
|
||||
font-weight: 600;
|
||||
}
|
||||
span {
|
||||
@include font-size(17);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
text-align: right;
|
||||
text-align: right;
|
||||
|
||||
.toolbar-button-wrapper {
|
||||
margin-left: 28px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
.toolbar-button-wrapper {
|
||||
margin-left: 28px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: 5px;
|
||||
|
||||
&.active {
|
||||
/deep/ svg {
|
||||
line,
|
||||
circle,
|
||||
rect {
|
||||
stroke: $theme;
|
||||
&:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.preview-sorting{
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-inactive {
|
||||
opacity: 0.25;
|
||||
pointer-events: none;
|
||||
}
|
||||
.button {
|
||||
margin-left: 5px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
&.active {
|
||||
/deep/ svg {
|
||||
line,
|
||||
circle,
|
||||
rect {
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
&.preview-sorting {
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-inactive {
|
||||
opacity: 0.25;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.toolbar-go-back .back-directory-title {
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
.button {
|
||||
margin-left: 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
.toolbar-go-back .back-directory-title {
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.toolbar-button-wrapper {
|
||||
margin-left: 25px;
|
||||
.toolbar-tools {
|
||||
.button {
|
||||
margin-left: 0;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.toolbar-button-wrapper {
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
#desktop-toolbar {
|
||||
display: none;
|
||||
}
|
||||
#desktop-toolbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.toolbar .directory-name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.toolbar-go-back {
|
||||
.back-directory-title {
|
||||
color: $dark_mode_text_primary;
|
||||
.toolbar .directory-name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.folder-options {
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
.toolbar-go-back {
|
||||
.back-directory-title {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.folder-options {
|
||||
&:hover {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
&.preview-sorting{
|
||||
background: $dark_mode_foreground !important;
|
||||
}
|
||||
|
||||
.active {
|
||||
&.preview-sorting {
|
||||
background: $dark_mode_foreground !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
<ToolbarButton class="action-btn" v-if="$checkPermission('master') || $checkPermission('editor')" source="trash" :class="{'is-inactive' : fileInfoDetail.length < 1}" :action="$t('actions.delete')" @click.native="deleteItem"/>
|
||||
|
||||
<ToolbarButton class="action-btn" source="download" :class="{'is-inactive' : fileInfoDetail.length < 1}" :action="$t('actions.delete')" @click.native="downloadItem"/>
|
||||
<ToolbarButton class="action-btn" source="download" :class="{'is-inactive': canDownloadItems}" :action="$t('actions.delete')" @click.native="downloadItem"/>
|
||||
|
||||
<ToolbarButton class="action-btn close-icon" source="close" :action="$t('actions.close')" @click.native="closeSelecting"/>
|
||||
</div>
|
||||
@@ -21,7 +21,10 @@ export default {
|
||||
name: 'MobileMultiSelectMenu',
|
||||
components: { ToolbarButton },
|
||||
computed: {
|
||||
...mapGetters(['fileInfoDetail'])
|
||||
...mapGetters(['fileInfoDetail']),
|
||||
canDownloadItems() {
|
||||
return this.fileInfoDetail.filter(item => item.type === 'folder').length !== 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -33,14 +36,11 @@ export default {
|
||||
events.$emit('mobileSelecting:stop')
|
||||
},
|
||||
downloadItem() {
|
||||
this.fileInfoDetail.forEach((item , i) => {
|
||||
setTimeout(() => {
|
||||
this.$downloadFile(
|
||||
item.file_url,
|
||||
item.name + '.' + item.mimetype
|
||||
)
|
||||
}, i * 100);
|
||||
})
|
||||
if (this.fileInfoDetail.length > 1)
|
||||
this.$store.dispatch('downloadFiles')
|
||||
else {
|
||||
this.$downloadFile(this.fileInfoDetail[0].file_url, this.fileInfoDetail[0].name + '.' + this.fileInfoDetail[0].mimetype)
|
||||
}
|
||||
},
|
||||
moveItem() {
|
||||
// Open move item popup
|
||||
|
||||
@@ -1,60 +1,52 @@
|
||||
<template>
|
||||
<transition name="context-menu" class="options-wrapper">
|
||||
<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 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>
|
||||
<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>
|
||||
</transition>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -118,11 +110,11 @@ export default {
|
||||
this.$getDataByLocation()
|
||||
},
|
||||
changePreview(previewType) {
|
||||
|
||||
|
||||
this.$store.dispatch('changePreviewType', previewType)
|
||||
|
||||
this.close()
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
@@ -1,31 +1,24 @@
|
||||
<template>
|
||||
<div v-if="isVisible" class="sorting-preview" >
|
||||
<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')" >
|
||||
<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>
|
||||
<div class="show-icon" v-if="isGrid">
|
||||
<check-icon size="17"/>
|
||||
{{ $t('preview_sorting.grid_view') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="menu-option" @click="changePreview('list')">
|
||||
<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>
|
||||
<div class="show-icon" v-if="isList">
|
||||
<check-icon size="17"/>
|
||||
{{ $t('preview_sorting.list_view') }}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<ul class="menu-option-group">
|
||||
<li class="menu-option" @click="sort('created_at')">
|
||||
@@ -33,18 +26,18 @@
|
||||
<calendar-icon size="17"/>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{$t('preview_sorting.sort_date')}}
|
||||
{{ $t('preview_sorting.sort_date') }}
|
||||
</div>
|
||||
<div class="show-icon" >
|
||||
<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')" >
|
||||
<li class="menu-option" @click="sort('name')">
|
||||
<div class="icon">
|
||||
<alphabet-icon size="17" class="alphabet-icon"/>
|
||||
<alphabet-icon size="17" class="alphabet-icon"/>
|
||||
</div>
|
||||
<div class="text-label">
|
||||
{{$t('preview_sorting.sort_alphabet')}}
|
||||
{{ $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' }"/>
|
||||
@@ -57,83 +50,83 @@
|
||||
|
||||
<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'
|
||||
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
|
||||
export default {
|
||||
name: 'SortingAndPreview',
|
||||
components: {
|
||||
CalendarIcon,
|
||||
AlphabetIcon,
|
||||
ArrowUpIcon,
|
||||
CheckIcon,
|
||||
ListIcon,
|
||||
GridIcon
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['FilePreviewType']),
|
||||
isGrid() {
|
||||
return this.FilePreviewType === 'grid'
|
||||
},
|
||||
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)
|
||||
|
||||
this.isVisible = false
|
||||
|
||||
events.$emit('sortingAndPreview', false)
|
||||
}
|
||||
},
|
||||
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', (state) => {
|
||||
this.isVisible = state
|
||||
})
|
||||
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)
|
||||
|
||||
this.isVisible = false
|
||||
|
||||
events.$emit('sortingAndPreview', false)
|
||||
}
|
||||
},
|
||||
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', (state) => {
|
||||
this.isVisible = state
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -143,7 +136,8 @@
|
||||
.show-icon {
|
||||
margin-left: auto;
|
||||
max-height: 19px;
|
||||
.arrow-down {
|
||||
|
||||
.arrow-down {
|
||||
@include transform(rotate(180deg));
|
||||
}
|
||||
}
|
||||
@@ -153,14 +147,15 @@
|
||||
|
||||
.icon {
|
||||
margin-right: 20px;
|
||||
line-height: 0;
|
||||
line-height: 0;
|
||||
|
||||
.alphabet-icon {
|
||||
/deep/line,
|
||||
/deep/polyline {
|
||||
stroke:$text ;
|
||||
/deep/ line,
|
||||
/deep/ polyline {
|
||||
stroke: $text;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.text-label {
|
||||
@@ -221,12 +216,12 @@
|
||||
}
|
||||
|
||||
path,
|
||||
/deep/line,
|
||||
/deep/polyline,
|
||||
/deep/ line,
|
||||
/deep/ polyline,
|
||||
rect,
|
||||
circle,
|
||||
polygon {
|
||||
stroke: $theme !important;
|
||||
stroke: $theme !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -246,16 +241,16 @@
|
||||
|
||||
.icon {
|
||||
.alphabet-icon {
|
||||
/deep/line,
|
||||
/deep/polyline {
|
||||
stroke:$dark_mode_text_primary ;
|
||||
/deep/ line,
|
||||
/deep/ polyline {
|
||||
stroke: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@ $shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
|
||||
|
||||
$light_mode_input_background: hsla(210, 10%, 98%, 1);
|
||||
$light_mode_popup_shadow: 0 15px 50px 10px rgba(26,38,74,0.12);
|
||||
$light_mode_vignette: rgba(255, 255, 255, 0.7);
|
||||
$light_mode_vignette: rgba(9, 8, 12, 0.35);
|
||||
|
||||
// Dark Mode
|
||||
$dark_mode_vignette: rgba(0, 0, 0, 0.3);
|
||||
|
||||
Reference in New Issue
Block a user