nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-20 08:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

add Zip & Download folder to mobile menu, fix thumbnailItem for images without thumbnail, change color of file icon in mobile menu dark mode

Browse Source
This commit is contained in:
Milos Holba
2021-02-16 00:07:05 +01:00
parent 28efba5773
commit 2a105877f3
5 changed files with 113 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/FilesView/FileItemGrid.vue
View File

@@ -58,7 +58,7 @@
</div>
</div>
<span @click.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! ( $checkPermission('visitor') && isFolder || multiSelectMode ) && canShowMobileOptions">
<span @click.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! multiSelectMode && canShowMobileOptions">
<FontAwesomeIcon icon="ellipsis-h" class="icon-action"></FontAwesomeIcon>
</span>
</div>

2
resources/js/components/FilesView/FileItemList.vue
View File

@@ -62,7 +62,7 @@
<!--Show item actions-->
<transition name="slide-from-right">
<div class="actions" v-if="$isMobile() && !($checkPermission('visitor') && isFolder || mobileMultiSelect)">
<div class="actions" v-if="$isMobile() && ! mobileMultiSelect">
<span @click.stop="showItemActions" class="show-actions">
<FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
</span>

54
resources/js/components/FilesView/MobileMenu.vue
View File

@@ -29,8 +29,8 @@
</li>
</ul>
<ul class="menu-option-group" v-if="!isFolder">
<li class="menu-option" @click="downloadItem">
<ul class="menu-option-group" >
<li class="menu-option" @click="downloadItem" v-if="!isFolder">
<div class="icon">
<download-cloud-icon size="17"></download-cloud-icon>
</div>
@@ -38,6 +38,15 @@
{{ $t('context_menu.download') }}
</div>
</li>
<li class="menu-option" @click="downloadFolder" v-if="isFolder">
<div class="icon">
<paperclip-icon size="17"></paperclip-icon>
</div>
<div class="text-label">
{{ $t('context_menu.zip_folder') }}
</div>
</li>
</ul>
</div>
@@ -98,6 +107,15 @@
{{ $t('context_menu.download') }}
</div>
</li>
<li class="menu-option" @click="downloadFolder" v-if="isFolder">
<div class="icon">
<paperclip-icon size="17"></paperclip-icon>
</div>
<div class="text-label">
{{ $t('context_menu.zip_folder') }}
</div>
</li>
</ul>
</div>
@@ -166,6 +184,15 @@
{{ $t('context_menu.download') }}
</div>
</li>
<li class="menu-option" @click="downloadFolder" v-if="isFolder">
<div class="icon">
<paperclip-icon size="17"></paperclip-icon>
</div>
<div class="text-label">
{{ $t('context_menu.zip_folder') }}
</div>
</li>
</ul>
</div>
@@ -207,6 +234,15 @@
{{ $t('context_menu.download') }}
</div>
</li>
<li class="menu-option" @click="downloadFolder" v-if="isFolder">
<div class="icon">
<paperclip-icon size="17"></paperclip-icon>
</div>
<div class="text-label">
{{ $t('context_menu.zip_folder') }}
</div>
</li>
</ul>
</div>
@@ -221,6 +257,15 @@
{{ $t('context_menu.download') }}
</div>
</li>
<li class="menu-option" @click="downloadFolder" v-if="isFolder">
<div class="icon">
<paperclip-icon size="17"></paperclip-icon>
</div>
<div class="text-label">
{{ $t('context_menu.zip_folder') }}
</div>
</li>
</ul>
</div>
</div>
@@ -239,6 +284,7 @@ import {
CornerDownRightIcon,
DownloadCloudIcon,
FolderPlusIcon,
PaperclipIcon,
LifeBuoyIcon,
Trash2Icon,
Edit2Icon,
@@ -256,6 +302,7 @@ export default {
CornerDownRightIcon,
DownloadCloudIcon,
FolderPlusIcon,
PaperclipIcon,
ThumbnailItem,
LifeBuoyIcon,
Trash2Icon,
@@ -297,6 +344,9 @@ export default {
}
},
methods: {
downloadFolder(){
this.$store.dispatch( 'downloadFolder' , this.fileInfoDetail[0] )
},
moveItem() {
events.$emit('popup:open', { name: 'move', item: [this.fileInfoDetail[0]] })
},

13
resources/js/components/Others/ThumbnailItem.vue
View File

@@ -5,13 +5,13 @@
<div class="icon-item">
<!--If is file or image, then link item-->
<span v-if="isFile" class="file-icon-text">{{ item.mimetype }}</span>
<span v-if="isFile || (isImage && !item.thumbnail) " class="file-icon-text">{{ item.mimetype }}</span>
<!--Folder thumbnail-->
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>
<FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" :class="{'file-icon-mobile' : $isMobile()}" icon="file"/>
<!--Image thumbnail-->
<img v-if="isImage" class="image" :src="item.thumbnail" :alt="item.name"/>
<img v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
<!--Else show only folder icon-->
<FolderIcon v-if="isFolder" :item="item" :folder-icon="setFolderIcon" location="thumbnail-item" class="folder" />
@@ -175,6 +175,13 @@
}
}
.icon-item .file-icon-mobile {
path {
fill: $dark_mode_background !important;
// stroke: ;
}
}
.item-name {
.name {
color: $dark_mode_text_primary;