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

refs #3301 Fix scrolling in DirectMessages

This commit is contained in:
AkiraFukushima 2022-06-06 23:14:00 +09:00
parent e82665931b
commit 05fda6e0ed
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
4 changed files with 68 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
spec/renderer/integration/store/TimelineSpace/Contents/DirectMessages.spec.ts
View File

@ -135,6 +135,7 @@ let state = (): DirectMessagesState => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: []
}
}
@ -203,6 +204,7 @@ describe('Home', () => {
return {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status1]
}
}

6
spec/renderer/unit/store/TimelineSpace/Contents/DirectMessages.spec.ts
View File

@ -139,6 +139,7 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -153,6 +154,7 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, rebloggedStatus]
}
})
@ -170,6 +172,7 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [status2, status1]
}
})
@ -184,6 +187,7 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: true,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})
@ -200,6 +204,7 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [status2, status1]
}
})
@ -214,6 +219,7 @@ describe('TimelineSpace/Contents/DirectMessages', () => {
state = {
lazyLoading: false,
heading: false,
scrolling: false,
timeline: [rebloggedStatus, status2, status1]
}
})

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

@ -15,6 +15,7 @@
@focusPrev="focusPrev"
@focusRight="focusSidebar"
@selectToot="focusToot(item)"
@sizeChanged="sizeChanged"
>
</toot>
</DynamicScrollerItem>
@ -30,6 +31,7 @@
<script lang="ts">
import { defineComponent, ref, computed, onMounted, onBeforeUpdate, onBeforeUnmount, onUnmounted, watch } from 'vue'
import moment from 'moment'
import { useStore } from '@/store'
import { useI18next } from 'vue3-i18next'
import { useRoute } from 'vue-router'
@ -38,6 +40,7 @@ import { Entity } from 'megalodon'
import useReloadable from '@/components/utils/reloadable'
import Toot from '@/components/organisms/Toot.vue'
import { EventEmitter } from '@/components/event'
import { ScrollPosition } from '@/components/utils/scroll'
import { ACTION_TYPES, MUTATION_TYPES } from '@/store/TimelineSpace/Contents/DirectMessages'
import { MUTATION_TYPES as SIDE_MENU_MUTATION } from '@/store/TimelineSpace/SideMenu'
import { MUTATION_TYPES as TIMELINE_MUTATION, ACTION_TYPES as TIMELINE_ACTION } from '@/store/TimelineSpace'
@ -55,11 +58,16 @@ export default defineComponent({
const { reloadable } = useReloadable(store, route, i18n)
const focusedId = ref<string | null>(null)
const scrollPosition = ref<ScrollPosition | null>(null)
const observer = ref<ResizeObserver | null>(null)
const resizeTime = ref<moment.Moment | null>(null)
const scrollTime = ref<moment.Moment | null>(null)
const scroller = ref<any>()
const timeline = computed(() => store.state.TimelineSpace.Contents.DirectMessages.timeline)
const lazyLoading = computed(() => store.state.TimelineSpace.Contents.DirectMessages.lazyLoading)
const heading = computed(() => store.state.TimelineSpace.Contents.DirectMessages.heading)
const scrolling = computed(() => store.state.TimelineSpace.Contents.DirectMessages.scrolling)
const openSideBar = computed(() => store.state.TimelineSpace.Contents.SideBar.openSideBar)
const startReload = computed(() => store.state.TimelineSpace.HeaderMenu.reload)
const unreadNotification = computed(() => store.state.TimelineSpace.timelineSetting.unreadNotification)
@ -75,11 +83,27 @@ export default defineComponent({
store.commit(`TimelineSpace/Contents/${CONTENTS_ACTION.CHANGE_LOADING}`, false)
})
}
const el = document.getElementById('scroller')
if (el) {
scrollPosition.value = new ScrollPosition(el)
scrollPosition.value.prepare()
observer.value = new ResizeObserver(() => {
if (scrollPosition.value && !heading.value && !lazyLoading.value && !scrolling.value) {
resizeTime.value = moment()
scrollPosition.value?.restore()
}
})
const scrollWrapper = el.getElementsByClassName('vue-recycle-scroller__item-wrapper')[0]
observer.value.observe(scrollWrapper)
}
})
onBeforeUpdate(() => {
if (store.state.TimelineSpace.SideMenu.unreadDirectMessagesTimeline && heading.value) {
store.commit(`TimelineSpace/SideMenu/${SIDE_MENU_MUTATION.CHANGE_UNREAD_DIRECT_MESSAGES_TIMELINE}`, false)
}
if (scrollPosition.value) {
scrollPosition.value.prepare()
}
})
onBeforeUnmount(() => {
if (!unreadNotification.value.direct) {
@ -113,6 +137,13 @@ export default defineComponent({
store.dispatch(`TimelineSpace/${TIMELINE_ACTION.START_DIRECT_MESSAGES_STREAMING}`)
}
const onScroll = (event: Event) => {
if (moment().diff(resizeTime.value) < 500) {
return
}
scrollTime.value = moment()
if (!scrolling.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
}
// for lazyLoading
if (
(event.target as HTMLElement)!.clientHeight + (event.target as HTMLElement)!.scrollTop >=
@ -125,6 +156,12 @@ export default defineComponent({
if (statuses === null) {
return
}
if (statuses.length > 0) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
})
.catch(() => {
ElMessage({
@ -139,6 +176,14 @@ export default defineComponent({
} else if ((event.target as HTMLElement)!.scrollTop <= 10 && !heading.value) {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_HEADING}`, true)
}
setTimeout(() => {
const now = moment()
if (now.diff(scrollTime.value) >= 150) {
scrollTime.value = null
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}
}, 150)
}
const updateToot = (message: Entity.Status) => {
store.commit(`${space}/${MUTATION_TYPES.UPDATE_TOOT}`, message)
@ -178,6 +223,12 @@ export default defineComponent({
const focusSidebar = () => {
EventEmitter.emit('focus-sidebar')
}
const sizeChanged = () => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, true)
setTimeout(() => {
store.commit(`${space}/${MUTATION_TYPES.CHANGE_SCROLLING}`, false)
}, 500)
}
return {
timeline,
@ -192,7 +243,8 @@ export default defineComponent({
focusToot,
openSideBar,
heading,
upper
upper,
sizeChanged
}
}
})

8
src/renderer/store/TimelineSpace/Contents/DirectMessages.ts
View File

@ -5,12 +5,14 @@ import { RootState } from '@/store'
export type DirectMessagesState = {
lazyLoading: boolean
heading: boolean
scrolling: boolean
timeline: Array<Entity.Status>
}
const state = (): DirectMessagesState => ({
lazyLoading: false,
heading: true,
scrolling: false,
timeline: []
})
@ -23,7 +25,8 @@ export const MUTATION_TYPES = {
ARCHIVE_TIMELINE: 'archiveTimeline',
CLEAR_TIMELINE: 'clearTimeline',
UPDATE_TOOT: 'updateToot',
DELETE_TOOT: 'deleteToot'
DELETE_TOOT: 'deleteToot',
CHANGE_SCROLLING: 'changeScrolling'
}
const mutations: MutationTree<DirectMessagesState> = {
@ -76,6 +79,9 @@ const mutations: MutationTree<DirectMessagesState> = {
return toot.id !== id
}
})
},
[MUTATION_TYPES.CHANGE_SCROLLING]: (state, value: boolean) => {
state.scrolling = value
}
}