oxen-io/session-desktop
1
0
Fork 0
mirror of https://github.com/oxen-io/session-desktop.git synced 2023-12-14 02:12:57 +01:00
Code Issues Projects Releases Wiki Activity

reset the highlighted message after 3 sec

Browse source 
Before this commit, when a users clicks on a quoted message, the UI
takes it to that message. If the user clicks again on the quoted
message, the green highlight of the quoted message is not shown again.
This was like this, because the highlight is based on a state change,
and clicking on the same highlighted message, does not update the state
as the clicked quoted message is still the same.

The fix is to reset the highlighted message on the state object after
the animation is done
This commit is contained in:
Audric Ackermann 2020-12-14 17:02:28 +11:00
parent e9f186065d
commit add1c2dd39
No known key found for this signature in database
GPG key ID: 999F434D76324AD4
1 changed files with 36 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
ts/components/session/conversation/SessionMessagesList.tsx
View file

@ -49,6 +49,7 @@ export class SessionMessagesList extends React.Component<Props, State> {
private readonly messageContainerRef: React.RefObject<any>;
private scrollOffsetBottomPx: number = Number.MAX_VALUE;
private ignoreScrollEvents: boolean;
private timeoutResetQuotedScroll: NodeJS.Timeout | null = null;
public constructor(props: Props) {
super(props);
@ -79,6 +80,12 @@ export class SessionMessagesList extends React.Component<Props, State> {
setTimeout(this.scrollToUnread, 0);
}
public componentWillUnmount() {
if (this.timeoutResetQuotedScroll) {
clearTimeout(this.timeoutResetQuotedScroll);
}
}
public componentDidUpdate(prevProps: Props, _prevState: State) {
const isSameConvo =
prevProps.conversationKey === this.props.conversationKey;
@ -91,6 +98,7 @@ export class SessionMessagesList extends React.Component<Props, State> {
// displayed conversation changed. We have a bit of cleaning to do here
this.scrollOffsetBottomPx = Number.MAX_VALUE;
this.ignoreScrollEvents = true;
this.setupTimeoutResetQuotedHighlightedMessage(true);
this.setState(
{
showScrollButton: false,
@ -463,6 +471,30 @@ export class SessionMessagesList extends React.Component<Props, State> {
}
}
/**
* Could not find a better name, but when we click on a quoted message,
* the UI takes us there and highlights it.
* If the user clicks again on this message, we want this highlight to be
* shown once again.
*
* So we need to reset the state of of the highlighted message so when the users clicks again,
* the highlight is shown once again
*/
private setupTimeoutResetQuotedHighlightedMessage(clearOnly = false) {
if (this.timeoutResetQuotedScroll) {
clearTimeout(this.timeoutResetQuotedScroll);
}
// only clear the timeout, do not schedule once again
if (clearOnly) {
return;
}
if (this.state.animateQuotedMessageId !== undefined) {
this.timeoutResetQuotedScroll = global.setTimeout(() => {
this.setState({ animateQuotedMessageId: undefined });
}, 3000);
}
}
private scrollToMessage(messageId: string, smooth: boolean = false) {
const topUnreadMessage = document.getElementById(messageId);
topUnreadMessage?.scrollIntoView({
@ -472,7 +504,10 @@ export class SessionMessagesList extends React.Component<Props, State> {
// we consider that a `smooth` set to true, means it's a quoted message, so highlight this message on the UI
if (smooth) {
this.setState({ animateQuotedMessageId: messageId });
this.setState(
{ animateQuotedMessageId: messageId },
this.setupTimeoutResetQuotedHighlightedMessage
);
}
const messageContainer = this.messageContainerRef.current;