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

UI Fixes 2

Browse Source
This commit is contained in:
Čarodej
2022-02-15 17:39:59 +01:00
parent 421388b360
commit 5ee77da25f
10 changed files with 91 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
resources/js/components/Mobile/MenuMobile.vue
View File

@@ -1,9 +1,22 @@
<template>
<transition name="context-menu">
<div v-if="isVisible" @click="closeMenu" class="fixed bottom-0 left-0 right-0 z-50 overflow-hidden rounded-tl-xl rounded-tr-xl bg-white pb-4 dark:bg-2x-dark-foreground">
<slot />
</div>
</transition>
<div>
<transition name="context-menu">
<div
v-if="isVisible"
@click="closeMenu"
class="fixed bottom-0 left-0 right-0 z-50 overflow-hidden rounded-tl-xl rounded-tr-xl bg-white pb-4 dark:bg-2x-dark-foreground"
>
<slot />
</div>
</transition>
<transition name="vignette">
<div
v-if="isVisible"
@click="closeMenu"
class="fixed left-0 right-0 top-0 bottom-0 z-20 bg-dark-background bg-opacity-[0.35] dark:bg-opacity-[0.45]"
></div>
</transition>
</div>
</template>
<script>
@@ -60,4 +73,21 @@ export default {
.context-menu-leave-active {
position: fixed;
}
.vignette-enter-active {
animation: vignette-in 0.15s cubic-bezier(0.4, 0, 1, 1);
}
.vignette-leave-active {
animation: vignette-in 0.15s linear reverse;
}
@keyframes vignette-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>