forked from AkkomaGang/akkoma-fe
Show actual status in notifications when mentioned.
This commit is contained in:
Roger Braun
parent
9778d4cfc0
commit
0e1ab69c33
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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">
|
<div class="panel-heading base01-background base04">
|
||||||
Conversation
|
Conversation
|
||||||
<div v-if="collapsable">
|
<div v-if="collapsable">
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div class="timeline">
|
<div class="timeline">
|
||||||
<status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false'></status>
|
<status v-for="status in conversation" :key="status.id" v-bind:statusoid="status" :expandable='false'></status>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import { sortBy, take, filter } from 'lodash'
|
import { sortBy, take, filter } from 'lodash'
|
||||||
|
import Status from '../status/status.vue'
|
||||||
|
|
||||||
const Notifications = {
|
const Notifications = {
|
||||||
data () {
|
data () {
|
||||||
|
|
@ -6,6 +7,9 @@ const Notifications = {
|
||||||
visibleNotificationCount: 10
|
visibleNotificationCount: 10
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
Status
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
notifications () {
|
notifications () {
|
||||||
return this.$store.state.statuses.notifications
|
return this.$store.state.statuses.notifications
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,44 @@
|
||||||
@import '../../_variables.scss';
|
@import '../../_variables.scss';
|
||||||
.notification {
|
.notification {
|
||||||
padding: 0.4em 0 0 0.7em;
|
|
||||||
display: flex;
|
|
||||||
border-bottom: 1px solid silver;
|
border-bottom: 1px solid silver;
|
||||||
|
|
||||||
.text {
|
.notification-base {
|
||||||
min-width: 0px;
|
padding: 0.4em 0 0 0.7em;
|
||||||
word-wrap: break-word;
|
display: flex;
|
||||||
line-height:18px;
|
.avatar {
|
||||||
|
padding-top: 0.3em;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
.icon-retweet {
|
.text {
|
||||||
color: $green;
|
min-width: 0px;
|
||||||
}
|
word-wrap: break-word;
|
||||||
|
line-height:18px;
|
||||||
|
|
||||||
.icon-reply {
|
.icon-retweet {
|
||||||
color: $blue;
|
color: $green;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
.icon-reply {
|
||||||
margin: 0 0 0.3em;
|
color: $blue;
|
||||||
padding: 0;
|
}
|
||||||
font-size: 1em;
|
|
||||||
line-height:20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
padding: 0.3em 0.8em 0.5em;
|
h1 {
|
||||||
p {
|
margin: 0 0 0.3em;
|
||||||
margin: 0;
|
padding: 0;
|
||||||
margin-top: 0;
|
font-size: 1em;
|
||||||
margin-bottom: 0.3em;
|
line-height:20px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
padding: 0.3em 0.8em 0.5em;
|
||||||
padding-top: 0.3em;
|
p {
|
||||||
width: 32px;
|
margin: 0;
|
||||||
height: 32px;
|
margin-top: 0;
|
||||||
border-radius: 50%;
|
margin-bottom: 0.3em;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
|
|
|
||||||
|
|
@ -4,24 +4,26 @@
|
||||||
<div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div>
|
<div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
|
<div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
|
||||||
<a :href="notification.action.user.statusnet_profile_url">
|
<div class="notification-base">
|
||||||
<img class='avatar' :src="notification.action.user.profile_image_url_original">
|
<a :href="notification.action.user.statusnet_profile_url">
|
||||||
</a>
|
<img class='avatar' :src="notification.action.user.profile_image_url_original">
|
||||||
<div class='text'>
|
</a>
|
||||||
<timeago :since="notification.action.created_at" :auto-update="240"></timeago>
|
<div class='text'>
|
||||||
<div v-if="notification.type === 'favorite'">
|
<timeago :since="notification.action.created_at" :auto-update="240"></timeago>
|
||||||
<h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
|
<div v-if="notification.type === 'favorite'">
|
||||||
<p>{{ notification.status.text }}</p>
|
<h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
|
||||||
</div>
|
<p>{{ notification.status.text }}</p>
|
||||||
<div v-if="notification.type === 'repeat'">
|
</div>
|
||||||
<h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
|
<div v-if="notification.type === 'repeat'">
|
||||||
<p>{{ notification.status.text }}</p>
|
<h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
|
||||||
</div>
|
<p>{{ notification.status.text }}</p>
|
||||||
<div v-if="notification.type === 'mention'">
|
</div>
|
||||||
<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>
|
<div v-if="notification.type === 'mention'">
|
||||||
<p>{{ notification.status.text }}</p>
|
<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>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<status v-if="notification.type === 'mention'" :statusoid="notification.action" :expandable="false"></status>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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">
|
<template v-if="muted">
|
||||||
<div class="media status container 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>
|
<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 {
|
.status-actions {
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
@ -160,4 +156,8 @@
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.conversation .status-el {
|
||||||
|
border-left: 4px solid rgba(255, 48, 16, 0.65);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue