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

Remove unread timeline and fix scroll position in home

This commit is contained in:
AkiraFukushima 2021-07-25 21:33:10 +09:00
parent 4fdc2f90de
commit 143849424e
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
4 changed files with 25 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spec/renderer/integration/store/TimelineSpace/Contents/Home.spec.ts
View File

@ -118,7 +118,6 @@ let state = (): HomeState => {
lazyLoading: false,
heading: true,
timeline: [],
unreadTimeline: [],
showReblogs: true,
showReplies: true
}

40
spec/renderer/unit/store/TimelineSpace/Contents/Home.spec.ts
View File

@ -99,7 +99,6 @@ describe('TimelineSpace/Contents/Home', () => {
lazyLoading: false,
heading: true,
timeline: [],
unreadTimeline: [],
showReblogs: true,
showReplies: true
}
@ -127,7 +126,6 @@ describe('TimelineSpace/Contents/Home', () => {
lazyLoading: false,
heading: true,
timeline: [status1],
unreadTimeline: [],
showReblogs: true,
showReplies: true
}
@ -135,7 +133,6 @@ describe('TimelineSpace/Contents/Home', () => {
it('should update timeline', () => {
Home.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, status2)
expect(state.timeline).toEqual([status2, status1])
expect(state.unreadTimeline).toEqual([])
})
})
@ -145,7 +142,6 @@ describe('TimelineSpace/Contents/Home', () => {
lazyLoading: false,
heading: true,
timeline: [status2, status1],
unreadTimeline: [],
showReblogs: true,
showReplies: true
}
@ -153,7 +149,6 @@ describe('TimelineSpace/Contents/Home', () => {
it('should not update timeline', () => {
Home.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, status2)
expect(state.timeline).toEqual([status2, status1])
expect(state.unreadTimeline).toEqual([])
})
})
})
@ -165,15 +160,13 @@ describe('TimelineSpace/Contents/Home', () => {
lazyLoading: false,
heading: false,
timeline: [status1],
unreadTimeline: [],
showReblogs: true,
showReplies: true
}
})
it('should update unreadTimeline', () => {
it('should update timeline', () => {
Home.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, status2)
expect(state.timeline).toEqual([status1])
expect(state.unreadTimeline).toEqual([status2])
expect(state.timeline).toEqual([status2, status1])
})
})
describe('duplicated status', () => {
@ -181,46 +174,25 @@ describe('TimelineSpace/Contents/Home', () => {
state = {
lazyLoading: false,
heading: false,
timeline: [],
unreadTimeline: [status2, status1],
timeline: [status2, status1],
showReblogs: true,
showReplies: true
}
})
it('should not update unreadTimeline', () => {
Home.mutations![MUTATION_TYPES.APPEND_TIMELINE](state, status2)
expect(state.timeline).toEqual([])
expect(state.unreadTimeline).toEqual([status2, status1])
expect(state.timeline).toEqual([status2, status1])
})
})
})
})
describe('mergeTimeline', () => {
beforeEach(() => {
state = {
lazyLoading: false,
heading: true,
timeline: [status1],
unreadTimeline: [status2],
showReblogs: true,
showReplies: true
}
})
it('should be merged', () => {
Home.mutations![MUTATION_TYPES.MERGE_TIMELINE](state, null)
expect(state.timeline).toEqual([status2, status1])
expect(state.unreadTimeline).toEqual([])
})
})
describe('insertTimeline', () => {
beforeEach(() => {
state = {
lazyLoading: false,
heading: true,
timeline: [status1],
unreadTimeline: [],
showReblogs: true,
showReplies: true
}
@ -238,7 +210,6 @@ describe('TimelineSpace/Contents/Home', () => {
lazyLoading: false,
heading: true,
timeline: [status1, status2],
unreadTimeline: [],
showReblogs: true,
showReplies: true
}
@ -294,7 +265,6 @@ describe('TimelineSpace/Contents/Home', () => {
lazyLoading: false,
heading: true,
timeline: [rebloggedStatus, status2],
unreadTimeline: [],
showReblogs: true,
showReplies: true
}
@ -314,7 +284,6 @@ describe('TimelineSpace/Contents/Home', () => {
lazyLoading: false,
heading: true,
timeline: [status1, status2],
unreadTimeline: [],
showReblogs: true,
showReplies: true
}
@ -365,7 +334,6 @@ describe('TimelineSpace/Contents/Home', () => {
lazyLoading: false,
heading: true,
timeline: [rebloggedStatus, status2],
unreadTimeline: [],
showReblogs: true,
showReplies: true
}

47
src/renderer/components/TimelineSpace/Contents/Home.vue
View File

@ -1,8 +1,7 @@
<template>
<div id="home" 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>
<DynamicScroller :items="filteredTimeline" :min-item-size="60" id="scroller" class="scroller" ref="scroller">
<DynamicScroller :items="filteredTimeline" :min-item-size="86" id="scroller" class="scroller" ref="scroller">
<template v-slot="{ item, index, active }">
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index" :watchData="true">
<toot
@ -33,6 +32,7 @@ import { mapState, mapGetters } from 'vuex'
import Toot from '~/src/renderer/components/organisms/Toot'
import reloadable from '~/src/renderer/components/mixins/reloadable'
import { Event } from '~/src/renderer/components/event'
import { ScrollPosition } from '~/src/renderer/components/utils/scroll'
export default {
name: 'home',
@ -40,7 +40,8 @@ export default {
mixins: [reloadable],
data() {
return {
focusedId: null
focusedId: null,
scroll: null
}
},
computed: {
@ -48,7 +49,6 @@ export default {
timeline: state => state.timeline,
lazyLoading: state => state.lazyLoading,
heading: state => state.heading,
unread: state => state.unreadTimeline,
showReblogs: state => state.showReblogs,
showReplies: state => state.showReplies
}),
@ -97,18 +97,30 @@ export default {
if (this.heading && this.timeline.length > 0) {
this.$store.dispatch('TimelineSpace/Contents/Home/saveMarker', this.timeline[0].id)
}
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
},
beforeUpdate() {
if (this.$store.state.TimelineSpace.SideMenu.unreadHomeTimeline && this.heading) {
this.$store.commit('TimelineSpace/SideMenu/changeUnreadHomeTimeline', false)
}
if (!this.heading) {
const el = document.getElementById('scroller')
this.scroll = new ScrollPosition(el)
this.scroll.prepare()
}
},
updated() {
if (this.scroll && !this.heading) {
this.scroll.restore()
}
},
beforeDestroy() {
Event.$off('focus-timeline')
},
destroyed() {
this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
this.$store.commit('TimelineSpace/Contents/Home/archiveTimeline')
if (document.getElementById('scroller') !== undefined && document.getElementById('scroller') !== null) {
document.getElementById('scroller').removeEventListener('scroll', this.onScroll)
@ -128,7 +140,6 @@ export default {
this.$store.commit('TimelineSpace/Contents/Home/changeHeading', false)
} else if (newState === null && !this.heading) {
this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
}
},
timeline: function (newState, _oldState) {
@ -151,16 +162,11 @@ export default {
})
})
}
// for unread control
if (event.target.scrollTop > 10 && this.heading) {
this.$store.commit('TimelineSpace/Contents/Home/changeHeading', false)
} else if (event.target.scrollTop <= 5 && !this.heading) {
const currentPos = this.unread.length
if (currentPos === 0) {
this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
}
this.$store.commit('TimelineSpace/Contents/Home/mergeTimeline')
this.$refs.scroller.scrollToItem(currentPos)
this.$store.commit('TimelineSpace/Contents/Home/changeHeading', true)
}
},
updateToot(message) {
@ -224,21 +230,6 @@ export default {
height: 100%;
}
.unread {
position: fixed;
right: 24px;
top: 48px;
background-color: rgba(0, 0, 0, 0.7);
color: #ffffff;
padding: 4px 8px;
border-radius: 0 0 2px 2px;
z-index: 1;
&:empty {
display: none;
}
}
.loading-card {
height: 60px;
}

16
src/renderer/store/TimelineSpace/Contents/Home.ts
View File

@ -12,14 +12,12 @@ export type HomeState = {
showReblogs: boolean
showReplies: boolean
timeline: Array<Entity.Status>
unreadTimeline: Array<Entity.Status>
}
const state = (): HomeState => ({
lazyLoading: false,
heading: true,
timeline: [],
unreadTimeline: [],
showReblogs: true,
showReplies: true
})
@ -29,7 +27,6 @@ export const MUTATION_TYPES = {
CHANGE_HEADING: 'changeHeading',
APPEND_TIMELINE: 'appendTimeline',
UPDATE_TIMELINE: 'updateTimeline',
MERGE_TIMELINE: 'mergeTimeline',
INSERT_TIMELINE: 'insertTimeline',
ARCHIVE_TIMELINE: 'archiveTimeline',
CLEAR_TIMELINE: 'clearTimeline',
@ -48,21 +45,13 @@ const mutations: MutationTree<HomeState> = {
},
[MUTATION_TYPES.APPEND_TIMELINE]: (state, update: Entity.Status) => {
// Reject duplicated status in timeline
if (!state.timeline.find(item => item.id === update.id) && !state.unreadTimeline.find(item => item.id === update.id)) {
if (state.heading) {
state.timeline = [update].concat(state.timeline)
} else {
state.unreadTimeline = [update].concat(state.unreadTimeline)
}
if (!state.timeline.find(item => item.id === update.id)) {
state.timeline = [update].concat(state.timeline)
}
},
[MUTATION_TYPES.UPDATE_TIMELINE]: (state, messages: Array<Entity.Status>) => {
state.timeline = messages
},
[MUTATION_TYPES.MERGE_TIMELINE]: state => {
state.timeline = state.unreadTimeline.slice(0, 80).concat(state.timeline)
state.unreadTimeline = []
},
[MUTATION_TYPES.INSERT_TIMELINE]: (state, messages: Array<Entity.Status>) => {
state.timeline = state.timeline.concat(messages)
},
@ -71,7 +60,6 @@ const mutations: MutationTree<HomeState> = {
},
[MUTATION_TYPES.CLEAR_TIMELINE]: state => {
state.timeline = []
state.unreadTimeline = []
},
[MUTATION_TYPES.UPDATE_TOOT]: (state, message: Entity.Status) => {
// Replace target message in homeTimeline and notifications