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

Merge pull request #3463 from h3poteto/iss-3301/timeline-space 

refs #3301 Rewrite TimelineSpace with composition API
This commit is contained in:
AkiraFukushima 2022-07-02 00:04:21 +09:00 committed by GitHub
parent 5b04edd326 2d115232ee
commit 09d18d2e32
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 245 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
src/renderer/components/TimelineSpace.vue
View File

@ -18,150 +18,154 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { mapState, mapGetters } from 'vuex' import { defineComponent, computed, ref, onMounted, onBeforeUnmount } from 'vue'
import SideMenu from './TimelineSpace/SideMenu' import { useRoute } from 'vue-router'
import HeaderMenu from './TimelineSpace/HeaderMenu' import { ElMessage } from 'element-plus'
import Contents from './TimelineSpace/Contents' import { useI18next } from 'vue3-i18next'
import Modals from './TimelineSpace/Modals' import SideMenu from './TimelineSpace/SideMenu.vue'
import HeaderMenu from './TimelineSpace/HeaderMenu.vue'
import Contents from './TimelineSpace/Contents.vue'
import Modals from './TimelineSpace/Modals.vue'
import Mousetrap from 'mousetrap' import Mousetrap from 'mousetrap'
import ReceiveDrop from './TimelineSpace/ReceiveDrop' import ReceiveDrop from './TimelineSpace/ReceiveDrop.vue'
import { AccountLoadError } from '@/errors/load' import { AccountLoadError } from '@/errors/load'
import { TimelineFetchError } from '@/errors/fetch' import { TimelineFetchError } from '@/errors/fetch'
import { NewTootAttachLength } from '@/errors/validations' import { NewTootAttachLength } from '@/errors/validations'
import { EventEmitter } from '~/src/renderer/components/event' import { EventEmitter } from '@/components/event'
import { useStore } from '@/store'
import { ACTION_TYPES } from '@/store/TimelineSpace'
import { ACTION_TYPES as SIDEBAR_ACTION } from '@/store/TimelineSpace/Contents/SideBar'
import { MUTATION_TYPES as GLOBAL_HEADER_MUTATION } from '@/store/GlobalHeader'
import { MUTATION_TYPES as JUMP_MUTATION } from '@/store/TimelineSpace/Modals/Jump'
import { ACTION_TYPES as NEW_TOOT_ACTION } from '@/store/TimelineSpace/Modals/NewToot'
export default { export default defineComponent({
name: 'timeline-space', name: 'timeline-space',
components: { SideMenu, HeaderMenu, Modals, Contents, ReceiveDrop }, components: { SideMenu, HeaderMenu, Modals, Contents, ReceiveDrop },
data() { setup() {
return { const space = 'TimelineSpace'
dropTarget: null, const store = useStore()
droppableVisible: false const route = useRoute()
} const i18n = useI18next()
},
computed: { const dropTarget = ref<any>(null)
...mapState({ const droppableVisible = ref<boolean>(false)
loading: state => state.TimelineSpace.loading,
collapse: state => state.TimelineSpace.SideMenu.collapse const loading = computed(() => store.state.TimelineSpace.loading)
}), const collapse = computed(() => store.state.TimelineSpace.SideMenu.collapse)
...mapGetters('TimelineSpace/Modals', ['modalOpened']), // const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
shortcutEnabled: function () { // const shortcutEnabled = computed(() => !modalOpened.value)
return !this.modalOpened
} onMounted(async () => {
}, store.dispatch(`TimelineSpace/Contents/SideBar/${SIDEBAR_ACTION.CLOSE}`)
async created() { await initialize().finally(() => {
this.$store.dispatch('TimelineSpace/Contents/SideBar/close') store.commit(`GlobalHeader/${GLOBAL_HEADER_MUTATION.UPDATE_CHANGING}`, false)
await this.initialize().finally(() => {
this.$store.commit('GlobalHeader/updateChanging', false)
}) })
}, ;(window as any).addEventListener('dragenter', onDragEnter)
mounted() { ;(window as any).addEventListener('dragleave', onDragLeave)
window.addEventListener('dragenter', this.onDragEnter) ;(window as any).addEventListener('dragover', onDragOver)
window.addEventListener('dragleave', this.onDragLeave) ;(window as any).addEventListener('drop', handleDrop)
window.addEventListener('dragover', this.onDragOver)
window.addEventListener('drop', this.handleDrop)
Mousetrap.bind(['command+t', 'ctrl+t'], () => { Mousetrap.bind(['command+t', 'ctrl+t'], () => {
this.$store.commit('TimelineSpace/Modals/Jump/changeModal', true) store.commit(`TimelineSpace/Modals/Jump/${JUMP_MUTATION.CHANGE_MODAL}`, true)
}) })
}, })
beforeUnmount() { onBeforeUnmount(() => {
window.removeEventListener('dragenter', this.onDragEnter) ;(window as any).removeEventListener('dragenter', onDragEnter)
window.removeEventListener('dragleave', this.onDragLeave) ;(window as any).removeEventListener('dragleave', onDragLeave)
window.removeEventListener('dragover', this.onDragOver) ;(window as any).removeEventListener('dragover', onDragOver)
window.removeEventListener('drop', this.handleDrop) ;(window as any).removeEventListener('drop', handleDrop)
this.$store.dispatch('TimelineSpace/stopStreamings') store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMINGS}`)
this.$store.dispatch('TimelineSpace/unbindStreamings') store.dispatch(`${space}/${ACTION_TYPES.UNBIND_STREAMINGS}`)
}, })
methods: {
async clear() { const clear = async () => {
this.$store.dispatch('TimelineSpace/unbindStreamings') store.dispatch(`${space}/${ACTION_TYPES.UNBIND_STREAMINGS}`)
await this.$store.dispatch('TimelineSpace/clearAccount') await store.dispatch(`${space}/${ACTION_TYPES.CLEAR_ACCOUNT}`)
this.$store.dispatch('TimelineSpace/clearContentsTimelines') store.dispatch(`${space}/${ACTION_TYPES.CLEAR_CONTENTS_TIMELINES}`)
await this.$store.dispatch('TimelineSpace/removeShortcutEvents') await store.dispatch(`${space}/${ACTION_TYPES.REMOVE_SHORTCUT_EVENTS}`)
await this.$store.dispatch('TimelineSpace/clearUnread') await store.dispatch(`${space}/${ACTION_TYPES.CLEAR_UNREAD}`)
return 'clear' return 'clear'
}, }
async initialize() { const initialize = async () => {
await this.clear() await clear()
try { try {
await this.$store.dispatch('TimelineSpace/initLoad', this.$route.params.id) await store.dispatch(`${space}/${ACTION_TYPES.INIT_LOAD}`, route.params.id)
} catch (err) { } catch (err) {
if (err instanceof AccountLoadError) { if (err instanceof AccountLoadError) {
this.$message({ ElMessage({
message: this.$t('message.account_load_error'), message: i18n.t('message.account_load_error'),
type: 'error' type: 'error'
}) })
} else if (err instanceof TimelineFetchError) { } else if (err instanceof TimelineFetchError) {
this.$message({ ElMessage({
message: this.$t('message.timeline_fetch_error'), message: i18n.t('message.timeline_fetch_error'),
type: 'error' type: 'error'
}) })
} }
} }
await this.$store.dispatch('TimelineSpace/prepareSpace') await store.dispatch(`${space}/${ACTION_TYPES.PREPARE_SPACE}`)
}, }
handleDrop(e) { const handleDrop = (e: DragEvent) => {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
this.droppableVisible = false droppableVisible.value = false
if (e.dataTransfer.files.item(0) === null || e.dataTransfer.files.item(0) === undefined) { if (e.dataTransfer?.files.item(0) === null || e.dataTransfer?.files.item(0) === undefined) {
return false return false
} }
const file = e.dataTransfer.files.item(0) const file = e.dataTransfer?.files.item(0)
if (!file.type.includes('image') && !file.type.includes('video')) { if (file === null || (!file.type.includes('image') && !file.type.includes('video'))) {
this.$message({ ElMessage({
message: this.$t('validation.new_toot.attach_image'), message: i18n.t('validation.new_toot.attach_image'),
type: 'error' type: 'error'
}) })
return false return false
} }
this.$store.dispatch('TimelineSpace/Modals/NewToot/openModal') store.dispatch(`TimelineSpace/Modals/NewToot/${NEW_TOOT_ACTION.OPEN_MODAL}`)
this.$store store
.dispatch('TimelineSpace/Modals/NewToot/uploadImage', file) .dispatch(`TimelineSpace/Modals/NewToot/${NEW_TOOT_ACTION.UPLOAD_IMAGE}`, file)
.then(() => { .then(() => {
EventEmitter.emit('image-uploaded') EventEmitter.emit('image-uploaded')
}) })
.catch(err => { .catch(err => {
if (err instanceof NewTootAttachLength) { if (err instanceof NewTootAttachLength) {
this.$message({ ElMessage({
message: this.$t('validation.new_toot.attach_length', { max: 4 }), message: i18n.t('validation.new_toot.attach_length', { max: 4 }),
type: 'error' type: 'error'
}) })
} else { } else {
this.$message({ ElMessage({
message: this.$t('message.attach_error'), message: i18n.t('message.attach_error'),
type: 'error' type: 'error'
}) })
} }
}) })
return false return false
},
onDragEnter(e) {
if (e.dataTransfer.types.indexOf('Files') >= 0) {
this.dropTarget = e.target
this.droppableVisible = true
} }
}, const onDragEnter = (e: DragEvent) => {
onDragLeave(e) { if (e.dataTransfer && e.dataTransfer.types.indexOf('Files') >= 0) {
if (e.target === this.dropTarget) { dropTarget.value = e.target
this.droppableVisible = false droppableVisible.value = true
} }
}, }
onDragOver(e) { const onDragLeave = (e: DragEvent) => {
if (e.target === dropTarget.value) {
droppableVisible.value = false
}
}
const onDragOver = (e: DragEvent) => {
e.preventDefault() e.preventDefault()
}, }
handleKey(event) {
switch (event.srcKey) { return {
case 'help': loading,
this.$store.commit('TimelineSpace/Modals/Shortcut/changeModal', true) collapse,
break droppableVisible
}
}
} }
} }
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

77
src/renderer/components/TimelineSpace/Contents.vue
View File

@ -25,51 +25,54 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { mapState, mapGetters } from 'vuex' import { defineComponent, ref, computed } from 'vue'
import SideBar from './Contents/SideBar' import SideBar from './Contents/SideBar.vue'
import { useStore } from '@/store'
export default { export default defineComponent({
name: 'contents', name: 'contents',
data() {
return {
sidebarWidth: 360,
dragging: false
}
},
components: { components: {
SideBar SideBar
}, },
computed: { setup() {
...mapState('TimelineSpace/Contents', { const store = useStore()
loading: state => state.loading
}), const sidebarWidth = ref<number>(360)
...mapState('TimelineSpace/Contents/SideBar', { const dragging = ref<boolean>(false)
openSideBar: state => state.openSideBar const contents = ref<HTMLElement | null>(null)
}),
...mapGetters('TimelineSpace/Modals', ['modalOpened']), const loading = computed(() => store.state.TimelineSpace.Contents.loading)
customWidth: function () { const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
const customWidth = computed(() => ({ '--current-sidebar-width': `${sidebarWidth.value}px` }))
const resize = (event: MouseEvent) => {
if (dragging.value && event.clientX) {
sidebarWidth.value = window.innerWidth - event.clientX
}
}
const dragStart = () => {
dragging.value = true
contents.value?.style.setProperty('user-select', 'none')
}
const dragEnd = () => {
dragging.value = false
contents.value?.style.setProperty('user-select', 'text')
}
return { return {
'--current-sidebar-width': `${this.sidebarWidth}px` contents,
} customWidth,
} loading,
}, openSideBar,
methods: { modalOpened,
resize(event) { resize,
if (this.dragging && event.clientX) { dragStart,
this.sidebarWidth = window.innerWidth - event.clientX dragEnd
}
},
dragStart() {
this.dragging = true
this.$refs.contents.style.setProperty('user-select', 'none')
},
dragEnd() {
this.dragging = false
this.$refs.contents.style.setProperty('user-select', 'text')
}
} }
} }
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

174
src/renderer/components/TimelineSpace/HeaderMenu.vue
View File

@ -36,96 +36,101 @@
</nav> </nav>
</template> </template>
<script> <script lang="ts">
import { mapState } from 'vuex' import { defineComponent, ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18next } from 'vue3-i18next'
import { useStore } from '@/store'
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/HeaderMenu'
import { ACTION_TYPES as NEW_TOOT_ACTION } from '@/store/TimelineSpace/Modals/NewToot'
import { MUTATION_TYPES as HOME_MUTATION } from '@/store/TimelineSpace/Contents/Home'
export default { export default defineComponent({
name: 'header-menu', name: 'header-menu',
data() { setup() {
return { const space = 'TimelineSpace/HeaderMenu'
showReblogs: true, const store = useStore()
showReplies: true const route = useRoute()
} const router = useRouter()
}, const i18n = useI18next()
computed: {
...mapState('TimelineSpace/HeaderMenu', { const showReblogs = ref<boolean>(true)
title: state => state.title, const showReplies = ref<boolean>(true)
loading: state => state.loading
const title = computed(() => store.state.TimelineSpace.HeaderMenu.title)
const loading = computed(() => store.state.TimelineSpace.HeaderMenu.loading)
const id = computed(() => route.params.id)
onMounted(() => {
channelName()
loadTLOption()
store.dispatch(`${space}/${ACTION_TYPES.SETUP_LOADING}`)
}) })
}, watch(
created() { () => route.name,
this.channelName() () => {
this.loadTLOption() channelName()
this.$store.dispatch('TimelineSpace/HeaderMenu/setupLoading') loadTLOption()
},
watch: {
$route: function () {
this.channelName()
this.loadTLOption()
} }
}, )
methods: { const channelName = () => {
id() { switch (route.name) {
return this.$route.params.id
},
channelName() {
switch (this.$route.name) {
case 'home': case 'home':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.home')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.home'))
break break
case 'notifications': case 'notifications':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.notification')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.notification'))
break break
case 'favourites': case 'favourites':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.favourite')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.favourite'))
break break
case 'bookmarks': case 'bookmarks':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.bookmark')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.bookmark'))
break break
case 'mentions': case 'mentions':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.mention')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.mention'))
break break
case 'follow-requests': case 'follow-requests':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.follow_requests')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.follow_requests'))
break break
case 'local': case 'local':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.local')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.local'))
break break
case 'public': case 'public':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.public')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.public'))
break break
case 'hashtag-list': case 'hashtag-list':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.hashtag')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.hashtag'))
break break
case 'tag': case 'tag':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', `#${this.$route.params.tag}`) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, `#${route.params.tag}`)
break break
case 'search': case 'search':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.search')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.search'))
break break
case 'lists': case 'lists':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.lists')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.lists'))
break break
case 'direct-messages': case 'direct-messages':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.direct_messages')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.direct_messages'))
break break
case 'edit-list': case 'edit-list':
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.members')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.members'))
break break
case 'list': case 'list':
this.$store.dispatch('TimelineSpace/HeaderMenu/fetchList', this.$route.params.list_id) store.dispatch(`${space}/${ACTION_TYPES.FETCH_LIST}`, route.params.list_id)
break break
default: default:
console.log(this.$route) console.debug(route)
this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', this.$t('header_menu.home')) store.commit(`${space}/${MUTATION_TYPES.UPDATE_TITLE}`, i18n.t('header_menu.home'))
break break
} }
}, }
openNewTootModal() { const openNewTootModal = () => {
this.$store.dispatch('TimelineSpace/Modals/NewToot/openModal') store.dispatch(`TimelineSpace/Modals/NewToot/${NEW_TOOT_ACTION.OPEN_MODAL}`)
}, }
reload() { const reload = () => {
switch (this.$route.name) { switch (route.name) {
case 'home': case 'home':
case 'notifications': case 'notifications':
case 'mentions': case 'mentions':
@ -136,14 +141,14 @@ export default {
case 'tag': case 'tag':
case 'list': case 'list':
case 'direct-messages': case 'direct-messages':
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', true) store.commit(`${space}/${MUTATION_TYPES.CHANGE_RELOAD}`, true)
break break
default: default:
console.error('Not implemented') console.error('Not implemented: ', route.name)
} }
}, }
reloadable() { const reloadable = () => {
switch (this.$route.name) { switch (route.name) {
case 'home': case 'home':
case 'notifications': case 'notifications':
case 'mentions': case 'mentions':
@ -158,41 +163,54 @@ export default {
default: default:
return false return false
} }
}, }
loadTLOption() { const loadTLOption = () => {
switch (this.$route.name) { switch (route.name) {
case 'home': case 'home':
this.showReblogs = this.$store.state.TimelineSpace.Contents.Home.showReblogs showReblogs.value = store.state.TimelineSpace.Contents.Home.showReblogs
this.showReplies = this.$store.state.TimelineSpace.Contents.Home.showReplies showReplies.value = store.state.TimelineSpace.Contents.Home.showReplies
break break
default: default:
console.log('Not implemented') break
} }
}, }
applyTLOption() { const applyTLOption = () => {
switch (this.$route.name) { switch (route.name) {
case 'home': case 'home':
this.$store.commit('TimelineSpace/Contents/Home/showReblogs', this.showReblogs) store.commit(`TimelineSpace/Contents/Home/${HOME_MUTATION.SHOW_REBLOGS}`, showReblogs.value)
this.$store.commit('TimelineSpace/Contents/Home/showReplies', this.showReplies) store.commit(`TimelineSpace/Contents/Home/${HOME_MUTATION.SHOW_REPLIES}`, showReplies.value)
break break
default: default:
console.log('Not implemented') break
} }
}, }
TLOption() { const TLOption = () => {
switch (this.$route.name) { switch (route.name) {
case 'home': case 'home':
return true return true
default: default:
return false return false
} }
}, }
settings() { const settings = () => {
const url = `/${this.id()}/settings` const url = `/${id.value}/settings`
this.$router.push(url) router.push(url)
} }
return {
title,
loading,
openNewTootModal,
reloadable,
reload,
TLOption,
showReblogs,
showReplies,
applyTLOption,
settings
} }
} }
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

9
src/renderer/store/TimelineSpace/HeaderMenu.ts
View File

@ -33,8 +33,13 @@ const mutations: MutationTree<HeaderMenuState> = {
} }
} }
export const ACTION_TYPES = {
FETCH_LIST: 'fetchList',
SETUP_LOADING: 'setupLoading'
}
const actions: ActionTree<HeaderMenuState, RootState> = { const actions: ActionTree<HeaderMenuState, RootState> = {
fetchList: async ({ commit, rootState }, listID: string): Promise<Entity.List> => { [ACTION_TYPES.FETCH_LIST]: async ({ commit, rootState }, listID: string): Promise<Entity.List> => {
const client = generator( const client = generator(
rootState.TimelineSpace.sns, rootState.TimelineSpace.sns,
rootState.TimelineSpace.account.baseURL, rootState.TimelineSpace.account.baseURL,
@ -45,7 +50,7 @@ const actions: ActionTree<HeaderMenuState, RootState> = {
commit(MUTATION_TYPES.UPDATE_TITLE, `#${res.data.title}`) commit(MUTATION_TYPES.UPDATE_TITLE, `#${res.data.title}`)
return res.data return res.data
}, },
setupLoading: ({ commit }) => { [ACTION_TYPES.SETUP_LOADING]: ({ commit }) => {
const axiosLoading = new AxiosLoading() const axiosLoading = new AxiosLoading()
axiosLoading.on('start', (_: number) => { axiosLoading.on('start', (_: number) => {
commit(MUTATION_TYPES.CHANGE_LOADING, true) commit(MUTATION_TYPES.CHANGE_LOADING, true)