IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2026-01-20 20:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Created dropdown component

Browse Source
This commit is contained in:
Grzegorz Leoniec 2018-12-18 18:37:45 +01:00
parent d804b47736
commit e49534cdf6
No known key found for this signature in database
GPG Key ID: 3AA43686D4EB1377
2 changed files with 91 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
components/Dropdown.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<v-popover
:open.sync="isPopoverOpen"
:open-group="Math.random().toString()"
:placement="placement"
trigger="manual"
offset="10"
style="float: right"
>
<slot :toggleMenu="toggleMenu" />
<div
slot="popover"
style="padding-top: .5rem; padding-bottom: .5rem;"
@mouseover="popoverMouseEnter"
@mouseleave="popoveMouseLeave"
>
<slot name="popover" />
</div>
</v-popover>
</template>
<script>
import { mapGetters } from 'vuex'
let mouseEnterTimer = null
let mouseLeaveTimer = null
export default {
props: {
placement: { type: String, default: 'bottom-end' }
},
data() {
return {
isPopoverOpen: false
}
},
beforeDestroy() {
clearTimeout(mouseEnterTimer)
clearTimeout(mouseLeaveTimer)
},
methods: {
toggleMenu() {
this.isPopoverOpen = !this.isPopoverOpen
},
popoverMouseEnter() {
clearTimeout(mouseEnterTimer)
clearTimeout(mouseLeaveTimer)
if (!this.isPopoverOpen) {
mouseEnterTimer = setTimeout(() => {
this.isPopoverOpen = true
}, 500)
}
},
popoveMouseLeave() {
clearTimeout(mouseEnterTimer)
clearTimeout(mouseLeaveTimer)
if (this.isPopoverOpen) {
mouseLeaveTimer = setTimeout(() => {
this.isPopoverOpen = false
}, 300)
}
}
}
}
</script>

85
layouts/default.vue
View File

@ -11,42 +11,40 @@
<locale-switch class="topbar-locale-switch" />
<template v-if="isLoggedIn">
<no-ssr>
<v-popover
:open.sync="isPopoverOpen"
:open-group="Math.random().toString()"
placement="bottom-end"
trigger="manual"
offset="10"
style="float: right"
>
<a
class="avatar-menu"
:href="$router.resolve({name: 'profile-slug', params: {slug: user.slug}}).href"
@click.prevent="toggleMenu()"
<dropdown>
<template
slot="default"
slot-scope="{toggleMenu}"
>
<ds-avatar
:image="user.avatar"
:name="user.name"
size="42"
/>
</a>
<div
<a
class="avatar-menu"
:href="$router.resolve({name: 'profile-slug', params: {slug: user.slug}}).href"
@click.prevent="toggleMenu()"
>
<ds-avatar
:image="user.avatar"
:name="user.name"
size="42"
/>
</a>
</template>
<template
slot="popover"
class="avatar-menu-popover"
style="padding-top: .5rem; padding-bottom: .5rem;"
@mouseover="popoverMouseEnter"
@mouseleave="popoveMouseLeave">
>
{{ $t('login.hello') }} <b>{{ user.name }}</b>
<ds-menu
:routes="routes"
:is-exact="isExact"
style="margin-left: -15px; margin-right: -15px; padding-top: 1rem; padding-bottom: 1rem;">
style="margin-left: -15px; margin-right: -15px; padding-top: 1rem; padding-bottom: 1rem;"
>
<ds-menu-item
slot="Navigation"
slot-scope="item"
:route="item.route"
:parents="item.parents"
@click.native="toggleMenu">
@click.native="toggleMenu"
>
<ds-icon :name="item.route.icon" /> {{ item.route.name }}
</ds-menu-item>
</ds-menu>
@ -54,8 +52,8 @@
<nuxt-link :to="{ name: 'logout'}">
<ds-icon name="sign-out" /> {{ $t('login.logout') }}
</nuxt-link>
</div>
</v-popover>
</template>
</dropdown>
</no-ssr>
</template>
</ds-container>
@ -71,19 +69,13 @@
<script>
import { mapGetters } from 'vuex'
import LocaleSwitch from '~/components/LocaleSwitch'
let mouseEnterTimer = null
let mouseLeaveTimer = null
import Dropdown from '~/components/Dropdown'
export default {
components: {
Dropdown,
LocaleSwitch
},
data() {
return {
isPopoverOpen: false
}
},
computed: {
...mapGetters({
user: 'auth/user',
@ -116,34 +108,9 @@ export default {
return routes
}
},
beforeDestroy() {
clearTimeout(mouseEnterTimer)
clearTimeout(mouseLeaveTimer)
},
methods: {
toggleMenu() {
this.isPopoverOpen = !this.isPopoverOpen
},
isExact(url) {
return this.$route.path.indexOf(url) === 0
},
popoverMouseEnter() {
clearTimeout(mouseEnterTimer)
clearTimeout(mouseLeaveTimer)
if (!this.isPopoverOpen) {
mouseEnterTimer = setTimeout(() => {
this.isPopoverOpen = true
}, 500)
}
},
popoveMouseLeave() {
clearTimeout(mouseEnterTimer)
clearTimeout(mouseLeaveTimer)
if (this.isPopoverOpen) {
mouseLeaveTimer = setTimeout(() => {
this.isPopoverOpen = false
}, 300)
}
}
}
}