nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-30 07:44:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

bulk-operations change MultiSelect component

Browse Source
This commit is contained in:
Milos Holba
2020-12-02 17:06:35 +01:00
parent 8561556f5c
commit 896be9c9c9
7 changed files with 210 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/App.vue
+3 -14
View File
@@ -29,7 +29,7 @@
<MobileMultiSelectMenu/>
<!-- Multi Select Drag & Drop UI -->
<MultiSelected :is-ghost="true" v-show="draged" id="multi-select-ui"/>
<DragUI/>
<!--Mobile Menu-->
<MobileMenu/>
@@ -61,7 +61,7 @@
import FileFullPreview from '@/components/FilesView/FileFullPreview'
import MobileNavigation from '@/components/Others/MobileNavigation'
import CookieDisclaimer from '@/components/Others/CookieDisclaimer'
import MultiSelected from '@/components/FilesView/MultiSelected'
import DragUI from '@/components/FilesView/DragUI'
import MobileMenu from '@/components/FilesView/MobileMenu'
import ShareCreate from '@/components/Others/ShareCreate'
import Confirm from '@/components/Others/Popup/Confirm'
@@ -82,7 +82,7 @@
MobileNavigation,
CookieDisclaimer,
FileFullPreview,
MultiSelected,
DragUI,
ToastrWrapper,
ShareCreate,
RenameItem,
@@ -128,7 +128,6 @@
data() {
return {
isScaledDown: false,
draged: false,
}
},
beforeMount() {
@@ -164,16 +163,6 @@
events.$on('hide:mobile-navigation', () => this.isScaledDown = false)
events.$on('mobileMenu:show', () => this.isScaledDown = true)
events.$on('fileItem:deselect', () => this.isScaledDown = false)
// Hnadle Drag & Drop Ghost show
events.$on('dragstart', (data) => {
setTimeout(() => {
this.draged = true
}, 50);
})
events.$on('drop', () => {
this.draged = false
})
}
}
</script>
resources/js/components/FilesView/DragUI.vue
+103
View File
@@ -0,0 +1,103 @@
<template>
<div>
<MultiSelected :title="title" :subtitle="subtitle" id="multi-select-ui" v-show="draged" />
</div>
</template>
<script>
import MultiSelected from '@/components/FilesView/MultiSelected'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name:"DragUI",
components: {MultiSelected},
computed: {
...mapGetters(['fileInfoDetail']),
title(){
if(this.fileInfoDetail.length > 1 && this.fileInfoDetail.includes(this.dragedItem)) {
return this.$t('file_detail.selected_multiple')
}
if((this.fileInfoDetail.length < 2 || !this.fileInfoDetail.includes(this.dragedItem)) && this.dragedItem ) {
return this.dragedItem.name
}
},
subtitle(){
if(this.fileInfoDetail.length > 1 && this.fileInfoDetail.includes(this.dragedItem) ) {
return this.fileInfoDetail.length + ' ' + this.$tc('file_detail.items', this.fileInfoDetail.length)
}
},
},
data () {
return {
draged: false,
dragedItem: undefined
}
},
mounted () {
// Hnadle Drag & Drop Ghost show
events.$on('dragstart', (data) => {
this.draged = true
this.dragedItem = data
})
events.$on('drop', () => {
this.draged = false
})
}
}
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
#multi-select-ui {
max-width: 300px;
min-width: 250px;
position: fixed;
z-index: 10;
pointer-events: none;
padding: 10px;
border-radius: 8px;
box-shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
background:white;
/deep/.text{
.title {
color: $text;
}
.count {
color: $text-muted;
}
}
/deep/.icon-wrapper {
.icon {
stroke: $theme;
}
}
}
@media (prefers-color-scheme: dark) {
#multi-select-ui {
background: $dark_mode_foreground;
/deep/.text {
.title {
color: $dark_mode_text_primary;
}
.count {
color: $dark_mode_text_secondary;
}
}
/deep/.icon-wrapper {
.icon {
stroke: $theme;
}
}
}
}
</style>
resources/js/components/FilesView/FileBrowser.vue
+4 -1
View File
@@ -80,7 +80,10 @@
<!--File info panel-->
<FileInfoPanel v-if="fileInfoDetail.length === 1"/>
<MultiSelected v-if="fileInfoDetail.length > 1 "/>
<MultiSelected v-if="fileInfoDetail.length > 1"
:title="$t('file_detail.selected_multiple')"
:subtitle="this.fileInfoDetail.length + ' ' + $tc('file_detail.items', this.fileInfoDetail.length)"
/>
<!--If file info panel empty show message-->
<EmptyMessage v-if="fileInfoDetail.length === 0" :message="$t('messages.nothing_to_preview')" icon="eye-off"/>
resources/js/components/FilesView/MultiSelected.vue
+6 -98
View File
@@ -1,23 +1,12 @@
<template>
<div :class="[this.moveItem ? 'move-item' : 'wrapper' , this.isGhost ? 'ghost' : '']">
<div class="wrapper">
<div class="icon-wrapper">
<CheckSquareIcon class="icon" size="21"/>
</div>
<!-- Multi select for the move item popup and file info -->
<div class="text" v-if="!this.isGhost">
<span class="title">{{ $t('file_detail.selected_multiple') }}</span>
<span class="count">{{this.fileInfoDetail.length}} {{ $tc('file_detail.items', this.fileInfoDetail.length) }}</span>
</div>
<!-- Multi select for the Drag & Drop -->
<div class="text" v-if="this.isGhost">
<div v-if="this.fileInfoDetail.length > 1 && !noSelectedItem">
<span class="title">{{ $t('file_detail.selected_multiple') }}</span>
<span class="count">{{this.fileInfoDetail.length}} {{ $tc('file_detail.items', this.fileInfoDetail.length) }}</span>
</div>
<div v-if="this.fileInfoDetail.length < 2 || noSelectedItem">
<span v-if="this.dragedItem" class="title">{{ this.dragedItem.name }}</span>
</div>
<div class="text" >
<span class="title">{{title }}</span>
<span class="count">{{subtitle }}</span>
</div>
</div>
</template>
@@ -30,47 +19,14 @@ import {events} from '@/bus'
export default {
name:'MultiSelected',
props: [ 'moveItem' , 'isGhost' ],
props: [ 'title' , 'subtitle' ],
components: {CheckSquareIcon},
computed: {
...mapGetters(['fileInfoDetail']),
// If the draged item is not in selected items
noSelectedItem() {
return !this.fileInfoDetail.includes(this.dragedItem)
}
},
data () {
return {
dragedItem: undefined,
}
},
mounted () {
// Hnadle Drag & Drop Ghost show
if(this.isGhost) {
events.$on('dragstart', (data) => {
this.dragedItem = data
})
}
}
}
</script>
<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.ghost {
max-width: 300px;
min-width: 250px;
position: fixed;
z-index: 10;
pointer-events: none;
padding: 10px;
border-radius: 8px;
box-shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
background:white;
}
.wrapper {
display: flex;
@@ -109,42 +65,7 @@ import {events} from '@/bus'
}
}
}
.move-item {
display: flex;
justify-content: center;
.text{
padding-left: 10px;
width: 100%;
word-break: break-all;
.title {
@include font-size(14);
font-weight: 700;
line-height: 1.4;
display: block;
color: $text;
}
.count {
@include font-size(12);
font-weight: 600;
color: $text-muted;
display: block;
}
}
.icon-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
text-align: center;
white-space: nowrap;
outline: none;
border: none;
.icon {
stroke: $theme;
}
}
}
@media (prefers-color-scheme: dark) {
.wrapper {
.text {
@@ -161,18 +82,5 @@ import {events} from '@/bus'
}
}
}
.move-item {
.text {
.title {
color: $dark_mode_text_primary;
}
.count {
color: $dark_mode_text_secondary;
}
}
}
.ghost {
background: $dark_mode_foreground;
}
}
</style>
resources/js/components/Others/MoveItem.vue
+32 -1
View File
@@ -13,7 +13,10 @@
<div v-if="! isLoadingTree && navigation">
<ThumbnailItem v-if="fileInfoDetail.length < 2 || noSelectedItem" class="item-thumbnail" :item="pickedItem" info="location"/>
<MultiSelected class="multiple-selected" :move-item="true" v-if="fileInfoDetail.length > 1 && !noSelectedItem"/>
<MultiSelected class="multiple-selected"
:title="$t('file_detail.selected_multiple')"
:subtitle="this.fileInfoDetail.length + ' ' + $tc('file_detail.items', this.fileInfoDetail.length)"
v-if="fileInfoDetail.length > 1 && !noSelectedItem"/>
<TreeMenu :disabled-by-id="pickedItem" :depth="1" :nodes="items" v-for="items in navigation" :key="items.unique_id"/>
</div>
@@ -139,6 +142,8 @@
</script>
<style scoped lang="scss">
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.item-thumbnail {
margin-bottom: 20px;
@@ -146,5 +151,31 @@
.multiple-selected {
padding: 0 20px;;
margin-bottom: 20px;
/deep/.text{
.title {
color: $text;
}
.count {
color: $text-muted;
}
}
/deep/.icon-wrapper {
.icon {
stroke: $theme;
}
}
}
@media (prefers-color-scheme: dark) {
.multiple-selected {
/deep/.text {
.title {
color: $dark_mode_text_primary;
}
.count {
color: $dark_mode_text_secondary;
}
}
}
}
</style>
resources/js/views/Shared/SharedPage.vue
+4 -15
View File
@@ -16,8 +16,8 @@
<!--Rename folder or file item-->
<RenameItem/>
<!-- Multi Select Drag & Drop UI -->
<MultiSelected :is-ghost="true" v-show="draged" id="multi-select-ui"/>
<!-- Drag & Drop UI -->
<DragUI/>
<!--Mobile Menu-->
<MobileMenu/>
@@ -114,7 +114,7 @@
import FileFullPreview from '@/components/FilesView/FileFullPreview'
import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
import ContentSidebar from '@/components/Sidebar/ContentSidebar'
import MultiSelected from '@/components/FilesView/MultiSelected'
import DragUI from '@/components/FilesView/DragUI'
import FileItemGrid from '@/components/FilesView/FileItemGrid'
import ContentGroup from '@/components/Sidebar/ContentGroup'
import FileBrowser from '@/components/FilesView/FileBrowser'
@@ -146,7 +146,7 @@
FileFullPreview,
DesktopToolbar,
ContentSidebar,
MultiSelected,
DragUI,
FileItemGrid,
ContentGroup,
AuthContent,
@@ -188,7 +188,6 @@
isPageLoading: true,
currentPage: undefined,
homeDirectory: undefined,
draged: false,
}
},
methods: {
@@ -268,16 +267,6 @@
},
created() {
// Hnadle Drag & Drop Ghost show
events.$on('dragstart', (data) => {
setTimeout(() => {
this.draged = true
}, 50);
})
events.$on('drop', () => {
this.draged = false
})
axios
.get('/api/shared/' + this.$route.params.token, )
.then(response => {