105 lines
2.2 KiB
Vue
105 lines
2.2 KiB
Vue
<template>
|
|
<div class="single-notification">
|
|
<div class="read-indicator" :class="{'read': notification.readAt !== null}" />
|
|
<user
|
|
v-if="notification.notification.doer"
|
|
class="user"
|
|
:user="notification.notification.doer"
|
|
:show-username="false"
|
|
:avatar-size="16"
|
|
/>
|
|
<div class="detail">
|
|
<div>
|
|
<span v-if="notification.notification.doer" class="has-text-weight-bold mr-1">
|
|
{{ getDisplayName(notification.notification.doer) }}
|
|
</span>
|
|
<BaseButton :to="getNotificationRoute(notification)" @click="emit('markNotificationAsRead')">
|
|
{{ getNotificationTitle(notification, userInfo) }}
|
|
</BaseButton>
|
|
</div>
|
|
<span class="created" v-tooltip="formatDateLong(notification.created)">
|
|
{{ formatDateSince(notification.created) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {computed} from 'vue'
|
|
|
|
import type {INotification} from '@/modelTypes/INotification'
|
|
|
|
import BaseButton from '@/components/base/BaseButton.vue'
|
|
import User from '@/components/misc/user.vue'
|
|
|
|
import {useAuthStore} from '@/stores/auth'
|
|
|
|
import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
|
|
import {getDisplayName} from '@/models/user'
|
|
import {getNotificationRoute, getNotificationTitle} from '@/services/notification'
|
|
|
|
defineProps<{
|
|
notification: INotification
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'markNotificationAsRead'): void
|
|
}>()
|
|
|
|
const authStore = useAuthStore()
|
|
const userInfo = computed(() => authStore.info)
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.single-notification {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0;
|
|
transition: background-color $transition;
|
|
|
|
&:hover {
|
|
background: var(--grey-100);
|
|
border-radius: $radius;
|
|
}
|
|
}
|
|
|
|
.read-indicator {
|
|
width: .35rem;
|
|
height: .35rem;
|
|
background: var(--primary);
|
|
border-radius: 100%;
|
|
margin-left: .5rem;
|
|
|
|
&.read {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
// FIXME: this deep styling of user should not be in here
|
|
.user {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: auto;
|
|
margin: 0 .5rem;
|
|
|
|
span {
|
|
font-family: $family-sans-serif;
|
|
}
|
|
|
|
.avatar {
|
|
height: 16px;
|
|
}
|
|
|
|
img {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.created {
|
|
color: var(--grey-400);
|
|
}
|
|
|
|
a {
|
|
color: var(--grey-800);
|
|
}
|
|
</style> |