refs #772 Add follow requests menu in side menu

This commit is contained in:
AkiraFukushima 2019-05-11 23:01:59 +09:00
parent 064ab4d44a
commit 8c283f949c
5 changed files with 126 additions and 110 deletions

View File

@ -26,6 +26,7 @@ const state = (): SideMenuState => {
unreadLocalTimeline: false,
unreadDirectMessagesTimeline: false,
unreadPublicTimeline: false,
unreadFollowRequests: false,
lists: [],
tags: [],
collapse: false
@ -62,10 +63,7 @@ describe('SideMenu', () => {
get: (_path: string, _params: object) => {
return new Promise<Response<List[]>>(resolve => {
const res: Response<List[]> = {
data: [
list1,
list2
],
data: [list1, list2],
status: 200,
statusText: 'OK',
headers: {}

View File

@ -49,6 +49,7 @@
"notification": "Notification",
"mention": "Mention",
"direct": "Direct messages",
"follow_requests": "Follow Requests",
"favourite": "Favourite",
"local": "Local timeline",
"public": "Public timeline",

View File

@ -1,23 +1,23 @@
<template>
<div
id="timeline_space"
v-loading="loading"
:element-loading-text="$t('message.loading')"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
v-shortkey="shortcutEnabled ? {help: ['shift', '?']} : {}"
@shortkey="handleKey"
<div
id="timeline_space"
v-loading="loading"
:element-loading-text="$t('message.loading')"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
v-shortkey="shortcutEnabled ? { help: ['shift', '?'] } : {}"
@shortkey="handleKey"
>
<side-menu></side-menu>
<div :class="collapse ? 'page-narrow':'page'">
<header class="header" style="-webkit-app-region: drag;">
<header-menu></header-menu>
</header>
<contents></contents>
<side-menu></side-menu>
<div :class="collapse ? 'page-narrow' : 'page'">
<header class="header" style="-webkit-app-region: drag;">
<header-menu></header-menu>
</header>
<contents></contents>
</div>
<modals></modals>
<receive-drop v-show="droppableVisible"></receive-drop>
</div>
<modals></modals>
<receive-drop v-show="droppableVisible"></receive-drop>
</div>
</template>
<script>
@ -32,7 +32,7 @@ import ReceiveDrop from './TimelineSpace/ReceiveDrop'
export default {
name: 'timeline-space',
components: { SideMenu, HeaderMenu, Modals, Contents, ReceiveDrop },
data () {
data() {
return {
dropTarget: null,
droppableVisible: false
@ -43,23 +43,20 @@ export default {
loading: state => state.TimelineSpace.loading,
collapse: state => state.TimelineSpace.SideMenu.collapse
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
shortcutEnabled: function () {
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
shortcutEnabled: function() {
return !this.modalOpened
}
},
async created () {
async created() {
this.$store.dispatch('TimelineSpace/Contents/SideBar/close')
this.$store.commit('TimelineSpace/changeLoading', true)
await this.initialize()
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
this.$store.commit('GlobalHeader/updateChanging', false)
})
await this.initialize().finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
this.$store.commit('GlobalHeader/updateChanging', false)
})
},
mounted () {
mounted() {
window.addEventListener('dragenter', this.onDragEnter)
window.addEventListener('dragleave', this.onDragLeave)
window.addEventListener('dragover', this.onDragOver)
@ -68,7 +65,7 @@ export default {
this.$store.commit('TimelineSpace/Modals/Jump/changeModal', true)
})
},
beforeDestroy () {
beforeDestroy() {
window.removeEventListener('dragenter', this.onDragEnter)
window.removeEventListener('dragleave', this.onDragLeave)
window.removeEventListener('dragover', this.onDragOver)
@ -77,14 +74,14 @@ export default {
this.$store.dispatch('TimelineSpace/unbindStreamings')
},
methods: {
async clear () {
async clear() {
await this.$store.dispatch('TimelineSpace/clearAccount')
this.$store.dispatch('TimelineSpace/clearContentsTimelines')
await this.$store.dispatch('TimelineSpace/removeShortcutEvents')
await this.$store.dispatch('TimelineSpace/clearUnread')
return 'clear'
},
async initialize () {
async initialize() {
await this.clear()
this.$store.dispatch('TimelineSpace/watchShortcutEvents')
@ -95,16 +92,16 @@ export default {
})
})
this.$store.dispatch('TimelineSpace/SideMenu/fetchLists', account)
this.$store.dispatch('TimelineSpace/SideMenu/fetchFollowRequests', account)
await this.$store.dispatch('TimelineSpace/loadUnreadNotification', this.$route.params.id)
// Load timelines
await this.$store.dispatch('TimelineSpace/fetchContentsTimelines', account)
.catch(_ => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
await this.$store.dispatch('TimelineSpace/fetchContentsTimelines', account).catch(_ => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
})
await this.$store.dispatch('TimelineSpace/detectPleroma')
// Bind streamings
@ -115,7 +112,7 @@ export default {
this.$store.dispatch('TimelineSpace/fetchEmojis', account)
this.$store.dispatch('TimelineSpace/fetchInstance', account)
},
handleDrop (e) {
handleDrop(e) {
e.preventDefault()
e.stopPropagation()
this.droppableVisible = false
@ -132,28 +129,27 @@ export default {
}
this.$store.dispatch('TimelineSpace/Modals/NewToot/openModal')
this.$store.dispatch('TimelineSpace/Modals/NewToot/incrementMediaId')
this.$store.dispatch('TimelineSpace/Modals/NewToot/uploadImage', file)
.catch(() => {
this.$message({
message: this.$t('message.attach_error'),
type: 'error'
})
this.$store.dispatch('TimelineSpace/Modals/NewToot/uploadImage', file).catch(() => {
this.$message({
message: this.$t('message.attach_error'),
type: 'error'
})
})
return false
},
onDragEnter (e) {
onDragEnter(e) {
this.dropTarget = e.target
this.droppableVisible = true
},
onDragLeave (e) {
onDragLeave(e) {
if (e.target === this.dropTarget) {
this.droppableVisible = false
}
},
onDragOver (e) {
onDragOver(e) {
e.preventDefault()
},
handleKey (event) {
handleKey(event) {
switch (event.srcKey) {
case 'help':
this.$store.commit('TimelineSpace/Modals/Shortcut/changeModal', true)
@ -205,5 +201,4 @@ export default {
width: calc(100% - 65px - 64px);
}
}
</style>

View File

@ -1,6 +1,6 @@
<template>
<div id="side_menu">
<div :class="collapse ? 'profile-wrapper narrow-menu':'profile-wrapper'" style="-webkit-app-region: drag;">
<div :class="collapse ? 'profile-wrapper narrow-menu' : 'profile-wrapper'" style="-webkit-app-region: drag;">
<div :class="collapse ? 'profile-narrow' : 'profile-wide'">
<div class="account">
<div class="avatar" v-if="collapse">
@ -15,9 +15,9 @@
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="show">{{ $t("side_menu.show_profile") }}</el-dropdown-item>
<el-dropdown-item command="edit">{{ $t("side_menu.edit_profile") }}</el-dropdown-item>
<el-dropdown-item command="settings">{{ $t("side_menu.settings") }}</el-dropdown-item>
<el-dropdown-item command="show">{{ $t('side_menu.show_profile') }}</el-dropdown-item>
<el-dropdown-item command="edit">{{ $t('side_menu.edit_profile') }}</el-dropdown-item>
<el-dropdown-item command="settings">{{ $t('side_menu.settings') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
@ -38,68 +38,80 @@
:collapse="collapse"
active-text-color="#ffffff"
:router="true"
:class="collapse ? 'el-menu-vertical timeline-menu narrow-menu':'el-menu-vertical timeline-menu'"
role="menu">
:class="collapse ? 'el-menu-vertical timeline-menu narrow-menu' : 'el-menu-vertical timeline-menu'"
role="menu"
>
<el-menu-item :index="`/${id()}/home`" role="menuitem" :title="$t('side_menu.home')">
<icon name="home"></icon>
<span>{{ $t("side_menu.home") }}</span>
<el-badge is-dot :hidden="!unreadHomeTimeline">
</el-badge>
<span>{{ $t('side_menu.home') }}</span>
<el-badge is-dot :hidden="!unreadHomeTimeline"> </el-badge>
</el-menu-item>
<el-menu-item :index="`/${id()}/notifications`" role="menuitem" :title="$t('side_menu.notification')">
<icon name="bell"></icon>
<span>{{ $t("side_menu.notification") }}</span>
<el-badge is-dot :hidden="!unreadNotifications">
</el-badge>
<span>{{ $t('side_menu.notification') }}</span>
<el-badge is-dot :hidden="!unreadNotifications"> </el-badge>
</el-menu-item>
<el-menu-item :index="`/${id()}/mentions`" role="menuitem" :title="$t('side_menu.mention')">
<icon name="at"></icon>
<span>{{ $t("side_menu.mention") }}</span>
<el-badge is-dot :hidden="!unreadMentions">
</el-badge>
<span>{{ $t('side_menu.mention') }}</span>
<el-badge is-dot :hidden="!unreadMentions"> </el-badge>
</el-menu-item>
<el-menu-item :index="`/${id()}/direct-messages`" role="menuitem">
<el-menu-item :index="`/${id()}/direct-messages`" role="menuitem" :title="$t('side_menu.direct')">
<icon name="envelope"></icon>
<span>{{ $t("side_menu.direct") }}</span>
<el-badge is-dot :hidden="!unreadDirectMessagesTimeline">
</el-badge>
<span>{{ $t('side_menu.direct') }}</span>
<el-badge is-dot :hidden="!unreadDirectMessagesTimeline"> </el-badge>
</el-menu-item>
<el-menu-item v-if="unreadFollowRequests" :index="`/${id()}/mentions`" role="menuitem" :title="$t('side_menu.follow_requests')">
<icon name="users"></icon>
<span>{{ $t('side_menu.follow_requests') }}</span>
<el-badge is-dot></el-badge>
</el-menu-item>
<el-menu-item :index="`/${id()}/favourites`" role="menuitem" :title="$t('side_menu.favourite')">
<icon name="star"></icon>
<span>{{ $t("side_menu.favourite") }}</span>
<span>{{ $t('side_menu.favourite') }}</span>
</el-menu-item>
<el-menu-item :index="`/${id()}/local`" role="menuitem" :title="$t('side_menu.local')">
<icon name="users"></icon>
<span>{{ $t("side_menu.local") }}</span>
<el-badge is-dot :hidden="!unreadLocalTimeline">
</el-badge>
<span>{{ $t('side_menu.local') }}</span>
<el-badge is-dot :hidden="!unreadLocalTimeline"> </el-badge>
</el-menu-item>
<el-menu-item :index="`/${id()}/public`" role="menuitem" :title="$t('side_menu.public')">
<icon name="globe"></icon>
<span>{{ $t("side_menu.public") }}</span>
<el-badge is-dot :hidden="!unreadPublicTimeline">
</el-badge>
<span>{{ $t('side_menu.public') }}</span>
<el-badge is-dot :hidden="!unreadPublicTimeline"> </el-badge>
</el-menu-item>
<el-menu-item :index="`/${id()}/search`" role="menuitem" :title="$t('side_menu.search')">
<icon name="search"></icon>
<span>{{ $t("side_menu.search") }}</span>
<span>{{ $t('side_menu.search') }}</span>
</el-menu-item>
<el-menu-item :index="`/${id()}/hashtag`" role="menuitem" :title="$t('side_menu.hashtag')">
<icon name="hashtag"></icon>
<span>{{ $t("side_menu.hashtag") }}</span>
<span>{{ $t('side_menu.hashtag') }}</span>
</el-menu-item>
<template v-for="tag in tags">
<el-menu-item :index="`/${id()}/hashtag/${tag.tagName}`" :class="collapse ? '' : 'sub-menu'" :key="tag.tagName" role="menuitem" :title="tag.tagName">
<el-menu-item
:index="`/${id()}/hashtag/${tag.tagName}`"
:class="collapse ? '' : 'sub-menu'"
:key="tag.tagName"
role="menuitem"
:title="tag.tagName"
>
<icon name="hashtag" scale="0.8"></icon>
<span>{{ tag.tagName }}</span>
</el-menu-item>
</template>
<el-menu-item :index="`/${id()}/lists`" role="menuitem" :title="$t('side_menu.lists')">
<icon name="list-ul"></icon>
<span>{{ $t("side_menu.lists") }}</span>
<span>{{ $t('side_menu.lists') }}</span>
</el-menu-item>
<template v-for="list in lists">
<el-menu-item :index="`/${id()}/lists/${list.id}`" :class="collapse ? '' : 'sub-menu'" :key="list.id" role="menuitem" :title="list.title">
<el-menu-item
:index="`/${id()}/lists/${list.id}`"
:class="collapse ? '' : 'sub-menu'"
:key="list.id"
role="menuitem"
:title="list.title"
>
<icon name="list-ul" scale="0.8"></icon>
<span>{{ list.title }}</span>
</el-menu-item>
@ -128,6 +140,7 @@ export default {
unreadLocalTimeline: state => state.unreadLocalTimeline,
unreadDirectMessagesTimeline: state => state.unreadDirectMessagesTimeline,
unreadPublicTimeline: state => state.unreadPublicTimeline,
unreadFollowRequests: state => state.unreadFollowRequests,
lists: state => state.lists,
tags: state => state.tags,
collapse: state => state.collapse
@ -138,25 +151,24 @@ export default {
hideGlobalHeader: state => state.GlobalHeader.hide
})
},
created () {
created() {
this.$store.dispatch('TimelineSpace/SideMenu/readCollapse')
this.$store.dispatch('TimelineSpace/SideMenu/listTags')
},
methods: {
activeRoute () {
activeRoute() {
return this.$route.path
},
id () {
id() {
return this.$route.params.id
},
handleProfile (command) {
handleProfile(command) {
switch (command) {
case 'show':
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/fetchAccount', this.account.accountId)
.then((account) => {
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
})
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/fetchAccount', this.account.accountId).then(account => {
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
})
this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
break
@ -169,13 +181,13 @@ export default {
break
}
},
doCollapse () {
doCollapse() {
this.$store.dispatch('TimelineSpace/SideMenu/changeCollapse', true)
},
releaseCollapse () {
releaseCollapse() {
this.$store.dispatch('TimelineSpace/SideMenu/changeCollapse', false)
},
async changeGlobalHeader (value) {
async changeGlobalHeader(value) {
await this.$store.dispatch('GlobalHeader/switchHide', value)
}
}

View File

@ -1,4 +1,4 @@
import Mastodon, { List, Response } from 'megalodon'
import Mastodon, { List, Response, Account } from 'megalodon'
import { ipcRenderer } from 'electron'
import { Module, MutationTree, ActionTree } from 'vuex'
import LocalTag from '~/src/types/localTag'
@ -6,14 +6,15 @@ import LocalAccount from '~/src/types/localAccount'
import { RootState } from '@/store'
export interface SideMenuState {
unreadHomeTimeline: boolean,
unreadNotifications: boolean,
unreadMentions: boolean,
unreadLocalTimeline: boolean,
unreadDirectMessagesTimeline: boolean,
unreadPublicTimeline: boolean,
lists: Array<List>,
tags: Array<LocalTag>,
unreadHomeTimeline: boolean
unreadNotifications: boolean
unreadMentions: boolean
unreadLocalTimeline: boolean
unreadDirectMessagesTimeline: boolean
unreadPublicTimeline: boolean
unreadFollowRequests: boolean
lists: Array<List>
tags: Array<LocalTag>
collapse: boolean
}
@ -24,6 +25,7 @@ const state = (): SideMenuState => ({
unreadLocalTimeline: false,
unreadDirectMessagesTimeline: false,
unreadPublicTimeline: false,
unreadFollowRequests: false,
lists: [],
tags: [],
collapse: false
@ -36,6 +38,7 @@ export const MUTATION_TYPES = {
CHANGE_UNREAD_LOCAL_TIMELINE: 'changeUnreadLocalTimeline',
CHANGE_UNREAD_DIRECT_MESSAGES_TIMELINE: 'changeUnreadDirectMessagesTimeline',
CHANGE_UNREAD_PUBLIC_TIMELINE: 'changeUnreadPublicTimeline',
CHANGE_UNREAD_FOLLOW_REQUESTS: 'changeUnreadFollowRequests',
UPDATE_LISTS: 'updateLists',
CHANGE_COLLAPSE: 'changeCollapse',
UPDATE_TAGS: 'updateTags'
@ -60,6 +63,9 @@ const mutations: MutationTree<SideMenuState> = {
[MUTATION_TYPES.CHANGE_UNREAD_PUBLIC_TIMELINE]: (state, value: boolean) => {
state.unreadPublicTimeline = value
},
[MUTATION_TYPES.CHANGE_UNREAD_FOLLOW_REQUESTS]: (state, value: boolean) => {
state.unreadFollowRequests = value
},
[MUTATION_TYPES.UPDATE_LISTS]: (state, lists: Array<List>) => {
state.lists = lists
},
@ -74,14 +80,18 @@ const mutations: MutationTree<SideMenuState> = {
const actions: ActionTree<SideMenuState, RootState> = {
fetchLists: async ({ commit, rootState }, account: LocalAccount | null = null): Promise<Array<List>> => {
if (account === null) account = rootState.TimelineSpace.account
const client = new Mastodon(
account!.accessToken!,
account!.baseURL + '/api/v1'
)
const client = new Mastodon(account!.accessToken!, account!.baseURL + '/api/v1')
const res: Response<Array<List>> = await client.get<Array<List>>('/lists')
commit(MUTATION_TYPES.UPDATE_LISTS, res.data)
return res.data
},
fetchFollowRequests: async ({ commit, rootState }, account: LocalAccount | null = null): Promise<Array<Account>> => {
if (account === null) account = rootState.TimelineSpace.account
const client = new Mastodon(account!.accessToken!, account!.baseURL + '/api/v1')
const res: Response<Array<Account>> = await client.get<Array<Account>>('/follow_requests')
commit(MUTATION_TYPES.CHANGE_UNREAD_FOLLOW_REQUESTS, res.data.length > 0)
return res.data
},
clearUnread: ({ commit }) => {
commit(MUTATION_TYPES.CHANGE_UNREAD_HOME_TIMELINE, false)
commit(MUTATION_TYPES.CHANGE_UNREAD_NOTIFICATIONS, false)