nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 16:22:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

vue frontend update

Browse Source
This commit is contained in:
carodej
2020-04-20 09:01:54 +02:00
parent 506c39896a
commit 8740cc7685
21 changed files with 416 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
resources/js/components/VueFileManagerComponents/FilesView/ContextMenu.vue
View File

@@ -7,7 +7,7 @@
ref="contextmenu"
>
<!--ContextMenu for trash location-->
<ul v-if="$isTrashLocation()" class="menu-options" ref="list">
<ul v-if="$isTrashLocation() && $checkPermission('master')" class="menu-options" ref="list">
<li class="menu-option" @click="removeItem" v-if="item">
{{ $t('context_menu.delete') }}
</li>
@@ -25,8 +25,8 @@
</li>
</ul>
<!--ContextMenu for Base location-->
<ul v-if="$isBaseLocation()" class="menu-options" ref="list">
<!--ContextMenu for Base location with MASTER permission-->
<ul v-if="$isBaseLocation() && $checkPermission('master')" class="menu-options" ref="list">
<li class="menu-option" @click="addToFavourites" v-if="item && isFolder">
{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
</li>
@@ -49,6 +49,35 @@
{{ $t('context_menu.download') }}
</li>
</ul>
<!--ContextMenu for Base location with EDITOR permission-->
<ul v-if="$isBaseLocation() && $checkPermission('editor')" class="menu-options" ref="list">
<li class="menu-option" @click="createFolder">
{{ $t('context_menu.create_folder') }}
</li>
<li class="menu-option" @click="removeItem" v-if="item">
{{ $t('context_menu.delete') }}
</li>
<li class="menu-option" @click="moveItem" v-if="item">
{{ $t('context_menu.move') }}
</li>
<li class="menu-option" @click="ItemDetail" v-if="item">
{{ $t('context_menu.detail') }}
</li>
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
{{ $t('context_menu.download') }}
</li>
</ul>
<!--ContextMenu for Base location with VISITOR permission-->
<ul v-if="$isBaseLocation() && $checkPermission('visitor')" class="menu-options" ref="list">
<li class="menu-option" @click="ItemDetail" v-if="item">
{{ $t('context_menu.detail') }}
</li>
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
{{ $t('context_menu.download') }}
</li>
</ul>
</div>
</template>

19
resources/js/components/VueFileManagerComponents/FilesView/DesktopToolbar.vue
View File

@@ -1,5 +1,5 @@
<template>
<div id="desktop-toolbar">
<div id="desktop-toolbar" v-if="! $isMinimalScale()">
<div class="toolbar-wrapper">
<!-- Go back-->
@@ -10,20 +10,26 @@
class="icon-back"
icon="chevron-left"
></FontAwesomeIcon>
<span class="back-directory-title">{{
directoryName
}}</span>
<span class="back-directory-title">
{{ directoryName }}
</span>
</div>
</div>
<!-- Tools-->
<div class="toolbar-tools">
<!--Search bar-->
<div class="toolbar-button-wrapper">
<SearchBar/>
</div>
<div class="toolbar-button-wrapper">
<ToolbarButtonUpload source="upload" action="Upload file"/>
<!--Files controlls-->
<div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
<ToolbarButtonUpload
source="upload"
action="Upload file"
/>
<ToolbarButton
source="trash-alt"
action="Delete"
@@ -36,6 +42,7 @@
/>
</div>
<!--View options-->
<div class="toolbar-button-wrapper">
<ToolbarButton
:source="preview"

26
resources/js/components/VueFileManagerComponents/FilesView/FilesContainer.vue → resources/js/components/VueFileManagerComponents/FilesView/FileBrowser.vue
View File

@@ -8,25 +8,20 @@
<div
class="files-container"
ref="fileContainer"
:class="{
'is-fileinfo-visible': fileInfoVisible && !$isMinimalScale()
}"
:class="{'is-fileinfo-visible': fileInfoVisible && !$isMinimalScale() }"
@click.self="filesContainerClick"
>
<!--MobileToolbar-->
<MobileToolbar v-if="$isMinimalScale()"/>
<MobileToolbar />
<!--Searchbar-->
<SearchBar v-if="$isMinimalScale()" class="mobile-search"/>
<!--Mobile Actions-->
<MobileActions v-if="$isMinimalScale()" />
<MobileActions />
<!--Item previews list-->
<div
v-if="isList"
class="file-list-wrapper"
>
<div v-if="isList" class="file-list-wrapper">
<transition-group
name="file"
tag="section"
@@ -76,20 +71,13 @@
/>
</div>
<div
v-if="!$isMinimalScale()"
class="file-info-container"
:class="{ 'is-fileinfo-visible': fileInfoVisible }"
>
<!--File Info Panel-->
<div v-if="! $isMinimalScale()" class="file-info-container" :class="{ 'is-fileinfo-visible': fileInfoVisible }">
<!--File info panel-->
<FileInfoPanel v-if="fileInfoDetail"/>
<!--If file info panel empty show message-->
<EmptyMessage
v-if="!fileInfoDetail"
:message="$t('messages.nothing_to_preview')"
icon="eye-slash"
/>
<EmptyMessage v-if="!fileInfoDetail" :message="$t('messages.nothing_to_preview')" icon="eye-slash"/>
</div>
</div>
</template>

4
resources/js/components/VueFileManagerComponents/FilesView/FileInfoPanel.vue
View File

@@ -34,7 +34,7 @@
</li>
<!--Parent-->
<li class="list-info-item">
<li v-if="$checkPermission(['master', 'editor'])" class="list-info-item">
<b>{{ $t('file_detail.where') }}</b>
<div class="action-button" @click="moveItem">
<FontAwesomeIcon class="icon" icon="pencil-alt" />
@@ -43,7 +43,7 @@
</li>
<!--Parent-->
<li v-if="true" class="list-info-item">
<li v-if="$checkPermission('master')" class="list-info-item">
<b>Shared</b>
<div class="action-button" @click="shareItemOptions">
<FontAwesomeIcon class="icon" icon="user-edit" />

10
resources/js/components/VueFileManagerComponents/FilesView/FileItemGrid.vue
View File

@@ -42,7 +42,7 @@
<b
ref="name"
@input="changeItemName"
:contenteditable="!$isMobile()"
:contenteditable="canEditName"
class="name"
>
{{ itemName }}
@@ -50,9 +50,8 @@
<div class="item-info">
<!--Shared Icon-->
<div class="item-shared" v-if="true">
<div v-if="$checkPermission('master')" class="item-shared">
<FontAwesomeIcon class="shared-icon" icon="user-friends"/>
<span class="label">Shared, </span>
</div>
<!--Filesize-->
@@ -91,6 +90,9 @@
isImage() {
return this.data.type === 'image'
},
canEditName() {
return ! this.$isMobile() && ! this.$isTrashLocation() && ! this.$checkPermission('visitor')
},
timeStamp() {
return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', this.data.deleted_at) : this.data.created_at
},
@@ -247,7 +249,7 @@
}
.shared-icon {
@include font-size(10);
@include font-size(9);
path {
fill: $theme;

10
resources/js/components/VueFileManagerComponents/FilesView/FileItemList.vue
View File

@@ -40,7 +40,7 @@
<b
ref="name"
@input="changeItemName"
:contenteditable="!$isMobile() && !$isTrashLocation()"
:contenteditable="canEditName"
class="name"
>
{{ itemName }}
@@ -49,9 +49,8 @@
<div class="item-info">
<!--Shared Icon-->
<div class="item-shared" v-if="true">
<div v-if="$checkPermission('master')" class="item-shared">
<FontAwesomeIcon class="shared-icon" icon="user-friends"/>
<span class="label">Shared,</span>
</div>
<!--Filesize and timestamp-->
@@ -93,6 +92,9 @@
isImage() {
return this.data.type === 'image'
},
canEditName() {
return ! this.$isMobile() && ! this.$isTrashLocation() && ! this.$checkPermission('visitor')
},
timeStamp() {
return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', {time: this.data.deleted_at}) : this.data.created_at
},
@@ -260,7 +262,7 @@
}
.shared-icon {
@include font-size(10);
@include font-size(9);
path {
fill: $theme;

6
resources/js/components/VueFileManagerComponents/FilesView/MobileActionButton.vue
View File

@@ -1,7 +1,9 @@
<template>
<button class="mobile-action-button">
<FontAwesomeIcon class="icon" :icon="icon"></FontAwesomeIcon>
<span class="label">{{ text }}</span>
<span class="label">
<slot></slot>
</span>
</button>
</template>
@@ -9,7 +11,7 @@
export default {
name: 'MobileActionButton',
props: [
'icon', 'text'
'icon'
],
}
</script>

4
resources/js/components/VueFileManagerComponents/FilesView/MobileActionButtonUpload.vue
View File

@@ -2,7 +2,7 @@
<button class="mobile-action-button">
<FontAwesomeIcon class="icon" :icon="icon"></FontAwesomeIcon>
<label label="file" class="label button file-input button-base">
{{ text }}
<slot></slot>
<input
accept="*"
v-show="false"
@@ -20,7 +20,7 @@
export default {
name: 'MobileActionButtonUpload',
props: [
'icon', 'text'
'icon'
],
data() {
return {

38
resources/js/components/VueFileManagerComponents/FilesView/MobileActions.vue
View File

@@ -1,11 +1,37 @@
<template>
<div id="mobile-actions-wrapper">
<div class="mobile-actions">
<MobileActionButton v-if="! $isTrashLocation()" @click.native="createFolder" icon="folder-plus" :text="$t('context_menu.add_folder')"></MobileActionButton>
<MobileActionButtonUpload v-if="! $isTrashLocation()" @input.native="$uploadFiles" icon="upload" :text="$t('context_menu.upload')"></MobileActionButtonUpload>
<MobileActionButton @click.native="switchPreview" :icon="previewIcon" :text="previewText"></MobileActionButton>
<MobileActionButton v-if="$isTrashLocation()" @click.native="$store.dispatch('emptyTrash')" icon="trash-alt" :text="$t('context_menu.empty_trash')"></MobileActionButton>
<div id="mobile-actions-wrapper" v-if="$isMinimalScale()">
<!--Actions for trash location with MASTER permission--->
<div v-if="$isTrashLocation() && $checkPermission('master')" class="mobile-actions">
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
{{ previewText }}
</MobileActionButton>
<MobileActionButton @click.native="$store.dispatch('emptyTrash')" icon="trash-alt">
{{ $t('context_menu.empty_trash') }}
</MobileActionButton>
</div>
<!--ContextMenu for Base location with MASTER permission-->
<div v-if="$isBaseLocation() && $checkPermission(['master', 'editor'])" class="mobile-actions">
<MobileActionButton @click.native="createFolder" icon="folder-plus">
{{ $t('context_menu.add_folder') }}
</MobileActionButton>
<MobileActionButtonUpload @input.native="$uploadFiles" icon="upload">
{{ $t('context_menu.upload') }}
</MobileActionButtonUpload>
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
{{ previewText }}
</MobileActionButton>
</div>
<!--ContextMenu for Base location with VISITOR permission-->
<div v-if="$isBaseLocation() && $checkPermission('visitor')" class="mobile-actions">
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
{{ previewText }}
</MobileActionButton>
</div>
<!--Upload Progressbar-->
<UploadProgress />
</div>
</template>

32
resources/js/components/VueFileManagerComponents/FilesView/MobileMenu.vue
View File

@@ -10,7 +10,7 @@
<div class="menu-wrapper">
<!--Mobile for trash location-->
<ul v-if="$isTrashLocation()" class="menu-options">
<ul v-if="$isTrashLocation() && $checkPermission('master')" class="menu-options">
<li class="menu-option" @click="$store.dispatch('restoreItem', fileInfoDetail)" v-if="fileInfoDetail">
{{ $t('context_menu.restore') }}
</li>
@@ -23,7 +23,7 @@
</ul>
<!--Mobile for Base location-->
<ul v-if="$isBaseLocation()" class="menu-options">
<ul v-if="$isBaseLocation() && $checkPermission('master')" class="menu-options">
<li class="menu-option" @click="addToFavourites" v-if="fileInfoDetail && isFolder">
{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
</li>
@@ -43,15 +43,31 @@
{{ $t('context_menu.delete') }}
</li>
</ul>
<!--Mobile for Base location with EDITOR permission-->
<ul v-if="$isBaseLocation() && $checkPermission('editor')" class="menu-options">
<li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
{{ $t('context_menu.rename') }}
</li>
<li class="menu-option" @click="moveItem" v-if="fileInfoDetail">
{{ $t('context_menu.move') }}
</li>
<li class="menu-option" @click="downloadItem" v-if="! isFolder">
{{ $t('context_menu.download') }}
</li>
</ul>
<!--Mobile for Base location with VISITOR permission-->
<ul v-if="$isBaseLocation() && $checkPermission('visitor')" class="menu-options">
<li class="menu-option" @click="downloadItem" v-if="! isFolder">
{{ $t('context_menu.download') }}
</li>
</ul>
</div>
</div>
</transition>
<transition name="fade">
<div
v-show="isVisible"
class="vignette"
@click="closeAndResetContextMenu"
></div>
<div v-show="isVisible" class="vignette" @click="closeAndResetContextMenu"></div>
</transition>
</div>
</template>
@@ -61,7 +77,7 @@
import {mapGetters} from 'vuex'
export default {
name: 'MobileOptionList',
name: 'MobileMenu',
computed: {
...mapGetters(['fileInfoDetail', 'app']),
isInFavourites() {

2
resources/js/components/VueFileManagerComponents/FilesView/MobileToolbar.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="mobile-toolbar">
<div class="mobile-toolbar" v-if="$isMinimalScale()">
<!-- Go back-->
<div @click="goBack" class="go-back-button">