forked from DebaucheryLibrarian/traxxx
158 lines
2.6 KiB
Vue
158 lines
2.6 KiB
Vue
|
<template>
|
||
|
<div
|
||
|
class="notifications"
|
||
|
>
|
||
|
<div class="notifications-header">
|
||
|
<h4 class="notifications-title">Notifications</h4>
|
||
|
|
||
|
<div class="notifications-actions">
|
||
|
<Icon
|
||
|
icon="checkmark"
|
||
|
@click="clearNotifications"
|
||
|
/>
|
||
|
|
||
|
<Icon
|
||
|
icon="plus3"
|
||
|
@click="showAddAlert = true"
|
||
|
/>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<AddAlert
|
||
|
v-if="showAddAlert"
|
||
|
@close="showAddAlert = false"
|
||
|
>Alert</AddAlert>
|
||
|
|
||
|
<div class="notifications-body">
|
||
|
<span
|
||
|
v-if="notifications.length === 0"
|
||
|
class="notification"
|
||
|
>No notifications</span>
|
||
|
|
||
|
<ul
|
||
|
v-else
|
||
|
class="nolist"
|
||
|
>
|
||
|
<li
|
||
|
v-for="notification in notifications"
|
||
|
:key="`notification-${notification.id}`"
|
||
|
class="notification"
|
||
|
>
|
||
|
<router-link
|
||
|
:to="`/scene/${notification.scene.id}/${notification.scene.slug}`"
|
||
|
class="notification-link"
|
||
|
>
|
||
|
<img
|
||
|
:src="getPath(notification.scene.poster, 'thumbnail')"
|
||
|
class="poster"
|
||
|
>
|
||
|
|
||
|
<div class="notification-body">
|
||
|
New<span
|
||
|
v-if="notification.alert.tags?.length > 0"
|
||
|
class="notification-tidbit"
|
||
|
> {{ notification.alert.tags.map(tag => tag.name).join(', ') }}</span> scene<template v-if="notification.alert.actors?.length > 0"> with <span class="notification-tidbit">{{ notification.alert.actors.map(actor => actor.name).join(', ') }}</span></template>
|
||
|
</div>
|
||
|
</router-link>
|
||
|
</li>
|
||
|
</ul>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import AddAlert from '../alerts/add.vue';
|
||
|
|
||
|
function notifications() {
|
||
|
return this.$store.state.ui.notifications;
|
||
|
}
|
||
|
|
||
|
async function clearNotifications() {
|
||
|
|
||
|
}
|
||
|
|
||
|
export default {
|
||
|
components: {
|
||
|
AddAlert,
|
||
|
},
|
||
|
data() {
|
||
|
return {
|
||
|
showAddAlert: false,
|
||
|
};
|
||
|
},
|
||
|
computed: {
|
||
|
notifications,
|
||
|
},
|
||
|
methods: {
|
||
|
clearNotifications,
|
||
|
},
|
||
|
};
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss" scoped>
|
||
|
.notifications {
|
||
|
width: 30rem;
|
||
|
}
|
||
|
|
||
|
.notifications-header {
|
||
|
display: flex;
|
||
|
justify-content: space-between;
|
||
|
|
||
|
.icon {
|
||
|
padding: .5rem;
|
||
|
fill: var(--shadow);
|
||
|
|
||
|
:hover {
|
||
|
fill: var(--primary);
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.notifications-title {
|
||
|
display: inline-block;
|
||
|
padding: .5rem 1rem;
|
||
|
margin: 0;
|
||
|
color: var(--shadow);
|
||
|
font-size: 1rem;
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
.notifications-body {
|
||
|
box-shadow: 0 0 3px var(--shadow-weak);
|
||
|
}
|
||
|
|
||
|
.notification {
|
||
|
display: block;
|
||
|
|
||
|
&:not(:last-child) {
|
||
|
border-bottom: solid 1px var(--shadow-hint);
|
||
|
}
|
||
|
|
||
|
&:hover {
|
||
|
color: var(--primary);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.notification-link {
|
||
|
display: flex;
|
||
|
color: inherit;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
|
||
|
.notification-body {
|
||
|
padding: .5rem 1rem;
|
||
|
}
|
||
|
|
||
|
.notification-tidbit {
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
.poster {
|
||
|
width: 5rem;
|
||
|
height: 3rem;
|
||
|
object-fit: cover;
|
||
|
object-position: center;
|
||
|
}
|
||
|
</style>
|