Separate notification into its own component, fix follow notification type
This commit is contained in:
parent
ec2a719f0d
commit
c214197cee
5 changed files with 73 additions and 39 deletions
24
src/components/notification/notification.js
Normal file
24
src/components/notification/notification.js
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
import Status from '../status/status.vue'
|
||||||
|
import StillImage from '../still-image/still-image.vue'
|
||||||
|
import UserCardContent from '../user_card_content/user_card_content.vue'
|
||||||
|
|
||||||
|
const Notification = {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
userExpanded: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: [
|
||||||
|
'notification'
|
||||||
|
],
|
||||||
|
components: {
|
||||||
|
Status, StillImage, UserCardContent
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleUserExpanded () {
|
||||||
|
this.userExpanded = !this.userExpanded
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Notification
|
35
src/components/notification/notification.vue
Normal file
35
src/components/notification/notification.vue
Normal file
|
@ -0,0 +1,35 @@
|
||||||
|
<template>
|
||||||
|
<status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
|
||||||
|
<div class="non-mention" v-else>
|
||||||
|
<a :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
|
||||||
|
<StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
|
||||||
|
</a>
|
||||||
|
<div class='notification-right'>
|
||||||
|
<div class="base03-border usercard" v-if="userExpanded">
|
||||||
|
<user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
|
||||||
|
</div>
|
||||||
|
<span class="notification-details">
|
||||||
|
<span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
|
||||||
|
<span v-if="notification.type === 'favorite'">
|
||||||
|
<i class="fa icon-star lit"></i>
|
||||||
|
<small>{{$t('notifications.favorited_you')}}</small>
|
||||||
|
</span>
|
||||||
|
<span v-if="notification.type === 'repeat'">
|
||||||
|
<i class="fa icon-retweet lit"></i>
|
||||||
|
<small>{{$t('notifications.repeated_you')}}</small>
|
||||||
|
</span>
|
||||||
|
<span v-if="notification.type === 'follow'">
|
||||||
|
<i class="fa icon-user-plus lit"></i>
|
||||||
|
<small>{{$t('notifications.followed_you')}}</small>
|
||||||
|
</span>
|
||||||
|
<small class="timeago"><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
|
||||||
|
</span>
|
||||||
|
<div class="follow-text" v-if="notification.type === 'follow'">
|
||||||
|
<router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{notification.action.user.screen_name}}</router-link>
|
||||||
|
</div>
|
||||||
|
<status v-else class="base04" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./notification.js"></script>
|
|
@ -1,14 +1,11 @@
|
||||||
import Status from '../status/status.vue'
|
import Notification from '../notification/notification.vue'
|
||||||
import StillImage from '../still-image/still-image.vue'
|
|
||||||
import UserCardContent from '../user_card_content/user_card_content.vue'
|
|
||||||
|
|
||||||
import { sortBy, take, filter } from 'lodash'
|
import { sortBy, take, filter } from 'lodash'
|
||||||
|
|
||||||
const Notifications = {
|
const Notifications = {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
visibleNotificationCount: 10,
|
visibleNotificationCount: 20
|
||||||
userExpanded: false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -29,7 +26,7 @@ const Notifications = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Status, StillImage, UserCardContent
|
Notification
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
unseenCount (count) {
|
unseenCount (count) {
|
||||||
|
@ -43,9 +40,6 @@ const Notifications = {
|
||||||
methods: {
|
methods: {
|
||||||
markAsSeen () {
|
markAsSeen () {
|
||||||
this.$store.commit('markNotificationsAsSeen', this.visibleNotifications)
|
this.$store.commit('markNotificationsAsSeen', this.visibleNotifications)
|
||||||
},
|
|
||||||
toggleUserExpanded () {
|
|
||||||
this.userExpanded = !this.userExpanded
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -41,7 +41,11 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
padding: 0.6em;
|
padding: 0.6em;
|
||||||
|
min-width: 0;
|
||||||
.status-el {
|
.status-el {
|
||||||
|
.status {
|
||||||
|
padding: 0.25em 0;
|
||||||
|
}
|
||||||
padding: 0;
|
padding: 0;
|
||||||
.status-content.media-body {
|
.status-content.media-body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -49,13 +53,18 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.follow-text {
|
||||||
|
padding: 0.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
.status-el {
|
.status-el {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-right {
|
.notification-right {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-left: 0.8em;
|
padding-left: 0.8em;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-details {
|
.notification-details {
|
||||||
|
@ -65,7 +74,6 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0.5em;
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
|
|
@ -8,34 +8,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body base03-border">
|
<div class="panel-body base03-border">
|
||||||
<div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
|
<div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
|
||||||
<status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
|
<notification :notification="notification"></notification>
|
||||||
<div class="non-mention" v-else>
|
|
||||||
<a :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
|
|
||||||
<StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
|
|
||||||
</a>
|
|
||||||
<div class='notification-right'>
|
|
||||||
<div class="base03-border usercard" v-if="userExpanded">
|
|
||||||
<user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
|
|
||||||
</div>
|
|
||||||
<span class="notification-details">
|
|
||||||
<span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
|
|
||||||
<span v-if="notification.type === 'favorite'">
|
|
||||||
<i class="fa icon-star lit"></i>
|
|
||||||
<small>{{$t('notifications.favorited_you')}}</small>
|
|
||||||
</span>
|
|
||||||
<span v-if="notification.type === 'repeat'">
|
|
||||||
<i class="fa icon-retweet lit"></i>
|
|
||||||
<small>{{$t('notifications.repeated_you')}}</small>
|
|
||||||
</span>
|
|
||||||
<span v-if="notification.type === 'follow'">
|
|
||||||
<i class="fa icon-user-plus lit"></i>
|
|
||||||
<small>{{$t('notifications.followed_you')}}</small>
|
|
||||||
</span>
|
|
||||||
<small class="timeago"><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
|
|
||||||
</span>
|
|
||||||
<status class="base04" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue