Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(MessagesList): Fix chat jumping on reference widgets #11844

Closed
wants to merge 1 commit into from
Closed

fix(MessagesList): Fix chat jumping on reference widgets #11844

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 27 additions & 20 deletions src/components/MessagesList/MessagesList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,26 +35,28 @@
<ul v-if="displayMessagesLoader" class="scroller__loading icon-loading" />
</TransitionWrapper>

<ul v-for="(list, dateTimestamp) in messagesGroupedByDateByAuthor"
:key="`section_${dateTimestamp}`"
:ref="`dateGroup-${token}`"
:data-date-timestamp="dateTimestamp"
:class="{'has-sticky': dateTimestamp === stickyDate}">
<li class="messages-group__date">
<span class="messages-group__date-text" role="heading" aria-level="3">
{{ dateSeparatorLabels[dateTimestamp] }}
</span>
</li>
<component :is="messagesGroupComponent(group)"
v-for="group in list"
:key="group.id"
ref="messagesGroup"
class="messages-group"
:token="token"
:messages="group.messages"
:previous-message-id="group.previousMessageId"
:next-message-id="group.nextMessageId" />
</ul>
<div class="messages-list-wrapper__reversed">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just apply these styles to 'scroller' class?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, it will put unscrollable list ( messages that do no exceed the view) at the bottom.

Copy link
Contributor Author

@DorraJaouad DorraJaouad Mar 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We probably should reverse groups too

I would yes, it will be good but it's not critical to change atm (usually groups are short around 4 to 5 messages).
and please let's keep this for fixing reference widgets jumping only here. Otherwise, it will be huge.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm very unsure about this. Also seeing the internal reports with people having 10 files locked with text because they opened a talk room and the widget stealing the focus while typing a message, make me prefer an "opt out" of the widgets :-/

also turning around the loading order will not work for the context load and basically it will immediately jump to the end marking everything read?

<ul v-for="[dateTimestamp, list] in Object.entries(messagesGroupedByDateByAuthor).reverse()"
:key="`section_${dateTimestamp}`"
:ref="`dateGroup-${token}`"
:data-date-timestamp="dateTimestamp"
:class="{'has-sticky': dateTimestamp === stickyDate}">
<li class="messages-group__date">
<span class="messages-group__date-text" role="heading" aria-level="3">
{{ dateSeparatorLabels[dateTimestamp] }}
</span>
</li>
<component :is="messagesGroupComponent(group)"
v-for="group in list"
:key="group.id"
ref="messagesGroup"
class="messages-group"
:token="token"
:messages="group.messages"
:previous-message-id="group.previousMessageId"
:next-message-id="group.nextMessageId" />
</ul>
</div>

<template v-if="showLoadingAnimation">
<LoadingPlaceholder type="messages"
Expand Down Expand Up @@ -1367,4 +1369,9 @@ export default {
opacity: 1;
transition: opacity 0s;
}

.messages-list-wrapper__reversed {
display: flex;
flex-direction: column-reverse;
}
</style>
Loading