me/offline-twitter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve scrolling behavior in DMs when paging back through a conversation

Browse Source
This commit is contained in:
Alessio 2024-05-04 17:50:38 -07:00
parent 9b5f1d33cf
commit ca4d11cb05
2 changed files with 31 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
internal/webserver/static/styles.css
View File

@ -1268,14 +1268,13 @@ main {
* margin: 0.5em 0; * margin: 0.5em 0;
*/ */
/* When a replying-to box is clicked, it scrolls that message into view and highlights it for a second */
transition: background-color 2s ease; transition: background-color 2s ease;
&.highlighted { &.highlighted {
background-color: var(--color-twitter-off-white-dark); background-color: var(--color-twitter-off-white-dark);
transition: background-color 0.5s ease; transition: background-color 0.5s ease;
} }
.dm-message__row { .dm-message__row {
align-items: stretch; align-items: stretch;

46
internal/webserver/tpl/tweet_page_includes/chat_view.tpl
View File

@ -81,22 +81,6 @@
</div> </div>
</div> </div>
{{end}} {{end}}
<script>
/**
* Add on-click listeners to the 'replying-to' previews; they should scroll the replied-to
* message into view, if possible.
*/
function doReplyTo(replying_to_box) {
const replied_to_id = replying_to_box.getAttribute("data-replying-to-message-id");
const replied_to_message = document.querySelector('[data-message-id="' + replied_to_id + '"]');
replied_to_message.scrollIntoView({behavior: "smooth", block: "center"});
replied_to_message.classList.add("highlighted");
setTimeout(function() {
replied_to_message.classList.remove("highlighted");
}, 1000);
}
</script>
{{end}} {{end}}
{{define "messages-with-poller"}} {{define "messages-with-poller"}}
@ -196,6 +180,21 @@
// Scroll to the bottom of the chat window on initial page load // Scroll to the bottom of the chat window on initial page load
chat_messages.scrollTop = chat_messages.scrollHeight; chat_messages.scrollTop = chat_messages.scrollHeight;
})(); })();
/**
* Define callback on-click handler for 'replying-to' previews; they should scroll the replied-to
* message into view, if possible.
*/
function doReplyTo(replying_to_box) {
const replied_to_id = replying_to_box.getAttribute("data-replying-to-message-id");
const replied_to_message = document.querySelector('[data-message-id="' + replied_to_id + '"]');
replied_to_message.scrollIntoView({behavior: "smooth", block: "center"});
replied_to_message.classList.add("highlighted");
setTimeout(function() {
replied_to_message.classList.remove("highlighted");
}, 1000);
}
</script> </script>
{{end}} {{end}}
@ -234,4 +233,19 @@
{{define "messages-top"}} {{define "messages-top"}}
{{template "conversation-top" .}} {{template "conversation-top" .}}
{{template "messages" .}} {{template "messages" .}}
<script>
/**
* Scroll the last message into view
*/
(function() {
const last_message = document.querySelector(
'[data-message-id="{{ index .MessageIDs (sub (len .MessageIDs) 1)}}"]'
);
last_message.scrollIntoView({behavior: "instant", block: "start"});
last_message.classList.add("highlighted");
setTimeout(function() {
last_message.classList.remove("highlighted");
}, 1000);
})();
</script>
{{end}} {{end}}