mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
7564908456
- Update CSS - Use design tokens where possible - Update spec description - Avoid scoped scss as it's more expensive - did not change the next and back button as they weren't really visible without the primary class - Fix German translation
84 lines
1.9 KiB
Vue
84 lines
1.9 KiB
Vue
<template>
|
|
<ds-space :class="{ read: notification.read, notification: true }" margin-bottom="x-small">
|
|
<client-only>
|
|
<ds-space margin-bottom="x-small">
|
|
<hc-user :user="from.author" :date-time="from.createdAt" :trunc="35" />
|
|
</ds-space>
|
|
<ds-text class="reason-text-for-test" color="soft">
|
|
{{ $t(`notifications.reason.${notification.reason}`) }}
|
|
</ds-text>
|
|
</client-only>
|
|
<ds-space margin-bottom="x-small" />
|
|
<nuxt-link
|
|
class="notification-mention-post"
|
|
:to="{ name: 'post-id-slug', params, ...hashParam }"
|
|
@click.native="$emit('read')"
|
|
>
|
|
<ds-space margin-bottom="x-small">
|
|
<ds-card
|
|
:header="from.title || from.post.title"
|
|
hover
|
|
space="x-small"
|
|
class="notifications-card"
|
|
>
|
|
<ds-space margin-bottom="x-small" />
|
|
<div>
|
|
<span v-if="isComment" class="comment-notification-header">
|
|
{{ $t(`notifications.comment`) }}:
|
|
</span>
|
|
{{ from.contentExcerpt | removeHtml }}
|
|
</div>
|
|
</ds-card>
|
|
</ds-space>
|
|
</nuxt-link>
|
|
</ds-space>
|
|
</template>
|
|
|
|
<script>
|
|
import HcUser from '~/components/User/User'
|
|
|
|
export default {
|
|
name: 'Notification',
|
|
components: {
|
|
HcUser,
|
|
},
|
|
props: {
|
|
notification: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
from() {
|
|
return this.notification.from
|
|
},
|
|
isComment() {
|
|
return this.from.__typename === 'Comment'
|
|
},
|
|
params() {
|
|
const post = this.isComment ? this.from.post : this.from
|
|
return {
|
|
id: post.id,
|
|
slug: post.slug,
|
|
}
|
|
},
|
|
hashParam() {
|
|
return this.isComment ? { hash: `#commentId-${this.from.id}` } : {}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.notification.read {
|
|
opacity: $opacity-soft;
|
|
}
|
|
.notifications-card {
|
|
min-width: 500px;
|
|
}
|
|
.comment-notification-header {
|
|
font-weight: 700;
|
|
margin-right: 0.1rem;
|
|
}
|
|
</style>
|