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

drafts: Use simplebar for scrollbar.

Browse Source 
This was originally merged in #21082 in a different variation.
This commit is contained in:
Julia Bichler
2022-02-05 11:48:19 +01:00
committed by Tim Abbott
parent 9f89d7e069
commit f3964673e7
3 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
static/js/drafts.js
View File

@@ -26,6 +26,7 @@ import * as rendered_markdown from "./rendered_markdown";
import * as stream_data from "./stream_data"; import * as stream_data from "./stream_data";
import * as sub_store from "./sub_store"; import * as sub_store from "./sub_store";
import * as timerender from "./timerender"; import * as timerender from "./timerender";
import * as ui from "./ui";
import * as ui_util from "./ui_util"; import * as ui_util from "./ui_util";
import * as util from "./util"; import * as util from "./util";
@@ -498,21 +499,22 @@ function drafts_scroll(next_focus_draft_row) {
} }
activate_element(next_focus_draft_row[0].children[0]); activate_element(next_focus_draft_row[0].children[0]);
const scroll_element = ui.get_scroll_element($(".drafts-list"));
// If focused draft is first draft, scroll to the top. // If focused draft is first draft, scroll to the top.
if ($(".draft-info-box").first()[0].parentElement === next_focus_draft_row[0]) { if ($(".draft-info-box").first()[0].parentElement === next_focus_draft_row[0]) {
$(".drafts-list")[0].scrollTop = 0; scroll_element.scrollTop = 0;
} }
// If focused draft is the last draft, scroll to the bottom. // If focused draft is the last draft, scroll to the bottom.
if ($(".draft-info-box").last()[0].parentElement === next_focus_draft_row[0]) { if ($(".draft-info-box").last()[0].parentElement === next_focus_draft_row[0]) {
$(".drafts-list")[0].scrollTop = scroll_element.scrollTop = scroll_element.scrollHeight - scroll_element.height();
$(".drafts-list")[0].scrollHeight - $(".drafts-list").height();
} }
// If focused draft is cut off from the top, scroll up halfway in draft modal. // If focused draft is cut off from the top, scroll up halfway in draft modal.
if (next_focus_draft_row.position().top < 55) { if (next_focus_draft_row.position().top < 55) {
// 55 is the minimum distance from the top that will require extra scrolling. // 55 is the minimum distance from the top that will require extra scrolling.
$(".drafts-list")[0].scrollTop -= $(".drafts-list")[0].clientHeight / 2; scroll_element.scrollTop -= scroll_element.clientHeight / 2;
} }
// If focused draft is cut off from the bottom, scroll down halfway in draft modal. // If focused draft is cut off from the bottom, scroll down halfway in draft modal.
@@ -521,7 +523,7 @@ function drafts_scroll(next_focus_draft_row) {
const dist_from_bottom = $(".drafts-container")[0].clientHeight - total_dist; const dist_from_bottom = $(".drafts-container")[0].clientHeight - total_dist;
if (dist_from_bottom < -4) { if (dist_from_bottom < -4) {
// -4 is the min dist from the bottom that will require extra scrolling. // -4 is the min dist from the bottom that will require extra scrolling.
$(".drafts-list")[0].scrollTop += $(".drafts-list")[0].clientHeight / 2; scroll_element.scrollTop += scroll_element.clientHeight / 2;
} }
} }

1
static/styles/drafts.css
View File

@@ -52,6 +52,7 @@
.drafts-list { .drafts-list {
padding: 10px 0; padding: 10px 0;
overflow: auto; overflow: auto;
height: 100%;
.no-drafts { .no-drafts {
display: block; display: block;

2
static/templates/draft_table_body.hbs
View File

@@ -14,7 +14,7 @@
{{t "Pro tip: You can use 'd' to open your drafts."}} {{t "Pro tip: You can use 'd' to open your drafts."}}
</div> </div>
</div> </div>
<div class="drafts-list"> <div class="drafts-list" data-simplebar>
<div class="no-drafts"> <div class="no-drafts">
{{t 'No drafts.'}} {{t 'No drafts.'}}
</div> </div>