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 #917 from h3poteto/loading 

Change loading in order to change channel while loading
This commit is contained in:
AkiraFukushima 2019-05-18 21:12:43 +09:00 committed by GitHub
parent 7232b59809 351be72586
commit 891877519d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 487 additions and 572 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,32 +1,29 @@
<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>
<transition-group name="timeline" tag="div">
<toot
:message="message"
:filter="filter"
:focused="message.uri + message.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
v-for="message in timeline"
:key="message.uri + message.id"
<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>
<transition-group name="timeline" tag="div">
<toot
:message="message"
:filter="filter"
:focused="message.uri + message.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
v-for="message in timeline"
:key="message.uri + message.id"
>
</toot>
</transition-group>
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
</toot>
</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>
</div>
</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>
</div>
</div>
</template>
<script>
@ -40,7 +37,7 @@ export default {
name: 'directmessages',
components: { Toot },
mixins: [reloadable],
data () {
data() {
return {
focusedId: null
}
@ -59,10 +56,8 @@ export default {
startReload: state => state.TimelineSpace.HeaderMenu.reload,
unreadNotification: state => state.TimelineSpace.unreadNotification
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
shortcutEnabled: function () {
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
shortcutEnabled: function() {
if (this.modalOpened) {
return false
}
@ -74,40 +69,38 @@ export default {
return currentIndex === -1
}
},
async mounted () {
this.$store.commit('TimelineSpace/changeLoading', true)
async mounted() {
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.
const previousFocusedId = this.focusedId
this.focusedId = 0
this.$nextTick(function () {
this.$nextTick(function() {
this.focusedId = previousFocusedId
})
})
},
beforeUpdate () {
beforeUpdate() {
if (this.$store.state.TimelineSpace.SideMenu.unreadDirectMessagesTimeline && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadDirectMessagesTimeline', false)
}
},
beforeDestroy () {
beforeDestroy() {
if (!this.unreadNotification.direct) {
this.$store.dispatch('TimelineSpace/stopDirectMessagesStreaming')
this.$store.dispatch('TimelineSpace/unbindDirectMessagesStreaming')
}
Event.$off('focus-timeline')
},
destroyed () {
destroyed() {
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/DirectMessages/mergeTimeline')
this.$store.commit('TimelineSpace/Contents/DirectMessages/archiveTimeline')
@ -120,15 +113,14 @@ export default {
}
},
watch: {
startReload: function (newState, oldState) {
startReload: function(newState, oldState) {
if (!oldState && newState) {
this.reload()
.finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
this.reload().finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
}
},
focusedId: function (newState, _oldState) {
focusedId: function(newState, _oldState) {
if (newState && this.heading) {
this.$store.commit('TimelineSpace/Contents/DirectMessages/changeHeading', false)
} else if (newState === null && !this.heading) {
@ -138,21 +130,24 @@ export default {
}
},
methods: {
async initialize () {
await this.$store.dispatch('TimelineSpace/Contents/DirectMessages/fetchTimeline')
.catch(_ => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
async initialize() {
await this.$store.dispatch('TimelineSpace/Contents/DirectMessages/fetchTimeline').catch(_ => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
})
await this.$store.dispatch('TimelineSpace/bindDirectMessagesStreaming')
this.$store.dispatch('TimelineSpace/startDirectMessagesStreaming')
},
onScroll (event) {
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,20 +156,20 @@ 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')
}
},
updateToot (message) {
updateToot(message) {
this.$store.commit('TimelineSpace/Contents/DirectMessages/updateToot', message)
},
deleteToot (message) {
deleteToot(message) {
this.$store.commit('TimelineSpace/Contents/DirectMessages/deleteToot', message)
},
async reload () {
async reload() {
this.$store.commit('TimelineSpace/changeLoading', true)
try {
await this.reloadable()
@ -182,14 +177,11 @@ export default {
this.$store.commit('TimelineSpace/changeLoading', false)
}
},
upper () {
scrollTop(
document.getElementById('scrollable'),
0
)
upper() {
scrollTop(document.getElementById('scrollable'), 0)
this.focusedId = null
},
focusNext () {
focusNext() {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
if (currentIndex === -1) {
this.focusedId = this.timeline[0].uri + this.timeline[0].id
@ -197,7 +189,7 @@ export default {
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
}
},
focusPrev () {
focusPrev() {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
if (currentIndex === 0) {
this.focusedId = null
@ -205,13 +197,13 @@ export default {
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
}
},
focusToot (message) {
focusToot(message) {
this.focusedId = message.uri + message.id
},
focusSidebar () {
focusSidebar() {
Event.$emit('focus-sidebar')
},
handleKey (event) {
handleKey(event) {
switch (event.srcKey) {
case 'next':
this.focusedId = this.timeline[0].uri + this.timeline[0].id

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

@ -1,29 +1,26 @@
<template>
<div id="favourites" v-shortkey="shortcutEnabled ? {next: ['j']} : {}" @shortkey="handleKey">
<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"
:filter="filter"
:focused="message.uri === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
<div id="favourites" v-shortkey="shortcutEnabled ? { next: ['j'] } : {}" @shortkey="handleKey">
<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"
:filter="filter"
:focused="message.uri === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
>
</toot>
</toot>
</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>
</div>
</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>
</div>
</div>
</template>
<script>
@ -37,7 +34,7 @@ export default {
name: 'favourites',
components: { Toot },
mixins: [reloadable],
data () {
data() {
return {
heading: true,
focusedId: null
@ -53,16 +50,15 @@ export default {
lazyLoading: state => state.TimelineSpace.Contents.Favourites.lazyLoading,
filter: state => state.TimelineSpace.Contents.Favourites.filter
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
shortcutEnabled: function () {
...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)
created() {
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,24 +66,24 @@ export default {
})
})
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
})
},
mounted () {
mounted() {
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
Event.$on('focus-timeline', () => {
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
const previousFocusedId = this.focusedId
this.focusedId = 0
this.$nextTick(function () {
this.$nextTick(function() {
this.focusedId = previousFocusedId
})
})
},
beforeDestroy () {
beforeDestroy() {
Event.$off('focus-timeline')
},
destroyed () {
destroyed() {
this.$store.commit('TimelineSpace/Contents/Favourites/updateFavourites', [])
if (document.getElementById('scrollable') !== undefined && document.getElementById('scrollable') !== null) {
document.getElementById('scrollable').removeEventListener('scroll', this.onScroll)
@ -95,15 +91,14 @@ export default {
}
},
watch: {
startReload: function (newState, oldState) {
startReload: function(newState, oldState) {
if (!oldState && newState) {
this.reload()
.finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
this.reload().finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
}
},
focusedId: function (newState, _oldState) {
focusedId: function(newState, _oldState) {
if (newState && this.heading) {
this.heading = false
} else if (newState === null && !this.heading) {
@ -112,15 +107,19 @@ export default {
}
},
methods: {
updateToot (message) {
updateToot(message) {
this.$store.commit('TimelineSpace/Contents/Favourites/updateToot', message)
},
deleteToot (message) {
deleteToot(message) {
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])
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])
.catch(() => {
this.$message({
message: this.$t('message.favourite_fetch_error'),
@ -129,35 +128,31 @@ 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
}
},
async reload () {
async reload() {
this.$store.commit('TimelineSpace/changeLoading', true)
try {
const account = await this.reloadable()
await this.$store.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', account)
.catch(() => {
this.$message({
message: this.$t('message.favourite_fetch_error'),
type: 'error'
})
await this.$store.dispatch('TimelineSpace/Contents/Favourites/fetchFavourites', account).catch(() => {
this.$message({
message: this.$t('message.favourite_fetch_error'),
type: 'error'
})
})
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
},
upper () {
scrollTop(
document.getElementById('scrollable'),
0
)
upper() {
scrollTop(document.getElementById('scrollable'), 0)
this.focusedId = null
},
focusNext () {
focusNext() {
const currentIndex = this.favourites.findIndex(toot => this.focusedId === toot.uri)
if (currentIndex === -1) {
this.focusedId = this.favourites[0].uri
@ -165,7 +160,7 @@ export default {
this.focusedId = this.favourites[currentIndex + 1].uri
}
},
focusPrev () {
focusPrev() {
const currentIndex = this.favourites.findIndex(toot => this.focusedId === toot.uri)
if (currentIndex === 0) {
this.focusedId = null
@ -173,13 +168,13 @@ export default {
this.focusedId = this.favourites[currentIndex - 1].uri
}
},
focusToot (message) {
focusToot(message) {
this.focusedId = message.id
},
focusSidebar () {
focusSidebar() {
Event.$emit('focus-sidebar')
},
handleKey (event) {
handleKey(event) {
switch (event.srcKey) {
case 'next':
this.focusedId = this.favourites[0].uri

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

@ -1,31 +1,29 @@
<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>
<transition-group name="timeline" tag="div">
<div class="tag-timeline" v-for="message in timeline" v-bind:key="message.uri + message.id">
<toot
:message="message"
:filter="filter"
:focused="message.uri + message.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
<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>
<transition-group name="timeline" tag="div">
<div class="tag-timeline" v-for="message in timeline" v-bind:key="message.uri + message.id">
<toot
:message="message"
:filter="filter"
:focused="message.uri + message.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
>
</toot>
</toot>
</div>
</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>
</div>
</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>
</div>
</div>
</template>
<script>
@ -40,7 +38,7 @@ export default {
components: { Toot },
mixins: [reloadable],
props: ['tag'],
data () {
data() {
return {
focusedId: null
}
@ -56,10 +54,8 @@ export default {
unread: state => state.TimelineSpace.Contents.Hashtag.Tag.unreadTimeline,
filter: state => state.TimelineSpace.Contents.Hashtag.Tag.filter
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
shortcutEnabled: function () {
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
shortcutEnabled: function() {
if (this.modalOpened) {
return false
}
@ -71,41 +67,38 @@ export default {
return currentIndex === -1
}
},
mounted () {
this.$store.commit('TimelineSpace/changeLoading', true)
this.load(this.tag)
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
})
mounted() {
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)
Event.$on('focus-timeline', () => {
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
const previousFocusedId = this.focusedId
this.focusedId = 0
this.$nextTick(function () {
this.$nextTick(function() {
this.focusedId = previousFocusedId
})
})
},
watch: {
tag: function (newTag, _oldTag) {
this.$store.commit('TimelineSpace/changeLoading', true)
tag: function(newTag, _oldTag) {
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) {
startReload: function(newState, oldState) {
if (!oldState && newState) {
this.reload()
.finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
this.reload().finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
}
},
focusedId: function (newState, _oldState) {
focusedId: function(newState, _oldState) {
if (newState && this.heading) {
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', false)
} else if (newState === null && !this.heading) {
@ -114,30 +107,28 @@ export default {
}
}
},
beforeDestroy () {
beforeDestroy() {
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
this.reset()
Event.$off('focus-timeline')
},
methods: {
async load (tag) {
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag)
.catch(() => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
async load(tag) {
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.$message({
message: this.$t('message.start_streaming_error'),
type: 'error'
})
})
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag).catch(() => {
this.$message({
message: this.$t('message.start_streaming_error'),
type: 'error'
})
})
return true
},
reset () {
reset() {
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/mergeTimeline')
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/archiveTimeline')
@ -147,59 +138,57 @@ export default {
document.getElementById('scrollable').scrollTop = 0
}
},
updateToot (toot) {
updateToot(toot) {
this.$store.commit('TimelineSpace/Contents/Hashtag/Tag/updateToot', toot)
},
deleteToot (toot) {
deleteToot(toot) {
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) {
onScroll(event) {
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')
}
},
async reload () {
async reload() {
const tag = this.tag
this.$store.commit('TimelineSpace/changeLoading', true)
try {
await this.reloadable()
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/stopStreaming')
await this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/fetch', tag)
.catch(() => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
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.$message({
message: this.$t('message.start_streaming_error'),
type: 'error'
})
})
this.$store.dispatch('TimelineSpace/Contents/Hashtag/Tag/startStreaming', tag).catch(() => {
this.$message({
message: this.$t('message.start_streaming_error'),
type: 'error'
})
})
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
},
upper () {
scrollTop(
document.getElementById('scrollable'),
0
)
upper() {
scrollTop(document.getElementById('scrollable'), 0)
this.focusedId = null
},
focusNext () {
focusNext() {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
if (currentIndex === -1) {
this.focusedId = this.timeline[0].uri + this.timeline[0].id
@ -207,7 +196,7 @@ export default {
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
}
},
focusPrev () {
focusPrev() {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
if (currentIndex === 0) {
this.focusedId = null
@ -215,13 +204,13 @@ export default {
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
}
},
focusToot (message) {
focusToot(message) {
this.focusedId = message.uri + message.id
},
focusSidebar () {
focusSidebar() {
Event.$emit('focus-sidebar')
},
handleKey (event) {
handleKey(event) {
switch (event.srcKey) {
case 'next':
this.focusedId = this.timeline[0].uri + this.timeline[0].id

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

@ -1,14 +1,14 @@
<template>
<div class="members">
<div class="add-account">
<el-button type="text" class="add-button" @click="addAccount">
<icon name="plus"></icon>
</el-button>
<div class="members">
<div class="add-account">
<el-button type="text" class="add-button" @click="addAccount">
<icon name="plus"></icon>
</el-button>
</div>
<template v-for="account in members">
<user :user="account" :remove="true" @removeAccount="removeAccount"></user>
</template>
</div>
<template v-for="account in members">
<user :user="account" :remove="true" @removeAccount="removeAccount"></user>
</template>
</div>
</template>
<script>
@ -24,12 +24,12 @@ export default {
members: state => state.TimelineSpace.Contents.Lists.Edit.members
})
},
created () {
created() {
this.init()
},
methods: {
async init () {
this.$store.commit('TimelineSpace/changeLoading', true)
async init() {
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)
async removeAccount(account) {
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
try {
await this.$store.dispatch('TimelineSpace/Contents/Lists/Edit/removeAccount', {
account: account,
@ -55,10 +55,10 @@ export default {
type: 'error'
})
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
}
},
addAccount () {
addAccount() {
this.$store.commit('TimelineSpace/Modals/AddListMember/setListId', this.list_id)
this.$store.dispatch('TimelineSpace/Modals/AddListMember/changeModal', true)
}

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

@ -1,31 +1,29 @@
<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>
<transition-group name="timeline" tag="div">
<div class="list-timeline" v-for="message in timeline" v-bind:key="message.uri + message.id">
<toot
:message="message"
:filter="filter"
:focused="message.uri + message.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
<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>
<transition-group name="timeline" tag="div">
<div class="list-timeline" v-for="message in timeline" v-bind:key="message.uri + message.id">
<toot
:message="message"
:filter="filter"
:focused="message.uri + message.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
>
</toot>
</toot>
</div>
</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>
</div>
</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>
</div>
</div>
</template>
<script>
@ -40,7 +38,7 @@ export default {
props: ['list_id'],
components: { Toot },
mixins: [reloadable],
data () {
data() {
return {
focusedId: null
}
@ -56,10 +54,8 @@ export default {
unread: state => state.TimelineSpace.Contents.Lists.Show.unreadTimeline,
filter: state => state.TimelineSpace.Contents.Lists.Show.filter
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
shortcutEnabled: function () {
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
shortcutEnabled: function() {
if (this.modalOpened) {
return false
}
@ -71,41 +67,38 @@ export default {
return currentIndex === -1
}
},
created () {
this.$store.commit('TimelineSpace/changeLoading', true)
this.load()
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
})
created() {
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
this.load().finally(() => {
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
})
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
},
mounted () {
mounted() {
Event.$on('focus-timeline', () => {
// If focusedId does not change, we have to refresh focusedId because Toot component watch change events.
const previousFocusedId = this.focusedId
this.focusedId = 0
this.$nextTick(function () {
this.$nextTick(function() {
this.focusedId = previousFocusedId
})
})
},
watch: {
list_id: function () {
this.$store.commit('TimelineSpace/changeLoading', true)
this.load()
.finally(() => {
this.$store.commit('TimelineSpace/changeLoading', false)
})
list_id: function() {
this.$store.commit('TimelineSpace/Contents/changeLoading', true)
this.load().finally(() => {
this.$store.commit('TimelineSpace/Contents/changeLoading', false)
})
},
startReload: function (newState, oldState) {
startReload: function(newState, oldState) {
if (!oldState && newState) {
this.reload()
.finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
this.reload().finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
}
},
focusedId: function (newState, _oldState) {
focusedId: function(newState, _oldState) {
if (newState && this.heading) {
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', false)
} else if (newState === null && !this.heading) {
@ -114,10 +107,10 @@ export default {
}
}
},
beforeDestroy () {
beforeDestroy() {
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
},
destroyed () {
destroyed() {
this.$store.commit('TimelineSpace/Contents/Lists/Show/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/Lists/Show/mergeTimeline')
this.$store.commit('TimelineSpace/Contents/Lists/Show/archiveTimeline')
@ -128,7 +121,7 @@ export default {
}
},
methods: {
async load () {
async load() {
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/stopStreaming')
try {
await this.$store.dispatch('TimelineSpace/Contents/Lists/Show/fetchTimeline', this.list_id)
@ -138,67 +131,64 @@ export default {
type: 'error'
})
}
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/startStreaming', this.list_id)
.catch(() => {
this.$message({
message: this.$t('message.start_streaming_error'),
type: 'error'
})
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/startStreaming', this.list_id).catch(() => {
this.$message({
message: this.$t('message.start_streaming_error'),
type: 'error'
})
})
return 'started'
},
updateToot (message) {
updateToot(message) {
this.$store.commit('TimelineSpace/Contents/Lists/Show/updateToot', message)
},
deleteToot (message) {
deleteToot(message) {
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) {
onScroll(event) {
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')
}
},
async reload () {
async reload() {
this.$store.commit('TimelineSpace/changeLoading', true)
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(() => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
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.$message({
message: this.$t('message.start_streaming_error'),
type: 'error'
})
})
this.$store.dispatch('TimelineSpace/Contents/Lists/Show/startStreaming', this.list_id).catch(() => {
this.$message({
message: this.$t('message.start_streaming_error'),
type: 'error'
})
})
} finally {
this.$store.commit('TimelineSpace/changeLoading', false)
}
},
upper () {
scrollTop(
document.getElementById('scrollable'),
0
)
upper() {
scrollTop(document.getElementById('scrollable'), 0)
this.focusedId = null
},
focusNext () {
focusNext() {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
if (currentIndex === -1) {
this.focusedId = this.timeline[0].uri + this.timeline[0].id
@ -206,7 +196,7 @@ export default {
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
}
},
focusPrev () {
focusPrev() {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
if (currentIndex === 0) {
this.focusedId = null
@ -214,13 +204,13 @@ export default {
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
}
},
focusToot (message) {
focusToot(message) {
this.focusedId = message.uri + message.id
},
focusSidebar () {
focusSidebar() {
Event.$emit('focus-sidebar')
},
handleKey (event) {
handleKey(event) {
switch (event.srcKey) {
case 'next':
this.focusedId = this.timeline[0].uri + this.timeline[0].id

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

@ -1,32 +1,29 @@
<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>
<transition-group name="timeline" tag="div">
<div class="local-timeline" v-for="message in timeline" :key="message.uri + message.id">
<toot
:message="message"
:filter="filter"
:focused="message.uri + message.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
<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>
<transition-group name="timeline" tag="div">
<div class="local-timeline" v-for="message in timeline" :key="message.uri + message.id">
<toot
:message="message"
:filter="filter"
:focused="message.uri + message.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
>
</toot>
</toot>
</div>
</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>
</div>
</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>
</div>
</div>
</template>
<script>
@ -40,7 +37,7 @@ export default {
name: 'local',
components: { Toot },
mixins: [reloadable],
data () {
data() {
return {
focusedId: null
}
@ -59,10 +56,8 @@ export default {
startReload: state => state.TimelineSpace.HeaderMenu.reload,
unreadNotification: state => state.TimelineSpace.unreadNotification
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
shortcutEnabled: function () {
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
shortcutEnabled: function() {
if (this.modalOpened) {
return false
}
@ -74,40 +69,38 @@ export default {
return currentIndex === -1
}
},
async mounted () {
this.$store.commit('TimelineSpace/changeLoading', true)
async mounted() {
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.
const previousFocusedId = this.focusedId
this.focusedId = 0
this.$nextTick(function () {
this.$nextTick(function() {
this.focusedId = previousFocusedId
})
})
},
beforeUpdate () {
beforeUpdate() {
if (this.$store.state.TimelineSpace.SideMenu.unreadLocalTimeline && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadLocalTimeline', false)
}
},
beforeDestroy () {
beforeDestroy() {
if (!this.unreadNotification.local) {
this.$store.dispatch('TimelineSpace/stopLocalStreaming')
this.$store.dispatch('TimelineSpace/unbindLocalStreaming')
}
Event.$off('focus-timeline')
},
destroyed () {
destroyed() {
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/Local/mergeTimeline')
this.$store.commit('TimelineSpace/Contents/Local/archiveTimeline')
@ -120,15 +113,14 @@ export default {
}
},
watch: {
startReload: function (newState, oldState) {
startReload: function(newState, oldState) {
if (!oldState && newState) {
this.reload()
.finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
this.reload().finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
}
},
focusedId: function (newState, _oldState) {
focusedId: function(newState, _oldState) {
if (newState && this.heading) {
this.$store.commit('TimelineSpace/Contents/Local/changeHeading', false)
} else if (newState === null && !this.heading) {
@ -138,42 +130,40 @@ export default {
}
},
methods: {
async initialize () {
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline')
.catch(_ => {
async initialize() {
await this.$store.dispatch('TimelineSpace/Contents/Local/fetchLocalTimeline').catch(_ => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
})
await this.$store.dispatch('TimelineSpace/bindLocalStreaming')
this.$store.dispatch('TimelineSpace/startLocalStreaming')
},
updateToot(message) {
this.$store.commit('TimelineSpace/Contents/Local/updateToot', message)
},
deleteToot(message) {
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(() => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
})
await this.$store.dispatch('TimelineSpace/bindLocalStreaming')
this.$store.dispatch('TimelineSpace/startLocalStreaming')
},
updateToot (message) {
this.$store.commit('TimelineSpace/Contents/Local/updateToot', message)
},
deleteToot (message) {
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(() => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
})
}
// 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')
}
},
async reload () {
async reload() {
this.$store.commit('TimelineSpace/changeLoading', true)
try {
await this.reloadable()
@ -181,14 +171,11 @@ export default {
this.$store.commit('TimelineSpace/changeLoading', false)
}
},
upper () {
scrollTop(
document.getElementById('scrollable'),
0
)
upper() {
scrollTop(document.getElementById('scrollable'), 0)
this.focusedId = null
},
focusNext () {
focusNext() {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
if (currentIndex === -1) {
this.focusedId = this.timeline[0].uri + this.timeline[0].id
@ -196,7 +183,7 @@ export default {
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
}
},
focusPrev () {
focusPrev() {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
if (currentIndex === 0) {
this.focusedId = null
@ -204,13 +191,13 @@ export default {
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
}
},
focusToot (message) {
focusToot(message) {
this.focusedId = message.uri + message.id
},
focusSidebar () {
focusSidebar() {
Event.$emit('focus-sidebar')
},
handleKey (event) {
handleKey(event) {
switch (event.srcKey) {
case 'next':
this.focusedId = this.timeline[0].uri + this.timeline[0].id

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

@ -1,32 +1,29 @@
<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>
<transition-group name="timeline" tag="div">
<div class="public-timeline" v-for="message in timeline" :key="message.uri + message.id">
<toot
:message="message"
:filter="filter"
:focused="message.uri + message.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
<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>
<transition-group name="timeline" tag="div">
<div class="public-timeline" v-for="message in timeline" :key="message.uri + message.id">
<toot
:message="message"
:filter="filter"
:focused="message.uri + message.id === focusedId"
:overlaid="modalOpened"
v-on:update="updateToot"
v-on:delete="deleteToot"
@focusNext="focusNext"
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(message)"
>
</toot>
</toot>
</div>
</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>
</div>
</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>
</div>
</div>
</template>
<script>
@ -40,7 +37,7 @@ export default {
name: 'public',
components: { Toot },
mixins: [reloadable],
data () {
data() {
return {
focusedId: null
}
@ -59,10 +56,8 @@ export default {
startReload: state => state.TimelineSpace.HeaderMenu.reload,
unreadNotification: state => state.TimelineSpace.unreadNotification
}),
...mapGetters('TimelineSpace/Modals', [
'modalOpened'
]),
shortcutEnabled: function () {
...mapGetters('TimelineSpace/Modals', ['modalOpened']),
shortcutEnabled: function() {
if (this.modalOpened) {
return false
}
@ -74,40 +69,38 @@ export default {
return currentIndex === -1
}
},
async mounted () {
this.$store.commit('TimelineSpace/changeLoading', true)
async mounted() {
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.
const previousFocusedId = this.focusedId
this.focusedId = 0
this.$nextTick(function () {
this.$nextTick(function() {
this.focusedId = previousFocusedId
})
})
},
beforeUpdate () {
beforeUpdate() {
if (this.$store.state.TimelineSpace.SideMenu.unreadPublicTimeline && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadPublicTimeline', false)
}
},
beforeDestroy () {
beforeDestroy() {
if (!this.unreadNotification.public) {
this.$store.dispatch('TimelineSpace/stopPublicStreaming')
this.$store.dispatch('TimelineSpace/unbindPublicStreaming')
}
Event.$off('focus-timeline')
},
destroyed () {
destroyed() {
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/Public/mergeTimeline')
this.$store.commit('TimelineSpace/Contents/Public/archiveTimeline')
@ -120,15 +113,14 @@ export default {
}
},
watch: {
startReload: function (newState, oldState) {
startReload: function(newState, oldState) {
if (!oldState && newState) {
this.reload()
.finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
this.reload().finally(() => {
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
})
}
},
focusedId: function (newState, _oldState) {
focusedId: function(newState, _oldState) {
if (newState && this.heading) {
this.$store.commit('TimelineSpace/Contents/Public/changeHeading', false)
} else if (newState === null && !this.heading) {
@ -138,42 +130,40 @@ export default {
}
},
methods: {
async initialize () {
await this.$store.dispatch('TimelineSpace/Contents/Public/fetchPublicTimeline')
.catch(_ => {
async initialize() {
await this.$store.dispatch('TimelineSpace/Contents/Public/fetchPublicTimeline').catch(_ => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
})
await this.$store.dispatch('TimelineSpace/bindPublicStreaming')
this.$store.dispatch('TimelineSpace/startPublicStreaming')
},
updateToot(message) {
this.$store.commit('TimelineSpace/Contents/Public/updateToot', message)
},
deleteToot(message) {
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(() => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
})
await this.$store.dispatch('TimelineSpace/bindPublicStreaming')
this.$store.dispatch('TimelineSpace/startPublicStreaming')
},
updateToot (message) {
this.$store.commit('TimelineSpace/Contents/Public/updateToot', message)
},
deleteToot (message) {
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(() => {
this.$message({
message: this.$t('message.timeline_fetch_error'),
type: 'error'
})
})
}
// 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')
}
},
async reload () {
async reload() {
this.$store.commit('TimelineSpace/changeLoading', true)
try {
await this.reloadable()
@ -181,14 +171,11 @@ export default {
this.$store.commit('TimelineSpace/changeLoading', false)
}
},
upper () {
scrollTop(
document.getElementById('scrollable'),
0
)
upper() {
scrollTop(document.getElementById('scrollable'), 0)
this.focusedId = null
},
focusNext () {
focusNext() {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
if (currentIndex === -1) {
this.focusedId = this.timeline[0].uri + this.timeline[0].id
@ -196,7 +183,7 @@ export default {
this.focusedId = this.timeline[currentIndex + 1].uri + this.timeline[currentIndex + 1].id
}
},
focusPrev () {
focusPrev() {
const currentIndex = this.timeline.findIndex(toot => this.focusedId === toot.uri + toot.id)
if (currentIndex === 0) {
this.focusedId = null
@ -204,13 +191,13 @@ export default {
this.focusedId = this.timeline[currentIndex - 1].uri + this.timeline[currentIndex - 1].id
}
},
focusToot (message) {
focusToot(message) {
this.focusedId = message.uri + message.id
},
focusSidebar () {
focusSidebar() {
Event.$emit('focus-sidebar')
},
handleKey (event) {
handleKey(event) {
switch (event.srcKey) {
case 'next':
this.focusedId = this.timeline[0].uri + this.timeline[0].id

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

@ -1,29 +1,30 @@
<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>
<div class="search-result">
<search-account v-if="target==='account'"></search-account>
<search-tag v-else-if="target==='tag'"></search-tag>
<search-toots v-else-if="target==='toot'"></search-toots>
<search-account v-if="target === 'account'"></search-account>
<search-tag v-else-if="target === 'tag'"></search-tag>
<search-toots v-else-if="target === 'toot'"></search-toots>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import SearchAccount from './Search/Account'
import SearchTag from './Search/Tag'
import SearchToots from './Search/Toots'
@ -31,19 +32,15 @@ import SearchToots from './Search/Toots'
export default {
name: 'search',
components: { SearchAccount, SearchTag, SearchToots },
data () {
data() {
return {
target: 'account',
query: ''
}
},
computed: {
...mapState({
loading: state => state.TimelineSpace.Contents.Search.loading,
loadingBackground: state => state.App.theme.wrapper_mask_color
}),
searchTargets: {
get () {
get() {
return [
{
target: 'account',
@ -62,34 +59,31 @@ export default {
}
},
methods: {
search () {
search() {
switch (this.target) {
case 'account':
this.$store.dispatch('TimelineSpace/Contents/Search/Account/search', this.query)
.catch(() => {
this.$message({
message: this.$t('message.search_error'),
type: 'error'
})
this.$store.dispatch('TimelineSpace/Contents/Search/Account/search', this.query).catch(() => {
this.$message({
message: this.$t('message.search_error'),
type: 'error'
})
})
break
case 'tag':
this.$store.dispatch('TimelineSpace/Contents/Search/Tag/search', `#${this.query}`)
.catch(() => {
this.$message({
message: this.$t('message.search_error'),
type: 'error'
})
this.$store.dispatch('TimelineSpace/Contents/Search/Tag/search', `#${this.query}`).catch(() => {
this.$message({
message: this.$t('message.search_error'),
type: 'error'
})
})
break
case 'toot':
this.$store.dispatch('TimelineSpace/Contents/Search/Toots/search', this.query)
.catch(() => {
this.$message({
message: this.$t('message.search_error'),
type: 'error'
})
this.$store.dispatch('TimelineSpace/Contents/Search/Toots/search', this.query).catch(() => {
this.$message({
message: this.$t('message.search_error'),
type: 'error'
})
})
break
default:
break

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 })
})
}
}