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

Enable reply/rt/fav for mention notifications by using a barebones status in place of plain notification content.

Browse source
This commit is contained in:
Shpuld Shpuldson 2017-05-31 11:47:18 +03:00
parent e621be1428
commit 5ad4d043e7
5 changed files with 35 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,5 @@
import Status from '../status/status.vue'
import { sortBy, take, filter } from 'lodash' import { sortBy, take, filter } from 'lodash'
const Notifications = { const Notifications = {
@ -23,6 +25,9 @@ const Notifications = {
return this.unseenNotifications.length return this.unseenNotifications.length
} }
}, },
components: {
Status
},
watch: { watch: {
unseenCount (count) { unseenCount (count) {
if (count > 0) { if (count > 0) {

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

@ -45,11 +45,11 @@
word-wrap: break-word; word-wrap: break-word;
line-height:18px; line-height:18px;
.icon-retweet { .icon-retweet.lit {
color: $green; color: $green;
} }
.icon-reply { .icon-reply.lit {
color: $blue; color: $blue;
} }

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

@ -11,30 +11,30 @@
<a :href="notification.action.user.statusnet_profile_url"> <a :href="notification.action.user.statusnet_profile_url">
<img class='avatar' :src="notification.action.user.profile_image_url_original"> <img class='avatar' :src="notification.action.user.profile_image_url_original">
</a> </a>
<div class='text'> <div class='text' style="width: 100%;">
<div v-if="notification.type === 'favorite'"> <div v-if="notification.type === 'favorite'">
<h1> <h1>
{{ notification.action.user.name }} {{ notification.action.user.name }}
<i class="fa icon-star"></i> <i class="fa icon-star"></i>
<small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small> <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
</h1> </h1>
<p>{{ notification.status.text }}</p> <div v-html="notification.status.statusnet_html"></div>
</div> </div>
<div v-if="notification.type === 'repeat'"> <div v-if="notification.type === 'repeat'">
<h1> <h1>
{{ notification.action.user.name }} {{ notification.action.user.name }}
<i class="fa icon-retweet"></i> <i class="fa icon-retweet lit"></i>
<small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small> <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
</h1> </h1>
<p>{{ notification.status.text }}</p> <div v-html="notification.status.statusnet_html"></div>
</div> </div>
<div v-if="notification.type === 'mention'"> <div v-if="notification.type === 'mention'">
<h1> <h1>
{{ notification.action.user.name }} {{ notification.action.user.name }}
<i class="fa icon-reply"></i> <i class="fa icon-reply lit"></i>
<small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small> <small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
</h1> </h1>
<p>{{ notification.status.text }}</p> <status :compact="true" :statusoid="notification.status"></status>
</div> </div>
</div> </div>
</div> </div>

3
src/components/status/status.js
View file

@ -12,7 +12,8 @@ const Status = {
'expandable', 'expandable',
'inConversation', 'inConversation',
'focused', 'focused',
'highlight' 'highlight',
'compact'
], ],
data: () => ({ data: () => ({
replying: false, replying: false,

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

@ -1,5 +1,20 @@
<template> <template>
<div class="status-el base00-background base03-border" v-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" > <div class="status-el base00-background" v-if="compact">
<div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
<div v-if="loggedIn">
<div class='status-actions'>
<div>
<a href="#" v-on:click.prevent="toggleReplying">
<i class="fa icon-reply" :class="{'icon-reply-active': replying}"></i>
</a>
</div>
<retweet-button :status=status></retweet-button>
<favorite-button :status=status></favorite-button>
</div>
</div>
<post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying" v-if="replying"/>
</div>
<div class="status-el base00-background base03-border" v-else-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
<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>