nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 02:50:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

bulk-version v0.1 contextMenu Mobile version selecting

Browse Source
This commit is contained in:
Milos Holba
2020-11-15 19:59:12 +01:00
parent 324f4b1ffa
commit 5acaadeaae
13 changed files with 545 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/ContextMenu.vue
+23 -28
View File
@@ -49,7 +49,7 @@
$isThisLocation(['trash', 'trash-root']) && $checkPermission('master') && !showFromPreview
" id="menu-list" class="menu-options">
<ul class="menu-option-group">
<li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item">
<li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item && multiSelectContextMenu ">
<div class="icon">
<life-buoy-icon size="17"></life-buoy-icon>
</div>
@@ -74,7 +74,7 @@
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<ul class="menu-option-group" v-if="item && multiSelectContextMenu">
<li class="menu-option" @click="ItemDetail">
<div class="icon">
<eye-icon size="17"></eye-icon>
@@ -96,7 +96,7 @@
<!--ContextMenu for Base location with MASTER permission-->
<div v-if="$isThisLocation(['shared']) && $checkPermission('master') && !showFromPreview" id="menu-list" class="menu-options">
<ul class="menu-option-group" v-if="item && isFolder">
<ul class="menu-option-group" v-if="item && isFolder && multiSelectContextMenu">
<li class="menu-option" @click="addToFavourites">
<div class="icon">
<star-icon size="17"></star-icon>
@@ -111,7 +111,7 @@
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<li class="menu-option" @click="shareItem">
<li class="menu-option" @click="shareItem" v-if="multiSelectContextMenu">
<div class="icon">
<link-icon size="17"></link-icon>
</div>
@@ -132,7 +132,7 @@
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<ul class="menu-option-group" v-if="item && multiSelectContextMenu">
<li class="menu-option" @click="ItemDetail" v-if="item">
<div class="icon">
<eye-icon size="17"></eye-icon>
@@ -158,7 +158,7 @@
$checkPermission('master') && !showFromPreview
" id="menu-list" class="menu-options">
<ul class="menu-option-group" v-if="!$isThisLocation(['participant_uploads', 'latest'])">
<li class="menu-option" @click="addToFavourites" v-if="item && isFolder">
<li class="menu-option" @click="addToFavourites" v-if="item && isFolder && multiSelectContextMenu">
<div class="icon">
<star-icon size="17"></star-icon>
</div>
@@ -188,7 +188,7 @@
{{ $t('context_menu.move') }}
</div>
</li>
<li class="menu-option" @click="shareItem">
<li class="menu-option" @click="shareItem" v-if="multiSelectContextMenu">
<div class="icon">
<link-icon size="17"></link-icon>
</div>
@@ -209,7 +209,7 @@
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<ul class="menu-option-group" v-if="item && multiSelectContextMenu">
<li class="menu-option" @click="ItemDetail">
<div class="icon">
<eye-icon size="17"></eye-icon>
@@ -230,7 +230,7 @@
</div>
<!--ContextMenu for Base location with EDITOR permission-->
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor') && !showFromPreview" id="menu-list" class="menu-options">
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor') && !showFromPreview " id="menu-list" class="menu-options">
<ul class="menu-option-group">
<li class="menu-option" @click="createFolder">
<div class="icon">
@@ -259,7 +259,7 @@
</div>
</li>
</ul>
<ul class="menu-option-group" v-if="item">
<ul class="menu-option-group" v-if="item && multiSelectContextMenu ">
<li class="menu-option" @click="ItemDetail">
<div class="icon">
<eye-icon size="17"></eye-icon>
@@ -281,9 +281,9 @@
<!--ContextMenu for Base location with VISITOR permission-->
<div v-if="
$isThisLocation(['base', 'public']) && $checkPermission('visitor') && !showFromPreview
$isThisLocation(['base', 'public']) && $checkPermission('visitor') && !showFromPreview
" id="menu-list" class="menu-options">
<ul class="menu-option-group" v-if="item">
<ul class="menu-option-group" v-if="item && multiSelectContextMenu">
<li class="menu-option" @click="ItemDetail">
<div class="icon">
<eye-icon size="17"></eye-icon>
@@ -321,7 +321,6 @@ import {
import { mapGetters } from 'vuex'
import { events } from '@/bus'
<<<<<<< HEAD
export default {
name: 'ContextMenu',
components: {
@@ -334,22 +333,18 @@ export default {
TrashIcon,
LinkIcon,
StarIcon,
EyeIcon
=======
// Show panel if is not open
this.$store.dispatch("fileInfoToggle", true);
},
deleteItem() {
// Dispatch remove item
this.$store.dispatch("deleteItem");
},
createFolder() {
// Create folder
this.$createFolder(this.$t("popup_create_folder.folder_default_name"));
>>>>>>> 559bee6 (bulk-operations v0.1 setup bulk delete,move items and FileInfoPanel)
EyeIcon,
},
computed: {
...mapGetters(['user']),
...mapGetters(['user', 'fileInfoDetail']),
multiSelectContextMenu() {
if(this.fileInfoDetail.length > 1 && this.fileInfoDetail.includes(this.item)) {
return false
}
if(this.fileInfoDetail.length < 2 || !this.fileInfoDetail.includes(this.item)) {
return true
}
},
favourites() {
return this.user.relationships.favourites.data.attributes.folders
},
@@ -402,7 +397,7 @@ export default {
},
moveItem() {
// Open move item popup
events.$emit('popup:open', { name: 'move', item: this.item })
events.$emit('popup:open', { name: 'move', item: [this.item] })
},
shareItem() {
if (this.item.shared) {
resources/js/components/FilesView/DesktopToolbar.vue
+4 -1
View File
@@ -175,13 +175,16 @@ export default {
]);
},
canShareInView() {
return !this.$isThisLocation([
let location = !this.$isThisLocation([
"base",
"participant_uploads",
"latest",
"shared",
"public",
]);
if(location || this.fileInfoDetail.length > 1) {
return true
}
},
},
methods: {
resources/js/components/FilesView/FileBrowser.vue
+1 -1
View File
@@ -206,7 +206,7 @@
// On items delete
events.$on('items:delete', () => {
this.$store.dispatch('deleteItem', this.fileInfoDetail)
this.$store.dispatch('deleteItem')
})
}
}
resources/js/components/FilesView/FileItemList.vue
+118 -50
View File
@@ -14,8 +14,15 @@
@dragleave="dragLeave"
@dragover.prevent="dragEnter"
class="file-item"
:class="{ 'is-clicked': this.isClicked, 'is-dragenter': area }"
:class="{'is-clicked' : isClicked , 'no-clicked' : !isClicked, 'is-dragenter': area }"
>
<div class="check-select" v-if="mobileMultiSelect">
<div class="select-box" :class="{'select-box-active' : isClicked } ">
<CheckIcon v-if="isClicked" class="icon" size="17"/>
</div>
</div>
<!--Thumbnail for item-->
<div class="icon-item">
<!--If is file or image, then link item-->
@@ -60,7 +67,7 @@
</div>
<!--Go Next icon-->
<div class="actions" v-if="$isMobile() && !($checkPermission('visitor') && isFolder)">
<div class="actions" v-if="$isMobile() && !($checkPermission('visitor') && isFolder || mobileMultiSelect)">
<span @click.stop="showItemActions" class="show-actions">
<FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
</span>
@@ -70,7 +77,7 @@
</template>
<script>
import { LinkIcon, UserPlusIcon } from 'vue-feather-icons'
import { LinkIcon, UserPlusIcon , CheckIcon } from 'vue-feather-icons'
import { debounce } from 'lodash'
import { mapGetters } from 'vuex'
import { events } from '@/bus'
@@ -80,13 +87,15 @@ export default {
props: ['data'],
components: {
UserPlusIcon,
LinkIcon
LinkIcon,
CheckIcon,
},
computed: {
...mapGetters(['FilePreviewType', 'fileInfoDetail' ]),
...mapGetters({allData: 'data'}),
isClicked() {
if(this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)){
console.log('som tu')
return true
}else {
return false
@@ -139,12 +148,14 @@ export default {
data() {
return {
area: false,
itemName: undefined
itemName: undefined,
mobileMultiSelect:false
}
},
methods: {
showItemActions() {
// Load file info detail
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
events.$emit('mobileMenu:show')
@@ -159,57 +170,68 @@ export default {
},
clickedItem(e) {
events.$emit('contextMenu:hide')
if(e.ctrlKey && !e.shiftKey) {
// Click + Ctrl
if(!this.$isMobile()) {
if(e.ctrlKey && !e.shiftKey) {
// Click + Ctrl
if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)){
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL',this.data )
if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)){
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL',this.data )
}else {
console.log(this.data.name)
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
}
}else if (e.shiftKey){
// Click + Shift
let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length -1])
let clickedItem = this.allData.indexOf(this.data)
// If Click + Shift + Ctrl dont remove already selected items
if(!e.ctrlKey) {
this.$store.commit('CLEAR_FILEINFO_DETAIL')
}
if(lastItem < clickedItem) {
for(let i=lastItem ; i<=clickedItem; i++ ) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
}
}else {
for(let i=clickedItem ; i<=lastItem; i++ ) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
}
}
}else {
console.log(this.data.name)
// Click
events.$emit('fileItem:deselect')
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
}
}else if (e.shiftKey){
// Click + Shift
}
let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length -1])
let clickedItem = this.allData.indexOf(this.data)
// If Click + Shift + Ctrl dont remove already selected items
if(!e.ctrlKey) {
this.$store.commit('CLEAR_FILEINFO_DETAIL')
}
if(lastItem < clickedItem) {
for(let i=lastItem ; i<=clickedItem; i++ ) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
if(!this.mobileMultiSelect && this.$isMobile()){
// Open in mobile version on first click
if (this.$isMobile() && this.isFolder) {
// Go to folder
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
} else {
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
}
}
if (this.$isMobile()) {
if (this.isImage || this.isVideo || this.isAudio) {
events.$emit('fileFullPreview:show')
}
}
}
if(this.mobileMultiSelect && this.$isMobile()) {
if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data )
console.log(this.data)
}else {
for(let i=clickedItem ; i<=lastItem; i++ ) {
this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
}
}
}else {
// Click
events.$emit('fileItem:deselect')
this.$store.commit('CLEAR_FILEINFO_DETAIL')
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
}
// Open in mobile version on first click
if (this.$isMobile() && this.isFolder) {
// Go to folder
if (this.$isThisLocation('public')) {
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
} else {
this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
}
}
if (this.$isMobile()) {
if (this.isImage || this.isVideo || this.isAudio) {
events.$emit('fileFullPreview:show')
this.$store.commit('GET_FILEINFO_DETAIL', this.data)
}
}
@@ -247,6 +269,11 @@ export default {
created() {
this.itemName = this.data.name
events.$on('mobileSelecting-start', () => {
this.mobileMultiSelect = !this.mobileMultiSelect
this.$store.commit('CLEAR_FILEINFO_DETAIL')
})
events.$on('fileItem:deselect', () => {
// Deselect file
this.$store.commit('CLEAR_FILEINFO_DETAIL')
@@ -264,6 +291,27 @@ export default {
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.check-select {
margin-right: 10px;
margin-left: 3px;
.select-box {
width: 20px;
height: 20px;
background-color: $light_background;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
box-shadow: 0 3px 15px 2px hsla(220, 36%, 16%, 0.05);
}
.select-box-active {
background-color: $text !important;
.icon {
stroke: white;
}
}
}
.file-wrapper {
user-select: none;
position: relative;
@@ -429,16 +477,21 @@ export default {
display: flex;
align-items: center;
padding: 7px;
// background-color: white ;
&.is-dragenter {
border: 2px dashed $theme;
border-radius: 8px;
}
&.no-clicked {
background: white !important;
}
&:hover,
&.is-clicked {
border-radius: 8px;
background: $light_background;
background: $light_background ;
.item-name .name {
color: $theme;
@@ -448,6 +501,18 @@ export default {
}
@media (prefers-color-scheme: dark) {
.check-select {
.select-box {
background-color: $dark_mode_foreground;
}
.select-box-active {
background-color: $dark_mode_text_primary !important;
.icon {
stroke: $text;
}
}
}
.file-wrapper {
.icon-item {
.file-icon {
@@ -467,6 +532,9 @@ export default {
}
.file-item {
&.no-clicked {
background: $dark_mode_background !important;
}
&:hover,
&.is-clicked {
background: $dark_mode_foreground;
resources/js/components/FilesView/ImageMetaData.vue
+3 -1
View File
@@ -89,7 +89,9 @@ import {split} from 'lodash'
export default {
name: 'ImageMetaData',
computed: {
...mapGetters(['fileInfoDetail']),
fileInfoDetail() {
return this.$store.getters.fileInfoDetail[0]
},
},
methods: {
formatGps(location, ref) {
resources/js/components/FilesView/MobileActions.vue
+8
View File
@@ -19,6 +19,9 @@
<MobileActionButtonUpload>
{{ $t('context_menu.upload') }}
</MobileActionButtonUpload>
<MobileMultiSelectButton @click.native="mobileSelecting">
Select
</MobileMultiSelectButton>
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
{{ previewText }}
</MobileActionButton>
@@ -38,6 +41,7 @@
<script>
import MobileActionButtonUpload from '@/components/FilesView/MobileActionButtonUpload'
import MobileMultiSelectButton from '@/components/FilesView/MobileMultiSelectButton'
import MobileActionButton from '@/components/FilesView/MobileActionButton'
import UploadProgress from '@/components/FilesView/UploadProgress'
import {mapGetters} from 'vuex'
@@ -48,6 +52,7 @@
name: 'MobileActions',
components: {
MobileActionButtonUpload,
MobileMultiSelectButton,
MobileActionButton,
UploadProgress,
},
@@ -61,6 +66,9 @@
}
},
methods: {
mobileSelecting() {
events.$emit('mobileSelecting-start')
},
switchPreview() {
this.$store.dispatch('changePreviewType')
},
resources/js/components/FilesView/MobileMenu.vue
+74 -43
View File
@@ -7,11 +7,30 @@
class="options"
@click="closeAndResetContextMenu"
>
<div class="menu-wrapper">
<div class="mobile-selected-menu" v-if="mobileMultiSelect">
<ToolbarButton
source="move"
:action="$t('actions.move')"
@click.native="moveItem"
/>
<ToolbarButton
source="trash"
:action="$t('actions.move')"
@click.native="moveItem"
/>
</div>
<!--Item Thumbnail-->
<ThumbnailItem
v-if="!mobileMultiSelect"
class="item-thumbnail"
:item="fileInfoDetail"
:item="fileInfoDetail[0]"
info="metadata"
/>
@@ -19,15 +38,15 @@
<div
v-if="
$isThisLocation(['trash', 'trash-root']) &&
$checkPermission('master')
$checkPermission('master') && !mobileMultiSelect
"
class="menu-options"
>
<ul class="menu-option-group">
<li
class="menu-option"
@click="$store.dispatch('restoreItem', fileInfoDetail)"
v-if="fileInfoDetail"
@click="$store.dispatch('restoreItem', fileInfoDetail[0])"
v-if="fileInfoDetail[0]"
>
<div class="icon">
<life-buoy-icon size="17"></life-buoy-icon>
@@ -39,7 +58,7 @@
<li
class="menu-option delete"
@click="deleteItem"
v-if="fileInfoDetail"
v-if="fileInfoDetail[0]"
>
<div class="icon">
<trash-2-icon size="17"></trash-2-icon>
@@ -64,14 +83,14 @@
<!--Mobile for Base location-->
<div
v-if="$isThisLocation(['shared']) && $checkPermission('master')"
v-if="$isThisLocation(['shared']) && $checkPermission('master') && !mobileMultiSelect"
class="menu-options"
>
<ul class="menu-option-group">
<li
class="menu-option"
@click="addToFavourites"
v-if="fileInfoDetail && isFolder"
v-if="fileInfoDetail[0] && isFolder"
>
<div class="icon">
<star-icon size="17"></star-icon>
@@ -87,7 +106,7 @@
</ul>
<ul class="menu-option-group">
<li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
<li class="menu-option" @click="renameItem" v-if="fileInfoDetail[0]">
<div class="icon">
<edit-2-icon size="17"></edit-2-icon>
</div>
@@ -95,13 +114,13 @@
{{ $t("context_menu.rename") }}
</div>
</li>
<li class="menu-option" @click="shareItem" v-if="fileInfoDetail">
<li class="menu-option" @click="shareItem" v-if="fileInfoDetail[0]">
<div class="icon">
<link-icon size="17"></link-icon>
</div>
<div class="text-label">
{{
fileInfoDetail.shared
fileInfoDetail[0].shared
? $t("context_menu.share_edit")
: $t("context_menu.share")
}}
@@ -110,7 +129,7 @@
<li
class="menu-option delete"
@click="deleteItem"
v-if="fileInfoDetail"
v-if="fileInfoDetail[0]"
>
<div class="icon">
<trash-2-icon size="17"></trash-2-icon>
@@ -137,11 +156,11 @@
<div
v-if="
$isThisLocation(['base', 'participant_uploads', 'latest']) &&
$checkPermission('master')
$checkPermission('master') && !mobileMultiSelect
"
class="menu-options"
>
<ul class="menu-option-group" v-if="fileInfoDetail && isFolder">
<ul class="menu-option-group" v-if="fileInfoDetail[0] && isFolder">
<li class="menu-option" @click="addToFavourites">
<div class="icon">
<star-icon size="17"></star-icon>
@@ -157,7 +176,7 @@
</ul>
<ul class="menu-option-group">
<li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
<li class="menu-option" @click="renameItem" v-if="fileInfoDetail[0]">
<div class="icon">
<edit-2-icon size="17"></edit-2-icon>
</div>
@@ -165,7 +184,7 @@
{{ $t("context_menu.rename") }}
</div>
</li>
<li class="menu-option" @click="moveItem" v-if="fileInfoDetail">
<li class="menu-option" @click="moveItem" v-if="fileInfoDetail[0]">
<div class="icon">
<corner-down-right-icon size="17"></corner-down-right-icon>
</div>
@@ -173,13 +192,13 @@
{{ $t("context_menu.move") }}
</div>
</li>
<li class="menu-option" @click="shareItem" v-if="fileInfoDetail">
<li class="menu-option" @click="shareItem" v-if="fileInfoDetail[0]">
<div class="icon">
<link-icon size="17"></link-icon>
</div>
<div class="text-label">
{{
fileInfoDetail.shared
fileInfoDetail[0].shared
? $t("context_menu.share_edit")
: $t("context_menu.share")
}}
@@ -188,7 +207,7 @@
<li
class="menu-option delete"
@click="deleteItem"
v-if="fileInfoDetail"
v-if="fileInfoDetail[0]"
>
<div class="icon">
<trash-2-icon size="17"></trash-2-icon>
@@ -214,12 +233,12 @@
<!--Mobile for Base location with EDITOR permission-->
<div
v-if="
$isThisLocation(['base', 'public']) && $checkPermission('editor')
$isThisLocation(['base', 'public']) && $checkPermission('editor') && !mobileMultiSelect
"
class="menu-options"
>
<ul class="menu-option-group">
<li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
<li class="menu-option" @click="renameItem" v-if="fileInfoDetail[0]">
<div class="icon">
<edit-2-icon size="17"></edit-2-icon>
</div>
@@ -227,7 +246,7 @@
{{ $t("context_menu.rename") }}
</div>
</li>
<li class="menu-option" @click="moveItem" v-if="fileInfoDetail">
<li class="menu-option" @click="moveItem" v-if="fileInfoDetail[0]">
<div class="icon">
<corner-down-right-icon size="17"></corner-down-right-icon>
</div>
@@ -260,7 +279,7 @@
<!--Mobile for Base location with VISITOR permission-->
<div
v-if="
$isThisLocation(['base', 'public']) && $checkPermission('visitor')
$isThisLocation(['base', 'public']) && $checkPermission('visitor') && !mobileMultiSelect
"
class="menu-options"
>
@@ -280,7 +299,7 @@
</transition>
<transition name="fade">
<div
v-show="isVisible"
v-show="isVisible && !mobileMultiSelect"
class="vignette"
@click="closeAndResetContextMenu"
></div>
@@ -290,6 +309,7 @@
<script>
import ThumbnailItem from "@/components/Others/ThumbnailItem";
import ToolbarButton from "@/components/FilesView/ToolbarButton";
import {
CornerDownRightIcon,
DownloadCloudIcon,
@@ -311,6 +331,7 @@ export default {
CornerDownRightIcon,
DownloadCloudIcon,
FolderPlusIcon,
ToolbarButton,
ThumbnailItem,
LifeBuoyIcon,
Trash2Icon,
@@ -327,47 +348,53 @@ export default {
},
isInFavourites() {
return this.favourites.find(
(el) => el.unique_id == this.fileInfoDetail.unique_id
(el) => el.unique_id == this.fileInfoDetail[0].unique_id
);
},
isFile() {
return (
this.fileInfoDetail &&
this.fileInfoDetail.type !== "folder" &&
this.fileInfoDetail &&
this.fileInfoDetail.type !== "image"
this.fileInfoDetail[0] &&
this.fileInfoDetail[0].type !== "folder" &&
this.fileInfoDetail[0] &&
this.fileInfoDetail[0].type !== "image"
);
},
isImage() {
return this.fileInfoDetail && this.fileInfoDetail.type === "image";
return this.fileInfoDetail[0] && this.fileInfoDetail[0].type === "image";
},
isFolder() {
return this.fileInfoDetail && this.fileInfoDetail.type === "folder";
return this.fileInfoDetail[0] && this.fileInfoDetail[0].type === "folder";
},
},
data() {
return {
isVisible: false,
showFromMediaPreview: false,
mobileMultiSelect:false
};
},
methods: {
moveItem() {
// Open move item popup
events.$emit("popup:open", { name: "move", item: this.fileInfoDetail });
if(!this.mobileMultiSelect) {
events.$emit("popup:open", { name: "move", item: [this.fileInfoDetail[0]] });
}
if(this.mobileMultiSelect) {
events.$emit("popup:open", { name: "move", item: null });
}
},
shareItem() {
if (this.fileInfoDetail.shared) {
if (this.fileInfoDetail[0].shared) {
// Open share item popup
events.$emit("popup:open", {
name: "share-edit",
item: this.fileInfoDetail,
item: this.fileInfoDetail[0],
});
} else {
// Open share item popup
events.$emit("popup:open", {
name: "share-create",
item: this.fileInfoDetail,
item: this.fileInfoDetail[0],
});
}
},
@@ -375,33 +402,33 @@ export default {
if (
this.favourites &&
!this.favourites.find(
(el) => el.unique_id == this.fileInfoDetail.unique_id
(el) => el.unique_id == this.fileInfoDetail[0].unique_id
)
) {
this.$store.dispatch("addToFavourites", this.fileInfoDetail);
this.$store.dispatch("addToFavourites", this.fileInfoDetail[0]);
} else {
this.$store.dispatch("removeFromFavourites", this.fileInfoDetail);
this.$store.dispatch("removeFromFavourites", this.fileInfoDetail[0]);
}
},
downloadItem() {
this.$downloadFile(
this.fileInfoDetail.file_url,
this.fileInfoDetail.name + "." + this.fileInfoDetail.mimetype
this.fileInfoDetail[0].file_url,
this.fileInfoDetail[0].name + "." + this.fileInfoDetail[0].mimetype
);
},
deleteItem() {
this.$store.dispatch("deleteItem", this.fileInfoDetail);
this.$store.dispatch("deleteItem", this.fileInfoDetail[0]);
},
renameItem() {
let itemName = prompt(
this.$t("popup_rename.title"),
this.fileInfoDetail.name
this.fileInfoDetail[0].name
);
if (itemName && itemName !== "") {
let item = {
unique_id: this.fileInfoDetail.unique_id,
type: this.fileInfoDetail.type,
unique_id: this.fileInfoDetail[0].unique_id,
type: this.fileInfoDetail[0].type,
name: itemName,
};
@@ -428,6 +455,10 @@ export default {
},
},
created() {
events.$on('mobileSelecting-start' , () => {
this.mobileMultiSelect = !this.mobileMultiSelect
this.isVisible = !this.isVisible
})
// Show context menu
events.$on("mobileMenu:show", (showFromMedia) => {
//If emit come from MediaFullPreview
resources/js/components/FilesView/MobileMultiSelectButton.vue
+101
View File
@@ -0,0 +1,101 @@
<template>
<button class="mobile-action-button">
<div class="flex" :class="{'active' : mobileSelectingActive}">
<CheckSquareIcon size="15" class="icon"></CheckSquareIcon>
<span class="label">
<slot></slot>
</span>
</div>
</button>
</template>
<script>
import {CheckSquareIcon} from "vue-feather-icons";
import {events} from '@/bus'
export default {
name: 'MobileActionButton',
props: [
'icon'
],
components: {
CheckSquareIcon
},
data () {
return {
mobileSelectingActive: false
}
},
mounted() {
events.$on('mobileSelecting-start' , () => {
this.mobileSelectingActive = !this.mobileSelectingActive
})
}
}
</script>
<style scoped lang="scss">
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';
.mobile-action-button {
background: $light_background;
margin-right: 15px;
border-radius: 8px;
padding: 7px 10px;
cursor: pointer;
border: none;
@include transition(150ms);
.flex {
display: flex;
align-items: center;
}
.icon {
margin-right: 10px;
@include font-size(14);
path, line, polyline, rect, circle {
@include transition(150ms);
}
}
.label {
@include transition(150ms);
@include font-size(14);
font-weight: 700;
color: $text;
}
.active {
// @include transform(scale(0.95));
background: rgba($theme, 0.1);
.icon {
path, line, polyline, rect, circle {
stroke: $theme;
}
}
.label {
color: $theme;
}
}
}
@media (prefers-color-scheme: dark) {
.mobile-action-button {
background: $dark_mode_foreground;
path, line, polyline, rect, circle {
stroke: $theme;
}
.label {
color: $dark_mode_text_primary;
}
}
}
</style>
resources/js/components/FilesView/MultiSelected.vue
+52 -2
View File
@@ -1,6 +1,6 @@
<template>
<div class="wrapper">
<div class="icon-wrapper">
<div :class="this.moveItem ? 'move-item' : 'wrapper'">
<div class="icon-wrapper">
<CheckSquareIcon class="icon" size="21"/>
</div>
<div class="text">
@@ -16,6 +16,7 @@ import {mapGetters} from 'vuex'
export default {
name:'MultiSelected',
props: ['moveItem'],
components: {CheckSquareIcon},
computed: {
...mapGetters(['fileInfoDetail'])
@@ -60,6 +61,45 @@ import {mapGetters} from 'vuex'
white-space: nowrap;
outline: none;
border: none;
.icon {
stroke: $text;
}
}
}
.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) {
@@ -70,5 +110,15 @@ import {mapGetters} from 'vuex'
}
}
}
.move-item {
.text {
.title {
color: $dark_mode_text_primary;
}
.count {
color: $dark_mode_text_secondary;
}
}
}
}
</style>