Show actual status in notifications when mentioned.
This commit is contained in:
parent
9778d4cfc0
commit
0e1ab69c33
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="timeline panel panel-default base00-background">
|
||||
<div class="timeline panel panel-default base00-background conversation">
|
||||
<div class="panel-heading base01-background base04">
|
||||
Conversation
|
||||
<div v-if="collapsable">
|
||||
|
@ -1,4 +1,5 @@
|
||||
import { sortBy, take, filter } from 'lodash'
|
||||
import Status from '../status/status.vue'
|
||||
|
||||
const Notifications = {
|
||||
data () {
|
||||
@ -6,6 +7,9 @@ const Notifications = {
|
||||
visibleNotificationCount: 10
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Status
|
||||
},
|
||||
computed: {
|
||||
notifications () {
|
||||
return this.$store.state.statuses.notifications
|
||||
|
@ -1,8 +1,16 @@
|
||||
@import '../../_variables.scss';
|
||||
.notification {
|
||||
border-bottom: 1px solid silver;
|
||||
|
||||
.notification-base {
|
||||
padding: 0.4em 0 0 0.7em;
|
||||
display: flex;
|
||||
border-bottom: 1px solid silver;
|
||||
.avatar {
|
||||
padding-top: 0.3em;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.text {
|
||||
min-width: 0px;
|
||||
@ -31,12 +39,6 @@
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
padding-top: 0.3em;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
@ -4,6 +4,7 @@
|
||||
<div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div>
|
||||
<div class="panel-body">
|
||||
<div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
|
||||
<div class="notification-base">
|
||||
<a :href="notification.action.user.statusnet_profile_url">
|
||||
<img class='avatar' :src="notification.action.user.profile_image_url_original">
|
||||
</a>
|
||||
@ -19,10 +20,11 @@
|
||||
</div>
|
||||
<div v-if="notification.type === 'mention'">
|
||||
<h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
|
||||
<p>{{ notification.status.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<status v-if="notification.type === 'mention'" :statusoid="notification.action" :expandable="false"></status>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="status-el base00-background" v-if="!status.deleted" v-bind:class="{ 'expanded-status': !expandable }">
|
||||
<div class="status-el base00-background" v-if="!status.deleted">
|
||||
<template v-if="muted">
|
||||
<div class="media status container muted">
|
||||
<small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
|
||||
@ -121,10 +121,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.expanded-status {
|
||||
border-left: 4px solid rgba(255, 48, 16, 0.65);
|
||||
}
|
||||
|
||||
.status-actions {
|
||||
padding-top: 5px;
|
||||
}
|
||||
@ -160,4 +156,8 @@
|
||||
border-radius: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.conversation .status-el {
|
||||
border-left: 4px solid rgba(255, 48, 16, 0.65);
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user