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

Merge remote-tracking branch 'origin/master' into email-verification

Browse Source
This commit is contained in:
Milos Holba
2021-05-26 13:17:39 +02:00
parent 0df72b1803 7cefc8dfa1
commit 6456950081
139 changed files with 6938 additions and 4526 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/Desktop/PopoverItem.vue
+11 -3
View File
@@ -1,5 +1,5 @@
<template>
<div v-if="isVisible" class="popover-item">
<div v-if="isVisible" class="popover-item" :class="side">
<slot></slot>
</div>
</template>
@@ -10,7 +10,8 @@
export default {
name: 'PopoverItem',
props: [
'name'
'side',
'name',
],
data() {
return {
@@ -39,8 +40,15 @@
background: white;
border-radius: 8px;
overflow: hidden;
right: 0;
top: 50px;
&.left {
right: 0;
}
&.right {
left: 0;
}
}
@media (prefers-color-scheme: dark) {
resources/js/components/FilesView/ContextMenu.vue
+26 -119
View File
@@ -1,29 +1,13 @@
<template>
<div :style="{ top: positionY + 'px', left: positionX + 'px' }" @click="closeAndResetContextMenu" class="contextmenu" v-show="isVisible || showFromPreview" ref="contextmenu" :class="{ 'filePreviewFixed' : showFromPreview}">
<!-- File Preview -->
<div class="menu-options" id="menu-list" v-if="showFromPreview">
<OptionGroup class="menu-option-group">
<Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="shareItem" v-if="$checkPermission('master')" :title="item.shared
? $t('context_menu.share_edit')
: $t('context_menu.share')" icon="share" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" class="menu-option" />
</OptionGroup>
<OptionGroup>
<Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</div>
<div v-show="isVisible" @click="closeAndResetContextMenu" :style="{top: positionY + 'px', left: positionX + 'px'}" class="contextmenu" ref="contextmenu">
<!-- Trash location-->
<div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master') && !showFromPreview" id="menu-list" class="menu-options">
<div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" id="menu-list" class="menu-options">
<!-- Single options -->
<OptionGroup v-if="isMultiSelectContextMenu">
<Option @click.native="restoreItem" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
<Option @click.native="deleteItem" v-if="item" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="$restoreFileOrFolder(item)" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
<Option @click.native="$deleteFileOrFolder(item)" v-if="item" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
</OptionGroup>
@@ -34,8 +18,8 @@
<!-- Multi options -->
<OptionGroup v-if="!isMultiSelectContextMenu">
<Option @click.native="restoreItem" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="$restoreFileOrFolder(item)" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
</OptionGroup>
@@ -45,7 +29,7 @@
</div>
<!-- Shared location with MASTER permission-->
<div v-if="$isThisLocation(['shared']) && $checkPermission('master') && !showFromPreview" id="menu-list" class="menu-options">
<div v-if="$isThisLocation(['shared']) && $checkPermission('master')" id="menu-list" class="menu-options">
<!-- Single options -->
<OptionGroup class="menu-option-group" v-if="item && isFolder && isMultiSelectContextMenu">
@@ -55,9 +39,9 @@
</OptionGroup>
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="shareItem" :title=" item.shared ? $t('context_menu.share_edit'): $t('context_menu.share')" icon="share" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="$shareFileOrFolder(item)" :title=" item.shared ? $t('context_menu.share_edit'): $t('context_menu.share')" icon="share" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && isMultiSelectContextMenu">
@@ -75,7 +59,7 @@
<OptionGroup v-if="item && !isMultiSelectContextMenu">
<Option @click.native="shareCancel" :title="$t('context_menu.share_cancel')" icon="share" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && !isMultiSelectContextMenu && !hasFolder">
@@ -84,7 +68,7 @@
</div>
<!-- Base location with MASTER permission-->
<div v-if="$isThisLocation(['base', 'participant_uploads', 'latest']) && $checkPermission('master') && !showFromPreview" id="menu-list" class="menu-options">
<div v-if="$isThisLocation(['base', 'participant_uploads', 'latest']) && $checkPermission('master')" id="menu-list" class="menu-options">
<!-- No Files options -->
<OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && isMultiSelectContextMenu && !item">
@@ -97,12 +81,10 @@
</OptionGroup>
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="moveItem" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="shareItem" :title="item.shared
? $t('context_menu.share_edit')
: $t('context_menu.share')" icon="share" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="$moveFileOrFolder(item)" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$shareFileOrFolder(item)" :title="item.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && isMultiSelectContextMenu ">
@@ -113,14 +95,12 @@
<!-- Multi options -->
<OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && !isMultiSelectContextMenu && item && !hasFile">
<Option @click.native="addToFavourites" :title=" isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')" icon="favourites" />
<Option @click.native="addToFavourites" :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')" icon="favourites" />
</OptionGroup>
<OptionGroup v-if="item && !isMultiSelectContextMenu">
<Option @click.native="moveItem" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="$moveFileOrFolder(item)" v-if="!$isThisLocation(['latest'])" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && !isMultiSelectContextMenu && !hasFolder">
@@ -129,7 +109,7 @@
</div>
<!-- Base & Public 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')" id="menu-list" class="menu-options">
<!-- No Files options -->
<OptionGroup v-if="isMultiSelectContextMenu && !item">
@@ -138,9 +118,9 @@
<!-- Single options -->
<OptionGroup v-if="item && isMultiSelectContextMenu">
<Option @click.native="renameItem" :title=" $t('context_menu.rename')" icon="rename" />
<Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="$renameFileOrFolder(item)" :title=" $t('context_menu.rename')" icon="rename" />
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && isMultiSelectContextMenu">
@@ -151,8 +131,8 @@
<!-- Multi options -->
<OptionGroup v-if="item && !isMultiSelectContextMenu">
<Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup v-if="item && !isMultiSelectContextMenu && !hasFolder">
@@ -161,7 +141,7 @@
</div>
<!-- Base & Public location with VISITOR permission-->
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor') && !showFromPreview" id="menu-list" class="menu-options">
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')" id="menu-list" class="menu-options">
<!-- Single options -->
<OptionGroup v-if="item && isMultiSelectContextMenu">
@@ -233,7 +213,6 @@ export default {
},
data() {
return {
showFromPreview: false,
item: undefined,
isVisible: false,
positionX: 0,
@@ -247,35 +226,9 @@ export default {
emptyTrash() {
this.$store.dispatch('emptyTrash')
},
restoreItem() {
// If is item not in selected items restore just this single item
if (!this.clipboard.includes(this.item))
this.$store.dispatch('restoreItem', this.item)
// If is item in selected items restore all items from clipboard
if (this.clipboard.includes(this.item))
this.$store.dispatch('restoreItem', null)
},
shareCancel() {
this.$store.dispatch('shareCancel')
},
renameItem() {
events.$emit('popup:open', {name: 'rename-item', item: this.item})
},
moveItem() {
events.$emit('popup:open', {name: 'move', item: [this.item]})
},
shareItem() {
let event = this.item.shared
? 'share-edit'
: 'share-create'
events.$emit('popup:open', {
name: event,
item: this.item
})
},
addToFavourites() {
// Check if folder is in favourites and then add/remove from favourites
if (
@@ -309,16 +262,6 @@ export default {
// Show panel if is not open
this.$store.dispatch('fileInfoToggle', true)
},
deleteItem() {
// If is context menu open on non selected item delete this single item
if (!this.clipboard.includes(this.item)) {
this.$store.dispatch('deleteItem', this.item)
}
// If is context menu open to multi selected items dele this selected items
if (this.clipboard.includes(this.item)) {
this.$store.dispatch('deleteItem')
}
},
createFolder() {
this.$store.dispatch('createFolder', {
name: this.$t('popup_create_folder.folder_default_name')
@@ -370,40 +313,9 @@ export default {
// Show context menu
this.isVisible = true
},
showFilePreviewMenu() {
let container = document.getElementById('fast-preview-menu')
if (container) {
this.positionX = container.offsetLeft + 16
this.positionY = container.offsetTop + 51
}
}
},
watch: {
item(newValue, oldValue) {
if (oldValue != undefined && this.showFromPreview) {
this.showFromPreview = false
}
}
},
created() {
events.$on('showContextMenuPreview:show', (item) => {
if (!this.showFromPreview) {
this.item = item
this.showFromPreview = true
this.showFilePreviewMenu()
} else if (this.showFromPreview) {
this.showFromPreview = false
this.item = undefined
}
})
events.$on('showContextMenuPreview:hide', () => {
this.isVisible = false
this.showFromPreview = false
this.item = undefined
})
events.$on('contextMenu:show', (event, item) => {
// Store item
this.item = item
@@ -445,11 +357,6 @@ export default {
}
}
.filePreviewFixed {
position: fixed !important;
display: flex;
}
.contextmenu {
min-width: 250px;
position: absolute;
resources/js/components/FilesView/DesktopToolbar.vue
+2 -2
View File
@@ -38,7 +38,7 @@
<ToolbarGroup>
<PopoverWrapper>
<ToolbarButton @click.stop.native="showSortingMenu" source="preview-sorting" :action="$t('actions.sorting_view')" />
<PopoverItem name="desktop-sorting">
<PopoverItem name="desktop-sorting" side="left">
<FileSortingOptions />
</PopoverItem>
</PopoverWrapper>
@@ -319,7 +319,7 @@
color: $dark_mode_text_primary;
}
.toolbar-go-back {
.location {
.location-title {
color: $dark_mode_text_primary;
}
resources/js/components/FilesView/FileItemGrid.vue
+4 -2
View File
@@ -173,8 +173,10 @@ export default {
if (!this.$isMobile()) {
// After click deselect new folder rename input
document.getSelection().removeAllRanges();
// After click deselect new folder rename input
if (document.getSelection().toString().length) {
document.getSelection().removeAllRanges();
}
if (e.ctrlKey || e.metaKey && !e.shiftKey) {
// Click + Ctrl
resources/js/components/FilesView/FileItemList.vue
+3 -1
View File
@@ -173,7 +173,9 @@ export default {
if (!this.$isMobile()) {
// After click deselect new folder rename input
document.getSelection().removeAllRanges();
if (document.getSelection().toString().length) {
document.getSelection().removeAllRanges();
}
if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
resources/js/components/FilesView/FileMenuMobile.vue
+13 -35
View File
@@ -5,8 +5,8 @@
<!--Trash location-->
<MenuMobileGroup v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')">
<OptionGroup v-if="clipboard[0]">
<Option @click.native="restoreItem" :title="$t('context_menu.restore')" icon="restore" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="delete" />
<Option @click.native="$restoreFileOrFolder(clipboard[0])" :title="$t('context_menu.restore')" icon="restore" />
<Option @click.native="$deleteFileOrFolder(clipboard[0])" :title="$t('context_menu.delete')" icon="delete" />
</OptionGroup>
<OptionGroup>
@@ -22,9 +22,9 @@
</OptionGroup>
<OptionGroup v-if="clipboard[0]">
<Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="shareItem" :title="clipboard[0].shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="$renameFileOrFolder(clipboard[0])" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="$shareFileOrFolder(clipboard[0])" :title="clipboard[0].shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$deleteFileOrFolder(clipboard[0])" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
@@ -40,10 +40,10 @@
</OptionGroup>
<OptionGroup v-if="clipboard[0]">
<Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="shareItem" :title="clipboard[0].shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
<Option @click.native="$renameFileOrFolder(clipboard[0])" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="$moveFileOrFolder(clipboard[0])" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$shareFileOrFolder(clipboard[0])" :title="clipboard[0].shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
<Option @click.native="$deleteFileOrFolder(clipboard[0])" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
@@ -55,9 +55,9 @@
<!--Base location for guest-->
<MenuMobileGroup v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')">
<OptionGroup>
<Option v-if="clipboard[0]" @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
<Option v-if="clipboard[0]" @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
<Option v-if="clipboard[0]" @click.native="$renameFileOrFolder(clipboard[0])" :title="$t('context_menu.rename')" icon="rename" />
<Option v-if="clipboard[0]" @click.native="$moveFileOrFolder(clipboard[0])" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$deleteFileOrFolder(clipboard[0])" :title="$t('context_menu.delete')" icon="trash" />
</OptionGroup>
<OptionGroup>
@@ -129,19 +129,6 @@ export default {
downloadFolder() {
this.$store.dispatch('downloadFolder', this.clipboard[0])
},
moveItem() {
events.$emit('popup:open', {name: 'move', item: [this.clipboard[0]]})
},
shareItem() {
let event = this.clipboard[0].shared
? 'share-edit'
: 'share-create'
events.$emit('popup:open', {
name: event,
item: this.clipboard[0]
})
},
addToFavourites() {
if (this.favourites && !this.favourites.find(el => el.id === this.clipboard[0].id)) {
this.$store.dispatch('addToFavourites', this.clipboard[0])
@@ -154,16 +141,7 @@ export default {
this.clipboard[0].file_url,
this.clipboard[0].name + '.' + this.clipboard[0].mimetype
)
},
deleteItem() {
this.$store.dispatch('deleteItem')
},
restoreItem() {
this.$store.dispatch('restoreItem', this.clipboard[0])
},
renameItem() {
events.$emit('popup:open', {name: 'rename-item', item: this.clipboard[0]})
},
}
}
}
</script>
resources/js/components/FilesView/FilePreview.vue
-2
View File
@@ -32,8 +32,6 @@
methods: {
closeFilePreview() {
this.isFullPreview = false
events.$emit('showContextMenuPreview:hide')
},
next() {
events.$emit('file-preview:next')
resources/js/components/FilesView/FilePreviewMedia.vue
+50 -19
View File
@@ -17,7 +17,7 @@
<!--Show PDF-->
<div v-if="isPDF" id="pdf-wrapper" :style="{width: documentSize + '%'}">
<pdf :src="pdfdata" v-for="i in numPages" :key="i" :resize="true" :page="i" scale="page-width" style="width:100%; margin:20px auto;" id="printable-file">
<pdf :src="pdfdata" v-for="i in numPages" :key="i" :resize="true" :page="i" scale="page-width" style="width:100%; margin:0 auto 35px;" id="printable-file" class="pdf-file">
<template slot="loading">
<h1>loading content...</h1>
</template>
@@ -69,7 +69,7 @@ import {events} from '@/bus'
import pdf from 'pdfvuer'
export default {
name: 'MediaFullPreview',
name: 'FilePreviewMedia',
components: {
ChevronRightIcon,
ChevronLeftIcon,
@@ -194,27 +194,40 @@ export default {
}
})
},
getDocumentSize() {
if (window.innerWidth < 960) {
this.documentSize = 100
}
if (window.innerWidth > 960){
this.documentSize = localStorage.getItem('documentSize')
? parseInt(localStorage.getItem('documentSize'))
: 50;
}
}
},
created() {
// Set zoom size
this.documentSize = window.innerWidth < 960 ? 100 : 50
events.$on('file-preview:next', () => this.next())
events.$on('file-preview:next', () => this.next())
events.$on('file-preview:prev', () => this.prev())
events.$on('document-zoom:in', () => {
if (this.documentSize < 100)
this.documentSize += 10
if (this.documentSize < 100) {
this.documentSize += 10
localStorage.setItem('documentSize', this.documentSize)
}
})
events.$on('document-zoom:out', () => {
if (this.documentSize > 40)
this.documentSize -= 10
if (this.documentSize > 40) {
this.documentSize -= 10
localStorage.setItem('documentSize', this.documentSize)
}
})
this.getDocumentSize()
this.getFilesForView()
}
}
</script>
@@ -251,14 +264,22 @@ export default {
}
#pdf-wrapper {
overflow-y: scroll;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
border-radius: 8px;
overflow-y: scroll;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
padding: 40px;
.pdf-file {
box-shadow: $light_mode_popup_shadow;
border-radius: 8px;
overflow: hidden;
}
}
.media-full-preview {
@@ -343,6 +364,16 @@ export default {
.media-full-preview {
top: 53px;
}
#pdf-wrapper {
border-radius: 0;
padding: 0;
.pdf-file {
box-shadow: none;
border-radius: 0;
}
}
}
resources/js/components/FilesView/FilePreviewToolbar.vue
+39 -23
View File
@@ -6,9 +6,22 @@
<p class="title">{{ clipboard[0].name }}</p>
<span class="file-count"> ({{ showingImageIndex + ' ' + $t('pronouns.of') + ' ' + files.length }}) </span>
</div>
<span @click.stop="menuOpen" id="fast-preview-menu" class="fast-menu-icon group">
<more-horizontal-icon class="more-icon group-hover-text-theme" size="14" />
</span>
<PopoverWrapper>
<span @click.stop="showItemContextMenu" id="fast-preview-menu" class="fast-menu-icon group">
<more-horizontal-icon class="more-icon group-hover-text-theme" size="14" />
</span>
<PopoverItem name="file-preview-contextmenu" side="right">
<OptionGroup class="menu-option-group">
<Option @click.native="$renameFileOrFolder(clipboard[0])" :title="$t('context_menu.rename')" icon="rename" />
<Option @click.native="$moveFileOrFolder(clipboard[0])" :title="$t('context_menu.move')" icon="move-item" />
<Option @click.native="$shareFileOrFolder(clipboard[0])" :title="sharingTitle" icon="share" v-if="$checkPermission('master')" />
<Option @click.native="$deleteFileOrFolder(clipboard[0])" :title="$t('context_menu.delete')" icon="trash" class="menu-option" />
</OptionGroup>
<OptionGroup>
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
</OptionGroup>
</PopoverItem>
</PopoverWrapper>
</div>
<div class="created-at-wrapper">
@@ -17,12 +30,12 @@
<div class="navigation-icons">
<div v-if="isPdf" class="navigation-tool-wrapper">
<ToolbarButton @click.native="increaseSizeOfPDF" source="zoom-in" :action="$t('pdf_zoom_in')" />
<ToolbarButton @click.native="decreaseSizeOfPDF" source="zoom-out" :action="$t('pdf_zoom_out')" />
<ToolbarButton @click.native="increaseSizeOfPDF" source="zoom-in" :action="$t('pdf_zoom_in')" />
</div>
<div class="navigation-tool-wrapper">
<ToolbarButton @click.native="downloadItem" class="mobile-hide" source="download" :action="$t('actions.download')" />
<ToolbarButton v-if="canShareItem" @click.native="shareItem" class="mobile-hide" :class="{ 'is-inactive': !canShareItem }" source="share" :action="$t('actions.share')" />
<ToolbarButton v-if="canShareItem" @click.native="$shareFileOrFolder(clipboard[0])" class="mobile-hide" :class="{ 'is-inactive': !canShareItem }" source="share" :action="$t('actions.share')" />
<ToolbarButton v-if="isImage" @click.native="printMethod()" source="print" :action="$t('actions.print')" />
</div>
</div>
@@ -30,6 +43,11 @@
</template>
<script>
import PopoverWrapper from '@/components/Desktop/PopoverWrapper'
import PopoverItem from '@/components/Desktop/PopoverItem'
import OptionGroup from '@/components/FilesView/OptionGroup'
import Option from '@/components/FilesView/Option'
import ToolbarButton from '@/components/FilesView/ToolbarButton'
import {XIcon, MoreHorizontalIcon} from 'vue-feather-icons'
import {mapGetters} from 'vuex'
@@ -38,6 +56,10 @@
export default {
name: 'FilePreviewToolbar',
components: {
PopoverWrapper,
PopoverItem,
OptionGroup,
Option,
MoreHorizontalIcon,
ToolbarButton,
XIcon,
@@ -47,6 +69,11 @@
'clipboard',
'entries'
]),
sharingTitle() {
return this.clipboard[0].shared
? this.$t('context_menu.share_edit')
: this.$t('context_menu.share')
},
isImage() {
return this.clipboard[0].type === 'image'
},
@@ -90,6 +117,13 @@
},
},
methods: {
showItemContextMenu() {
if (this.$isMobile()) {
events.$emit('mobile-menu:show', 'file-menu')
} else {
events.$emit('popover:open', 'file-preview-contextmenu')
}
},
increaseSizeOfPDF() {
events.$emit('document-zoom:in')
},
@@ -110,26 +144,8 @@
this.clipboard[0].name + '.' + this.clipboard[0].mimetype
)
},
shareItem() {
let event = this.clipboard[0].shared
? 'share-edit'
: 'share-create'
events.$emit('popup:open', {
name: event,
item: this.clipboard[0]
})
},
menuOpen() {
if (this.$isMobile()) {
events.$emit('mobile-menu:show', 'file-menu')
} else {
events.$emit('showContextMenuPreview:show', this.clipboard[0])
}
},
closeFullPreview() {
events.$emit('file-preview:hide')
events.$emit('showContextMenuPreview:hide')
}
}
}
resources/js/components/FilesView/FileSortingOptions.vue
+15 -7
View File
@@ -5,13 +5,9 @@
<Option v-if="isGrid" @click.native="changePreview('list')" :title="$t('preview_sorting.list_view')" icon="list" />
</OptionGroup>
<OptionGroup>
<Option @click.native.stop="sort('created_at')" :title="$t('preview_sorting.sort_date')" icon="calendar" />
<Option @click.native.stop="sort('name')" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
<Option @click.native.stop="sort('created_at')" :arrow="arrowForCreatedAtField" :title="$t('preview_sorting.sort_date')" icon="calendar" />
<Option @click.native.stop="sort('name')" :arrow="arrowForNameField" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
</OptionGroup>
<!-- TODO: implementovat sipky
<arrow-up-icon size="17" v-if="filter.field === 'created_at'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
<arrow-up-icon size="17" v-if="filter.field === 'name'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>-->
</div>
</template>
@@ -38,7 +34,19 @@ export default {
},
isList() {
return this.FilePreviewType === 'list'
}
},
arrowForCreatedAtField() {
if (this.filter.field !== 'created_at')
return undefined
return this.filter.sort === 'DESC' ? 'up' : 'down'
},
arrowForNameField() {
if (this.filter.field !== 'name')
return undefined
return this.filter.sort === 'DESC' ? 'up' : 'down'
}
},
data() {
return {
resources/js/components/FilesView/Icons/SortingIcon.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<svg class="preview-list-icon" fill="none" stroke="currentColor" stroke-width="1.5" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" width="20px" height="20px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg class="preview-list-icon" fill="none" stroke="currentColor" stroke-width="1.5" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" width="15px" height="15px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="9.77777778" y="0" width="6.22222222" height="6.22222222"></rect>
<rect x="9.77777778" y="9.77777778" width="6.22222222" height="6.22222222"></rect>
<line x1="0" y1="2" x2="6" y2="2"></line>
resources/js/components/FilesView/Option.vue
+10 -4
View File
@@ -36,8 +36,10 @@
<div class="text-label group-hover-text-theme" :class="{'text-theme': isActive}">
{{ title }}
</div>
<div v-if="isArrowRight" class="icon-right group-hover-text-theme">
<chevron-right-icon size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<div v-if="arrow" class="icon-right group-hover-text-theme">
<chevron-right-icon v-if="arrow === 'right'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<arrow-up-icon v-if="arrow === 'up'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
<arrow-down-icon v-if="arrow === 'down'" size="17" class="group-hover-text-theme" :class="{'text-theme': isActive}"/>
</div>
</li>
</template>
@@ -45,6 +47,8 @@
<script>
import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
import {
ArrowUpIcon,
ArrowDownIcon,
ChevronRightIcon,
BoxIcon,
MonitorIcon,
@@ -81,12 +85,14 @@ import {
name: 'Option',
props:[
'isHoverDisabled',
'isArrowRight',
'isActive',
'title',
'arrow',
'icon'
],
components: {
ArrowUpIcon,
ArrowDownIcon,
BoxIcon,
MonitorIcon,
GlobeIcon,
@@ -146,7 +152,7 @@ import {
@include transform(translateY(3px));
}
polyline {
polyline, line {
color: inherit;
}
}
resources/js/components/FilesView/ToolbarButton.vue
+1 -9
View File
@@ -68,15 +68,7 @@
@import "@assets/vuefilemanager/_mixins";
.preview-sorting {
svg {
width: 19px;
height: 19px;
}
rect, line {
@include transition(150ms);
}
transform: scale(1.3);
}
.button {
resources/js/components/Others/MobileNavigation.vue
+2 -2
View File
@@ -16,8 +16,8 @@
<!--Main navigation-->
<OptionGroup v-if="!clickedSubmenu">
<Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" is-hover-disabled="true"/>
<Option @click.native.stop="showSubmenu('settings')" :title="$t('menu.settings')" icon="user" :is-arrow-right="true" is-hover-disabled="true"/>
<Option v-if="isAdmin" @click.native.stop="showSubmenu('admin')" :title="$t('menu.admin')" icon="settings" :is-arrow-right="true" is-hover-disabled="true"/>
<Option @click.native.stop="showSubmenu('settings')" :title="$t('menu.settings')" icon="user" arrow="right" is-hover-disabled="true"/>
<Option v-if="isAdmin" @click.native.stop="showSubmenu('admin')" :title="$t('menu.admin')" icon="settings" arrow="right" is-hover-disabled="true"/>
</OptionGroup>
<OptionGroup v-if="!clickedSubmenu">
<Option @click.native="logOut" :title="$t('menu.logout')" icon="power" is-hover-disabled="true" />
resources/js/components/Sidebar/ContentGroup.vue
+1 -1
View File
@@ -57,7 +57,7 @@
@import '@assets/vuefilemanager/_mixins';
.content-group {
margin-bottom: 30px;
margin-bottom: 15px;
transition: all 300ms;
.group-title {
resources/js/components/Sidebar/SidebarNavigation.vue
-16
View File
@@ -14,12 +14,6 @@
</div>
</router-link>
<router-link :to="{name: 'SharedFiles'}" :title="$t('locations.shared')" class="icon-navigation-item shared">
<div class="button-icon">
<share-icon size="19"></share-icon>
</div>
</router-link>
<router-link :to="{name: 'Profile'}" :class="{'is-active': isUserProfileRoute}" :title="$t('locations.profile')" class="icon-navigation-item settings">
<div class="button-icon">
<user-icon size="19"></user-icon>
@@ -175,16 +169,6 @@
}
}
&.shared {
.button-icon {
background: rgba($yellow, 0.1);
path, line, polyline, rect, circle {
stroke: $yellow;
}
}
}
&.trash {
.button-icon {
background: rgba($red, 0.1);
resources/js/helpers.js
Vendored
+52 -10
View File
@@ -1,12 +1,49 @@
import i18n from '@/i18n/index'
import store from './store/index'
import {debounce, includes, isArray} from "lodash";
import {debounce, isArray} from "lodash";
import {events} from './bus'
import axios from 'axios'
const Helpers = {
install(Vue) {
Vue.prototype.$renameFileOrFolder = function (entry) {
events.$emit('popup:open', {name: 'rename-item', item: entry})
}
Vue.prototype.$moveFileOrFolder = function (entry) {
events.$emit('popup:open', {name: 'move', item: [entry]})
}
Vue.prototype.$deleteFileOrFolder = function (entry) {
if (!this.$store.getters.clipboard.includes(entry)) {
this.$store.dispatch('deleteItem', entry)
}
if (this.$store.getters.clipboard.includes(entry)) {
this.$store.dispatch('deleteItem')
}
}
Vue.prototype.$restoreFileOrFolder = function (entry) {
if (!this.$store.getters.clipboard.includes(entry))
this.$store.dispatch('restoreItem', entry)
if (this.$store.getters.clipboard.includes(entry))
this.$store.dispatch('restoreItem', null)
}
Vue.prototype.$shareFileOrFolder = function (entry) {
let event = entry.shared
? 'share-edit'
: 'share-create'
events.$emit('popup:open', {
name: event,
item: entry
})
}
Vue.prototype.$searchFiles = debounce(function (value) {
if (value !== '' && typeof value !== 'undefined') {
@@ -29,11 +66,9 @@ const Helpers = {
}
}, 300)
Vue.prototype.$updateText = debounce(function (route, name, value) {
Vue.prototype.$updateText = debounce(function (route, name, value, allowEmpty = false) {
let enableEmptyInput = ['mimetypes_blacklist', 'google_analytics', 'upload_limit']
if (value === '' || value === ' ' && !enableEmptyInput.includes(name)) return
if ((value === '' || value === ' ') && !allowEmpty) return
axios.post(this.$store.getters.api + route, {name, value, _method: 'patch'})
.catch(() => {
@@ -171,9 +206,16 @@ const Helpers = {
// Set Data
let formData = new FormData(),
uploadedSize = 0,
isNotGeneralError = true,
striped_name = item.file.name.replace(/[^A-Za-z 0-9 \.,\?""!@#\$%\^&\*\(\)-_=\+;:<>\/\\\|\}\{\[\]`~]*/g, ''),
filename = Array(16).fill(0).map(x => Math.random().toString(36).charAt(2)).join('') + '-' + striped_name + '.part'
striped_name = item.file.name
.replace(/[^A-Za-z 0-9 \.,\?""!@#\$%\^&\*\(\)-_=\+;:<>\/\\\|\}\{\[\]`~]*/g, ''),
filename = Array(16)
.fill(0)
.map(x => Math.random().toString(36).charAt(2))
.join('') + '-' + striped_name + '.part'
do {
let isLast = chunks.length === 1,
@@ -229,7 +271,7 @@ const Helpers = {
Vue.prototype.$isThisRoute = function (route, locations) {
return includes(locations, route.name)
return locations.includes(route.name)
}
Vue.prototype.$isThisLocation = function (location) {
@@ -239,7 +281,7 @@ const Helpers = {
// Check if type is object
if (typeof location === 'Object' || location instanceof Object) {
return includes(location, currentLocation)
return location.includes(currentLocation)
} else {
return currentLocation === location
@@ -252,7 +294,7 @@ const Helpers = {
// Check if type is object
if (typeof type === 'Object' || type instanceof Object) {
return includes(type, currentPermission)
return type.includes(currentPermission)
} else {
return currentPermission === type
resources/js/router.js
Vendored
-9
View File
@@ -396,15 +396,6 @@ const routesUser = [
requiresAuth: true
},
},
{
name: 'SharedFiles',
path: '/platform/shared-files',
component: () =>
import(/* webpackChunkName: "chunks/shared-files" */ './views/FilePages/SharedFiles'),
meta: {
requiresAuth: true
},
},
{
name: 'Settings',
path: '/platform/settings',
resources/js/store/modules/fileFunctions.js
Vendored
+25 -22
View File
@@ -183,7 +183,7 @@ const actions = {
'Content-Type': 'application/octet-stream'
},
onUploadProgress: event => {
var percentCompleted = Math.floor(((totalUploadedSize + event.loaded) / fileSize) * 100)
let percentCompleted = Math.floor(((totalUploadedSize + event.loaded) / fileSize) * 100);
commit('UPLOADING_FILE_PROGRESS', percentCompleted >= 100 ? 100 : percentCompleted)
@@ -195,33 +195,36 @@ const actions = {
.then(response => {
resolve(response)
commit('PROCESSING_FILE', false)
// Proceed if was returned database record
if (response.data.id) {
// Remove first file from file queue
commit('SHIFT_FROM_FILE_QUEUE')
commit('PROCESSING_FILE', false)
// Check if user is in uploading folder, if yes, than show new file
if (response.data.folder_id == getters.currentFolder.id) {
// Remove first file from file queue
commit('SHIFT_FROM_FILE_QUEUE')
// Add uploaded item into view
commit('ADD_NEW_ITEMS', response.data)
// Check if user is in uploading folder, if yes, than show new file
if (response.data.folder_id == getters.currentFolder.id) {
// Reset file progress
commit('UPLOADING_FILE_PROGRESS', 0)
// Add uploaded item into view
commit('ADD_NEW_ITEMS', response.data)
// Increase count in files in queue uploaded for 1
commit('INCREASE_FILES_IN_QUEUE_UPLOADED')
// Reset file progress
commit('UPLOADING_FILE_PROGRESS', 0)
// Increase count in files in queue uploaded for 1
commit('INCREASE_FILES_IN_QUEUE_UPLOADED')
}
// Start uploading next file if file queue is not empty
if (getters.fileQueue.length) {
Vue.prototype.$handleUploading(getters.fileQueue[0])
}
// Reset upload process
if (!getters.fileQueue.length)
commit('CLEAR_UPLOAD_PROGRESS')
}
// Start uploading next file if file queue is not empty
if (getters.fileQueue.length) {
Vue.prototype.$handleUploading(getters.fileQueue[0])
}
// Reset upload process
if (!getters.fileQueue.length)
commit('CLEAR_UPLOAD_PROGRESS')
})
.catch(error => {
reject(error)
resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
+3 -3
View File
@@ -92,7 +92,7 @@
<label>{{ $t('admin_settings.others.google_analytics') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Google Analytics Code"
v-slot="{ errors }">
<input @input="$updateText('/admin/settings', 'google_analytics', app.googleAnalytics)" v-model="app.googleAnalytics"
<input @input="$updateText('/admin/settings', 'google_analytics', app.googleAnalytics, true)" v-model="app.googleAnalytics"
:placeholder="$t('admin_settings.others.google_analytics_plac')"
type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
@@ -102,7 +102,7 @@
<div class="block-wrapper">
<label>{{ $t('admin_settings.others.mimetypes_blacklist') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mimetypes Blacklist" v-slot="{ errors }">
<textarea rows="2" @input="$updateText('/admin/settings', 'mimetypes_blacklist', app.mimetypesBlacklist)" v-model="app.mimetypesBlacklist" :placeholder="$t('admin_settings.others.mimetypes_blacklist_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
<textarea rows="2" @input="$updateText('/admin/settings', 'mimetypes_blacklist', app.mimetypesBlacklist, true)" v-model="app.mimetypesBlacklist" :placeholder="$t('admin_settings.others.mimetypes_blacklist_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<small class="input-help" v-html="$t('admin_settings.others.mimetypes_blacklist_help')"></small>
@@ -111,7 +111,7 @@
<div class="block-wrapper">
<label>{{ $t('admin_settings.others.upload_limit') }}:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Upload Limit" v-slot="{ errors }">
<input @input="$updateText('/admin/settings', 'upload_limit', app.uploadLimit)" v-model="app.uploadLimit" :placeholder="$t('admin_settings.others.upload_limit_plac')" type="number" min="0" step="1" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
<input @input="$updateText('/admin/settings', 'upload_limit', app.uploadLimit, true)" v-model="app.uploadLimit" :placeholder="$t('admin_settings.others.upload_limit_plac')" type="number" min="0" step="1" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<small class="input-help" v-html="$t('admin_settings.others.upload_limit_help')"></small>
resources/js/views/FilePages/Files.vue
+34 -2
View File
@@ -38,6 +38,28 @@
</div>
</ContentGroup>
<!--Sharing-->
<ContentGroup :title="$t('sidebar.sharing')" slug="sharing" :can-collapse="true">
<div class="menu-list-wrapper vertical">
<li class="menu-list-item link" :class="{'is-active': $isThisLocation(['shared'])}" @click="getShared">
<div class="icon text-theme">
<link-icon size="17"></link-icon>
</div>
<div class="label text-theme">
{{ $t('sidebar.my_shared') }}
</div>
</li>
<li class="menu-list-item link" :class="{'is-active': $isThisLocation(['participant_uploads'])}" @click="getParticipantUploads">
<div class="icon text-theme">
<users-icon size="17"></users-icon>
</div>
<div class="label text-theme">
{{ $t('sidebar.participant_uploads') }}
</div>
</li>
</div>
</ContentGroup>
<!--Navigator-->
<ContentGroup :title="$t('sidebar.navigator_title')" slug="navigator" :can-collapse="true" class="navigator">
<span class="empty-note navigator" v-if="tree.length == 0">
@@ -85,7 +107,9 @@ import {
FolderIcon,
Trash2Icon,
HomeIcon,
XIcon
XIcon,
LinkIcon,
UsersIcon,
} from 'vue-feather-icons'
export default {
@@ -101,7 +125,9 @@ export default {
FolderIcon,
Trash2Icon,
HomeIcon,
XIcon
XIcon,
LinkIcon,
UsersIcon,
},
computed: {
...mapGetters(['user', 'homeDirectory', 'currentFolder', 'config', 'clipboard']),
@@ -122,6 +148,12 @@ export default {
}
},
methods: {
getShared() {
this.$store.dispatch('getShared', [{back: false, init: false}])
},
getParticipantUploads() {
this.$store.dispatch('getParticipantUploads')
},
getTrash() {
this.$store.dispatch('getTrash')
},
resources/js/views/FilePages/SharedFiles.vue
-67
View File
@@ -1,67 +0,0 @@
<template>
<section id="viewport">
<ContentSidebar>
<!--Navigator-->
<ContentGroup :title="$t('sidebar.locations_title')">
<div class="menu-list-wrapper vertical">
<li class="menu-list-item link" :class="{'is-active': $isThisLocation(['shared'])}" @click="getShared">
<div class="icon text-theme">
<link-icon size="17"></link-icon>
</div>
<div class="label text-theme">
{{ $t('sidebar.my_shared') }}
</div>
</li>
<li class="menu-list-item link" :class="{'is-active': $isThisLocation(['participant_uploads'])}" @click="getParticipantUploads">
<div class="icon text-theme">
<users-icon size="17"></users-icon>
</div>
<div class="label text-theme">
{{ $t('sidebar.participant_uploads') }}
</div>
</li>
</div>
</ContentGroup>
</ContentSidebar>
<ContentFileView />
</section>
</template>
<script>
import ContentFileView from '@/components/Others/ContentFileView'
import ContentSidebar from '@/components/Sidebar/ContentSidebar'
import ContentGroup from '@/components/Sidebar/ContentGroup'
import {
LinkIcon,
UsersIcon,
} from 'vue-feather-icons'
export default {
name: 'FilesView',
components: {
ContentFileView,
ContentSidebar,
ContentGroup,
LinkIcon,
UsersIcon,
},
methods: {
getShared() {
this.$store.dispatch('getShared', [{back: false, init: false}])
},
getParticipantUploads() {
this.$store.dispatch('getParticipantUploads')
},
},
mounted() {
this.getShared()
}
}
</script>
<style lang="scss" scoped>
</style>
resources/sass/vuefilemanager/_forms.scss
Vendored
+9 -8
View File
@@ -103,14 +103,6 @@ textarea {
width: 100%;
}
input[type="color"] {
width: 38px;
height: 40px;
border: none;
outline: none;
background: none;
}
textarea,
input[type="password"],
input[type="text"],
@@ -151,6 +143,15 @@ input[type="email"] {
}
}
input[type="color"] {
width: 38px !important;
height: 40px;
border: none;
outline: none;
background: none;
min-width: initial !important;
}
.additional-link {
@include font-size(16);
margin-top: 50px;