mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-19 00:22:15 +00:00
Initial commit
This commit is contained in:
MakingCG
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<transition name="vignette">
|
||||
<div class="popup" v-show="isVisibleWrapper">
|
||||
<transition name="popup">
|
||||
<div v-show="isVisiblePopup" class="popup-wrapper">
|
||||
<div class="popup-image">
|
||||
<span class="emoji">{{ emoji }}</span>
|
||||
</div>
|
||||
<div class="popup-content">
|
||||
<h1 v-if="title" class="title">{{ title }}</h1>
|
||||
<p v-if="message" class="message">{{ message }}</p>
|
||||
</div>
|
||||
<div class="popup-actions">
|
||||
<ButtonBase
|
||||
@click.native="closePopup"
|
||||
:button-style="buttonStyle"
|
||||
class="action-confirm"
|
||||
>{{ button }}
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="popup-vignette" @click="closePopup"></div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ButtonBase from '@/components/VueFileManagerComponents/FilesView/ButtonBase'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'AlertPopup',
|
||||
components: {
|
||||
ButtonBase
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisibleWrapper: false,
|
||||
buttonStyle: undefined,
|
||||
isVisiblePopup: false,
|
||||
message: undefined,
|
||||
title: undefined,
|
||||
button: undefined,
|
||||
emoji: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closePopup() {
|
||||
// Emit event
|
||||
events.$emit('alert:close')
|
||||
|
||||
// Hide popup wrapper
|
||||
this.isVisibleWrapper = false
|
||||
this.isVisiblePopup = false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// Show alert
|
||||
events.$on('alert:open', args => {
|
||||
this.isVisibleWrapper = true
|
||||
this.isVisiblePopup = true
|
||||
|
||||
this.title = args.title
|
||||
this.message = args.message
|
||||
|
||||
this.button = 'That’s horrible!'
|
||||
this.emoji = '😢😢😢'
|
||||
this.buttonStyle = 'danger'
|
||||
})
|
||||
|
||||
// Show alert
|
||||
events.$on('success:open', args => {
|
||||
this.isVisibleWrapper = true
|
||||
this.isVisiblePopup = true
|
||||
|
||||
this.title = args.title
|
||||
this.message = args.message
|
||||
|
||||
this.button = 'Awesome!'
|
||||
this.emoji = '🥳🥳🥳'
|
||||
this.buttonStyle = 'theme'
|
||||
})
|
||||
|
||||
// Close popup
|
||||
events.$on('popup:close', () => {
|
||||
this.isVisiblePopup = false
|
||||
this.isVisibleWrapper = false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.popup {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 20;
|
||||
overflow: auto;
|
||||
|
||||
.popup-vignette {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
z-index: 12;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 480px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) scale(1);
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
box-shadow: 0 7px 250px rgba(25, 54, 60, 0.2);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.popup-image {
|
||||
margin-bottom: 30px;
|
||||
|
||||
.emoji {
|
||||
@include font-size(56);
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
.title {
|
||||
@include font-size(22);
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.message {
|
||||
@include font-size(16);
|
||||
color: #8b8f9a;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-actions {
|
||||
margin-top: 30px;
|
||||
|
||||
.action-confirm {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Small screen size
|
||||
.small {
|
||||
.popup-wrapper {
|
||||
padding: 40px 20px 20px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.popup .popup-vignette {
|
||||
background: $dark_mode_vignette;
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
.title {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.message {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Animations
|
||||
.popup-enter-active {
|
||||
animation: popup-in 0.35s 0.15s ease both;
|
||||
}
|
||||
|
||||
.popup-leave-active {
|
||||
animation: popup-in 0.15s ease reverse;
|
||||
}
|
||||
|
||||
@keyframes popup-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-50%) scale(0.7);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.vignette-enter-active {
|
||||
animation: vignette-in 0.15s ease;
|
||||
}
|
||||
|
||||
.vignette-leave-active {
|
||||
animation: vignette-in 0.15s 0.15s ease reverse;
|
||||
}
|
||||
|
||||
@keyframes vignette-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<button class="button-base" :class="buttonStyle" type="button">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ButtonBase',
|
||||
props: ['buttonStyle']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.button-base {
|
||||
@include font-size(16);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: 0.15s all ease;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
padding: 10px 28px;
|
||||
display: inline-block;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
&.theme {
|
||||
color: $theme;
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: $danger;
|
||||
background: rgba($danger, .1);
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: $text;
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.button-base {
|
||||
|
||||
&.secondary {
|
||||
color: $dark_mode_text_primary;
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<label :class="buttonStyle" label="file" class="button file-input button-base">
|
||||
<slot></slot>
|
||||
<input
|
||||
accept="*"
|
||||
v-show="false"
|
||||
@change="emmitFiles"
|
||||
id="file"
|
||||
type="file"
|
||||
name="files[]"
|
||||
multiple
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ButtonBase',
|
||||
props: ['buttonStyle'],
|
||||
data() {
|
||||
return {
|
||||
files: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emmitFiles(e) {
|
||||
this.$uploadFiles(e.target.files)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.button-base {
|
||||
@include font-size(16);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: 0.15s all ease;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
padding: 10px 28px;
|
||||
display: inline-block;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
&.theme {
|
||||
color: $theme;
|
||||
background: rgba($theme, .1);
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
color: $text;
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div
|
||||
ref="contextmenu"
|
||||
class="contextmenu"
|
||||
:style="{ top: positionY + 'px', left: positionX + 'px' }"
|
||||
v-show="isVisible"
|
||||
>
|
||||
<ul class="menu-options" id="menu-options-list" ref="list" @click="closeAndResetContextMenu">
|
||||
<li class="menu-option" @click="addToFavourites" v-if="! $isTrashLocation() && item && item.type === 'folder'">{{ isInFavourites ? 'Remove Favourite' : 'Add To Favourites' }}</li>
|
||||
<li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item && $isTrashLocation()">Restore</li>
|
||||
<li class="menu-option" @click="createFolder" v-if="! $isTrashLocation()">Create Folder</li>
|
||||
<li class="menu-option" @click="removeItem" v-if="! $isTrashLocation()">Delete</li>
|
||||
<li class="menu-option" @click="$store.dispatch('emptyTrash')" v-if="$isTrashLocation()">Empty Trash</li>
|
||||
<li class="menu-option" @click="ItemDetail" v-if="item">Detail</li>
|
||||
<li class="menu-option" @click="downloadItem" v-if="isFile || isImage">Download</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {events} from '@/bus'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'ContextMenu',
|
||||
computed: {
|
||||
...mapGetters(['app']),
|
||||
isFile() {
|
||||
return this.item && this.item.type === 'file' ? true : false
|
||||
},
|
||||
isImage() {
|
||||
return this.item && this.item.type === 'image' ? true : false
|
||||
},
|
||||
isInFavourites() {
|
||||
return this.app.favourites.find(el => el.unique_id == this.item.unique_id)
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
item: undefined,
|
||||
isVisible: false,
|
||||
positionX: 0,
|
||||
positionY: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addToFavourites() {
|
||||
if (this.app.favourites && ! this.app.favourites.find(el => el.unique_id == this.item.unique_id)) {
|
||||
this.$store.dispatch('addToFavourites', this.item.unique_id)
|
||||
} else {
|
||||
this.$store.dispatch('removeFromFavourites', this.item.unique_id)
|
||||
}
|
||||
},
|
||||
downloadItem() {
|
||||
// Download file
|
||||
this.$downloadFile(
|
||||
this.item.file_url,
|
||||
this.item.name + '.' + this.item.mimetype
|
||||
)
|
||||
},
|
||||
ItemDetail() {
|
||||
// Dispatch load file info detail
|
||||
this.$store.dispatch('loadFileInfoDetail', this.item)
|
||||
|
||||
// Show panel if is not open
|
||||
this.$store.dispatch('fileInfoToggle', true)
|
||||
},
|
||||
removeItem() {
|
||||
// Dispatch remove item
|
||||
this.$store.dispatch('removeItem', this.item)
|
||||
},
|
||||
createFolder() {
|
||||
// Create folder
|
||||
this.$createFolder('New Folder')
|
||||
},
|
||||
closeAndResetContextMenu() {
|
||||
// Close context menu
|
||||
this.isVisible = false
|
||||
|
||||
// Reset item container
|
||||
this.item = undefined
|
||||
},
|
||||
showContextMenu(event, item) {
|
||||
let VerticalOffsetArea = item ? this.$refs.list.children.length * 50 : 50
|
||||
let HorizontalOffsetArea = 150
|
||||
|
||||
let container = document.getElementById('files-view')
|
||||
|
||||
let x = event.pageX - container.getBoundingClientRect().x
|
||||
let y = event.pageY - container.getBoundingClientRect().y
|
||||
|
||||
// Set position Y
|
||||
if ((container.offsetHeight - y) < VerticalOffsetArea) {
|
||||
this.positionY = y - VerticalOffsetArea
|
||||
} else {
|
||||
this.positionY = y
|
||||
}
|
||||
|
||||
// Set position X
|
||||
if ((container.offsetWidth - x) < HorizontalOffsetArea) {
|
||||
this.positionX = x - HorizontalOffsetArea
|
||||
} else {
|
||||
this.positionX = x
|
||||
}
|
||||
|
||||
// Show context menu
|
||||
this.isVisible = true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
events.$on('contextMenu:show', (event, item) => {
|
||||
|
||||
// Store item
|
||||
this.item = item
|
||||
|
||||
// Show context menu
|
||||
setTimeout(() => this.showContextMenu(event, item), 10)
|
||||
})
|
||||
|
||||
events.$on('contextMenu:hide', () => (this.closeAndResetContextMenu()))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.contextmenu {
|
||||
max-width: 190px;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
box-shadow: $shadow;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
&.showed {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-options {
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.menu-option {
|
||||
font-weight: 600;
|
||||
@include font-size(15);
|
||||
padding: 15px 30px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background: $light_background;
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.contextmenu {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.menu-options .menu-option {
|
||||
&:hover {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div id="desktop-toolbar">
|
||||
<div class="toolbar-wrapper">
|
||||
<!-- Go back-->
|
||||
<div class="toolbar-go-back" v-if="homeDirectory">
|
||||
<div @click="goBack" class="go-back-button">
|
||||
<FontAwesomeIcon
|
||||
v-if="browseHistory.length > 0"
|
||||
class="icon-back"
|
||||
icon="chevron-left"
|
||||
></FontAwesomeIcon>
|
||||
<span class="back-directory-title">{{
|
||||
directoryName
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tools-->
|
||||
<div class="toolbar-tools">
|
||||
<div class="toolbar-button-wrapper">
|
||||
<SearchBar/>
|
||||
</div>
|
||||
<div class="toolbar-button-wrapper">
|
||||
<ToolbarButtonUpload source="upload" action="Upload file"/>
|
||||
<ToolbarButton
|
||||
source="trash-alt"
|
||||
action="Delete"
|
||||
@click.native="deleteItems"
|
||||
/>
|
||||
<ToolbarButton
|
||||
@click.native="createFolder"
|
||||
source="folder-plus"
|
||||
action="Create folder"
|
||||
/>
|
||||
</div>
|
||||
<div class="toolbar-button-wrapper">
|
||||
<ToolbarButton
|
||||
:source="preview"
|
||||
action=""
|
||||
@click.native="$store.dispatch('changePreviewType')"
|
||||
/>
|
||||
<ToolbarButton
|
||||
:class="{ active: fileInfoVisible }"
|
||||
@click.native="$store.dispatch('fileInfoToggle')"
|
||||
source="info"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UploadProgress />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ToolbarButtonUpload from '@/components/VueFileManagerComponents/FilesView/ToolbarButtonUpload'
|
||||
import UploadProgress from '@/components/VueFileManagerComponents/FilesView/UploadProgress'
|
||||
import ToolbarButton from '@/components/VueFileManagerComponents/FilesView/ToolbarButton'
|
||||
import SearchBar from '@/components/VueFileManagerComponents/FilesView/SearchBar'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'ToolBar',
|
||||
components: {
|
||||
ToolbarButtonUpload,
|
||||
UploadProgress,
|
||||
ToolbarButton,
|
||||
SearchBar
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'fileInfoVisible',
|
||||
'fileInfoDetail',
|
||||
'currentFolder',
|
||||
'browseHistory',
|
||||
'homeDirectory',
|
||||
'preview_type',
|
||||
]),
|
||||
directoryName() {
|
||||
return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
|
||||
},
|
||||
previousFolder() {
|
||||
const length = this.browseHistory.length - 2
|
||||
|
||||
return this.browseHistory[length] ? this.browseHistory[length] : this.homeDirectory
|
||||
},
|
||||
preview() {
|
||||
return this.preview_type === 'list' ? 'th' : 'th-list'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isSidebarMenu: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showSidebarMenu() {
|
||||
this.isSidebarMenu = ! this.isSidebarMenu
|
||||
events.$emit('show:sidebar')
|
||||
},
|
||||
goBack() {
|
||||
|
||||
if (this.previousFolder.location === 'trash-root') {
|
||||
this.$store.dispatch('getTrash')
|
||||
this.$store.commit('FLUSH_BROWSER_HISTORY')
|
||||
|
||||
} else {
|
||||
this.$store.dispatch('goToFolder', [this.previousFolder, true])
|
||||
}
|
||||
},
|
||||
deleteItems() {
|
||||
events.$emit('items:delete')
|
||||
},
|
||||
createFolder() {
|
||||
this.$createFolder()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// Listen for hide sidebar
|
||||
events.$on('show:content', () => {
|
||||
if (this.isSidebarMenu) this.isSidebarMenu = false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
|
||||
.toolbar-wrapper {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.directory-name {
|
||||
vertical-align: middle;
|
||||
@include font-size(17);
|
||||
color: $text;
|
||||
font-weight: 600;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.icon-back {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.toolbar-go-back {
|
||||
cursor: pointer;
|
||||
|
||||
.back-directory-title {
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-position {
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
@include font-size(17);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
text-align: right;
|
||||
|
||||
.toolbar-button-wrapper {
|
||||
margin-left: 75px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: 20px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.toolbar .directory-name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="empty-message">
|
||||
<div class="message">
|
||||
<FontAwesomeIcon class="icon" :icon="icon" />
|
||||
<p>{{ message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'EmptyMessage',
|
||||
props: ['icon', 'message']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.empty-message {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.message {
|
||||
margin: 0 auto;
|
||||
|
||||
p {
|
||||
margin-top: 10px;
|
||||
max-width: 130px;
|
||||
@include font-size(14);
|
||||
font-weight: 500;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include font-size(36);
|
||||
color: $text;
|
||||
|
||||
path {
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="empty-page" v-if="isLoading || isEmpty">
|
||||
<div class="empty-state">
|
||||
<div class="text-content" v-if="isEmpty && !isLoading">
|
||||
<h1 class="title">There is Nothing</h1>
|
||||
<p v-if="! isTrash" class="description">
|
||||
Upload some files here easily via upload button
|
||||
</p>
|
||||
<ButtonUpload
|
||||
v-if="! isTrash"
|
||||
@input.native="$uploadFiles(files)"
|
||||
v-model="files"
|
||||
button-style="theme"
|
||||
>Upload File
|
||||
</ButtonUpload
|
||||
>
|
||||
</div>
|
||||
<div class="text-content" v-if="isLoading">
|
||||
<Spinner/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ButtonUpload from '@/components/VueFileManagerComponents/FilesView/ButtonUpload'
|
||||
import Spinner from '@/components/VueFileManagerComponents/FilesView/Spinner'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'EmptyPage',
|
||||
props: ['title', 'description'],
|
||||
components: {
|
||||
ButtonUpload,
|
||||
Spinner
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['data', 'isLoading', 'currentFolder']),
|
||||
isEmpty() {
|
||||
return this.data.length == 0
|
||||
},
|
||||
isTrash() {
|
||||
return typeof this.currentFolder.unique_id === 'undefined'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
files: undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.empty-page {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
margin-top: 85px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.empty-state {
|
||||
margin: 0 auto;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-content {
|
||||
text-align: center;
|
||||
margin: 30px 0;
|
||||
|
||||
.title {
|
||||
@include font-size(24);
|
||||
color: $text;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
@include font-size(15);
|
||||
color: $text-muted;
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.text-content {
|
||||
|
||||
.title {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div v-if="fileInfoDetail">
|
||||
<div class="file-headline" spellcheck="false">
|
||||
<!--Image thumbnail-->
|
||||
<div v-if="fileInfoDetail.type == 'image'" class="image-preview">
|
||||
<img
|
||||
@dblclick="$openImageOnNewTab(fileInfoDetail.file_url)"
|
||||
:src="fileInfoDetail.thumbnail"
|
||||
:alt="fileInfoDetail.name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--File info-->
|
||||
<div class="flex">
|
||||
<div class="icon">
|
||||
<div class="icon-preview" @dblclick="getItemAction">
|
||||
<FontAwesomeIcon
|
||||
v-if="fileInfoDetail.type == 'folder'"
|
||||
icon="folder"
|
||||
></FontAwesomeIcon>
|
||||
<FontAwesomeIcon
|
||||
v-if="fileInfoDetail.type == 'file'"
|
||||
icon="file"
|
||||
></FontAwesomeIcon>
|
||||
<FontAwesomeIcon
|
||||
v-if="fileInfoDetail.type == 'image'"
|
||||
icon="file-image"
|
||||
></FontAwesomeIcon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-info">
|
||||
<span ref="name" contenteditable="false" class="name">{{
|
||||
fileInfoDetail.name
|
||||
}}</span>
|
||||
<span class="mimetype">{{ fileInfoDetail.mimetype }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Info list-->
|
||||
<ul class="list-info">
|
||||
<!--Filesize-->
|
||||
<li v-if="fileInfoDetail.filesize" class="list-info-item">
|
||||
<b>Size</b>
|
||||
<span>{{ fileInfoDetail.filesize }}</span>
|
||||
</li>
|
||||
|
||||
<!--Latest change-->
|
||||
<li v-if="fileInfoDetail.created_at" class="list-info-item">
|
||||
<b>Created at</b>
|
||||
<span>{{ fileInfoDetail.created_at }}</span>
|
||||
</li>
|
||||
|
||||
<!--Parent-->
|
||||
<li class="list-info-item">
|
||||
<b>Where</b>
|
||||
<span>{{
|
||||
fileInfoDetail.parent ? fileInfoDetail.parent.name : 'Home'
|
||||
}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from 'vuex'
|
||||
import {debounce} from 'lodash'
|
||||
|
||||
export default {
|
||||
name: 'FilesInfoPanel',
|
||||
computed: {
|
||||
...mapGetters(['fileInfoDetail'])
|
||||
},
|
||||
methods: {
|
||||
getItemAction() {
|
||||
// Open image on new tab
|
||||
if (this.fileInfoDetail.type == 'image') {
|
||||
this.$openImageOnNewTab(this.fileInfoDetail.file_url)
|
||||
}
|
||||
|
||||
// Download file
|
||||
if (this.fileInfoDetail.type == 'file') {
|
||||
this.$downloadFile(
|
||||
this.fileInfoDetail.file_url,
|
||||
this.fileInfoDetail.name +
|
||||
'.' +
|
||||
this.fileInfoDetail.mimetype
|
||||
)
|
||||
}
|
||||
|
||||
// Open folder
|
||||
if (this.fileInfoDetail.type == 'folder') {
|
||||
// Todo: open folder
|
||||
console.log('Open folder')
|
||||
}
|
||||
},
|
||||
changeItemName: debounce(function (e) {
|
||||
// Prevent submit empty string
|
||||
if (e.target.innerText === '') return
|
||||
|
||||
this.$store.dispatch('changeItemName', {
|
||||
unique_id: this.fileInfoDetail.unique_id,
|
||||
type: this.fileInfoDetail.type,
|
||||
name: e.target.innerText
|
||||
})
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.file-headline {
|
||||
background: $light_background;
|
||||
padding: 12px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
|
||||
.image-preview {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 7px;
|
||||
|
||||
img {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: top;
|
||||
}
|
||||
|
||||
.icon-preview {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
background: white;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
/deep/ svg {
|
||||
@include font-size(22);
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-info {
|
||||
padding-left: 12px;
|
||||
width: 100%;
|
||||
word-break: break-all;
|
||||
|
||||
.name {
|
||||
@include font-size(16);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mimetype {
|
||||
@include font-size(14);
|
||||
font-weight: 600;
|
||||
color: $theme;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-info {
|
||||
padding-left: 12px;
|
||||
|
||||
.list-info-item {
|
||||
display: block;
|
||||
padding-top: 20px;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
b {
|
||||
display: block;
|
||||
@include font-size(13);
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
@include font-size(16);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.file-headline {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.icon-preview {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,391 @@
|
||||
<template>
|
||||
<div
|
||||
class="file-wrapper"
|
||||
@click.stop="clickedItem"
|
||||
@dblclick="goToItem"
|
||||
spellcheck="false"
|
||||
>
|
||||
<!--Grid preview-->
|
||||
<div
|
||||
draggable="true"
|
||||
@dragstart="$emit('dragstart')"
|
||||
@drop="
|
||||
$emit('drop')
|
||||
area = false
|
||||
"
|
||||
@dragleave="dragLeave"
|
||||
@dragover.prevent="dragEnter"
|
||||
class="file-item"
|
||||
:class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
|
||||
>
|
||||
<!--Thumbnail for item-->
|
||||
<div class="icon-item" :class="data.type">
|
||||
<!--If is file or image, then link item-->
|
||||
<span v-if="isFile" class="file-icon-text">{{
|
||||
data.mimetype
|
||||
}}</span>
|
||||
|
||||
<!--Folder thumbnail-->
|
||||
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>
|
||||
|
||||
<!--Image thumbnail-->
|
||||
<img v-if="isImage" :src="data.thumbnail" :alt="data.name"/>
|
||||
|
||||
<!--Else show only folder icon-->
|
||||
<FontAwesomeIcon
|
||||
v-if="isFolder"
|
||||
:class="{'is-deleted': isDeleted}"
|
||||
class="folder-icon"
|
||||
icon="folder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
<div class="item-name">
|
||||
<!--Name-->
|
||||
<span
|
||||
ref="name"
|
||||
@input="changeItemName"
|
||||
:contenteditable="!$isMobile()"
|
||||
class="name"
|
||||
>{{ item.name }}</span
|
||||
>
|
||||
|
||||
<!--Other attributes-->
|
||||
<span v-if="isFile || isImage" class="item-size">{{
|
||||
data.filesize
|
||||
}}</span>
|
||||
|
||||
<span v-if="isFolder" class="item-length">
|
||||
{{ folderItems == 0 ? 'Empty' : (folderItems + ' item') | pluralize(folderItems) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span @click.stop="showItemActions" class="show-actions" v-if="$isMobile()">
|
||||
<FontAwesomeIcon icon="ellipsis-h" class="icon-action"></FontAwesomeIcon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {debounce} from 'lodash'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FileItem',
|
||||
props: ['data'],
|
||||
computed: {
|
||||
...mapGetters(['preview_type']),
|
||||
isFolder() {
|
||||
return this.data.type === 'folder'
|
||||
},
|
||||
isFile() {
|
||||
return this.data.type === 'file'
|
||||
},
|
||||
isImage() {
|
||||
return this.data.type === 'image'
|
||||
},
|
||||
timeStamp() {
|
||||
return this.data.deleted_at ? 'Deleted ' + this.data.deleted_at : this.data.created_at
|
||||
},
|
||||
folderItems() {
|
||||
return this.data.deleted_at ? this.data.trashed_items : this.data.items
|
||||
},
|
||||
isDeleted() {
|
||||
return this.data.deleted_at ? true : false
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
pluralize(word, amount) {
|
||||
return amount > 1 ? word + 's' : word
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isClicked: false,
|
||||
area: false,
|
||||
item: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showItemActions() {
|
||||
// Load file info detail
|
||||
this.$store.dispatch('loadFileInfoDetail', this.data)
|
||||
|
||||
events.$emit('mobileMenu:show')
|
||||
},
|
||||
dragEnter() {
|
||||
if (this.data.type !== 'folder') return
|
||||
|
||||
this.area = true
|
||||
},
|
||||
dragLeave() {
|
||||
this.area = false
|
||||
},
|
||||
clickedItem(e) {
|
||||
events.$emit('contextMenu:hide')
|
||||
|
||||
// Open in mobile version on first click
|
||||
if (this.$isMobile() && this.isFolder) {
|
||||
|
||||
// Go to folder
|
||||
this.$store.dispatch('goToFolder', [this.data, false])
|
||||
}
|
||||
|
||||
// Load file info detail
|
||||
this.$store.dispatch('loadFileInfoDetail', this.data)
|
||||
|
||||
// Get target classname
|
||||
let itemClass = e.target.className
|
||||
|
||||
if (
|
||||
['name', 'icon', 'file-link', 'file-icon-text'].includes(
|
||||
itemClass
|
||||
)
|
||||
)
|
||||
return
|
||||
},
|
||||
goToItem() {
|
||||
if (this.isImage) {
|
||||
this.$openImageOnNewTab(this.data.file_url)
|
||||
}
|
||||
|
||||
if (this.isFile) {
|
||||
this.$downloadFile(
|
||||
this.data.file_url,
|
||||
this.data.name + '.' + this.data.mimetype
|
||||
)
|
||||
}
|
||||
|
||||
if (this.isFolder) {
|
||||
// Go to folder
|
||||
this.$store.dispatch('goToFolder', [this.data, false])
|
||||
}
|
||||
},
|
||||
changeItemName: debounce(function (e) {
|
||||
// Prevent submit empty string
|
||||
if (e.target.innerText === '') return
|
||||
|
||||
this.$store.dispatch('changeItemName', {
|
||||
unique_id: this.data.unique_id,
|
||||
type: this.data.type,
|
||||
name: e.target.innerText
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
created() {
|
||||
this.item = this.data
|
||||
|
||||
events.$on('fileItem:clicked', unique_id => {
|
||||
if (this.data.unique_id == unique_id) {
|
||||
this.isClicked = true
|
||||
} else {
|
||||
this.isClicked = false
|
||||
}
|
||||
})
|
||||
|
||||
events.$on('fileItem:deselect', () => {
|
||||
// Deselect file
|
||||
this.isClicked = false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.show-actions {
|
||||
cursor: pointer;
|
||||
padding: 4px 26px;
|
||||
|
||||
.icon-action {
|
||||
@include font-size(12);
|
||||
}
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.file-wrapper {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
vertical-align: text-top;
|
||||
width: 100%;
|
||||
|
||||
.item-name {
|
||||
display: block;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
line-height: 20px;
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
@include font-size(12);
|
||||
font-weight: 100;
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: block;
|
||||
|
||||
&[contenteditable='true']:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $text;
|
||||
@include font-size(15);
|
||||
font-weight: 700;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.actived {
|
||||
max-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.file-item {
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
border: 2px dashed transparent;
|
||||
width: 165px;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 15px 0;
|
||||
|
||||
&.is-dragenter {
|
||||
border: 2px dashed $theme;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
border-radius: 8px;
|
||||
background: $light_background;
|
||||
|
||||
.item-name .name {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
position: relative;
|
||||
height: 110px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.file-link {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
@include font-size(100);
|
||||
margin: 0 auto;
|
||||
|
||||
path {
|
||||
fill: #fafafc;
|
||||
stroke: #dfe0e8;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.file {
|
||||
|
||||
.file-icon-text {
|
||||
margin: 5px auto 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: $theme;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
max-width: 65px;
|
||||
max-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.image {
|
||||
img {
|
||||
max-width: 95%;
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
height: 110px;
|
||||
border-radius: 5px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.folder {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.folder-icon {
|
||||
@include font-size(80);
|
||||
margin: 0 auto;
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: $dark_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.file-wrapper {
|
||||
|
||||
.icon-item .file-icon {
|
||||
|
||||
path {
|
||||
fill: $dark_mode_foreground;
|
||||
stroke: #2F3C54;
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.file-icon {
|
||||
|
||||
path {
|
||||
fill: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name .name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,400 @@
|
||||
<template>
|
||||
<div
|
||||
@click.stop="clickedItem" @dblclick="goToItem"
|
||||
class="file-wrapper"
|
||||
spellcheck="false"
|
||||
>
|
||||
<!--List preview-->
|
||||
<div
|
||||
draggable="true"
|
||||
@dragstart="$emit('dragstart')"
|
||||
@drop="
|
||||
$emit('drop')
|
||||
area = false
|
||||
"
|
||||
@dragleave="dragLeave"
|
||||
@dragover.prevent="dragEnter"
|
||||
class="file-item"
|
||||
:class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
|
||||
>
|
||||
<!--Thumbnail for item-->
|
||||
<div class="icon-item" :class="data.type">
|
||||
<!--If is file or image, then link item-->
|
||||
<span v-if="isFile" class="file-icon-text">{{
|
||||
data.mimetype | limitCharacters
|
||||
}}</span>
|
||||
|
||||
<!--Folder thumbnail-->
|
||||
<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>
|
||||
|
||||
<!--Image thumbnail-->
|
||||
<img v-if="isImage" :src="data.thumbnail" :alt="data.name"/>
|
||||
|
||||
<!--Else show only folder icon-->
|
||||
<FontAwesomeIcon
|
||||
v-if="isFolder"
|
||||
:class="{'is-deleted': isDeleted}"
|
||||
class="folder-icon"
|
||||
icon="folder"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
<div class="item-name">
|
||||
<!--Name-->
|
||||
<span
|
||||
ref="name"
|
||||
@input="changeItemName"
|
||||
:contenteditable="!$isMobile()"
|
||||
class="name"
|
||||
>{{ item.name }}</span
|
||||
>
|
||||
|
||||
<!--Other attributes-->
|
||||
<span v-if="isFile || isImage" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
|
||||
|
||||
<span v-if="isFolder" class="item-length">
|
||||
{{ folderItems == 0 ? 'Empty' : (folderItems + ' Item') | pluralize(folderItems) }}, {{ timeStamp }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!--Go Next icon-->
|
||||
<div class="actions" v-if="$isMobile()">
|
||||
<span @click.stop="showItemActions" class="show-actions">
|
||||
<FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {debounce} from 'lodash'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FileItem',
|
||||
props: ['data'],
|
||||
computed: {
|
||||
...mapGetters(['preview_type']),
|
||||
isFolder() {
|
||||
return this.data.type === 'folder'
|
||||
},
|
||||
isFile() {
|
||||
return this.data.type === 'file'
|
||||
},
|
||||
isImage() {
|
||||
return this.data.type === 'image'
|
||||
},
|
||||
timeStamp() {
|
||||
return this.data.deleted_at ? 'Deleted ' + this.data.deleted_at : this.data.created_at
|
||||
},
|
||||
folderItems() {
|
||||
return this.data.deleted_at ? this.data.trashed_items : this.data.items
|
||||
},
|
||||
isDeleted() {
|
||||
return this.data.deleted_at ? true : false
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
pluralize(word, amount) {
|
||||
return amount > 1 ? word + 's' : word
|
||||
},
|
||||
limitCharacters(str) {
|
||||
|
||||
if (str.length > 3) {
|
||||
return str.substring(0, 3) + '...';
|
||||
} else {
|
||||
return str.substring(0, 3);
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isClicked: false,
|
||||
area: false,
|
||||
item: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showItemActions() {
|
||||
// Load file info detail
|
||||
this.$store.dispatch('loadFileInfoDetail', this.data)
|
||||
|
||||
//this.isClicked = true
|
||||
|
||||
events.$emit('mobileMenu:show')
|
||||
},
|
||||
dragEnter() {
|
||||
if (this.data.type !== 'folder') return
|
||||
|
||||
this.area = true
|
||||
},
|
||||
dragLeave() {
|
||||
this.area = false
|
||||
},
|
||||
clickedItem(e) {
|
||||
events.$emit('contextMenu:hide')
|
||||
|
||||
// Open in mobile version on first click
|
||||
if (this.$isMobile() && this.isFolder) {
|
||||
|
||||
// Go to folder
|
||||
this.$store.dispatch('goToFolder', [this.data, false])
|
||||
}
|
||||
|
||||
// Load file info detail
|
||||
this.$store.dispatch('loadFileInfoDetail', this.data)
|
||||
|
||||
// Get target classname
|
||||
let itemClass = e.target.className
|
||||
|
||||
if (
|
||||
['name', 'icon', 'file-link', 'file-icon-text'].includes(
|
||||
itemClass
|
||||
)
|
||||
)
|
||||
return
|
||||
},
|
||||
goToItem() {
|
||||
if (this.isImage) {
|
||||
this.$openImageOnNewTab(this.data.file_url)
|
||||
}
|
||||
|
||||
if (this.isFile) {
|
||||
this.$downloadFile(
|
||||
this.data.file_url,
|
||||
this.data.name + '.' + this.data.mimetype
|
||||
)
|
||||
}
|
||||
|
||||
if (this.isFolder) {
|
||||
// Go to folder
|
||||
this.$store.dispatch('goToFolder', [this.data, false])
|
||||
}
|
||||
},
|
||||
changeItemName: debounce(function (e) {
|
||||
// Prevent submit empty string
|
||||
if (e.target.innerText === '') return
|
||||
|
||||
this.$store.dispatch('changeItemName', {
|
||||
unique_id: this.data.unique_id,
|
||||
type: this.data.type,
|
||||
name: e.target.innerText
|
||||
})
|
||||
}, 300)
|
||||
},
|
||||
created() {
|
||||
this.item = this.data
|
||||
|
||||
events.$on('fileItem:clicked', unique_id => {
|
||||
if (this.data.unique_id == unique_id) {
|
||||
this.isClicked = true
|
||||
} else {
|
||||
this.isClicked = false
|
||||
}
|
||||
})
|
||||
|
||||
events.$on('fileItem:deselect', () => {
|
||||
// Deselect file
|
||||
this.isClicked = false
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.file-wrapper {
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: right;
|
||||
width: 50px;
|
||||
|
||||
.show-actions {
|
||||
cursor: pointer;
|
||||
padding: 12px 6px 12px;
|
||||
|
||||
.icon-action {
|
||||
@include font-size(14);
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
@include font-size(12);
|
||||
font-weight: 100;
|
||||
color: $text-muted;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
//display: inline-block;
|
||||
|
||||
&[contenteditable='true']:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $text;
|
||||
@include font-size(15);
|
||||
font-weight: 700;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.actived {
|
||||
max-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.file-item {
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
position: relative;
|
||||
flex: 0 0 50px;
|
||||
line-height: 0;
|
||||
margin-right: 20px;
|
||||
|
||||
.folder-icon {
|
||||
@include font-size(52);
|
||||
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
|
||||
&.is-deleted {
|
||||
path {
|
||||
fill: $dark_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
@include font-size(45);
|
||||
|
||||
path {
|
||||
fill: #fafafc;
|
||||
stroke: #dfe0e8;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.file {
|
||||
text-align: center;
|
||||
|
||||
.file-icon-text {
|
||||
line-height: 1;
|
||||
top: 40%;
|
||||
@include font-size(11);
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: $theme;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
max-width: 50px;
|
||||
max-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.image {
|
||||
img {
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
border: 2px dashed transparent;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 7px;
|
||||
|
||||
&.is-dragenter {
|
||||
border: 2px dashed $theme;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
border-radius: 8px;
|
||||
background: $light_background;
|
||||
|
||||
.item-name .name {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.file-wrapper {
|
||||
|
||||
.icon-item .file-icon {
|
||||
|
||||
path {
|
||||
fill: $dark_mode_foreground;
|
||||
stroke: #2F3C54;
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.file-icon {
|
||||
|
||||
path {
|
||||
fill: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name .name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<div class="file-content" :class="{ 'is-offset': uploadingFilesCount }">
|
||||
<div
|
||||
class="files-container"
|
||||
ref="fileContainer"
|
||||
:class="{
|
||||
'is-fileinfo-visible': fileInfoVisible && !$isMinimalScale()
|
||||
}"
|
||||
@click.self="filesContainerClick"
|
||||
>
|
||||
<!--MobileToolbar-->
|
||||
<MobileToolbar v-if="$isMinimalScale()"/>
|
||||
|
||||
<!--Searchbar-->
|
||||
<SearchBar v-if="$isMinimalScale()" class="mobile-search"/>
|
||||
|
||||
<!--Mobile Actions-->
|
||||
<MobileActions v-if="$isMinimalScale()" />
|
||||
|
||||
<!--Item previews list-->
|
||||
<div v-if="isList" class="file-list-wrapper">
|
||||
<transition-group
|
||||
name="file"
|
||||
tag="section"
|
||||
class="file-list"
|
||||
:class="preview_type"
|
||||
>
|
||||
<FileItemList
|
||||
@dragstart="dragStart(item)"
|
||||
@drop="dragFinish(item)"
|
||||
@click.native="clickedFileItem(item.unique_id)"
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:data="item"
|
||||
v-for="item in data"
|
||||
:key="item.unique_id"
|
||||
class="file-item"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
<!--Item previews grid-->
|
||||
<div v-if="isGrid" class="file-grid-wrapper">
|
||||
<transition-group
|
||||
name="file"
|
||||
tag="section"
|
||||
class="file-list"
|
||||
:class="preview_type"
|
||||
>
|
||||
<FileItemGrid
|
||||
@dragstart="dragStart(item)"
|
||||
@drop="dragFinish(item)"
|
||||
@click.native="clickedFileItem(item.unique_id)"
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:data="item"
|
||||
v-for="item in data"
|
||||
:key="item.unique_id"
|
||||
class="file-item"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
<!--Show empty page if folder is empty-->
|
||||
<EmptyPage v-if="!isSearching"/>
|
||||
|
||||
<!--Show empty page if no search results-->
|
||||
<EmptyMessage
|
||||
v-if="isSearching && isEmpty"
|
||||
message="Nothing was found."
|
||||
icon="eye-slash"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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="There is nothing to preview."
|
||||
icon="eye-slash"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MobileToolbar from '@/components/VueFileManagerComponents/FilesView/MobileToolbar'
|
||||
import MobileActions from '@/components/VueFileManagerComponents/FilesView/MobileActions'
|
||||
import FileInfoPanel from '@/components/VueFileManagerComponents/FilesView/FileInfoPanel'
|
||||
import FileItemList from '@/components/VueFileManagerComponents/FilesView/FileItemList'
|
||||
import FileItemGrid from '@/components/VueFileManagerComponents/FilesView/FileItemGrid'
|
||||
import EmptyMessage from '@/components/VueFileManagerComponents/FilesView/EmptyMessage'
|
||||
import EmptyPage from '@/components/VueFileManagerComponents/FilesView/EmptyPage'
|
||||
import SearchBar from '@/components/VueFileManagerComponents/FilesView/SearchBar'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FilesContainer',
|
||||
components: {
|
||||
MobileToolbar,
|
||||
MobileActions,
|
||||
FileInfoPanel,
|
||||
FileItemList,
|
||||
FileItemGrid,
|
||||
EmptyMessage,
|
||||
SearchBar,
|
||||
EmptyPage
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'uploadingFilesCount',
|
||||
'fileInfoVisible',
|
||||
'fileInfoDetail',
|
||||
'currentFolder',
|
||||
'preview_type',
|
||||
'isSearching',
|
||||
'isLoading',
|
||||
'data'
|
||||
]),
|
||||
isGrid() {
|
||||
return this.preview_type === 'grid'
|
||||
},
|
||||
isList() {
|
||||
return this.preview_type === 'list'
|
||||
},
|
||||
isEmpty() {
|
||||
return this.data.length == 0
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
draggingId: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dragStart(data) {
|
||||
|
||||
events.$emit('dragstart', data)
|
||||
|
||||
// Store dragged folder
|
||||
this.draggingId = data
|
||||
},
|
||||
dragFinish(data) {
|
||||
// Prevent to drop on file or image
|
||||
if (data.type !== 'folder' || this.draggingId === data) return
|
||||
|
||||
// Move folder to new parent
|
||||
this.moveTo(this.draggingId, data)
|
||||
},
|
||||
moveTo(from_item, to_item) {
|
||||
this.$store.dispatch('moveItem', [from_item, to_item])
|
||||
},
|
||||
clickedFileItem(unique_id) {
|
||||
events.$emit('fileItem:clicked', unique_id)
|
||||
},
|
||||
contextMenu(event, item) {
|
||||
events.$emit('contextMenu:show', event, item)
|
||||
},
|
||||
filesContainerClick(e) {
|
||||
if (e.target.className === 'file-list grid') {
|
||||
events.$emit('fileItem:deselect')
|
||||
}
|
||||
events.$emit('contextMenu:hide')
|
||||
}
|
||||
},
|
||||
created() {
|
||||
events.$on('fileItem:deselect', () =>
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
)
|
||||
|
||||
events.$on('scrollTop', () => {
|
||||
// Scroll top
|
||||
var container = document.getElementsByClassName(
|
||||
'files-container'
|
||||
)[0]
|
||||
|
||||
if (container) container.scrollTop = 0
|
||||
})
|
||||
|
||||
// On items delete
|
||||
events.$on('items:delete', () => {
|
||||
this.$store.dispatch('removeItem', this.fileInfoDetail)
|
||||
|
||||
//let ids = []
|
||||
//let items = []
|
||||
|
||||
// Get ids
|
||||
/*this.$children[0].$children.filter(item => {
|
||||
|
||||
if (item.isClicked) {
|
||||
|
||||
ids.push(item.data.unique_id)
|
||||
|
||||
items.push({
|
||||
unique_id: item.data.unique_id,
|
||||
type: item.data.type,
|
||||
})
|
||||
}
|
||||
})*/
|
||||
|
||||
// Dispatch action
|
||||
/*this.$store.dispatch('removeItems', [ids, items])*/
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.button-upload {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.mobile-search {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.file-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.files-container {
|
||||
overflow-y: auto;
|
||||
flex: 0 0 100%;
|
||||
@include transition(150ms);
|
||||
position: relative;
|
||||
|
||||
&.is-fileinfo-visible {
|
||||
flex: 0 1 100%;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
|
||||
&.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 180px);
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-info-container {
|
||||
flex: 0 0 300px;
|
||||
padding-left: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Transition
|
||||
.file-move {
|
||||
transition: transform 0.6s;
|
||||
}
|
||||
|
||||
.file-enter-active {
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.file-leave-active {
|
||||
transition: all 0ms;
|
||||
}
|
||||
|
||||
.file-enter, .file-leave-to /* .list-leave-active below version 2.1.8 */
|
||||
{
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
.file-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<button class="mobile-action-button">
|
||||
<FontAwesomeIcon class="icon" :icon="icon"></FontAwesomeIcon>
|
||||
<span class="label">{{ text }}</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MobileActionButton',
|
||||
props: [
|
||||
'icon', 'text'
|
||||
],
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
|
||||
.mobile-action-button {
|
||||
background: $light_background;
|
||||
margin-right: 15px;
|
||||
border-radius: 8px;
|
||||
padding: 7px 10px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
@include font-size(14);
|
||||
}
|
||||
|
||||
.label {
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.mobile-action-button {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.icon path {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<button class="mobile-action-button">
|
||||
<FontAwesomeIcon class="icon" :icon="icon"></FontAwesomeIcon>
|
||||
<label label="file" class="label button file-input button-base">
|
||||
{{ text }}
|
||||
<input
|
||||
accept="*"
|
||||
v-show="false"
|
||||
@change="emmitFiles"
|
||||
id="file"
|
||||
type="file"
|
||||
name="files[]"
|
||||
multiple
|
||||
/>
|
||||
</label>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MobileActionButtonUpload',
|
||||
props: [
|
||||
'icon', 'text'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
files: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
emmitFiles(e) {
|
||||
this.$uploadFiles(e.target.files)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
|
||||
.mobile-action-button {
|
||||
background: $light_background;
|
||||
margin-right: 15px;
|
||||
border-radius: 8px;
|
||||
padding: 7px 10px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
||||
.icon {
|
||||
margin-right: 8px;
|
||||
@include font-size(14);
|
||||
}
|
||||
|
||||
.label {
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.mobile-action-button {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.icon path {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div id="mobile-actions-wrapper">
|
||||
<div class="mobile-actions">
|
||||
<MobileActionButton v-if="! $isTrashLocation()" @click.native="createFolder" icon="folder-plus" text="Add Folder"></MobileActionButton>
|
||||
<MobileActionButtonUpload v-if="! $isTrashLocation()" @input.native="$uploadFiles" icon="upload" text="Upload"></MobileActionButtonUpload>
|
||||
<MobileActionButton @click.native="switchPreview" :icon="previewIcon" :text="previewText"></MobileActionButton>
|
||||
<MobileActionButton v-if="$isTrashLocation()" @click.native="$store.dispatch('emptyTrash')" icon="trash-alt" text="Empty Trash"></MobileActionButton>
|
||||
</div>
|
||||
<UploadProgress />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MobileActionButtonUpload from '@/components/VueFileManagerComponents/FilesView/MobileActionButtonUpload'
|
||||
import MobileActionButton from '@/components/VueFileManagerComponents/FilesView/MobileActionButton'
|
||||
import UploadProgress from '@/components/VueFileManagerComponents/FilesView/UploadProgress'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {debounce} from 'lodash'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'MobileActions',
|
||||
components: {
|
||||
MobileActionButtonUpload,
|
||||
MobileActionButton,
|
||||
UploadProgress,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['preview_type']),
|
||||
previewIcon() {
|
||||
return this.preview_type === 'list' ? 'th' : 'th-list'
|
||||
},
|
||||
previewText() {
|
||||
return this.preview_type === 'list' ? 'Grid' : 'List'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchPreview() {
|
||||
this.$store.dispatch('changePreviewType')
|
||||
},
|
||||
createFolder() {
|
||||
if (this.$isMobile()) {
|
||||
let folderName = prompt('Please enter your new folder name')
|
||||
|
||||
// Create folder
|
||||
if (folderName) this.$createFolder(folderName)
|
||||
} else {
|
||||
// Create folder
|
||||
this.$createFolder('New Folder')
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
|
||||
#mobile-actions-wrapper {
|
||||
background: white;
|
||||
position: sticky;
|
||||
top: 35px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.mobile-actions {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#mobile-actions-wrapper {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<div class="options-wrapper">
|
||||
<transition name="context-menu">
|
||||
<div
|
||||
v-show="isVisible"
|
||||
ref="contextmenu"
|
||||
class="options"
|
||||
@click="closeAndResetContextMenu"
|
||||
>
|
||||
<div class="menu-wrapper">
|
||||
<ul class="menu-options">
|
||||
<li class="menu-option"
|
||||
@click="addToFavourites"
|
||||
v-if="! $isTrashLocation() && fileInfoDetail && fileInfoDetail.type === 'folder'"
|
||||
>
|
||||
{{ isInFavourites ? 'Remove Favourite' : 'Add To Favourites' }}
|
||||
</li>
|
||||
|
||||
<li class="menu-option"
|
||||
@click="$store.dispatch('restoreItem', fileInfoDetail)"
|
||||
v-if="fileInfoDetail && $isTrashLocation()"
|
||||
>
|
||||
Restore
|
||||
</li>
|
||||
<li
|
||||
class="menu-option"
|
||||
@click="renameItem"
|
||||
v-if="fileInfoDetail"
|
||||
>
|
||||
Rename
|
||||
</li>
|
||||
<li
|
||||
class="menu-option"
|
||||
@click="downloadItem"
|
||||
v-if="isFile || isImage"
|
||||
>
|
||||
Download
|
||||
</li>
|
||||
<li
|
||||
class="menu-option delete"
|
||||
@click="removeItem"
|
||||
v-if="fileInfoDetail"
|
||||
>
|
||||
Delete
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-show="isVisible"
|
||||
class="vignette"
|
||||
@click="closeAndResetContextMenu"
|
||||
></div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {events} from '@/bus'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'MobileOptionList',
|
||||
computed: {
|
||||
...mapGetters(['fileInfoDetail', 'app']),
|
||||
isInFavourites() {
|
||||
return this.app.favourites.find(el => el.unique_id == this.fileInfoDetail.unique_id)
|
||||
},
|
||||
isFile() {
|
||||
return this.fileInfoDetail && this.fileInfoDetail.type === 'file'
|
||||
? true
|
||||
: false
|
||||
},
|
||||
isImage() {
|
||||
return this.fileInfoDetail && this.fileInfoDetail.type === 'image'
|
||||
? true
|
||||
: false
|
||||
},
|
||||
isFolder() {
|
||||
return this.fileInfoDetail && this.fileInfoDetail.type === 'folder'
|
||||
? true
|
||||
: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addToFavourites() {
|
||||
if (this.app.favourites && ! this.app.favourites.find(el => el.unique_id == this.fileInfoDetail.unique_id)) {
|
||||
this.$store.dispatch('addToFavourites', this.fileInfoDetail.unique_id)
|
||||
} else {
|
||||
this.$store.dispatch('removeFromFavourites', this.fileInfoDetail.unique_id)
|
||||
}
|
||||
},
|
||||
downloadItem() {
|
||||
// Download file
|
||||
this.$downloadFile(
|
||||
this.fileInfoDetail.file_url,
|
||||
this.fileInfoDetail.name + '.' + this.fileInfoDetail.mimetype
|
||||
)
|
||||
},
|
||||
removeItem() {
|
||||
// Dispatch remove item
|
||||
this.$store.dispatch('removeItem', this.fileInfoDetail)
|
||||
},
|
||||
renameItem() {
|
||||
let itemName = prompt(
|
||||
'Change your item name',
|
||||
this.fileInfoDetail.name
|
||||
)
|
||||
|
||||
if (itemName && itemName !== '') {
|
||||
this.$store.dispatch('changeItemName', {
|
||||
unique_id: this.fileInfoDetail.unique_id,
|
||||
type: this.fileInfoDetail.type,
|
||||
name: itemName
|
||||
})
|
||||
}
|
||||
},
|
||||
closeAndResetContextMenu() {
|
||||
events.$emit('fileItem:deselect')
|
||||
|
||||
// Close context menu
|
||||
this.isVisible = false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
events.$on('mobileMenu:show', () => {
|
||||
// Show context menu
|
||||
this.isVisible = !this.isVisible
|
||||
})
|
||||
|
||||
events.$on('mobileMenu:hide', () => {
|
||||
this.isVisible = false
|
||||
})
|
||||
|
||||
events.$on('mobileMenu:hide', () => {
|
||||
this.isVisible = false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.vignette {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.options {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
overflow: hidden;
|
||||
|
||||
&.showed {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-wrapper {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.menu-options {
|
||||
margin-top: 10px;
|
||||
box-shadow: $shadow;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
|
||||
.menu-option {
|
||||
font-weight: 600;
|
||||
@include font-size(15);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
padding: 20px 10px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid $light_background;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.vignette {
|
||||
background: $dark_mode_vignette;
|
||||
}
|
||||
|
||||
.options {
|
||||
|
||||
.menu-options {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.menu-option {
|
||||
border-color: rgba($dark_mode_background, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Transition
|
||||
.context-menu-enter-active,
|
||||
.fade-enter-active {
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.context-menu-leave-active,
|
||||
.fade-leave-active {
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.context-menu-enter,
|
||||
.context-menu-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.context-menu-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="mobile-toolbar">
|
||||
|
||||
<!-- Go back-->
|
||||
<div @click="goBack" class="go-back-button">
|
||||
<FontAwesomeIcon
|
||||
:class="{'is-visible': browseHistory.length > 0}"
|
||||
class="icon-back"
|
||||
icon="chevron-left"
|
||||
></FontAwesomeIcon>
|
||||
</div>
|
||||
|
||||
<!--Folder Title-->
|
||||
<div class="directory-name">{{ directoryName }}</div>
|
||||
|
||||
<!--More Actions-->
|
||||
<div class="more-actions-button" @click="showSidebarMenu">
|
||||
<FontAwesomeIcon icon="bars" v-if="isSmallAppSize"></FontAwesomeIcon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ToolbarButtonUpload from '@/components/VueFileManagerComponents/FilesView/ToolbarButtonUpload'
|
||||
import ToolbarButton from '@/components/VueFileManagerComponents/FilesView/ToolbarButton'
|
||||
import SearchBar from '@/components/VueFileManagerComponents/FilesView/SearchBar'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'MobileToolBar',
|
||||
components: {
|
||||
ToolbarButtonUpload,
|
||||
ToolbarButton,
|
||||
SearchBar
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'fileInfoVisible',
|
||||
'fileInfoDetail',
|
||||
'currentFolder',
|
||||
'browseHistory',
|
||||
'homeDirectory',
|
||||
'preview_type',
|
||||
'appSize',
|
||||
]),
|
||||
directoryName() {
|
||||
return this.currentFolder ? this.currentFolder.name : this.homeDirectory.name
|
||||
},
|
||||
previousFolder() {
|
||||
const length = this.browseHistory.length - 2
|
||||
|
||||
return this.browseHistory[length] ? this.browseHistory[length] : this.homeDirectory
|
||||
},
|
||||
isSmallAppSize() {
|
||||
return this.appSize === 'small'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isSidebarMenu: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showSidebarMenu() {
|
||||
this.isSidebarMenu = ! this.isSidebarMenu
|
||||
events.$emit('show:sidebar')
|
||||
},
|
||||
goBack() {
|
||||
|
||||
if (this.previousFolder.location === 'trash-root') {
|
||||
this.$store.dispatch('getTrash')
|
||||
this.$store.commit('FLUSH_BROWSER_HISTORY')
|
||||
|
||||
} else {
|
||||
this.$store.dispatch('goToFolder', [this.previousFolder, true])
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// Listen for hide sidebar
|
||||
events.$on('show:content', () => {
|
||||
if (this.isSidebarMenu) this.isSidebarMenu = false
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
|
||||
.mobile-toolbar {
|
||||
background: white;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 6;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.go-back-button {
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
|
||||
.icon-back {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
&.is-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.directory-name {
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
@include font-size(17);
|
||||
color: $text;
|
||||
font-weight: 600;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.more-actions-button {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.mobile-toolbar {
|
||||
background: $dark_mode_background;
|
||||
|
||||
.directory-name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="progress-bar">
|
||||
<span :style="{ width: progress + '%' }"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ProgressBar',
|
||||
props: ['progress']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: $dark_background;
|
||||
margin-top: 5px;
|
||||
border-radius: 10px;
|
||||
|
||||
span {
|
||||
background: $theme;
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.progress-bar {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 680px) and (prefers-color-scheme: dark) {
|
||||
|
||||
.progress-bar {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="search-bar">
|
||||
<input
|
||||
v-model="query"
|
||||
class="query"
|
||||
type="text"
|
||||
name="query"
|
||||
placeholder="Search files…"
|
||||
/>
|
||||
<div class="icon" v-if="!isQuery">
|
||||
<FontAwesomeIcon icon="search"></FontAwesomeIcon>
|
||||
</div>
|
||||
<div class="icon" v-if="isQuery" @click="resetQuery">
|
||||
<FontAwesomeIcon icon="times" class="pointer"></FontAwesomeIcon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from 'vuex'
|
||||
import {debounce} from 'lodash'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'SearchBar',
|
||||
computed: {
|
||||
...mapGetters(['currentFolder']),
|
||||
isQuery() {
|
||||
return this.query !== '' && typeof this.query !== 'undefined'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
query(val) {
|
||||
return this.getResult(val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetQuery() {
|
||||
this.query = ''
|
||||
},
|
||||
getResult: debounce(function (value) {
|
||||
if (this.isQuery) {
|
||||
// Get search result if query is not empty
|
||||
this.$store.dispatch('getSearchResult', value)
|
||||
} else if (typeof value !== 'undefined') {
|
||||
if (this.currentFolder) {
|
||||
// Get back after delete query to previosly folder
|
||||
this.$store.dispatch('goToFolder', [
|
||||
this.currentFolder,
|
||||
true
|
||||
])
|
||||
}
|
||||
|
||||
this.$store.commit('CHANGE_SEARCHING_STATE', false)
|
||||
}
|
||||
}, 300)
|
||||
},
|
||||
created() {
|
||||
events.$on('clear-query', () => (this.query = undefined))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.search-bar {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
//width: 100%;
|
||||
background: $light_background;
|
||||
border-radius: 8px;
|
||||
outline: 0;
|
||||
padding: 9px 20px;
|
||||
font-weight: 100;
|
||||
@include font-size(16);
|
||||
min-width: 380px;
|
||||
transition: 0.15s all ease;
|
||||
border: 1px solid white;
|
||||
-webkit-appearance: none;
|
||||
|
||||
&::placeholder {
|
||||
color: $text;
|
||||
@include font-size(14);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $theme;
|
||||
box-shadow: 0 0 7px rgba($theme, 0.3);
|
||||
}
|
||||
|
||||
&:focus + .icon {
|
||||
path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 10px 15px;
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.search-bar {
|
||||
input {
|
||||
background: $dark_mode_foreground;
|
||||
border-color: $dark_mode_foreground;
|
||||
|
||||
&::placeholder {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
fill: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div id="loading-bar-spinner" class="spinner">
|
||||
<div class="spinner-icon"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Spinner'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
#loading-bar-spinner.spinner {
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
top: 50%;
|
||||
margin-top: -20px;
|
||||
position: absolute;
|
||||
z-index: 19 !important;
|
||||
animation: loading-bar-spinner 400ms linear infinite;
|
||||
}
|
||||
|
||||
#loading-bar-spinner.spinner .spinner-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: solid 4px transparent;
|
||||
border-top-color: $theme !important;
|
||||
border-left-color: $theme !important;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@keyframes loading-bar-spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<button class="button" :title="action">
|
||||
<FontAwesomeIcon class="icon" :icon="source"></FontAwesomeIcon>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ToolbarButton',
|
||||
props: ['source', 'action']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.button {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
background: $light_background;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
.icon {
|
||||
@include font-size(16);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, .1);
|
||||
|
||||
/deep/ svg path {
|
||||
@include transition;
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba($theme, .1);
|
||||
|
||||
/deep/ svg path {
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.button {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
fill: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<label label="file" class="button file-input">
|
||||
<FontAwesomeIcon class="icon" :icon="source"></FontAwesomeIcon>
|
||||
<input
|
||||
@change="emmitFiles"
|
||||
v-show="false"
|
||||
id="file"
|
||||
type="file"
|
||||
name="files[]"
|
||||
multiple
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ToolbarButtonUpload',
|
||||
props: ['source', 'action'],
|
||||
methods: {
|
||||
emmitFiles(e) {
|
||||
this.$uploadFiles(e.target.files)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.button {
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
background: $light_background;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba($theme, .1);
|
||||
|
||||
/deep/ svg path {
|
||||
@include transition;
|
||||
fill: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include font-size(16);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.button {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
|
||||
.icon svg path {
|
||||
fill: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<transition name="info-panel">
|
||||
<div v-if="uploadingFilesCount" class="upload-progress">
|
||||
<div class="progress-title">
|
||||
<span
|
||||
>Uploading files {{ uploadingFilesCount.current }}/{{
|
||||
uploadingFilesCount.total
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
<ProgressBar :progress="uploadingFileProgress"/>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProgressBar from '@/components/VueFileManagerComponents/FilesView/ProgressBar'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'UploadProgress',
|
||||
components: {
|
||||
ProgressBar,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['uploadingFileProgress', 'uploadingFilesCount'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.info-panel-enter-active,
|
||||
.info-panel-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.info-panel-enter,
|
||||
.info-panel-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.upload-progress {
|
||||
width: 100%;
|
||||
padding-bottom: 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.progress-title {
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
@include font-size(14);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.progress-bar {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user