mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-18 00:02:15 +00:00
bug fixes
This commit is contained in:
MakingCG
@@ -1,26 +1,23 @@
|
||||
<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>
|
||||
<transition name="popup">
|
||||
<div @click.self="closePopup" class="popup" v-if="isVisibleWrapper">
|
||||
<div class="popup-wrapper">
|
||||
<div class="popup-image">
|
||||
<span class="emoji">{{ emoji }}</span>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="popup-vignette" @click="closePopup"></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>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
@@ -38,7 +35,6 @@
|
||||
return {
|
||||
isVisibleWrapper: false,
|
||||
buttonStyle: undefined,
|
||||
isVisiblePopup: false,
|
||||
message: undefined,
|
||||
title: undefined,
|
||||
button: undefined,
|
||||
@@ -47,19 +43,13 @@
|
||||
},
|
||||
methods: {
|
||||
closePopup() {
|
||||
// Emit event
|
||||
events.$emit('alert:close')
|
||||
|
||||
// Hide popup wrapper
|
||||
this.isVisibleWrapper = false
|
||||
this.isVisiblePopup = false
|
||||
events.$emit('popup:close')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// Show alert
|
||||
events.$on('alert:open', args => {
|
||||
this.isVisibleWrapper = true
|
||||
this.isVisiblePopup = true
|
||||
|
||||
this.title = args.title
|
||||
this.message = args.message
|
||||
@@ -76,7 +66,6 @@
|
||||
// Show alert
|
||||
events.$on('success:open', args => {
|
||||
this.isVisibleWrapper = true
|
||||
this.isVisiblePopup = true
|
||||
|
||||
this.title = args.title
|
||||
this.message = args.message
|
||||
@@ -92,7 +81,6 @@
|
||||
|
||||
// Close popup
|
||||
events.$on('popup:close', () => {
|
||||
this.isVisiblePopup = false
|
||||
this.isVisibleWrapper = false
|
||||
})
|
||||
}
|
||||
@@ -110,15 +98,6 @@
|
||||
bottom: 0;
|
||||
z-index: 20;
|
||||
overflow: auto;
|
||||
|
||||
.popup-vignette {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: rgba(17, 20, 29, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
@@ -180,10 +159,6 @@
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.popup .popup-vignette {
|
||||
background: $dark_mode_vignette;
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
@@ -211,28 +186,11 @@
|
||||
@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;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,67 +1,58 @@
|
||||
<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>
|
||||
<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="moveItem"
|
||||
v-if="fileInfoDetail"
|
||||
>
|
||||
Move
|
||||
</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>
|
||||
<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="moveItem"
|
||||
v-if="fileInfoDetail"
|
||||
>
|
||||
Move
|
||||
</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>
|
||||
</transition>
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-show="isVisible"
|
||||
class="vignette"
|
||||
@click="closeAndResetContextMenu"
|
||||
></div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -149,15 +140,13 @@
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
// Show context menu
|
||||
events.$on('mobileMenu:show', () => {
|
||||
// Show context menu
|
||||
this.isVisible = !this.isVisible
|
||||
})
|
||||
|
||||
events.$on('mobileMenu:hide', () => {
|
||||
this.isVisible = false
|
||||
})
|
||||
|
||||
// Hide mobile menu
|
||||
events.$on('mobileMenu:hide', () => {
|
||||
this.isVisible = false
|
||||
})
|
||||
@@ -169,7 +158,7 @@
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.vignette {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
background: rgba(17, 20, 29, 0.5);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -240,19 +229,12 @@
|
||||
}
|
||||
|
||||
// Transition
|
||||
.context-menu-enter-active,
|
||||
.fade-enter-active {
|
||||
transition: all 300ms ease;
|
||||
.context-menu-enter-active {
|
||||
transition: all 350ms ease;
|
||||
}
|
||||
|
||||
.context-menu-leave-active,
|
||||
.fade-leave-active {
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
.context-menu-leave-active {
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.context-menu-enter,
|
||||
@@ -260,8 +242,4 @@
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.context-menu-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,42 +1,39 @@
|
||||
<template>
|
||||
<transition name="vignette">
|
||||
<div class="popup" v-if="isVisibleWrapper">
|
||||
<transition name="popup">
|
||||
<div v-if="isVisiblePopup" class="popup-wrapper">
|
||||
<transition name="popup">
|
||||
<div class="popup" @click.self="closePopup" v-if="isVisibleWrapper">
|
||||
<div class="popup-wrapper">
|
||||
|
||||
<!--Title-->
|
||||
<div class="popup-header">
|
||||
<h1 class="title">Move Item</h1>
|
||||
<!--<p v-if="message" class="message">{{ message }}</p>-->
|
||||
</div>
|
||||
<!--Title-->
|
||||
<div class="popup-header">
|
||||
<h1 class="title">Move Item</h1>
|
||||
<!--<p v-if="message" class="message">{{ message }}</p>-->
|
||||
</div>
|
||||
|
||||
<!--Content-->
|
||||
<div class="popup-content" v-if="app && pickedItem">
|
||||
<Spinner v-if="isLoadingTree" />
|
||||
<div v-if="! isLoadingTree">
|
||||
<ThumbnailItem class="item-thumbnail" :file="pickedItem" />
|
||||
<TreeMenu :depth="1" :nodes="items" v-for="items in app.folders" :key="items.unique_id" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Actions-->
|
||||
<div class="actions">
|
||||
<ButtonBase
|
||||
class="popup-button"
|
||||
@click.native="closePopup"
|
||||
button-style="secondary"
|
||||
>Cancel
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
class="popup-button"
|
||||
@click.native="moveItem"
|
||||
:button-style="selectedFolder ? 'theme' : 'secondary'"
|
||||
>Move
|
||||
</ButtonBase>
|
||||
<!--Content-->
|
||||
<div class="popup-content" v-if="app && pickedItem">
|
||||
<Spinner v-if="isLoadingTree"/>
|
||||
<div v-if="! isLoadingTree">
|
||||
<ThumbnailItem class="item-thumbnail" :file="pickedItem"/>
|
||||
<TreeMenu :depth="1" :nodes="items" v-for="items in app.folders" :key="items.unique_id"/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="popup-vignette" @click="closePopup"></div>
|
||||
|
||||
<!--Actions-->
|
||||
<div class="actions">
|
||||
<ButtonBase
|
||||
class="popup-button"
|
||||
@click.native="closePopup"
|
||||
button-style="secondary"
|
||||
>Cancel
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
class="popup-button"
|
||||
@click.native="moveItem"
|
||||
:button-style="selectedFolder ? 'theme' : 'secondary'"
|
||||
>Move
|
||||
</ButtonBase>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
@@ -63,7 +60,6 @@
|
||||
data() {
|
||||
return {
|
||||
isVisibleWrapper: false,
|
||||
isVisiblePopup: false,
|
||||
selectedFolder: undefined,
|
||||
pickedItem: undefined,
|
||||
isLoadingTree: true,
|
||||
@@ -72,36 +68,38 @@
|
||||
methods: {
|
||||
moveItem() {
|
||||
|
||||
// Prevent empty submit
|
||||
if (! this.selectedFolder) return
|
||||
|
||||
// Move item
|
||||
this.$store.dispatch('moveItem', [this.pickedItem, this.selectedFolder])
|
||||
|
||||
// Close popup
|
||||
this.closePopup()
|
||||
events.$emit('popup:close')
|
||||
},
|
||||
closePopup() {
|
||||
|
||||
// Hide popup wrapper
|
||||
this.isVisibleWrapper = false
|
||||
this.isVisiblePopup = false
|
||||
|
||||
// Clear selected folder
|
||||
this.selectedFolder = undefined
|
||||
events.$emit('popup:close')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
events.$on('pick-folder', unique_id => {
|
||||
this.selectedFolder = unique_id
|
||||
// Select folder in tree
|
||||
events.$on('pick-folder', folder => {
|
||||
|
||||
if (folder.unique_id == this.pickedItem.unique_id) {
|
||||
this.selectedFolder = undefined
|
||||
} else {
|
||||
this.selectedFolder = folder
|
||||
}
|
||||
})
|
||||
|
||||
// Show popup
|
||||
events.$on('popup:move-item', item => {
|
||||
|
||||
// Show tree spinner
|
||||
this.isLoadingTree = true
|
||||
|
||||
// Get folder tree
|
||||
// Get folder tree and hide spinner
|
||||
this.$store.dispatch('getFolderTree').then(() => {
|
||||
this.isLoadingTree = false
|
||||
}).catch(() => {
|
||||
@@ -110,14 +108,20 @@
|
||||
|
||||
// Make popup visible
|
||||
this.isVisibleWrapper = true
|
||||
this.isVisiblePopup = true
|
||||
|
||||
// Store picked item
|
||||
this.pickedItem = item
|
||||
})
|
||||
|
||||
// Close popup
|
||||
events.$on('popup:close', () => this.closePopup())
|
||||
events.$on('popup:close', () => {
|
||||
|
||||
// Hide popup wrapper
|
||||
this.isVisibleWrapper = false
|
||||
|
||||
// Clear selected folder
|
||||
this.selectedFolder = undefined
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -126,24 +130,15 @@
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.popup {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
overflow: auto;
|
||||
z-index: 20;
|
||||
overflow-y: auto;
|
||||
display: grid;
|
||||
padding: 40px;
|
||||
|
||||
.popup-vignette {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: rgba(17, 20, 29, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
@@ -207,8 +202,12 @@
|
||||
// Mobile styles
|
||||
.small {
|
||||
|
||||
.popup {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
@@ -276,10 +275,6 @@
|
||||
// Dark mode
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.popup .popup-vignette {
|
||||
background: $dark_mode_vignette;
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
@@ -294,21 +289,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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,75 @@
|
||||
<template>
|
||||
<transition name="vignette">
|
||||
<div v-if="isVisibleVignette" class="vignette" @click="closePopup"></div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'Vignette',
|
||||
data() {
|
||||
return {
|
||||
isVisibleVignette: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closePopup() {
|
||||
events.$emit('popup:close')
|
||||
events.$emit('mobileMenu:hide')
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
// Show vignette
|
||||
events.$on('popup:move-item', () => this.isVisibleVignette = true)
|
||||
events.$on('alert:open', () => this.isVisibleVignette = true)
|
||||
events.$on('success:open', () => this.isVisibleVignette = true)
|
||||
events.$on('mobileMenu:show', () => this.isVisibleVignette = true)
|
||||
|
||||
// Hide vignette
|
||||
events.$on('popup:close', () => this.isVisibleVignette = false)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@assets/app.scss";
|
||||
|
||||
.vignette {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 19;
|
||||
background: rgba(17, 20, 29, 0.5);
|
||||
}
|
||||
|
||||
// Dark mode
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.vignette {
|
||||
background: $dark_mode_vignette;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.vignette-enter-active {
|
||||
animation: vignette-in 0.35s ease;
|
||||
}
|
||||
|
||||
.vignette-leave-active {
|
||||
animation: vignette-in 0.15s ease reverse;
|
||||
}
|
||||
|
||||
@keyframes vignette-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user