mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-12 23:35:58 +00:00
add clickedCount to PostTeaser
This commit is contained in:
Moriz Wahl
parent
4611e298f5
commit
d3eafc9b69
@ -6,9 +6,9 @@
|
||||
<base-card
|
||||
:lang="post.language"
|
||||
:class="{
|
||||
'disabled-content': post.disabled,
|
||||
'--blur-image': post.image && post.image.sensitive,
|
||||
}"
|
||||
'disabled-content': post.disabled,
|
||||
'--blur-image': post.image && post.image.sensitive,
|
||||
}"
|
||||
:highlight="isPinned"
|
||||
>
|
||||
<template v-if="post.image" #heroImage>
|
||||
@ -34,6 +34,11 @@
|
||||
:count="post.commentsCount"
|
||||
:title="$t('contribution.amount-comments', { amount: post.commentsCount })"
|
||||
/>
|
||||
<counter-icon
|
||||
icon="eye"
|
||||
:count="post.clickedCount"
|
||||
:title="$t('contribution.amount-clicks', { amount: post.clickedCount })"
|
||||
/>
|
||||
<client-only>
|
||||
<content-menu
|
||||
resource-type="contribution"
|
||||
@ -54,143 +59,143 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserTeaser from '~/components/UserTeaser/UserTeaser'
|
||||
import ContentMenu from '~/components/ContentMenu/ContentMenu'
|
||||
import HcRibbon from '~/components/Ribbon'
|
||||
import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
|
||||
import UserTeaser from '~/components/UserTeaser/UserTeaser'
|
||||
import ContentMenu from '~/components/ContentMenu/ContentMenu'
|
||||
import HcRibbon from '~/components/Ribbon'
|
||||
import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
|
||||
|
||||
export default {
|
||||
name: 'PostTeaser',
|
||||
components: {
|
||||
UserTeaser,
|
||||
HcRibbon,
|
||||
ContentMenu,
|
||||
CounterIcon,
|
||||
},
|
||||
props: {
|
||||
post: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
width: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const { image } = this.post
|
||||
if (!image) return
|
||||
const width = this.$el.offsetWidth
|
||||
const height = Math.min(width / image.aspectRatio, 2000)
|
||||
const imageElement = this.$el.querySelector('.hero-image')
|
||||
if (imageElement) {
|
||||
imageElement.style.height = `${height}px`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
user: 'auth/user',
|
||||
}),
|
||||
excerpt() {
|
||||
return this.$filters.removeLinks(this.post.contentExcerpt)
|
||||
},
|
||||
isAuthor() {
|
||||
const { author } = this.post
|
||||
if (!author) return false
|
||||
return this.user.id === this.post.author.id
|
||||
},
|
||||
menuModalsData() {
|
||||
return postMenuModalsData(
|
||||
// "this.post" may not always be defined at the beginning …
|
||||
this.post ? this.$filters.truncate(this.post.title, 30) : '',
|
||||
this.deletePostCallback,
|
||||
)
|
||||
},
|
||||
isPinned() {
|
||||
return this.post && this.post.pinned
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async deletePostCallback() {
|
||||
try {
|
||||
const {
|
||||
data: { DeletePost },
|
||||
} = await this.$apollo.mutate(deletePostMutation(this.post.id))
|
||||
this.$toast.success(this.$t('delete.contribution.success'))
|
||||
this.$emit('removePostFromList', DeletePost)
|
||||
} catch (err) {
|
||||
this.$toast.error(err.message)
|
||||
}
|
||||
},
|
||||
pinPost(post) {
|
||||
this.$emit('pinPost', post)
|
||||
},
|
||||
unpinPost(post) {
|
||||
this.$emit('unpinPost', post)
|
||||
},
|
||||
},
|
||||
}
|
||||
export default {
|
||||
name: 'PostTeaser',
|
||||
components: {
|
||||
UserTeaser,
|
||||
HcRibbon,
|
||||
ContentMenu,
|
||||
CounterIcon,
|
||||
},
|
||||
props: {
|
||||
post: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
width: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const { image } = this.post
|
||||
if (!image) return
|
||||
const width = this.$el.offsetWidth
|
||||
const height = Math.min(width / image.aspectRatio, 2000)
|
||||
const imageElement = this.$el.querySelector('.hero-image')
|
||||
if (imageElement) {
|
||||
imageElement.style.height = `${height}px`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
user: 'auth/user',
|
||||
}),
|
||||
excerpt() {
|
||||
return this.$filters.removeLinks(this.post.contentExcerpt)
|
||||
},
|
||||
isAuthor() {
|
||||
const { author } = this.post
|
||||
if (!author) return false
|
||||
return this.user.id === this.post.author.id
|
||||
},
|
||||
menuModalsData() {
|
||||
return postMenuModalsData(
|
||||
// "this.post" may not always be defined at the beginning …
|
||||
this.post ? this.$filters.truncate(this.post.title, 30) : '',
|
||||
this.deletePostCallback,
|
||||
)
|
||||
},
|
||||
isPinned() {
|
||||
return this.post && this.post.pinned
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async deletePostCallback() {
|
||||
try {
|
||||
const {
|
||||
data: { DeletePost },
|
||||
} = await this.$apollo.mutate(deletePostMutation(this.post.id))
|
||||
this.$toast.success(this.$t('delete.contribution.success'))
|
||||
this.$emit('removePostFromList', DeletePost)
|
||||
} catch (err) {
|
||||
this.$toast.error(err.message)
|
||||
}
|
||||
},
|
||||
pinPost(post) {
|
||||
this.$emit('pinPost', post)
|
||||
},
|
||||
unpinPost(post) {
|
||||
this.$emit('unpinPost', post)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.post-teaser,
|
||||
.post-teaser:hover,
|
||||
.post-teaser:active {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
color: $text-color-base;
|
||||
.post-teaser,
|
||||
.post-teaser:hover,
|
||||
.post-teaser:active {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
color: $text-color-base;
|
||||
|
||||
> .ribbon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -7px;
|
||||
}
|
||||
}
|
||||
> .ribbon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -7px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-teaser > .base-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.post-teaser > .base-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
&.--blur-image > .hero-image > .image {
|
||||
filter: blur($blur-radius);
|
||||
}
|
||||
&.--blur-image > .hero-image > .image {
|
||||
filter: blur($blur-radius);
|
||||
}
|
||||
|
||||
> .content {
|
||||
flex-grow: 1;
|
||||
margin-bottom: $space-small;
|
||||
}
|
||||
> .content {
|
||||
flex-grow: 1;
|
||||
margin-bottom: $space-small;
|
||||
}
|
||||
|
||||
> .footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
> .footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
> .categories-placeholder {
|
||||
flex-grow: 1;
|
||||
}
|
||||
> .categories-placeholder {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
> .counter-icon {
|
||||
display: block;
|
||||
margin-right: $space-small;
|
||||
opacity: $opacity-disabled;
|
||||
}
|
||||
> .counter-icon {
|
||||
display: block;
|
||||
margin-right: $space-small;
|
||||
opacity: $opacity-disabled;
|
||||
}
|
||||
|
||||
> .content-menu {
|
||||
position: relative;
|
||||
z-index: $z-index-post-teaser-link;
|
||||
}
|
||||
> .content-menu {
|
||||
position: relative;
|
||||
z-index: $z-index-post-teaser-link;
|
||||
}
|
||||
|
||||
.ds-tag {
|
||||
margin: 0;
|
||||
margin-right: $space-xx-small;
|
||||
}
|
||||
}
|
||||
.ds-tag {
|
||||
margin: 0;
|
||||
margin-right: $space-xx-small;
|
||||
}
|
||||
}
|
||||
|
||||
.user-teaser {
|
||||
margin-bottom: $space-small;
|
||||
}
|
||||
}
|
||||
.user-teaser {
|
||||
margin-bottom: $space-small;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -67,6 +67,7 @@ export const postCountsFragment = gql`
|
||||
shoutedCount
|
||||
shoutedByCurrentUser
|
||||
emotionsCount
|
||||
clickedCount
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
@ -174,6 +174,7 @@
|
||||
}
|
||||
},
|
||||
"contribution": {
|
||||
"amount-clicks": "{amount} clicks",
|
||||
"amount-comments": "{amount} comments",
|
||||
"amount-shouts": "{amount} recommendations",
|
||||
"categories": {
|
||||
|
||||
@ -174,6 +174,7 @@
|
||||
}
|
||||
},
|
||||
"contribution": {
|
||||
"amount-clicks": "{amount} clicks",
|
||||
"amount-comments": "{amount} comments",
|
||||
"amount-shouts": "{amount} recommendations",
|
||||
"categories": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user