nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-27 10:40:38 +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/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 {