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

Change loading in order to change channel when loading

This commit is contained in:
AkiraFukushima 2019-05-16 23:43:32 +09:00
parent 582e751fba
commit 351be72586
13 changed files with 487 additions and 572 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/renderer/components/TimelineSpace/Contents/DirectMessages.vue
View File

@ -1,8 +1,7 @@
<template>
<div id="directmessages" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
</div>
<div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
<transition-group name="timeline" tag="div">
<toot
:message="message"
@ -20,11 +19,9 @@
>
</toot>
</transition-group>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
</div>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
</el-button>
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
</div>
</div>
</template>
@ -59,9 +56,7 @@ export default {
startReload: state => state.TimelineSpace.HeaderMenu.reload,
unreadNotification: state => state.TimelineSpace.unreadNotification
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
shortcutEnabled: function() {
if (this.modalOpened) {
return false
@ -75,16 +70,14 @@ export default {
}
},
async mounted() {
this.$store.commit('TimelineSpace/changeLoading', true)
this.$store.commit('TimelineSpace/SideMenu/changeUnreadDirectMessagesTimeline', false)
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
if (!this.unreadNotification.direct) {
await this.initialize()
.catch(_ => {
this.$store.commit('TimelineSpace/changeLoading', false)
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
await this.initialize().catch(_ => {
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
})
}
this.$store.commit('TimelineSpace/changeLoading', false)
Event.$on('focus-timeline', () => {
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
@ -122,8 +115,7 @@ export default {
watch: {
startReload: function(newState, oldState) {
if (!oldState && newState) {
this.reload()
.finally(() => {
this.reload().finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
}
@ -139,8 +131,7 @@ export default {
},
methods: {
async initialize() {
await this.$store.dispatch('TimelineSpace/Contents/DirectMessages/fetchTimeline')
.catch(_ => {
await this.$store.dispatch('TimelineSpace/Contents/DirectMessages/fetchTimeline').catch(_ => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
@ -151,8 +142,12 @@ export default {
},
onScroll(event) {
// for lazyLoading
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('directmessages').clientHeight - 10) && !this.lazyloading) {
this.$store.dispatch('TimelineSpace/Contents/DirectMessages/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
if (
event.target.clientHeight + event.target.scrollTop >= document.getElementById('directmessages').clientHeight - 10 &&
!this.lazyloading
) {
this.$store
.dispatch('TimelineSpace/Contents/DirectMessages/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
.catch(() => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
@ -161,9 +156,9 @@ export default {
})
}
// for unread control
if ((event.target.scrollTop > 10) && this.heading) {
if (event.target.scrollTop > 10 && this.heading) {
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', false)
} else if ((event.target.scrollTop <= 10) && !this.heading) {
} else if (event.target.scrollTop <= 10 && !this.heading) {
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/DirectMessages/mergeTimeline')
}
@ -183,10 +178,7 @@ export default {
}
},
upper() {
scrollTop(
document.getElementById('scrollable'),
0
)
scrollTop(document.getElementById('scrollable'), 0)
this.focusedId = null
},
focusNext() {

43
src/renderer/components/TimelineSpace/Contents/Favourites.vue
View File

@ -1,7 +1,6 @@
<template>
<div id="favourites" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
</div>
<div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
<div class="fav" v-for="message in favourites" v-bind:key="message.id">
<toot
:message="message"
@ -17,11 +16,9 @@
>
</toot>
</div>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
</div>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
</el-button>
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
</div>
</div>
</template>
@ -53,16 +50,15 @@ export default {
lazyLoading: state => state.TimelineSpace.Contents.Favourites.lazyLoading,
filter: state => state.TimelineSpace.Contents.Favourites.filter
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
shortcutEnabled: function() {
return !this.focusedId && !this.modalOpened
}
},
created() {
this.$store.commit('TimelineSpace/changeLoading', true)
this.$store.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', this.account)
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
this.$store
.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', this.account)
.catch(() => {
this.$message({
message: this.$t('message.favourite_fetch_error'),
@ -70,7 +66,7 @@ export default {
})
})
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
})
},
mounted() {
@ -97,8 +93,7 @@ export default {
watch: {
startReload: function(newState, oldState) {
if (!oldState && newState) {
this.reload()
.finally(() => {
this.reload().finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
}
@ -119,8 +114,12 @@ export default {
this.$store.commit('TimelineSpace/Contents/Favourites/deleteToot', message)
},
onScroll(event) {
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('favourites').clientHeight - 10) && !this.lazyloading) {
this.$store.dispatch('TimelineSpace/Contents/Favourites/lazyFetchFavourites', this.favourites[this.favourites.length - 1])
if (
event.target.clientHeight + event.target.scrollTop >= document.getElementById('favourites').clientHeight - 10 &&
!this.lazyloading
) {
this.$store
.dispatch('TimelineSpace/Contents/Favourites/lazyFetchFavourites', this.favourites[this.favourites.length - 1])
.catch(() => {
this.$message({
message: this.$t('message.favourite_fetch_error'),
@ -129,9 +128,9 @@ export default {
})
}
// for upper
if ((event.target.scrollTop > 10) && this.heading) {
if (event.target.scrollTop > 10 && this.heading) {
this.heading = false
} else if ((event.target.scrollTop <= 10) && !this.heading) {
} else if (event.target.scrollTop <= 10 && !this.heading) {
this.heading = true
}
},
@ -139,8 +138,7 @@ export default {
this.$store.commit('TimelineSpace/changeLoading', true)
try {
const account = await this.reloadable()
await this.$store.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', account)
.catch(() => {
await this.$store.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', account).catch(() => {
this.$message({
message: this.$t('message.favourite_fetch_error'),
type: 'error'
@ -151,10 +149,7 @@ export default {
}
},
upper() {
scrollTop(
document.getElementById('scrollable'),
0
)
scrollTop(document.getElementById('scrollable'), 0)
this.focusedId = null
},
focusNext() {

53
src/renderer/components/TimelineSpace/Contents/Hashtag/Tag.vue
View File

@ -1,8 +1,7 @@
<template>
<div name="tag" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
</div>
<div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
<transition-group name="timeline" tag="div">
<div class="tag-timeline" v-for="message in timeline" v-bind:key="message.uri + message.id">
<toot
@ -22,8 +21,7 @@
</transition-group>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
</el-button>
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
</div>
</div>
</template>
@ -56,9 +54,7 @@ export default {
unread: state => state.TimelineSpace.Contents.Hashtag.Tag.unreadTimeline,
filter: state => state.TimelineSpace.Contents.Hashtag.Tag.filter
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
shortcutEnabled: function() {
if (this.modalOpened) {
return false
@ -72,10 +68,9 @@ export default {
}
},
mounted() {
this.$store.commit('TimelineSpace/changeLoading', true)
this.load(this.tag)
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
this.load(this.tag).finally(() => {
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
})
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
@ -90,17 +85,15 @@ export default {
},
watch: {
tag: function(newTag, _oldTag) {
this.$store.commit('TimelineSpace/changeLoading', true)
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
this.reset()
this.load(newTag)
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
this.load(newTag).finally(() => {
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
})
},
startReload: function(newState, oldState) {
if (!oldState && newState) {
this.reload()
.finally(() => {
this.reload().finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
}
@ -121,15 +114,13 @@ export default {
},
methods: {
async load(tag) {
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag)
.catch(() => {
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag).catch(() => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
})
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag)
.catch(() => {
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag).catch(() => {
this.$message({
message: this.$t('message.start_streaming_error'),
type: 'error'
@ -154,16 +145,19 @@ export default {
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/deleteToot', toot)
},
onScroll(event) {
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementsByName('tag')[0].clientHeight - 10) && !this.lazyloading) {
if (
event.target.clientHeight + event.target.scrollTop >= document.getElementsByName('tag')[0].clientHeight - 10 &&
!this.lazyloading
) {
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/lazyFetchTimeline', {
tag: this.tag,
status: this.timeline[this.timeline.length - 1]
})
}
// for unread control
if ((event.target.scrollTop > 10) && this.heading) {
if (event.target.scrollTop > 10 && this.heading) {
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', false)
} else if ((event.target.scrollTop <= 10) && !this.heading) {
} else if (event.target.scrollTop <= 10 && !this.heading) {
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/mergeTimeline')
}
@ -174,15 +168,13 @@ export default {
try {
await this.reloadable()
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag)
.catch(() => {
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag).catch(() => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
})
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag)
.catch(() => {
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag).catch(() => {
this.$message({
message: this.$t('message.start_streaming_error'),
type: 'error'
@ -193,10 +185,7 @@ export default {
}
},
upper() {
scrollTop(
document.getElementById('scrollable'),
0
)
scrollTop(document.getElementById('scrollable'), 0)
this.focusedId = null
},
focusNext() {

8
src/renderer/components/TimelineSpace/Contents/Lists/Edit.vue
View File

@ -29,7 +29,7 @@ export default {
},
methods: {
async init() {
this.$store.commit('TimelineSpace/changeLoading', true)
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
try {
await this.$store.dispatch('TimelineSpace/Contents/Lists/Edit/fetchMembers', this.list_id)
} catch (err) {
@ -38,11 +38,11 @@ export default {
type: 'error'
})
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
}
},
async removeAccount(account) {
this.$store.commit('TimelineSpace/changeLoading', true)
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
try {
await this.$store.dispatch('TimelineSpace/Contents/Lists/Edit/removeAccount', {
account: account,
@ -55,7 +55,7 @@ export default {
type: 'error'
})
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
}
},
addAccount() {

50
src/renderer/components/TimelineSpace/Contents/Lists/Show.vue
View File

@ -1,8 +1,7 @@
<template>
<div name="list" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
</div>
<div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
<transition-group name="timeline" tag="div">
<div class="list-timeline" v-for="message in timeline" v-bind:key="message.uri + message.id">
<toot
@ -22,8 +21,7 @@
</transition-group>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
</el-button>
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
</div>
</div>
</template>
@ -56,9 +54,7 @@ export default {
unread: state => state.TimelineSpace.Contents.Lists.Show.unreadTimeline,
filter: state => state.TimelineSpace.Contents.Lists.Show.filter
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
shortcutEnabled: function() {
if (this.modalOpened) {
return false
@ -72,10 +68,9 @@ export default {
}
},
created() {
this.$store.commit('TimelineSpace/changeLoading', true)
this.load()
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
this.load().finally(() => {
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
})
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
},
@ -91,16 +86,14 @@ export default {
},
watch: {
list_id: function() {
this.$store.commit('TimelineSpace/changeLoading', true)
this.load()
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
this.load().finally(() => {
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
})
},
startReload: function(newState, oldState) {
if (!oldState && newState) {
this.reload()
.finally(() => {
this.reload().finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
}
@ -138,8 +131,7 @@ export default {
type: 'error'
})
}
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/startStreaming', this.list_id)
.catch(() => {
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/startStreaming', this.list_id).catch(() => {
this.$message({
message: this.$t('message.start_streaming_error'),
type: 'error'
@ -154,16 +146,19 @@ export default {
this.$store.commit('TimelineSpace/Contents/Lists/Show/deleteToot', message)
},
onScroll(event) {
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementsByName('list')[0].clientHeight - 10) && !this.lazyloading) {
if (
event.target.clientHeight + event.target.scrollTop >= document.getElementsByName('list')[0].clientHeight - 10 &&
!this.lazyloading
) {
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/lazyFetchTimeline', {
list_id: this.list_id,
status: this.timeline[this.timeline.length - 1]
})
}
// for unread control
if ((event.target.scrollTop > 10) && this.heading) {
if (event.target.scrollTop > 10 && this.heading) {
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', false)
} else if ((event.target.scrollTop <= 10) && !this.heading) {
} else if (event.target.scrollTop <= 10 && !this.heading) {
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/Lists/Show/mergeTimeline')
}
@ -173,15 +168,13 @@ export default {
try {
await this.reloadable()
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/fetchTimeline', this.list_id)
.catch(() => {
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/fetchTimeline', this.list_id).catch(() => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
})
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/startStreaming', this.list_id)
.catch(() => {
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/startStreaming', this.list_id).catch(() => {
this.$message({
message: this.$t('message.start_streaming_error'),
type: 'error'
@ -192,10 +185,7 @@ export default {
}
},
upper() {
scrollTop(
document.getElementById('scrollable'),
0
)
scrollTop(document.getElementById('scrollable'), 0)
this.focusedId = null
},
focusNext() {

41
src/renderer/components/TimelineSpace/Contents/Local.vue
View File

@ -1,8 +1,7 @@
<template>
<div id="local" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
</div>
<div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
<transition-group name="timeline" tag="div">
<div class="local-timeline" v-for="message in timeline" :key="message.uri + message.id">
<toot
@ -20,11 +19,9 @@
</toot>
</div>
</transition-group>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
</div>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
</el-button>
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
</div>
</div>
</template>
@ -59,9 +56,7 @@ export default {
startReload: state => state.TimelineSpace.HeaderMenu.reload,
unreadNotification: state => state.TimelineSpace.unreadNotification
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
shortcutEnabled: function() {
if (this.modalOpened) {
return false
@ -75,16 +70,14 @@ export default {
}
},
async mounted() {
this.$store.commit('TimelineSpace/changeLoading', true)
this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
if (!this.unreadNotification.local) {
await this.initialize()
.finally(_ => {
this.$store.commit('TimelineSpace/changeLoading', false)
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
await this.initialize().finally(_ => {
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
})
}
this.$store.commit('TimelineSpace/changeLoading', false)
Event.$on('focus-timeline', () => {
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
@ -122,8 +115,7 @@ export default {
watch: {
startReload: function(newState, oldState) {
if (!oldState && newState) {
this.reload()
.finally(() => {
this.reload().finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
}
@ -139,8 +131,7 @@ export default {
},
methods: {
async initialize() {
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline')
.catch(_ => {
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline').catch(_ => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
@ -156,9 +147,8 @@ export default {
this.$store.commit('TimelineSpace/Contents/Local/deleteToot', message)
},
onScroll(event) {
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('local').clientHeight - 10) && !this.lazyloading) {
this.$store.dispatch('TimelineSpace/Contents/Local/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
.catch(() => {
if (event.target.clientHeight + event.target.scrollTop >= document.getElementById('local').clientHeight - 10 && !this.lazyloading) {
this.$store.dispatch('TimelineSpace/Contents/Local/lazyFetchTimeline', this.timeline[this.timeline.length - 1]).catch(() => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
@ -166,9 +156,9 @@ export default {
})
}
// for unread control
if ((event.target.scrollTop > 10) && this.heading) {
if (event.target.scrollTop > 10 && this.heading) {
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', false)
} else if ((event.target.scrollTop <= 10) && !this.heading) {
} else if (event.target.scrollTop <= 10 && !this.heading) {
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/Local/mergeTimeline')
}
@ -182,10 +172,7 @@ export default {
}
},
upper() {
scrollTop(
document.getElementById('scrollable'),
0
)
scrollTop(document.getElementById('scrollable'), 0)
this.focusedId = null
},
focusNext() {

41
src/renderer/components/TimelineSpace/Contents/Public.vue
View File

@ -1,8 +1,7 @@
<template>
<div id="public" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
<div class="unread">{{ unread.length > 0 ? unread.length : '' }}</div>
<div v-shortkey="{linux: ['ctrl', 'r'], mac: ['meta', 'r']}" @shortkey="reload()">
</div>
<div v-shortkey="{ linux: ['ctrl', 'r'], mac: ['meta', 'r'] }" @shortkey="reload()"></div>
<transition-group name="timeline" tag="div">
<div class="public-timeline" v-for="message in timeline" :key="message.uri + message.id">
<toot
@ -20,11 +19,9 @@
</toot>
</div>
</transition-group>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
</div>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor"></div>
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle>
</el-button>
<el-button type="primary" icon="el-icon-arrow-up" @click="upper" circle> </el-button>
</div>
</div>
</template>
@ -59,9 +56,7 @@ export default {
startReload: state => state.TimelineSpace.HeaderMenu.reload,
unreadNotification: state => state.TimelineSpace.unreadNotification
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
shortcutEnabled: function() {
if (this.modalOpened) {
return false
@ -75,16 +70,14 @@ export default {
}
},
async mounted() {
this.$store.commit('TimelineSpace/changeLoading', true)
this.$store.commit('TimelineSpace/SideMenu/changeUnreadPublicTimeline', false)
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
if (!this.unreadNotification.public) {
await this.initialize()
.finally(_ => {
this.$store.commit('TimelineSpace/changeLoading', false)
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
await this.initialize().finally(_ => {
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
})
}
this.$store.commit('TimelineSpace/changeLoading', false)
Event.$on('focus-timeline', () => {
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
@ -122,8 +115,7 @@ export default {
watch: {
startReload: function(newState, oldState) {
if (!oldState && newState) {
this.reload()
.finally(() => {
this.reload().finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
}
@ -139,8 +131,7 @@ export default {
},
methods: {
async initialize() {
await this.$store.dispatch('TimelineSpace/Contents/Public/fetchPublicTimeline')
.catch(_ => {
await this.$store.dispatch('TimelineSpace/Contents/Public/fetchPublicTimeline').catch(_ => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
@ -156,9 +147,8 @@ export default {
this.$store.commit('TimelineSpace/Contents/Public/deleteToot', message)
},
onScroll(event) {
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('public').clientHeight - 10) && !this.lazyloading) {
this.$store.dispatch('TimelineSpace/Contents/Public/lazyFetchTimeline', this.timeline[this.timeline.length - 1])
.catch(() => {
if (event.target.clientHeight + event.target.scrollTop >= document.getElementById('public').clientHeight - 10 && !this.lazyloading) {
this.$store.dispatch('TimelineSpace/Contents/Public/lazyFetchTimeline', this.timeline[this.timeline.length - 1]).catch(() => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
@ -166,9 +156,9 @@ export default {
})
}
// for unread control
if ((event.target.scrollTop > 10) && this.heading) {
if (event.target.scrollTop > 10 && this.heading) {
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', false)
} else if ((event.target.scrollTop <= 10) && !this.heading) {
} else if (event.target.scrollTop <= 10 && !this.heading) {
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/Public/mergeTimeline')
}
@ -182,10 +172,7 @@ export default {
}
},
upper() {
scrollTop(
document.getElementById('scrollable'),
0
)
scrollTop(document.getElementById('scrollable'), 0)
this.focusedId = null
},
focusNext() {

32
src/renderer/components/TimelineSpace/Contents/Search.vue
View File

@ -1,16 +1,18 @@
<template>
<div id="search">
<div class="search-header" v-loading="loading" :element-loading-background="loadingBackground">
<div class="search-header">
<el-form :inline="true">
<el-select v-model="target" :placeholder="$t('search.search')" class="search-target">
<el-option
v-for="item in searchTargets"
:key="item.target"
:label="item.label"
:value="item.target">
</el-option>
<el-option v-for="item in searchTargets" :key="item.target" :label="item.label" :value="item.target"> </el-option>
</el-select>
<input v-model="query" :placeholder="$t('search.keyword')" class="search-keyword" v-shortkey.avoid v-on:keyup.enter="search" autofocus></input>
<input
v-model="query"
:placeholder="$t('search.keyword')"
class="search-keyword"
v-shortkey.avoid
v-on:keyup.enter="search"
autofocus
/>
<div class="clearfix"></div>
</el-form>
</div>
@ -23,7 +25,6 @@
</template>
<script>
import { mapState } from 'vuex'
import SearchAccount from './Search/Account'
import SearchTag from './Search/Tag'
import SearchToots from './Search/Toots'
@ -38,10 +39,6 @@ export default {
}
},
computed: {
...mapState({
loading: state => state.TimelineSpace.Contents.Search.loading,
loadingBackground: state => state.App.theme.wrapper_mask_color
}),
searchTargets: {
get() {
return [
@ -65,8 +62,7 @@ export default {
search() {
switch (this.target) {
case 'account':
this.$store.dispatch('TimelineSpace/Contents/Search/Account/search', this.query)
.catch(() => {
this.$store.dispatch('TimelineSpace/Contents/Search/Account/search', this.query).catch(() => {
this.$message({
message: this.$t('message.search_error'),
type: 'error'
@ -74,8 +70,7 @@ export default {
})
break
case 'tag':
this.$store.dispatch('TimelineSpace/Contents/Search/Tag/search', `#${this.query}`)
.catch(() => {
this.$store.dispatch('TimelineSpace/Contents/Search/Tag/search', `#${this.query}`).catch(() => {
this.$message({
message: this.$t('message.search_error'),
type: 'error'
@ -83,8 +78,7 @@ export default {
})
break
case 'toot':
this.$store.dispatch('TimelineSpace/Contents/Search/Toots/search', this.query)
.catch(() => {
this.$store.dispatch('TimelineSpace/Contents/Search/Toots/search', this.query).catch(() => {
this.$message({
message: this.$t('message.search_error'),
type: 'error'

2
src/renderer/store/TimelineSpace.ts
View File

@ -112,6 +112,7 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
throw new AccountLoadError()
})
await dispatch('detectPleroma')
dispatch('TimelineSpace/SideMenu/fetchLists', account, { root: true })
dispatch('TimelineSpace/SideMenu/fetchFollowRequests', account, { root: true })
await dispatch('loadUnreadNotification', accountId)
@ -119,7 +120,6 @@ const actions: ActionTree<TimelineSpaceState, RootState> = {
await dispatch('fetchContentsTimelines', account).catch(_ => {
throw new TimelineFetchError()
})
await dispatch('detectPleroma')
await dispatch('bindStreamings', account)
dispatch('startStreamings', account)
dispatch('fetchEmojis', account)

27
src/renderer/store/TimelineSpace/Contents/Search.ts
View File

@ -1,38 +1,23 @@
import Account, { AccountState } from './Search/Account'
import Tag, { TagState } from './Search/Tag'
import Toots, { TootsState } from './Search/Toots'
import { Module, MutationTree } from 'vuex'
import { Module } from 'vuex'
import { RootState } from '@/store'
export interface SearchState {
loading: boolean
}
export interface SearchState {}
export interface SearchModuleState extends SearchState {
Account: AccountState,
Tag: TagState,
Account: AccountState
Tag: TagState
Toots: TootsState
}
const state = (): SearchState => ({
loading: false
})
export const MUTATION_TYPES = {
CHANGE_LOADING: 'changeLoading'
}
const mutations: MutationTree<SearchState> = {
[MUTATION_TYPES.CHANGE_LOADING]: (state, loading: boolean) => {
state.loading = loading
}
}
const state = (): SearchState => ({})
const Search: Module<SearchState, RootState> = {
namespaced: true,
modules: { Account, Tag, Toots },
state: state,
mutations: mutations
state: state
}
export default Search

4
src/renderer/store/TimelineSpace/Contents/Search/Account.ts
View File

@ -22,7 +22,7 @@ const mutations: MutationTree<AccountState> = {
const actions: ActionTree<AccountState, RootState> = {
search: async ({ commit, rootState }, query: string): Promise<Array<Account>> => {
commit('TimelineSpace/Contents/Search/changeLoading', true, { root: true })
commit('TimelineSpace/Contents/changeLoading', true, { root: true })
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
return client
.get<Array<Account>>('/accounts/search', { q: query, resolve: true })
@ -31,7 +31,7 @@ const actions: ActionTree<AccountState, RootState> = {
return res.data
})
.finally(() => {
commit('TimelineSpace/Contents/Search/changeLoading', false, { root: true })
commit('TimelineSpace/Contents/changeLoading', false, { root: true })
})
}
}

12
src/renderer/store/TimelineSpace/Contents/Search/Tag.ts
View File

@ -22,18 +22,16 @@ const mutations: MutationTree<TagState> = {
const actions: ActionTree<TagState, RootState> = {
search: ({ commit, rootState }, query: string): Promise<Array<Tag>> => {
commit('TimelineSpace/Contents/Search/changeLoading', true, { root: true })
const client = new Mastodon(
rootState.TimelineSpace.account.accessToken!,
rootState.TimelineSpace.account.baseURL + '/api/v2'
)
return client.get<Results>('/search', { q: query, resolve: true })
commit('TimelineSpace/Contents/changeLoading', true, { root: true })
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v2')
return client
.get<Results>('/search', { q: query, resolve: true })
.then(res => {
commit(MUTATION_TYPES.UPDATE_RESULTS, res.data.hashtags)
return res.data.hashtags
})
.finally(() => {
commit('TimelineSpace/Contents/Search/changeLoading', false, { root: true })
commit('TimelineSpace/Contents/changeLoading', false, { root: true })
})
}
}

12
src/renderer/store/TimelineSpace/Contents/Search/Toots.ts
View File

@ -22,18 +22,16 @@ const mutations: MutationTree<TootsState> = {
const actions: ActionTree<TootsState, RootState> = {
search: ({ commit, rootState }, query: string): Promise<Array<Status>> => {
commit('TimelineSpace/Contents/Search/changeLoading', true, { root: true })
const client = new Mastodon(
rootState.TimelineSpace.account.accessToken!,
rootState.TimelineSpace.account.baseURL + '/api/v1'
)
return client.get<Results>('/search', { q: query, resolve: true })
commit('TimelineSpace/Contents/changeLoading', true, { root: true })
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
return client
.get<Results>('/search', { q: query, resolve: true })
.then(res => {
commit(MUTATION_TYPES.UPDATE_RESULTS, res.data.statuses)
return res.data.statuses
})
.finally(() => {
commit('TimelineSpace/Contents/Search/changeLoading', false, { root: true })
commit('TimelineSpace/Contents/changeLoading', false, { root: true })
})
}
}