- 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
2020-12-15 18:05:08 +01:00
parent 372b3aa407
commit 7b27fa70d8
8 changed files with 610 additions and 613 deletions

View File

@@ -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>