Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

refs #3301 Rewrite SideMenu with composition API

This commit is contained in:
AkiraFukushima 2022-05-22 18:24:03 +09:00
parent 7bc9a0a34d
commit a28b4374fd
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
2 changed files with 122 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
src/renderer/components/TimelineSpace/SideMenu.vue
View File

@ -34,7 +34,7 @@
</div> </div>
</div> </div>
<el-menu <el-menu
:default-active="activeRoute()" :default-active="activeRoute"
:background-color="themeColor" :background-color="themeColor"
text-color="#909399" text-color="#909399"
:collapse="collapse" :collapse="collapse"
@ -43,7 +43,7 @@
:class="collapse ? 'el-menu-vertical timeline-menu narrow-menu' : 'el-menu-vertical timeline-menu'" :class="collapse ? 'el-menu-vertical timeline-menu narrow-menu' : 'el-menu-vertical timeline-menu'"
role="menu" role="menu"
> >
<el-menu-item :index="`/${id()}/home`" role="menuitem" :title="$t('side_menu.home')" class="menu-item"> <el-menu-item :index="`/${id}/home`" role="menuitem" :title="$t('side_menu.home')" class="menu-item">
<div class="menu-item-icon"> <div class="menu-item-icon">
<font-awesome-icon icon="home" /> <font-awesome-icon icon="home" />
</div> </div>
@ -55,7 +55,7 @@
</template> </template>
</el-menu-item> </el-menu-item>
<el-menu-item <el-menu-item
:index="`/${id()}/notifications`" :index="`/${id}/notifications`"
role="menuitem" role="menuitem"
:title="$t('side_menu.notification')" :title="$t('side_menu.notification')"
class="menu-item" class="menu-item"
@ -72,7 +72,7 @@
</template> </template>
</el-menu-item> </el-menu-item>
<el-menu-item <el-menu-item
:index="`/${id()}/mentions`" :index="`/${id}/mentions`"
role="menuitem" role="menuitem"
:title="$t('side_menu.mention')" :title="$t('side_menu.mention')"
class="menu-item" class="menu-item"
@ -89,7 +89,7 @@
</template> </template>
</el-menu-item> </el-menu-item>
<el-menu-item <el-menu-item
:index="`/${id()}/direct-messages`" :index="`/${id}/direct-messages`"
role="menuitem" role="menuitem"
:title="$t('side_menu.direct')" :title="$t('side_menu.direct')"
class="menu-item" class="menu-item"
@ -107,7 +107,7 @@
</el-menu-item> </el-menu-item>
<el-menu-item <el-menu-item
v-if="unreadFollowRequests" v-if="unreadFollowRequests"
:index="`/${id()}/follow-requests`" :index="`/${id}/follow-requests`"
role="menuitem" role="menuitem"
:title="$t('side_menu.follow_requests')" :title="$t('side_menu.follow_requests')"
class="menu-item" class="menu-item"
@ -123,7 +123,7 @@
</template> </template>
</el-menu-item> </el-menu-item>
<el-menu-item <el-menu-item
:index="`/${id()}/favourites`" :index="`/${id}/favourites`"
role="menuitem" role="menuitem"
:title="$t('side_menu.favourite')" :title="$t('side_menu.favourite')"
class="menu-item" class="menu-item"
@ -139,7 +139,7 @@
</template> </template>
</el-menu-item> </el-menu-item>
<el-menu-item <el-menu-item
:index="`/${id()}/bookmarks`" :index="`/${id}/bookmarks`"
role="menuitem" role="menuitem"
:title="$t('side_menu.bookmark')" :title="$t('side_menu.bookmark')"
class="menu-item" class="menu-item"
@ -154,13 +154,7 @@
</div> </div>
</template> </template>
</el-menu-item> </el-menu-item>
<el-menu-item <el-menu-item :index="`/${id}/local`" role="menuitem" :title="$t('side_menu.local')" class="menu-item" v-if="enabledTimelines.local">
:index="`/${id()}/local`"
role="menuitem"
:title="$t('side_menu.local')"
class="menu-item"
v-if="enabledTimelines.local"
>
<div class="menu-item-icon"> <div class="menu-item-icon">
<font-awesome-icon icon="users" /> <font-awesome-icon icon="users" />
</div> </div>
@ -172,7 +166,7 @@
</template> </template>
</el-menu-item> </el-menu-item>
<el-menu-item <el-menu-item
:index="`/${id()}/public`" :index="`/${id}/public`"
role="menuitem" role="menuitem"
:title="$t('side_menu.public')" :title="$t('side_menu.public')"
class="menu-item" class="menu-item"
@ -188,7 +182,7 @@
</div> </div>
</template> </template>
</el-menu-item> </el-menu-item>
<el-menu-item :index="`/${id()}/search`" role="menuitem" :title="$t('side_menu.search')" class="menu-item"> <el-menu-item :index="`/${id}/search`" role="menuitem" :title="$t('side_menu.search')" class="menu-item">
<div class="menu-item-icon"> <div class="menu-item-icon">
<font-awesome-icon icon="magnifying-glass" /> <font-awesome-icon icon="magnifying-glass" />
</div> </div>
@ -198,7 +192,7 @@
</div> </div>
</template> </template>
</el-menu-item> </el-menu-item>
<el-menu-item :index="`/${id()}/hashtag`" role="menuitem" :title="$t('side_menu.hashtag')" class="menu-item"> <el-menu-item :index="`/${id}/hashtag`" role="menuitem" :title="$t('side_menu.hashtag')" class="menu-item">
<div class="menu-item-icon"> <div class="menu-item-icon">
<font-awesome-icon icon="hashtag" /> <font-awesome-icon icon="hashtag" />
</div> </div>
@ -211,7 +205,7 @@
<template v-if="enabledTimelines.tag"> <template v-if="enabledTimelines.tag">
<template v-for="tag in tags" :key="tag.tagName"> <template v-for="tag in tags" :key="tag.tagName">
<el-menu-item <el-menu-item
:index="`/${id()}/hashtag/${tag.tagName}`" :index="`/${id}/hashtag/${tag.tagName}`"
:class="collapse ? '' : 'sub-menu'" :class="collapse ? '' : 'sub-menu'"
role="menuitem" role="menuitem"
:title="tag.tagName" :title="tag.tagName"
@ -228,7 +222,7 @@
</el-menu-item> </el-menu-item>
</template> </template>
</template> </template>
<el-menu-item :index="`/${id()}/lists`" role="menuitem" :title="$t('side_menu.lists')" class="menu-item"> <el-menu-item :index="`/${id}/lists`" role="menuitem" :title="$t('side_menu.lists')" class="menu-item">
<div class="menu-item-icon"> <div class="menu-item-icon">
<font-awesome-icon icon="list-ul" /> <font-awesome-icon icon="list-ul" />
</div> </div>
@ -241,7 +235,7 @@
<template v-if="enabledTimelines.list"> <template v-if="enabledTimelines.list">
<template v-for="list in lists" :key="list.id"> <template v-for="list in lists" :key="list.id">
<el-menu-item <el-menu-item
:index="`/${id()}/lists/${list.id}`" :index="`/${id}/lists/${list.id}`"
:class="collapse ? '' : 'sub-menu'" :class="collapse ? '' : 'sub-menu'"
role="menuitem" role="menuitem"
:title="list.title" :title="list.title"
@ -268,73 +262,101 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { mapState } from 'vuex' import { defineComponent, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from '@/store'
import { ACTION_TYPES } from '@/store/TimelineSpace/SideMenu'
import { ACTION_TYPES as PROFILE_ACTION } from '@/store/TimelineSpace/Contents/SideBar/AccountProfile'
import { ACTION_TYPES as SIDEBAR_ACTION, MUTATION_TYPES as SIDEBAR_MUTATION } from '@/store/TimelineSpace/Contents/SideBar'
import { ACTION_TYPES as GLOBAL_ACTION } from '@/store/GlobalHeader'
export default { export default defineComponent({
name: 'side-menu', name: 'side-menu',
computed: { setup() {
...mapState('TimelineSpace/SideMenu', { const space = 'TimelineSpace/SideMenu'
unreadHomeTimeline: state => state.unreadHomeTimeline, const store = useStore()
unreadNotifications: state => state.unreadNotifications, const route = useRoute()
unreadMentions: state => state.unreadMentions, const router = useRouter()
unreadLocalTimeline: state => state.unreadLocalTimeline,
unreadDirectMessagesTimeline: state => state.unreadDirectMessagesTimeline, const unreadHomeTimeline = computed(() => store.state.TimelineSpace.SideMenu.unreadHomeTimeline)
unreadPublicTimeline: state => state.unreadPublicTimeline, const unreadNotifications = computed(() => store.state.TimelineSpace.SideMenu.unreadNotifications)
unreadFollowRequests: state => state.unreadFollowRequests, const unreadMentions = computed(() => store.state.TimelineSpace.SideMenu.unreadMentions)
lists: state => state.lists, const unreadLocalTimeline = computed(() => store.state.TimelineSpace.SideMenu.unreadLocalTimeline)
tags: state => state.tags, const unreadDirectMessagesTimeline = computed(() => store.state.TimelineSpace.SideMenu.unreadDirectMessagesTimeline)
collapse: state => state.collapse, const unreadPublicTimeline = computed(() => store.state.TimelineSpace.SideMenu.unreadPublicTimeline)
enabledTimelines: state => state.enabledTimelines const unreadFollowRequests = computed(() => store.state.TimelineSpace.SideMenu.unreadFollowRequests)
}), const lists = computed(() => store.state.TimelineSpace.SideMenu.lists)
...mapState({ const tags = computed(() => store.state.TimelineSpace.SideMenu.tags)
account: state => state.TimelineSpace.account, const collapse = computed(() => store.state.TimelineSpace.SideMenu.collapse)
themeColor: state => state.App.theme.side_menu_color, const enabledTimelines = computed(() => store.state.TimelineSpace.SideMenu.enabledTimelines)
hideGlobalHeader: state => state.GlobalHeader.hide const account = computed(() => store.state.TimelineSpace.account)
const themeColor = computed(() => store.state.App.theme.side_menu_color)
const hideGlobalHeader = computed(() => store.state.GlobalHeader.hide)
const activeRoute = computed(() => route.path)
const id = computed(() => route.params.id)
onMounted(() => {
store.dispatch(`${space}/${ACTION_TYPES.READ_COLLAPSE}`)
store.dispatch(`${space}/${ACTION_TYPES.LIST_TAGS}`)
}) })
},
created() { const handleProfile = (command: string) => {
this.$store.dispatch('TimelineSpace/SideMenu/readCollapse')
this.$store.dispatch('TimelineSpace/SideMenu/listTags')
},
methods: {
activeRoute() {
return this.$route.path
},
id() {
return this.$route.params.id
},
handleProfile(command) {
switch (command) { switch (command) {
case 'show': case 'show':
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/fetchAccount', this.account.accountId).then(account => { store
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account) .dispatch(`TimelineSpace/Contents/SideBar/AccountProfile/${PROFILE_ACTION.FETCH_ACCOUNT}`, account.value.accountId)
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true) .then(account => {
store.dispatch(`TimelineSpace/Contents/SideBar/AccountProfile/${PROFILE_ACTION.CHANGE_ACCOUNT}`, account)
store.commit(`TimelineSpace/Contents/SideBar/${SIDEBAR_MUTATION.CHANGE_OPEN_SIDEBAR}`, true)
}) })
this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent') store.dispatch(`TimelineSpace/Contents/SideBar/${SIDEBAR_ACTION.OPEN_ACCOUNT_COMPONENT}`)
break break
case 'edit': case 'edit':
window.shell.openExternal(this.account.baseURL + '/settings/profile') ;(window as any).shell.openExternal(account.value.baseURL + '/settings/profile')
break break
case 'settings': { case 'settings': {
const url = `/${this.id()}/settings` const url = `/${id}/settings`
this.$router.push(url) router.push(url)
break break
} }
} }
}, }
doCollapse() { const doCollapse = () => {
this.$store.dispatch('TimelineSpace/SideMenu/changeCollapse', true) store.dispatch(`${space}/${ACTION_TYPES.CHANGE_COLLAPSE}`, true)
}, }
releaseCollapse() { const releaseCollapse = () => {
this.$store.dispatch('TimelineSpace/SideMenu/changeCollapse', false) store.dispatch(`${space}/${ACTION_TYPES.CHANGE_COLLAPSE}`, false)
}, }
async changeGlobalHeader(value) { const changeGlobalHeader = async value => {
await this.$store.dispatch('GlobalHeader/switchHide', value) await store.dispatch(`GlobalHeader/${GLOBAL_ACTION.SWITCH_HIDE}`, value)
}
return {
unreadHomeTimeline,
unreadNotifications,
unreadMentions,
unreadLocalTimeline,
unreadDirectMessagesTimeline,
unreadPublicTimeline,
unreadFollowRequests,
lists,
tags,
collapse,
enabledTimelines,
account,
themeColor,
hideGlobalHeader,
activeRoute,
id,
handleProfile,
doCollapse,
releaseCollapse,
changeGlobalHeader
} }
} }
} })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

38
src/renderer/store/TimelineSpace/SideMenu.ts
View File

@ -6,7 +6,7 @@ import { RootState } from '@/store'
import { MyWindow } from '~/src/types/global' import { MyWindow } from '~/src/types/global'
import { EnabledTimelines } from '~/src/types/enabledTimelines' import { EnabledTimelines } from '~/src/types/enabledTimelines'
const win = (window as any) as MyWindow const win = window as any as MyWindow
export type SideMenuState = { export type SideMenuState = {
unreadHomeTimeline: boolean unreadHomeTimeline: boolean
@ -97,42 +97,58 @@ const mutations: MutationTree<SideMenuState> = {
} }
} }
export const ACTION_TYPES = {
FETCH_LISTS: 'fetchLists',
FETCH_FOLLOW_REQUESTS: 'fetchFollowRequests',
CONFIRM_TIMELINES: 'confirmTimelines',
DISABLE_LOCAL: 'disableLocal',
DISABLE_PUBLIC: 'disablePublic',
DISABLE_DIRECT: 'disableDirect',
CLEAR_UNREAD: 'clearUnread',
CHANGE_COLLAPSE: 'changeCollapse',
READ_COLLAPSE: 'readCollapse',
LIST_TAGS: 'listTags'
}
const actions: ActionTree<SideMenuState, RootState> = { const actions: ActionTree<SideMenuState, RootState> = {
fetchLists: async ({ commit, rootState }, account: LocalAccount | null = null): Promise<Array<Entity.List>> => { [ACTION_TYPES.FETCH_LISTS]: async ({ commit, rootState }, account: LocalAccount | null = null): Promise<Array<Entity.List>> => {
if (account === null) account = rootState.TimelineSpace.account if (account === null) account = rootState.TimelineSpace.account
const client = generator(rootState.TimelineSpace.sns, account.baseURL, account.accessToken, rootState.App.userAgent) const client = generator(rootState.TimelineSpace.sns, account.baseURL, account.accessToken, rootState.App.userAgent)
const res = await client.getLists() const res = await client.getLists()
commit(MUTATION_TYPES.UPDATE_LISTS, res.data) commit(MUTATION_TYPES.UPDATE_LISTS, res.data)
return res.data return res.data
}, },
fetchFollowRequests: async ({ commit, rootState }, account: LocalAccount | null = null): Promise<Array<Entity.Account>> => { [ACTION_TYPES.FETCH_FOLLOW_REQUESTS]: async (
{ commit, rootState },
account: LocalAccount | null = null
): Promise<Array<Entity.Account>> => {
if (account === null) account = rootState.TimelineSpace.account if (account === null) account = rootState.TimelineSpace.account
const client = generator(rootState.TimelineSpace.sns, account.baseURL, account.accessToken, rootState.App.userAgent) const client = generator(rootState.TimelineSpace.sns, account.baseURL, account.accessToken, rootState.App.userAgent)
const res = await client.getFollowRequests() const res = await client.getFollowRequests()
commit(MUTATION_TYPES.CHANGE_UNREAD_FOLLOW_REQUESTS, res.data.length > 0) commit(MUTATION_TYPES.CHANGE_UNREAD_FOLLOW_REQUESTS, res.data.length > 0)
return res.data return res.data
}, },
confirmTimelines: async ({ commit, rootState }, account: LocalAccount | null = null) => { [ACTION_TYPES.CONFIRM_TIMELINES]: async ({ commit, rootState }, account: LocalAccount | null = null) => {
if (account === null) account = rootState.TimelineSpace.account if (account === null) account = rootState.TimelineSpace.account
const timelines: EnabledTimelines = await win.ipcRenderer.invoke('confirm-timelines', account) const timelines: EnabledTimelines = await win.ipcRenderer.invoke('confirm-timelines', account)
commit(MUTATION_TYPES.UPDATE_ENABLED_TIMELINES, timelines) commit(MUTATION_TYPES.UPDATE_ENABLED_TIMELINES, timelines)
}, },
disableLocal: ({ commit, state }) => { [ACTION_TYPES.DISABLE_LOCAL]: ({ commit, state }) => {
let timelines = state.enabledTimelines let timelines = state.enabledTimelines
timelines = { ...timelines, local: false } timelines = { ...timelines, local: false }
commit(MUTATION_TYPES.UPDATE_ENABLED_TIMELINES, timelines) commit(MUTATION_TYPES.UPDATE_ENABLED_TIMELINES, timelines)
}, },
disablePublic: ({ commit, state }) => { [ACTION_TYPES.DISABLE_PUBLIC]: ({ commit, state }) => {
let timelines = state.enabledTimelines let timelines = state.enabledTimelines
timelines = { ...timelines, public: false } timelines = { ...timelines, public: false }
commit(MUTATION_TYPES.UPDATE_ENABLED_TIMELINES, timelines) commit(MUTATION_TYPES.UPDATE_ENABLED_TIMELINES, timelines)
}, },
disableDirect: ({ commit, state }) => { [ACTION_TYPES.DISABLE_DIRECT]: ({ commit, state }) => {
let timelines = state.enabledTimelines let timelines = state.enabledTimelines
timelines = { ...timelines, direct: false } timelines = { ...timelines, direct: false }
commit(MUTATION_TYPES.UPDATE_ENABLED_TIMELINES, timelines) commit(MUTATION_TYPES.UPDATE_ENABLED_TIMELINES, timelines)
}, },
clearUnread: ({ commit }) => { [ACTION_TYPES.CLEAR_UNREAD]: ({ commit }) => {
commit(MUTATION_TYPES.CHANGE_UNREAD_HOME_TIMELINE, false) commit(MUTATION_TYPES.CHANGE_UNREAD_HOME_TIMELINE, false)
commit(MUTATION_TYPES.CHANGE_UNREAD_NOTIFICATIONS, false) commit(MUTATION_TYPES.CHANGE_UNREAD_NOTIFICATIONS, false)
commit(MUTATION_TYPES.CHANGE_UNREAD_MENTIONS, false) commit(MUTATION_TYPES.CHANGE_UNREAD_MENTIONS, false)
@ -140,16 +156,16 @@ const actions: ActionTree<SideMenuState, RootState> = {
commit(MUTATION_TYPES.CHANGE_UNREAD_DIRECT_MESSAGES_TIMELINE, false) commit(MUTATION_TYPES.CHANGE_UNREAD_DIRECT_MESSAGES_TIMELINE, false)
commit(MUTATION_TYPES.CHANGE_UNREAD_PUBLIC_TIMELINE, false) commit(MUTATION_TYPES.CHANGE_UNREAD_PUBLIC_TIMELINE, false)
}, },
changeCollapse: ({ commit }, value: boolean) => { [ACTION_TYPES.CHANGE_COLLAPSE]: ({ commit }, value: boolean) => {
win.ipcRenderer.send('change-collapse', value) win.ipcRenderer.send('change-collapse', value)
commit(MUTATION_TYPES.CHANGE_COLLAPSE, value) commit(MUTATION_TYPES.CHANGE_COLLAPSE, value)
}, },
readCollapse: async ({ commit }) => { [ACTION_TYPES.READ_COLLAPSE]: async ({ commit }) => {
const value: boolean = await win.ipcRenderer.invoke('get-collapse') const value: boolean = await win.ipcRenderer.invoke('get-collapse')
commit(MUTATION_TYPES.CHANGE_COLLAPSE, value) commit(MUTATION_TYPES.CHANGE_COLLAPSE, value)
return value return value
}, },
listTags: async ({ commit }) => { [ACTION_TYPES.LIST_TAGS]: async ({ commit }) => {
const tags: Array<LocalTag> = await win.ipcRenderer.invoke('list-hashtags') const tags: Array<LocalTag> = await win.ipcRenderer.invoke('list-hashtags')
commit(MUTATION_TYPES.UPDATE_TAGS, tags) commit(MUTATION_TYPES.UPDATE_TAGS, tags)
return tags return tags