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

mobile navigation refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-22 14:27:21 +01:00
parent a7fd410a68
commit 1f48abae0f
6 changed files with 65 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
resources/js/components/FilesView/Option.vue
View File

@@ -40,10 +40,10 @@
<b class="font-bold text-sm group-hover-text-theme" :class="{'text-theme': isActive}">
{{ title }}
</b>
<div v-if="arrow" class="ml-3.5">
<chevron-right-icon v-if="arrow === 'right'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<arrow-up-icon v-if="arrow === 'up'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<arrow-down-icon v-if="arrow === 'down'" size="17" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<div v-if="arrow" class="ml-2">
<chevron-right-icon v-if="arrow === 'right'" size="14" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<arrow-up-icon v-if="arrow === 'up'" size="14" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
<arrow-down-icon v-if="arrow === 'down'" size="14" class="vue-feather group-hover-text-theme" :class="{'text-theme': isActive}"/>
</div>
</li>
</template>

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

@@ -1,7 +1,11 @@
<template>
<transition name="context-menu">
<div v-if="isVisible" @click="closeMenu" class="options">
<slot></slot>
<div
v-if="isVisible"
@click="closeMenu"
class="fixed pb-4 bottom-0 left-0 right-0 z-50 overflow-hidden dark:bg-2x-dark-foreground bg-white rounded-tl-xl rounded-tr-xl"
>
<slot />
</div>
</transition>
</template>
@@ -38,25 +42,6 @@
</script>
<style scoped lang="scss">
@import "resources/sass/vuefilemanager/_variables";
@import "resources/sass/vuefilemanager/_mixins";
.options {
position: fixed;
padding-bottom: 25px;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
overflow: hidden;
background: white;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
&.showed {
display: block;
}
}
// Transition
.context-menu-enter-active,
@@ -83,11 +68,4 @@
.context-menu-leave-active {
position: fixed;
}
.dark {
.options {
background: $dark_mode_foreground;
}
}
</style>

39
resources/js/components/Others/MobileNavigation.vue
View File

@@ -2,10 +2,11 @@
<MenuMobile name="user-navigation">
<!--User avatar-->
<UserHeadline v-if="!clickedSubmenu" class="user-info" />
<UserHeadline v-if="!clickedSubmenu" class="p-5 pb-3" />
<!--User estimate-->
<div v-if="config.subscriptionType === 'metered' && user && !clickedSubmenu" class="block px-5 pt-2">
<div class="bg-light-background px-3 py-1.5 rounded-lg">
<div class="dark:bg-4x-dark-foreground bg-light-background px-3 py-1.5 rounded-lg">
<span class="text-sm font-semibold">
{{ $t('Your current estimated usage:') }}
</span>
@@ -16,9 +17,11 @@
</div>
<!--Go back button-->
<div v-if="clickedSubmenu" @click.stop="showSubmenu(undefined)" class="go-back">
<chevron-left-icon size="19" class="text-theme" />
<span class="title text-theme">{{ backTitle }}</span>
<div v-if="clickedSubmenu" @click.stop="showSubmenu(undefined)" class="flex items-center p-5 pb-4">
<chevron-left-icon size="19" class="vue-feather text-theme mr-2 -ml-1" />
<span class="text-theme font-bold text-sm">
{{ backTitle }}
</span>
</div>
<!--Menu links-->
@@ -127,29 +130,3 @@
}
}
</script>
<style scoped lang="scss">
@import "resources/sass/vuefilemanager/_variables";
@import "resources/sass/vuefilemanager/_mixins";
.user-info {
padding: 20px 20px 10px;
}
.go-back {
display: flex;
align-items: center;
padding: 30px 20px 10px;
cursor: pointer;
.title {
@include font-size(14);
font-weight: 700;
margin-left: 10px;
}
polyline {
color: inherit;
}
}
</style>

22
resources/js/components/Others/Popup/PopupActions.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="actions flex items-center space-x-4 px-6 py-4 pb-6">
<slot></slot>
<div class="md:relative absolute bottom-0 left-0 right-0 flex items-center space-x-4 px-6 py-4 pb-6">
<slot />
</div>
</template>
@@ -9,21 +9,3 @@
name: 'PopupActions',
}
</script>
<style lang="scss" scoped>
@media only screen and (max-width: 690px) {
.actions {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
}
@media only screen and (max-width: 320px) {
.actions {
position: unset;
}
}
</style>

2
resources/js/components/Others/Popup/PopupContent.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
:class="type"
class="md:relative md:top-0 md:bottom-0 absolute top-14 bottom-24 left-0 right-0 h-auto overflow-y-auto overflow-x-auto px-6"
class="md:relative md:top-0 md:bottom-0 absolute top-16 bottom-24 left-0 right-0 h-auto overflow-y-auto overflow-x-auto px-6"
>
<slot />
</div>