martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-05-04 23:45:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adjusting scroll action for thread

Browse Source
This commit is contained in:
balzack 2024-12-11 20:53:29 -08:00
parent b390c31af1
commit dd9b28f8fe
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/web/src/conversation/Conversation.module.css
View File

@ -23,11 +23,11 @@
flex-direction: column-reverse; flex-direction: column-reverse;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
overflow: auto;
width: 100%; width: 100%;
} }
.thread { .thread {
padding-top: 1024px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: fit-content; height: fit-content;

16
app/client/web/src/conversation/Conversation.tsx
View File

@ -6,7 +6,7 @@ import { IconX, IconSettings, IconHome, IconServer, IconShield, IconLock, IconEx
import { Divider, Text, ActionIcon, Loader } from '@mantine/core' import { Divider, Text, ActionIcon, Loader } from '@mantine/core'
import { Message } from '../message/Message'; import { Message } from '../message/Message';
const LOAD_MORE_POS = 12; const PAD_HEIGHT = (1024 - 64);
const LOAD_DEBOUNCE = 1000; const LOAD_DEBOUNCE = 1000;
export type MediaAsset = { export type MediaAsset = {
@ -33,12 +33,19 @@ export function Conversation() {
if (thread.current && state.loadingMore) { if (thread.current && state.loadingMore) {
thread.current.scrollTop = scrollPos.current; thread.current.scrollTop = scrollPos.current;
} else { } else {
if (scrollPos.current > scrollTop && scrollHeight - (clientHeight - scrollTop) < LOAD_MORE_POS) { if (scrollPos.current > scrollTop && scrollHeight - (clientHeight - scrollTop) < PAD_HEIGHT) {
if (scrollTop < scrollPos.current) { if (scrollTop < scrollPos.current) {
actions.more(); actions.more();
} }
scrollPos.current = (clientHeight - scrollHeight) + PAD_HEIGHT;
thread.current.scrollTop = scrollPos.current;
} else {
if (scrollTop < (clientHeight - scrollHeight) + PAD_HEIGHT) {
scrollPos.current = (clientHeight - scrollHeight) + PAD_HEIGHT;
} else {
scrollPos.current = scrollTop;
}
} }
scrollPos.current = scrollTop;
} }
}; };
@ -96,9 +103,10 @@ export function Conversation() {
<IconX size={24} className={classes.close} onClick={actions.close} /> <IconX size={24} className={classes.close} onClick={actions.close} />
</div> </div>
</div> </div>
<div ref={thread} className={classes.frame} onScroll={onScroll}> <div ref={thread} className={classes.frame} style={state.loadingMore ? { overflow: 'hidden' } : { overflow: 'auto' }} onScroll={onScroll}>
{ state.loaded && ( { state.loaded && (
<div className={classes.thread}> <div className={classes.thread}>
<div className="topicPad" />
{topics} {topics}
</div> </div>
)} )}