martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-23 18:15:19 +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-grow: 1;
flex-shrink: 1;
overflow: auto;
width: 100%;
}
.thread {
padding-top: 1024px;
display: flex;
flex-direction: column;
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 { Message } from '../message/Message';
const LOAD_MORE_POS = 12;
const PAD_HEIGHT = (1024 - 64);
const LOAD_DEBOUNCE = 1000;
export type MediaAsset = {
@ -33,12 +33,19 @@ export function Conversation() {
if (thread.current && state.loadingMore) {
thread.current.scrollTop = scrollPos.current;
} else {
if (scrollPos.current > scrollTop && scrollHeight - (clientHeight - scrollTop) < LOAD_MORE_POS) {
if (scrollPos.current > scrollTop && scrollHeight - (clientHeight - scrollTop) < PAD_HEIGHT) {
if (scrollTop < scrollPos.current) {
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} />
</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 && (
<div className={classes.thread}>
<div className="topicPad" />
{topics}
</div>
)}