1
0
mirror of https://github.com/h3poteto/whalebird-desktop synced 2024-12-23 23:47:57 +01:00

Merge pull request #31 from h3poteto/iss-25

closes #25 Get recent notifications
This commit is contained in:
AkiraFukushima 2018-03-12 23:22:40 +09:00 committed by GitHub
commit 3a3d085164
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 425 additions and 25 deletions

View File

@ -19,6 +19,7 @@ export default {
this.$store.dispatch('TimelineSpace/fetchHomeTimeline', account)
this.$store.dispatch('TimelineSpace/startUserStreaming', account)
this.$store.dispatch('TimelineSpace/username', account)
this.$store.dispatch('TimelineSpace/fetchNotifications', account)
})
.catch(() => {
this.$message({

View File

@ -0,0 +1,22 @@
<template>
<div id="notification">
<favourite v-if="message.type === 'favourite'" :message="message"></favourite>
<follow v-if="message.type === 'follow'" :message="message"></follow>
<mention v-if="message.type === 'mention'" :message="message"></mention>
<reblog v-if="message.type == 'reblog'" :message="message"></reblog>
</div>
</template>
<script>
import Favourite from './Notification/Favourite'
import Follow from './Notification/Follow'
import Mention from './Notification/Mention'
import Reblog from './Notification/Reblog'
export default {
name: 'notification',
props: ['message'],
components: { Favourite, Follow, Mention, Reblog }
}
</script>

View File

@ -0,0 +1,128 @@
<template>
<div class="favourite">
<div class="action">
<div class="action-mark">
<icon name="star" scale="0.7"></icon>
</div>
<div class="action-detail">
<span class="bold">{{ message.account.display_name }}</span> favourited your status
</div>
<div class="action-icon">
<img :src="message.account.avatar" />
</div>
</div>
<div class="clearfix"></div>
<div class="target">
<div class="icon">
<img :src="message.status.account.avatar" />
</div>
<div class="detail">
<div class="toot-header">
<div class="user">
{{ message.status.account.display_name }}
</div>
<div class="timestamp">
{{ parseDatetime(message.status.created_at) }}
</div>
</div>
<div class="content" v-html="message.status.content"></div>
</div>
</div>
<div class="clearfix"></div>
<div class="fill-line"></div>
</div>
</template>
<script>
import moment from 'moment'
export default {
name: 'favourite',
props: ['message'],
methods: {
parseDatetime (datetime) {
return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
}
}
}
</script>
<style lang="scss" scoped>
.fill-line {
height: 1px;
background-color: #f2f6fc;
margin: 4px 0;
}
.bold {
font-weight: bold;
}
.favourite {
margin-top: 8px;
.action {
margin-right: 8px;
.action-mark {
color: #e6a23c;
float: left;
width: 32px;
text-align: right;
}
.action-detail {
margin-left: 10px;
font-size: 14px;
float: left;
}
.action-icon {
width: 100%;
text-align: right;
img {
width: 16px;
height: 16px;
border-radius: 2px;
}
}
}
.target {
.icon {
float: left;
width: 42px;
img {
width: 32px;
height: 32px;
border-radius: 4px;
}
}
.detail {
margin: 8px 8px 0 42px;
color: #909399;
.toot-header {
.user {
float: left;
font-size: 14px;
}
.timestamp {
font-size: 14px;
text-align: right;
width: 100%;
}
}
.content {
font-size: 14px;
margin: 4px 0 8px;
}
}
}
}
</style>

View File

@ -0,0 +1,68 @@
<template>
<div class="follow">
<div class="action">
<div class="action-mark">
<icon name="user-plus" scale="0.7"></icon>
</div>
<div class="action-detail">
<span class="bold">{{ message.account.display_name }}</span> is now following you
</div>
<div class="action-icon">
<img :src="message.account.avatar" />
</div>
</div>
<div class="clearfix"></div>
<div class="fill-line"></div>
</div>
</template>
<script>
export default {
name: 'follow',
props: ['message']
}
</script>
<style lang="scss" scoped>
.fill-line {
height: 1px;
background-color: #f2f6fc;
margin: 4px 0;
}
.bold {
font-weight: bold;
}
.follow {
margin-top: 8px;
.action {
margin-right: 8px;
.action-mark {
color: #409eff;
float: left;
width: 32px;
text-align: right;
}
.action-detail {
margin-left: 10px;
font-size: 14px;
float: left;
}
.action-icon {
width: 100%;
text-align: right;
img {
width: 16px;
height: 16px;
border-radius: 2px;
}
}
}
}
</style>

View File

@ -0,0 +1,15 @@
<template>
<div class="mention">
<toot :message="message.status"></toot>
</div>
</template>
<script>
import Toot from '../Toot'
export default {
name: 'mention',
props: ['message'],
components: { Toot }
}
</script>

View File

@ -0,0 +1,128 @@
<template>
<div class="reblog">
<div class="action">
<div class="action-mark">
<icon name="retweet" scala="0.7"></icon>
</div>
<div class="action-detail">
<span class="bold">{{ message.account.display_name }}</span> boosted your status
</div>
<div class="action-icon">
<img :src="message.account.avatar" />
</div>
</div>
<div class="clearfix"></div>
<div class="target">
<div class="icon">
<img :src="message.status.account.avatar" />
</div>
<div class="detail">
<div class="toot-header">
<div class="user">
{{ message.status.account.display_name }}
</div>
<div class="timestamp">
{{ parseDatetime(message.status.created_at) }}
</div>
</div>
<div class="content" v-html="message.status.content"></div>
</div>
</div>
<div class="clearfix"></div>
<div class="fill-line"></div>
</div>
</template>
<script>
import moment from 'moment'
export default {
name: 'reblog',
props: ['message'],
methods: {
parseDatetime (datetime) {
return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
}
}
}
</script>
<style lang="scss" scoped>
.fill-line {
height: 1px;
background-color: #f2f6fc;
margin: 4px 0;
}
.bold {
font-weight: bold;
}
.reblog {
margin-top: 8px;
.action {
margin-right: 8px;
.action-mark {
color: #409eff;
float: left;
width: 32px;
text-align: right;
}
.action-detail {
margin-left: 10px;
font-size: 14px;
float: left;
}
.action-icon {
width: 100%;
text-align: right;
img {
width: 16px;
height: 16px;
border-radius: 2px;
}
}
}
.target {
.icon {
float: left;
width: 42px;
img {
width: 32px;
height: 32px;
border-radius: 4px;
}
}
.detail {
margin: 8px 8px 0 42px;
color: #909399;
.toot-header {
.user {
float: left;
font-size: 14px;
}
.timestamp {
font-size: 14px;
text-align: right;
width: 100%;
}
}
.content {
font-size: 14px;
margin: 4px 0 8px;
}
}
}
}
</style>

View File

@ -1,11 +1,11 @@
<template>
<div id="fav">
<div id="favorites">
fav
</div>
</template>
<script>
export default {
name: 'fav'
name: 'favorites'
}
</script>

View File

@ -8,7 +8,7 @@
<script>
import { mapState } from 'vuex'
import Toot from './Toot'
import Toot from './Cards/Toot'
export default {
name: 'home',

View File

@ -1,11 +0,0 @@
<template>
<div id="notification">
notification
</div>
</template>
<script>
export default {
name: 'notification'
}
</script>

View File

@ -0,0 +1,28 @@
<template>
<div id="notifications">
<div class="notifications" v-for="message in notifications" v-bind:key="message.id">
<notification :message="message"></notification>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import Notification from './Cards/Notification'
export default {
name: 'notifications',
components: { Notification },
computed: {
...mapState({
notifications: state => state.TimelineSpace.notifications
})
}
}
</script>
<style lang="scss" scoped>
.notifications {
margin-left: 16px;
}
</style>

View File

@ -17,11 +17,11 @@
<icon name="home"></icon>
<span>Home</span>
</el-menu-item>
<el-menu-item index="2" :route="{path: `/${id()}/notification`}">
<el-menu-item index="2" :route="{path: `/${id()}/notifications`}">
<icon name="bell"></icon>
<span>Notification</span>
</el-menu-item>
<el-menu-item index="3" :route="{path: `/${id()}/fav`}">
<el-menu-item index="3" :route="{path: `/${id()}/favorites`}">
<icon name="star"></icon>
<span>Fav</span>
</el-menu-item>

View File

@ -31,14 +31,14 @@ export default new Router({
component: require('@/components/TimelineSpace/Home').default
},
{
path: 'notification',
name: 'notification',
component: require('@/components/TimelineSpace/Notification').default
path: 'notifications',
name: 'notifications',
component: require('@/components/TimelineSpace/Notifications').default
},
{
path: 'fav',
name: 'fav',
component: require('@/components/TimelineSpace/Fav').default
path: 'favorites',
name: 'favorites',
component: require('@/components/TimelineSpace/Favorites').default
},
{
path: 'local',

View File

@ -14,7 +14,7 @@ const TimelineSpace = {
},
username: '',
homeTimeline: [],
notification: []
notifications: []
},
mutations: {
updateAccount (state, account) {
@ -26,11 +26,14 @@ const TimelineSpace = {
appendHomeTimeline (state, update) {
state.homeTimeline = [update].concat(state.homeTimeline)
},
appendNotification (state, notification) {
state.notification = [notification].concat(state.notification)
appendNotifications (state, notifications) {
state.notifications = [notifications].concat(state.notifications)
},
insertHomeTimeline (state, messages) {
state.homeTimeline = state.homeTimeline.concat(messages)
},
insertNotifications (state, notifications) {
state.notifications = state.notifications.concat(notifications)
}
},
actions: {
@ -96,6 +99,24 @@ const TimelineSpace = {
reject(err)
})
})
},
fetchNotifications ({ commit }, account) {
return new Promise((resolve, reject) => {
const client = new Mastodon(
{
access_token: account.accessToken,
api_url: account.baseURL + '/api/v1'
}
)
client.get('/notifications', { limit: 30 })
.then((res) => {
commit('insertNotifications', res.data)
resolve()
})
.catch((err) => {
reject(err)
})
})
}
}
}