mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Use Dropdown in Author Component
This commit is contained in:
Grzegorz Leoniec
parent
78978e9bdb
commit
e9ac233d6c
@ -1,127 +1,127 @@
|
||||
<template>
|
||||
<v-popover
|
||||
:open.sync="isPopoverOpen"
|
||||
<dropdown
|
||||
:disabled="!hasAuthor || !showAuthorPopover"
|
||||
:open-group="Math.random().toString()"
|
||||
placement="top-start"
|
||||
trigger="manual"
|
||||
offset="0"
|
||||
>
|
||||
<a
|
||||
v-router-link
|
||||
:href="author.slug ? $router.resolve({ name: 'profile-slug', params: { slug: author.slug } }).href : null"
|
||||
style="white-space: nowrap; display: flex; align-items: center;"
|
||||
@mouseover="popoverMouseEnter"
|
||||
@mouseleave="popoveMouseLeave"
|
||||
<template
|
||||
slot="default"
|
||||
slot-scope="{openMenu, closeMenu, isOpen}"
|
||||
>
|
||||
<div style="display: inline-block; float: left; margin-right: 4px; height: 100%; vertical-align: middle;">
|
||||
<ds-avatar
|
||||
:image="author.avatar"
|
||||
:name="author.name"
|
||||
style="display: inline-block; vertical-align: middle;"
|
||||
size="32px"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: inline-block; height: 100%; vertical-align: middle;">
|
||||
<b
|
||||
class="username"
|
||||
style="vertical-align: middle;"
|
||||
>
|
||||
{{ author.name | truncate(trunc, 18) }}
|
||||
</b>
|
||||
<template v-if="post.createdAt">
|
||||
<br>
|
||||
<ds-text
|
||||
size="small"
|
||||
color="soft"
|
||||
>
|
||||
{{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
|
||||
</ds-text>
|
||||
</template>
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
slot="popover"
|
||||
style="min-width: 250px;"
|
||||
@mouseover="popoverMouseEnter"
|
||||
@mouseleave="popoveMouseLeave"
|
||||
>
|
||||
<!--<ds-avatar
|
||||
:image="author.avatar"
|
||||
:name="author.name || 'Anonymus'"
|
||||
class="profile-avatar"
|
||||
size="90px" />-->
|
||||
<hc-badges
|
||||
v-if="author.badges && author.badges.length"
|
||||
:badges="author.badges"
|
||||
style="margin-bottom: -10px"
|
||||
/>
|
||||
<ds-flex>
|
||||
<ds-flex-item class="ds-tab-nav-item">
|
||||
<ds-space margin="small">
|
||||
<ds-number
|
||||
:count="fanCount"
|
||||
:label="$t('profile.followers')"
|
||||
size="x-large"
|
||||
/>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
|
||||
<ds-space margin="small">
|
||||
<ds-number
|
||||
:count="author.contributionsCount"
|
||||
:label="$t('common.post', null, author.contributionsCount)"
|
||||
/>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item class="ds-tab-nav-item">
|
||||
<ds-space margin="small">
|
||||
<ds-number
|
||||
:count="author.commentsCount"
|
||||
:label="$t('common.comment', null, author.commentsCount)"
|
||||
/>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<!--<ds-text
|
||||
color="soft"
|
||||
size="small">
|
||||
<ds-icon name="map-marker" /> Hamburg, Deutschland
|
||||
</ds-text>-->
|
||||
<ds-flex
|
||||
v-if="!itsMe"
|
||||
gutter="x-small"
|
||||
style="margin-bottom: 0;"
|
||||
<a
|
||||
v-router-link
|
||||
:href="author.slug ? $router.resolve({ name: 'profile-slug', params: { slug: author.slug } }).href : null"
|
||||
:class="['author', isOpen && 'active']"
|
||||
@mouseover="openMenu(true)"
|
||||
@mouseleave="closeMenu(true)"
|
||||
>
|
||||
<ds-flex-item :width="{base: 3}">
|
||||
<hc-follow-button
|
||||
:follow-id="author.id"
|
||||
@update="voted = true"
|
||||
<div style="display: inline-block; float: left; margin-right: 4px; height: 100%; vertical-align: middle;">
|
||||
<ds-avatar
|
||||
:image="author.avatar"
|
||||
:name="author.name"
|
||||
style="display: inline-block; vertical-align: middle;"
|
||||
size="32px"
|
||||
/>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{base: 1}">
|
||||
<ds-button full-width>
|
||||
<ds-icon name="user-times" />
|
||||
</ds-button>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<!--<ds-space margin-bottom="x-small" />-->
|
||||
</div>
|
||||
</v-popover>
|
||||
</div>
|
||||
<div style="display: inline-block; height: 100%; vertical-align: middle;">
|
||||
<b
|
||||
class="username"
|
||||
style="vertical-align: middle;"
|
||||
>
|
||||
{{ author.name | truncate(trunc, 18) }}
|
||||
</b>
|
||||
<template v-if="post.createdAt">
|
||||
<br>
|
||||
<ds-text
|
||||
size="small"
|
||||
color="soft"
|
||||
>
|
||||
{{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
|
||||
</ds-text>
|
||||
</template>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
<template
|
||||
slot="popover"
|
||||
>
|
||||
<div style="min-width: 250px">
|
||||
<!--<ds-avatar
|
||||
:image="author.avatar"
|
||||
:name="author.name || 'Anonymus'"
|
||||
class="profile-avatar"
|
||||
size="90px" />-->
|
||||
<hc-badges
|
||||
v-if="author.badges && author.badges.length"
|
||||
:badges="author.badges"
|
||||
style="margin-bottom: -10px"
|
||||
/>
|
||||
<ds-flex>
|
||||
<ds-flex-item class="ds-tab-nav-item">
|
||||
<ds-space margin="small">
|
||||
<ds-number
|
||||
:count="fanCount"
|
||||
:label="$t('profile.followers')"
|
||||
size="x-large"
|
||||
/>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
|
||||
<ds-space margin="small">
|
||||
<ds-number
|
||||
:count="author.contributionsCount"
|
||||
:label="$t('common.post', null, author.contributionsCount)"
|
||||
/>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item class="ds-tab-nav-item">
|
||||
<ds-space margin="small">
|
||||
<ds-number
|
||||
:count="author.commentsCount"
|
||||
:label="$t('common.comment', null, author.commentsCount)"
|
||||
/>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<!--<ds-text
|
||||
color="soft"
|
||||
size="small">
|
||||
<ds-icon name="map-marker" /> Hamburg, Deutschland
|
||||
</ds-text>-->
|
||||
<ds-flex
|
||||
v-if="!itsMe"
|
||||
gutter="x-small"
|
||||
style="margin-bottom: 0;"
|
||||
>
|
||||
<ds-flex-item :width="{base: 3}">
|
||||
<hc-follow-button
|
||||
:follow-id="author.id"
|
||||
@update="voted = true"
|
||||
/>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{base: 1}">
|
||||
<ds-button full-width>
|
||||
<ds-icon name="user-times" />
|
||||
</ds-button>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
<!--<ds-space margin-bottom="x-small" />-->
|
||||
</div>
|
||||
</template>
|
||||
</dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HcFollowButton from '~/components/FollowButton.vue'
|
||||
import HcBadges from '~/components/Badges.vue'
|
||||
|
||||
let mouseEnterTimer = null
|
||||
let mouseLeaveTimer = null
|
||||
import Dropdown from '~/components/Dropdown'
|
||||
|
||||
export default {
|
||||
name: 'HcAuthor',
|
||||
components: {
|
||||
HcFollowButton,
|
||||
HcBadges
|
||||
HcBadges,
|
||||
Dropdown
|
||||
},
|
||||
props: {
|
||||
post: { type: Object, default: null },
|
||||
@ -130,7 +130,6 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isPopoverOpen: false,
|
||||
voted: false
|
||||
}
|
||||
},
|
||||
@ -156,30 +155,6 @@ export default {
|
||||
hasAuthor() {
|
||||
return Boolean(this.post && this.post.author)
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearTimeout(mouseEnterTimer)
|
||||
clearTimeout(mouseLeaveTimer)
|
||||
},
|
||||
methods: {
|
||||
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>
|
||||
@ -191,4 +166,15 @@ export default {
|
||||
margin-top: -45px;
|
||||
border: #fff 5px solid;
|
||||
}
|
||||
.author {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user