Oneric/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Pull requests Activity

Show actual status in notifications when mentioned.

Browse source
This commit is contained in:
Roger Braun 2017-02-22 23:37:12 +01:00
parent 9778d4cfc0
commit 0e1ab69c33
5 changed files with 61 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/conversation/conversation.vue
View file

@ -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>

4
src/components/notifications/notifications.js
View file

@ -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

62
src/components/notifications/notifications.scss
View file

@ -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 {

34
src/components/notifications/notifications.vue
View file

@ -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>

10
src/components/status/status.vue
View file

@ -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>