Merge pull request #412 from h3poteto/reload

Add reload button and reload each timeline
This commit is contained in:
AkiraFukushima 2018-06-27 22:54:57 +09:00 committed by GitHub
commit b403036a73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 112 additions and 15 deletions

View File

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

View File

@ -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',

View File

@ -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

View File

@ -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 () {

View File

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

View File

@ -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) {

View File

@ -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 {

View File

@ -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;

View File

@ -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: {