paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-10 00:46:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

message_scroll: Use CSS transition for scroll to bottom button.

Browse Source 
We are abandoning jQuery animation because it build up queue
when there is continous switch in animation state.
i.e When user goes ↑↓↑↓↑↓… at the bottom.

Also added `aria-hidden` to `#scroll-to-bottom-button-container` so
that this widget doesn't interfere with screen readers.
This commit is contained in:
Riken Shah
2022-07-06 05:05:37 +00:00
committed by Tim Abbott
parent 2299aa3382
commit 3ba89e7779
4 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/js/compose_ui.js
View File

@@ -172,7 +172,7 @@ export function make_compose_box_full_size() {
$(".collapse_composebox_button").show(); $(".collapse_composebox_button").show();
$(".expand_composebox_button").hide(); $(".expand_composebox_button").hide();
$("#scroll-to-bottom-button-container").hide(); $("#scroll-to-bottom-button-container").removeClass("show");
$("#compose-textarea").trigger("focus"); $("#compose-textarea").trigger("focus");
} }

8
static/js/message_scroll.js
View File

@@ -137,7 +137,7 @@ export function hide_scroll_to_bottom() {
if (message_viewport.bottom_message_visible() || message_lists.current.empty()) { if (message_viewport.bottom_message_visible() || message_lists.current.empty()) {
// If last message is visible, just hide the // If last message is visible, just hide the
// scroll to bottom button. // scroll to bottom button.
$show_scroll_to_bottom_button.fadeOut(500); $show_scroll_to_bottom_button.removeClass("show");
return; return;
} }
@@ -148,7 +148,7 @@ export function hide_scroll_to_bottom() {
!narrow_state.narrowed_by_topic_reply() && !narrow_state.narrowed_by_topic_reply() &&
!$show_scroll_to_bottom_button.get(0).matches(":hover") !$show_scroll_to_bottom_button.get(0).matches(":hover")
) { ) {
$show_scroll_to_bottom_button.fadeOut(500); $show_scroll_to_bottom_button.removeClass("show");
} }
}, 3000); }, 3000);
} }
@@ -162,7 +162,7 @@ export function show_scroll_to_bottom_button() {
} }
clearTimeout(hide_scroll_to_bottom_timer); clearTimeout(hide_scroll_to_bottom_timer);
$("#scroll-to-bottom-button-container").fadeIn(500); $("#scroll-to-bottom-button-container").addClass("show");
} }
$(document).on("keydown", (e) => { $(document).on("keydown", (e) => {
@@ -172,7 +172,7 @@ $(document).on("keydown", (e) => {
// Hide scroll to bottom button on any keypress. // Hide scroll to bottom button on any keypress.
// Keyboard users are very less likely to use this button. // Keyboard users are very less likely to use this button.
$("#scroll-to-bottom-button-container").fadeOut(500); $("#scroll-to-bottom-button-container").removeClass("show");
}); });
export function is_actively_scrolling() { export function is_actively_scrolling() {

11
static/styles/zulip.css
View File

@@ -2976,11 +2976,18 @@ div.topic_edit_spinner .loading_indicator_spinner {
} }
#scroll-to-bottom-button-container { #scroll-to-bottom-button-container {
display: none; display: block;
z-index: 3;
position: absolute; position: absolute;
bottom: 41px; bottom: 41px;
right: 0; right: 0;
visibility: hidden;
opacity: 0;
transition: visibility 500ms, opacity 500ms ease-in-out;
&.show {
visibility: visible;
opacity: 1;
}
#scroll-to-bottom-button-clickable-area { #scroll-to-bottom-button-clickable-area {
width: 60px; width: 60px;

2
static/templates/compose.hbs
View File

@@ -3,7 +3,7 @@
helps us align it at various screens sizes with helps us align it at various screens sizes with
minimal css and no JS. We keep it `position: absolute` to prevent minimal css and no JS. We keep it `position: absolute` to prevent
it changing compose box layout in any way. --}} it changing compose box layout in any way. --}}
<div id="scroll-to-bottom-button-container"> <div id="scroll-to-bottom-button-container" aria-hidden="true">
<div id="scroll-to-bottom-button-clickable-area" data-tooltip-template-id="scroll-to-bottom-button-tooltip"> <div id="scroll-to-bottom-button-clickable-area" data-tooltip-template-id="scroll-to-bottom-button-tooltip">
<div id="scroll-to-bottom-button"> <div id="scroll-to-bottom-button">
<i class="fa fa-chevron-down"></i> <i class="fa fa-chevron-down"></i>