Separate notification into its own component, fix follow notification type

This commit is contained in:
shpuld 2018-04-09 20:44:37 +03:00
parent ec2a719f0d
commit c214197cee
5 changed files with 73 additions and 39 deletions

View 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

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

View file

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

View file

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

View file

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