nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-24 18:00:40 +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
resources/js/components/FilesView/FileActionsMobile.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="sticky top-14 z-20 block overflow-x-auto whitespace-nowrap bg-white px-4 pb-3 dark:bg-dark-background lg:hidden">
<div class="sticky top-14 z-[19] block overflow-x-auto whitespace-nowrap bg-white px-4 pb-3 dark:bg-dark-background lg:hidden">
<!--Show Buttons-->
<slot v-if="!isMultiSelectMode" />
resources/js/components/FilesView/MobileToolbar.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div
class="sticky top-0 z-20 block flex w-full items-center justify-between bg-white py-5 px-4 text-center dark:bg-dark-background lg:hidden"
class="sticky top-0 z-[19] block flex w-full items-center justify-between bg-white py-5 px-4 text-center dark:bg-dark-background lg:hidden"
>
<NavigationBar />
resources/js/components/Mobile/MenuMobile.vue
+35 -5
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>
resources/js/components/Others/MobileNavigation.vue
+2 -2
View File
@@ -40,7 +40,7 @@
<Option @click.native="goToRoute('Profile')" :title="$t('menu.profile')" icon="user" :is-hover-disabled="true" />
<Option @click.native="goToRoute('Password')" :title="$t('menu.password')" icon="lock" :is-hover-disabled="true" />
<Option @click.native="goToRoute('Storage')" :title="$t('menu.storage')" icon="hard-drive" :is-hover-disabled="true" />
<Option @click.native="goToRoute('Billing')" v-if="config.isSaaS" :title="$t('Billing')" icon="cloud" :is-hover-disabled="true" />
<Option @click.native="goToRoute('Billing')" v-if="config.subscriptionType !== 'none'" :title="$t('Billing')" icon="cloud" :is-hover-disabled="true" />
</OptionGroup>
<!--Submenu: Admin settings-->
@@ -57,7 +57,7 @@
</OptionGroup>
<!--Submenu: Billing settings-->
<OptionGroup v-if="clickedSubmenu === 'admin' && config.isSaaS">
<OptionGroup v-if="clickedSubmenu === 'admin' && config.subscriptionType !== 'none'">
<Option @click.native="goToRoute('AppPayments')" :title="$t('Payments')" icon="credit-card" :is-hover-disabled="true" />
<Option
@click.native="goToRoute('Subscriptions')"
resources/js/components/Others/Popup/PopupWrapper.vue
+29 -9
View File
@@ -44,21 +44,41 @@ export default {
</script>
<style lang="scss" scoped>
@media only screen and (max-width: 690px) {
.popup-leave-active {
animation: popup-slide-in 0.15s ease reverse;
}
@media only screen and (min-width: 960px) {
.popup-enter-active {
animation: popup-slide-in 0.35s 0.15s ease both;
animation: popup-slide-in 0.25s 0.10s ease both;
}
.popup-leave-active {
animation: popup-slide-in 0.15s ease reverse;
@keyframes popup-slide-in {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
}
@keyframes popup-slide-in {
0% {
transform: translateY(100%);
@media only screen and (max-width: 960px) {
.popup-enter-active {
animation: popup-slide-in 0.35s 0.15s ease both;
}
100% {
transform: translateY(0);
@keyframes popup-slide-in {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
}
</style>
resources/js/components/Others/Vignette.vue
+3 -11
View File
@@ -1,6 +1,6 @@
<template>
<transition name="vignette">
<div v-if="isVisible" class="vignette" @click="closePopup"></div>
<div v-if="isVisible" class="vignette bg-dark-background bg-opacity-[0.35] dark:bg-opacity-[0.45]" @click="closePopup"></div>
</transition>
</template>
@@ -31,13 +31,11 @@ export default {
created() {
// Show vignette
events.$on('popup:open', () => (this.isVisibleVignette = true))
events.$on('mobile-menu:show', () => (this.isVisibleVignette = true))
events.$on('alert:open', () => (this.isVisibleVignette = true))
events.$on('success:open', () => (this.isVisibleVignette = true))
events.$on('confirm:open', () => (this.isVisibleVignette = true))
// Hide vignette
events.$on('mobile-menu:hide', () => (this.isVisibleVignette = false))
events.$on('popup:close', () => (this.isVisibleVignette = false))
},
}
@@ -54,20 +52,14 @@ export default {
left: 0;
bottom: 0;
z-index: 40;
background: $light_mode_vignette;
}
// Dark mode
.dark .vignette {
background: $dark_mode_vignette;
}
.vignette-enter-active {
animation: vignette-in 0.35s ease;
animation: vignette-in 0.15s linear;
}
.vignette-leave-active {
animation: vignette-in 0.15s ease reverse;
animation: vignette-in 0.15s cubic-bezier(0.4, 0, 1, 1) reverse;
}
@keyframes vignette-in {