Merge pull request #412 from h3poteto/reload
Add reload button and reload each timeline
This commit is contained in:
commit
b403036a73
|
@ -22,7 +22,8 @@ export default {
|
|||
account: state => state.TimelineSpace.account,
|
||||
favourites: state => state.TimelineSpace.Contents.Favourites.favourites,
|
||||
lazyLoading: state => state.TimelineSpace.Contents.Favourites.lazyLoading,
|
||||
backgroundColor: state => state.App.theme.background_color
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload
|
||||
})
|
||||
},
|
||||
created () {
|
||||
|
@ -54,6 +55,16 @@ export default {
|
|||
document.getElementById('scrollable').scrollTop = 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload()
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateToot (message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Favourites/updateToot', message)
|
||||
|
|
|
@ -19,13 +19,15 @@ import Toot from '../Cards/Toot'
|
|||
export default {
|
||||
name: 'tag',
|
||||
components: { Toot },
|
||||
props: ['tag'],
|
||||
computed: {
|
||||
...mapState({
|
||||
timeline: state => state.TimelineSpace.Contents.Hashtag.Tag.timeline,
|
||||
lazyLoading: state => state.TimelineSpace.Contents.Hashtag.Tag.lazyLoading,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
heading: state => state.TimelineSpace.Contents.Hashtag.Tag.heading,
|
||||
unread: state => state.TimelineSpace.Contents.Hashtag.Tag.unreadTimeline
|
||||
unread: state => state.TimelineSpace.Contents.Hashtag.Tag.unreadTimeline,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload
|
||||
})
|
||||
},
|
||||
mounted () {
|
||||
|
@ -35,7 +37,7 @@ export default {
|
|||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.load(this.$route.params.tag)
|
||||
this.load(this.tag)
|
||||
.then(() => {
|
||||
loading.close()
|
||||
})
|
||||
|
@ -45,7 +47,7 @@ export default {
|
|||
document.getElementById('scrollable').addEventListener('scroll', this.onScroll)
|
||||
},
|
||||
watch: {
|
||||
'$route': function () {
|
||||
tag: function (newTag, oldTag) {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
|
@ -53,13 +55,21 @@ export default {
|
|||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
})
|
||||
this.reset()
|
||||
this.load(this.$route.params.tag)
|
||||
this.load(newTag)
|
||||
.then(() => {
|
||||
loading.close()
|
||||
})
|
||||
.catch(() => {
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload()
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
|
@ -106,7 +116,7 @@ export default {
|
|||
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.$route.params.tag,
|
||||
tag: this.tag,
|
||||
last: this.timeline[this.timeline.length - 1]
|
||||
})
|
||||
}
|
||||
|
@ -119,7 +129,7 @@ export default {
|
|||
}
|
||||
},
|
||||
async reload () {
|
||||
const tag = this.$route.params.tag
|
||||
const tag = this.tag
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
|
|
|
@ -26,7 +26,8 @@ export default {
|
|||
lazyLoading: state => state.TimelineSpace.Contents.Home.lazyLoading,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
heading: state => state.TimelineSpace.Contents.Home.heading,
|
||||
unread: state => state.TimelineSpace.Contents.Home.unreadTimeline
|
||||
unread: state => state.TimelineSpace.Contents.Home.unreadTimeline,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload
|
||||
})
|
||||
},
|
||||
mounted () {
|
||||
|
@ -47,6 +48,16 @@ export default {
|
|||
document.getElementById('scrollable').scrollTop = 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload()
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onScroll (event) {
|
||||
// for lazyLoading
|
||||
|
|
|
@ -26,7 +26,8 @@ export default {
|
|||
lazyLoading: state => state.TimelineSpace.Contents.Lists.Show.lazyLoading,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
heading: state => state.TimelineSpace.Contents.Lists.Show.heading,
|
||||
unread: state => state.TimelineSpace.Contents.Lists.Show.unreadTimeline
|
||||
unread: state => state.TimelineSpace.Contents.Lists.Show.unreadTimeline,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload
|
||||
})
|
||||
},
|
||||
created () {
|
||||
|
@ -54,6 +55,14 @@ export default {
|
|||
.then(() => {
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload()
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
|
|
|
@ -26,7 +26,8 @@ export default {
|
|||
lazyLoading: state => state.TimelineSpace.Contents.Local.lazyLoading,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
heading: state => state.TimelineSpace.Contents.Local.heading,
|
||||
unread: state => state.TimelineSpace.Contents.Local.unreadTimeline
|
||||
unread: state => state.TimelineSpace.Contents.Local.unreadTimeline,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload
|
||||
})
|
||||
},
|
||||
mounted () {
|
||||
|
@ -47,6 +48,16 @@ export default {
|
|||
document.getElementById('scrollable').scrollTop = 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload()
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateToot (message) {
|
||||
this.$store.commit('TimelineSpace/Contents/Local/updateToot', message)
|
||||
|
|
|
@ -26,7 +26,8 @@ export default {
|
|||
lazyLoading: state => state.TimelineSpace.Contents.Notifications.lazyLoading,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
heading: state => state.TimelineSpace.Contents.Notifications.heading,
|
||||
unread: state => state.TimelineSpace.Contents.Notifications.unreadNotifications
|
||||
unread: state => state.TimelineSpace.Contents.Notifications.unreadNotifications,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload
|
||||
})
|
||||
},
|
||||
mounted () {
|
||||
|
@ -48,6 +49,16 @@ export default {
|
|||
document.getElementById('scrollable').scrollTop = 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload()
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onScroll (event) {
|
||||
if (((event.target.clientHeight + event.target.scrollTop) >= document.getElementById('notifications').clientHeight - 10) && !this.lazyloading) {
|
||||
|
|
|
@ -26,7 +26,8 @@ export default {
|
|||
lazyLoading: state => state.TimelineSpace.Contents.Public.lazyLoading,
|
||||
backgroundColor: state => state.App.theme.background_color,
|
||||
heading: state => state.TimelineSpace.Contents.Public.heading,
|
||||
unread: state => state.TimelineSpace.Contents.Public.unreadTimeline
|
||||
unread: state => state.TimelineSpace.Contents.Public.unreadTimeline,
|
||||
startReload: state => state.TimelineSpace.HeaderMenu.reload
|
||||
})
|
||||
},
|
||||
created () {
|
||||
|
@ -58,6 +59,16 @@ export default {
|
|||
document.getElementById('scrollable').scrollTop = 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
startReload: function (newState, oldState) {
|
||||
if (!oldState && newState) {
|
||||
this.reload()
|
||||
.finally(() => {
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', false)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async initialize () {
|
||||
try {
|
||||
|
|
|
@ -2,9 +2,12 @@
|
|||
<div id="header_menu">
|
||||
<div class="channel">{{ title }}</div>
|
||||
<div class="tools">
|
||||
<el-button type="text" class="toot" @click="openNewTootModal">
|
||||
<el-button type="text" class="action" @click="openNewTootModal">
|
||||
<icon name="regular/edit"></icon>
|
||||
</el-button>
|
||||
<el-button type="text" class="action" @click="reload">
|
||||
<icon name="sync-alt"></icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -71,6 +74,22 @@ export default {
|
|||
},
|
||||
openNewTootModal () {
|
||||
this.$store.dispatch('TimelineSpace/Modals/NewToot/openModal')
|
||||
},
|
||||
reload () {
|
||||
switch (this.title) {
|
||||
case 'Home':
|
||||
case 'Notification':
|
||||
case 'Favourite':
|
||||
case 'Local timeline':
|
||||
case 'Public timeline':
|
||||
case 'Hashtag':
|
||||
case `#${this.$route.params.tag}`:
|
||||
case 'Lists':
|
||||
this.$store.commit('TimelineSpace/HeaderMenu/changeReload', true)
|
||||
break
|
||||
default:
|
||||
console.log('Not impletemented')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -94,7 +113,7 @@ export default {
|
|||
.tools {
|
||||
font-size: 18px;
|
||||
|
||||
.toot {
|
||||
.action {
|
||||
color: var(--theme-secondary-color);
|
||||
padding: 0;
|
||||
|
||||
|
|
|
@ -3,11 +3,15 @@ import Mastodon from 'megalodon'
|
|||
const HeaderMenu = {
|
||||
namespaced: true,
|
||||
state: {
|
||||
title: 'Home'
|
||||
title: 'Home',
|
||||
reload: false
|
||||
},
|
||||
mutations: {
|
||||
updateTitle (state, title) {
|
||||
state.title = title
|
||||
},
|
||||
changeReload (state, value) {
|
||||
state.reload = value
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
|
|
Loading…
Reference in New Issue