bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'hotkeys-thread' into 'develop'

Browse source 
Hotkey navigation in threads

See merge request soapbox-pub/soapbox-fe!1460
This commit is contained in:
marcin mikołajczak 2022-05-28 06:22:56 +00:00
commit 6d8d92cd1b
1 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
app/soapbox/features/status/index.tsx
View file

@ -496,15 +496,15 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
const { status, ancestorsIds, descendantsIds } = this.props; const { status, ancestorsIds, descendantsIds } = this.props;
if (id === status.id) { if (id === status.id) {
this._selectChild(ancestorsIds.size - 1, true); this._selectChild(ancestorsIds.size - 1);
} else { } else {
let index = ImmutableList(ancestorsIds).indexOf(id); let index = ImmutableList(ancestorsIds).indexOf(id);
if (index === -1) { if (index === -1) {
index = ImmutableList(descendantsIds).indexOf(id); index = ImmutableList(descendantsIds).indexOf(id);
this._selectChild(ancestorsIds.size + index, true); this._selectChild(ancestorsIds.size + index);
} else { } else {
this._selectChild(index - 1, true); this._selectChild(index - 1);
} }
} }
} }
@ -513,15 +513,15 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
const { status, ancestorsIds, descendantsIds } = this.props; const { status, ancestorsIds, descendantsIds } = this.props;
if (id === status.id) { if (id === status.id) {
this._selectChild(ancestorsIds.size + 1, false); this._selectChild(ancestorsIds.size + 1);
} else { } else {
let index = ImmutableList(ancestorsIds).indexOf(id); let index = ImmutableList(ancestorsIds).indexOf(id);
if (index === -1) { if (index === -1) {
index = ImmutableList(descendantsIds).indexOf(id); index = ImmutableList(descendantsIds).indexOf(id);
this._selectChild(ancestorsIds.size + index + 2, false); this._selectChild(ancestorsIds.size + index + 2);
} else { } else {
this._selectChild(index + 1, false); this._selectChild(index + 1);
} }
} }
} }
@ -544,19 +544,18 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
firstEmoji?.focus(); firstEmoji?.focus();
}; };
_selectChild(index: number, align_top: boolean) { _selectChild(index: number) {
const container = this.node; this.scroller?.scrollIntoView({
if (!container) return; index,
const element = container.querySelectorAll('.focusable')[index] as HTMLButtonElement; behavior: 'smooth',
done: () => {
const element = document.querySelector<HTMLDivElement>(`#thread [data-index="${index}"] .focusable`);
if (element) { if (element) {
if (align_top && container.scrollTop > element.offsetTop) {
element.scrollIntoView(true);
} else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
element.scrollIntoView(false);
}
element.focus(); element.focus();
} }
},
});
} }
renderTombstone(id: string) { renderTombstone(id: string) {
@ -791,6 +790,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
<Stack space={2}> <Stack space={2}>
<div ref={this.setRef} className='thread'> <div ref={this.setRef} className='thread'>
<ScrollableList <ScrollableList
id='thread'
ref={this.setScrollerRef} ref={this.setScrollerRef}
onRefresh={this.handleRefresh} onRefresh={this.handleRefresh}
hasMore={!!this.state.next} hasMore={!!this.state.next}