Mastodon/Whalebird-desktop-client-mac-linux-windows
1
0
Fork 0
mirror of https://github.com/h3poteto/whalebird-desktop synced 2025-02-01 01:47:01 +01:00
Code Issues Releases Wiki Activity

Merge pull request #1038 from h3poteto/iss-1035

Browse Source 
closes #1035 Add reload method in SideBar
This commit is contained in:
AkiraFukushima 2019-09-15 23:26:26 +09:00 committed by GitHub
commit feaaf89931
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 82 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/renderer/components/TimelineSpace/Contents/SideBar.vue
View File

@ -1,24 +1,25 @@
<template> <template>
<transition name="slide-detail"> <transition name="slide-detail">
<div id="side_bar" v-if="openSideBar" v-shortkey="shortcutEnabled ? {close: ['esc']} : {}" @shortkey="handleKey"> <div id="side_bar" v-if="openSideBar" v-shortkey="shortcutEnabled ? { close: ['esc'] } : {}" @shortkey="handleKey">
<div class="header"> <div class="header">
<i class="el-icon-loading" v-show="loading"></i> <i class="el-icon-loading" v-show="loading"></i>
<i class="el-icon-close" @click="close"></i> <i class="el-icon-refresh" @click="reload"></i>
</div> <i class="el-icon-close" @click="close"></i>
<div id="sidebar_scrollable"> </div>
<account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile> <div id="sidebar_scrollable">
<toot-detail v-else-if="component === 2"></toot-detail> <account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
<div <toot-detail v-else-if="component === 2"></toot-detail>
class="loading" <div
v-loading="true" class="loading"
:element-loading-text="$t('message.loading')" v-loading="true"
element-loading-spinner="el-icon-loading" :element-loading-text="$t('message.loading')"
:element-loading-background="backgroundColor" element-loading-spinner="el-icon-loading"
v-else> :element-loading-background="backgroundColor"
v-else
></div>
</div> </div>
</div> </div>
</div> </transition>
</transition>
</template> </template>
<script> <script>
@ -38,7 +39,7 @@ export default {
default: false default: false
} }
}, },
data () { data() {
return { return {
loading: false loading: false
} }
@ -49,21 +50,24 @@ export default {
component: state => state.TimelineSpace.Contents.SideBar.component, component: state => state.TimelineSpace.Contents.SideBar.component,
backgroundColor: state => state.App.theme.background_color backgroundColor: state => state.App.theme.background_color
}), }),
shortcutEnabled: function () { shortcutEnabled: function() {
return !this.overlaid return !this.overlaid
} }
}, },
beforeDestroy () { beforeDestroy() {
this.close() this.close()
}, },
methods: { methods: {
close () { close() {
this.$store.dispatch('TimelineSpace/Contents/SideBar/close') this.$store.dispatch('TimelineSpace/Contents/SideBar/close')
}, },
changeLoading (value) { changeLoading(value) {
this.loading = value this.loading = value
}, },
handleKey (event) { reload() {
this.$store.dispatch('TimelineSpace/Contents/SideBar/reload')
},
handleKey(event) {
switch (event.srcKey) { switch (event.srcKey) {
case 'close': case 'close':
this.close() this.close()
@ -89,12 +93,17 @@ export default {
border-top: solid 1px var(--theme-border-color); border-top: solid 1px var(--theme-border-color);
border-bottom: solid 1px var(--theme-border-color); border-bottom: solid 1px var(--theme-border-color);
text-align: right; text-align: right;
height: 30px; height: 36px;
box-sizing: border-box; box-sizing: border-box;
font-size: 18px;
.el-icon-close { .el-icon-close {
cursor: pointer; cursor: pointer;
} }
.el-icon-refresh {
cursor: pointer;
}
} }
#sidebar_scrollable { #sidebar_scrollable {
@ -107,10 +116,13 @@ export default {
} }
} }
.slide-detail-enter-active, .slide-detail-leave-active { .slide-detail-enter-active,
.slide-detail-leave-active {
transition: all 0.5s; transition: all 0.5s;
} }
.slide-detail-enter, .slide-detail-leave-to {
.slide-detail-enter,
.slide-detail-leave-to {
margin-right: -360px; margin-right: -360px;
opacity: 0; opacity: 0;
} }

28
src/renderer/store/TimelineSpace/Contents/SideBar.ts
View File

@ -3,12 +3,15 @@ import TootDetail, { TootDetailState } from './SideBar/TootDetail'
import { Module, MutationTree, ActionTree } from 'vuex' import { Module, MutationTree, ActionTree } from 'vuex'
import { RootState } from '@/store' import { RootState } from '@/store'
enum Component {
Blank,
AccountProfile,
TootDetail
}
export type SideBarState = { export type SideBarState = {
openSideBar: boolean openSideBar: boolean
// 0: blank component: Component
// 1: account-profile
// 2: toot-detail
component: number
} }
type SideBarModule = { type SideBarModule = {
@ -20,7 +23,7 @@ export type SideBarModuleState = SideBarModule & SideBarState
const state = (): SideBarState => ({ const state = (): SideBarState => ({
openSideBar: false, openSideBar: false,
component: 0 component: Component.Blank
}) })
export const MUTATION_TYPES = { export const MUTATION_TYPES = {
@ -32,7 +35,7 @@ const mutations: MutationTree<SideBarState> = {
[MUTATION_TYPES.CHANGE_OPEN_SIDEBAR]: (state, value: boolean) => { [MUTATION_TYPES.CHANGE_OPEN_SIDEBAR]: (state, value: boolean) => {
state.openSideBar = value state.openSideBar = value
}, },
[MUTATION_TYPES.CHANGE_COMPONENT]: (state, value: number) => { [MUTATION_TYPES.CHANGE_COMPONENT]: (state, value: Component) => {
state.component = value state.component = value
} }
} }
@ -41,13 +44,20 @@ const actions: ActionTree<SideBarState, RootState> = {
close: ({ dispatch, commit }) => { close: ({ dispatch, commit }) => {
dispatch('TimelineSpace/Contents/SideBar/AccountProfile/close', {}, { root: true }) dispatch('TimelineSpace/Contents/SideBar/AccountProfile/close', {}, { root: true })
commit(MUTATION_TYPES.CHANGE_OPEN_SIDEBAR, false) commit(MUTATION_TYPES.CHANGE_OPEN_SIDEBAR, false)
commit(MUTATION_TYPES.CHANGE_COMPONENT, 0) commit(MUTATION_TYPES.CHANGE_COMPONENT, Component.Blank)
},
reload: ({ state, dispatch }) => {
if (state.component === Component.AccountProfile) {
dispatch('TimelineSpace/Contents/SideBar/AccountProfile/reload', {}, { root: true })
} else if (state.component === Component.TootDetail) {
dispatch('TimelineSpace/Contents/SideBar/TootDetail/reload', {}, { root: true })
}
}, },
openAccountComponent: ({ commit }) => { openAccountComponent: ({ commit }) => {
commit(MUTATION_TYPES.CHANGE_COMPONENT, 1) commit(MUTATION_TYPES.CHANGE_COMPONENT, Component.AccountProfile)
}, },
openTootComponent: ({ commit }) => { openTootComponent: ({ commit }) => {
commit(MUTATION_TYPES.CHANGE_COMPONENT, 2) commit(MUTATION_TYPES.CHANGE_COMPONENT, Component.TootDetail)
} }
} }

26
src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts
View File

@ -74,37 +74,53 @@ const actions: ActionTree<AccountProfileState, RootState> = {
commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data[0]) commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data[0])
return res.data return res.data
}, },
follow: async ({ commit, rootState }, account: Account) => { reload: async ({ dispatch, state, commit }) => {
commit(MUTATION_TYPES.CHANGE_LOADING, true)
Promise.all([
dispatch('fetchRelationship', state.account),
dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/fetchTimeline', state.account, { root: true }),
dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Followers/fetchFollowers', state.account, { root: true }),
dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchFollows', state.account, { root: true })
]).finally(() => {
commit(MUTATION_TYPES.CHANGE_LOADING, false)
})
},
follow: async ({ commit, rootState, dispatch }, account: Account) => {
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1') const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
const res: Response<Relationship> = await client.post<Relationship>(`/accounts/${account.id}/follow`) const res: Response<Relationship> = await client.post<Relationship>(`/accounts/${account.id}/follow`)
commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data) commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data)
dispatch('fetchRelationship', account)
return res.data return res.data
}, },
unfollow: async ({ commit, rootState }, account: Account) => { unfollow: async ({ commit, rootState, dispatch }, account: Account) => {
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1') const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
const res: Response<Relationship> = await client.post<Relationship>(`/accounts/${account.id}/unfollow`) const res: Response<Relationship> = await client.post<Relationship>(`/accounts/${account.id}/unfollow`)
commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data) commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data)
dispatch('fetchRelationship', account)
return res.data return res.data
}, },
close: ({ commit }) => { close: ({ commit }) => {
commit(MUTATION_TYPES.CHANGE_ACCOUNT, null) commit(MUTATION_TYPES.CHANGE_ACCOUNT, null)
}, },
unmute: async ({ rootState, commit }, account: Account) => { unmute: async ({ rootState, commit, dispatch }, account: Account) => {
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1') const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
const res: Response<Relationship> = await client.post<Relationship>(`/accounts/${account.id}/unmute`) const res: Response<Relationship> = await client.post<Relationship>(`/accounts/${account.id}/unmute`)
commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data) commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data)
dispatch('fetchRelationship', account)
return res.data return res.data
}, },
block: async ({ rootState, commit }, account: Account) => { block: async ({ rootState, commit, dispatch }, account: Account) => {
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1') const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
const res: Response<Relationship> = await client.post<Relationship>(`/accounts/${account.id}/block`) const res: Response<Relationship> = await client.post<Relationship>(`/accounts/${account.id}/block`)
commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data) commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data)
dispatch('fetchRelationship', account)
return res.data return res.data
}, },
unblock: async ({ rootState, commit }, account: Account) => { unblock: async ({ rootState, commit, dispatch }, account: Account) => {
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1') const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
const res: Response<Relationship> = await client.post<Relationship>(`/accounts/${account.id}/unblock`) const res: Response<Relationship> = await client.post<Relationship>(`/accounts/${account.id}/unblock`)
commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data) commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data)
dispatch('fetchRelationship', account)
return res.data return res.data
} }
} }

3
src/renderer/store/TimelineSpace/Contents/SideBar/TootDetail.ts
View File

@ -126,6 +126,9 @@ const actions: ActionTree<TootDetailState, RootState> = {
commit(MUTATION_TYPES.UPDATE_ANCESTORS, res.data.ancestors) commit(MUTATION_TYPES.UPDATE_ANCESTORS, res.data.ancestors)
commit(MUTATION_TYPES.UPDATE_DESCENDANTS, res.data.descendants) commit(MUTATION_TYPES.UPDATE_DESCENDANTS, res.data.descendants)
return res.data return res.data
},
reload: async ({ state, dispatch }) => {
await dispatch('fetchToot', state.message)
} }
} }