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

added prettier

Browse Source
This commit is contained in:
Čarodej
2022-02-01 12:21:38 +01:00
parent 5ae875233b
commit b38b532cbe
284 changed files with 25410 additions and 25338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,71 +1,63 @@
<template>
<transition name="context-menu">
<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"
>
<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>
</template>
<script>
import {events} from "../../bus";
import { events } from '../../bus'
export default {
name: 'MenuMobile',
props: [
'name'
],
data() {
return {
isVisible: false,
}
},
methods: {
closeMenu() {
this.isVisible = false
events.$emit('mobile-menu:hide')
}
},
created() {
events.$on('mobile-menu:show', name => {
if (name === this.name)
this.isVisible = !this.isVisible
})
events.$on('mobile-menu:hide', () => this.isVisible = false)
export default {
name: 'MenuMobile',
props: ['name'],
data() {
return {
isVisible: false,
}
}
},
methods: {
closeMenu() {
this.isVisible = false
events.$emit('mobile-menu:hide')
},
},
created() {
events.$on('mobile-menu:show', (name) => {
if (name === this.name) this.isVisible = !this.isVisible
})
events.$on('mobile-menu:hide', () => (this.isVisible = false))
},
}
</script>
<style scoped lang="scss">
// Transition
.context-menu-enter-active,
.fade-enter-active {
transition: all 300ms;
}
// Transition
.context-menu-enter-active,
.fade-enter-active {
transition: all 300ms;
}
.context-menu-leave-active,
.fade-leave-active {
transition: all 300ms;
}
.context-menu-leave-active,
.fade-leave-active {
transition: all 300ms;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.context-menu-enter,
.context-menu-leave-to {
opacity: 0;
transform: translateY(100%);
}
.context-menu-enter,
.context-menu-leave-to {
opacity: 0;
transform: translateY(100%);
}
.context-menu-leave-active {
position: fixed;
}
.context-menu-leave-active {
position: fixed;
}
</style>

20
resources/js/components/Mobile/MenuMobileGroup.vue
View File

@@ -5,18 +5,18 @@
</template>
<script>
export default {
name: 'MenuMobileGroup',
}
export default {
name: 'MenuMobileGroup',
}
</script>
<style scoped lang="scss">
@import "resources/sass/vuefilemanager/_variables";
@import "resources/sass/vuefilemanager/_mixins";
@import 'resources/sass/vuefilemanager/_variables';
@import 'resources/sass/vuefilemanager/_mixins';
.menu-options {
margin-top: 10px;
list-style: none;
width: 100%;
}
.menu-options {
margin-top: 10px;
list-style: none;
width: 100%;
}
</style>

141
resources/js/components/Mobile/MobileHeader.vue
View File

@@ -1,6 +1,5 @@
<template>
<header class="mobile-header">
<!-- Go back-->
<div @click="goBack" class="go-back">
<chevron-left-icon size="17" class="icon" />
@@ -17,92 +16,86 @@
</template>
<script>
import {events} from '../../bus'
import { events } from '../../bus'
import {
import { ChevronLeftIcon, MenuIcon } from 'vue-feather-icons'
export default {
name: 'MobileHeader',
props: ['title'],
components: {
ChevronLeftIcon,
MenuIcon,
} from 'vue-feather-icons'
export default {
name: 'MobileHeader',
props: [
'title'
],
components: {
ChevronLeftIcon,
MenuIcon,
},
methods: {
goBack() {
this.$router.back()
},
methods: {
goBack() {
this.$router.back();
}
}
}
},
}
</script>
<style scoped lang="scss">
@import '../../../sass/vuefilemanager/variables';
@import '../../../sass/vuefilemanager/mixins';
@import '../../../sass/vuefilemanager/variables';
@import '../../../sass/vuefilemanager/mixins';
.mobile-header {
padding: 10px 0;
.mobile-header {
padding: 10px 0;
text-align: center;
background: white;
position: sticky;
display: none;
z-index: 6;
top: 0;
> div {
flex-grow: 1;
align-self: center;
white-space: nowrap;
}
.go-back {
text-align: left;
}
.location-name {
line-height: 1;
text-align: center;
background: white;
position: sticky;
display: none;
z-index: 6;
top: 0;
width: 100%;
vertical-align: middle;
@include font-size(15);
color: $text;
font-weight: 700;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
> div {
flex-grow: 1;
align-self: center;
white-space: nowrap;
}
.mobile-menu {
text-align: right;
}
.go-back {
text-align: left;
}
.icon {
vertical-align: middle;
margin-top: -4px;
}
}
@media only screen and (max-width: 690px) {
.mobile-header {
display: flex;
margin-bottom: 15px;
}
}
.dark {
.mobile-header {
background: $dark_mode_background;
.location-name {
line-height: 1;
text-align: center;
width: 100%;
vertical-align: middle;
@include font-size(15);
color: $text;
font-weight: 700;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
.mobile-menu {
text-align: right;
}
.icon {
vertical-align: middle;
margin-top: -4px;
color: $dark_mode_text_primary;
}
}
@media only screen and (max-width: 690px) {
.mobile-header {
display: flex;
margin-bottom: 15px;
}
}
.dark {
.mobile-header {
background: $dark_mode_background;
.location-name {
color: $dark_mode_text_primary;
}
}
}
}
</style>