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

right_sidebar: Standardize user list filter input.

Browse Source 
This follow-up commit replaces the current right sidebar user list
filter input implementation with the redesigned input component.

Fixes part of #34476.
This commit is contained in:
Sayam Samal
2025-05-26 01:00:01 +05:30
committed by Tim Abbott
parent 26f0b755af
commit f493303c2c
4 changed files with 6 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/user_search.ts
View File

@@ -21,14 +21,13 @@ export class UserSearch {
this._update_list = opts.update_list;
this._on_focus = opts.on_focus;
$("#clear_search_people_button").on("click", () => {
$("#userlist-header-search .input-button").on("click", () => {
this.clear_search();
});
this.$input.on("input", () => {
const input_is_empty = this.$input.val() === "";
buddy_data.set_is_searching_users(!input_is_empty);
$("#clear_search_people_button").toggleClass("hidden", input_is_empty);
opts.update_list();
});
this.$input.on("focus", (e) => {
@@ -54,7 +53,6 @@ export class UserSearch {
// the search widget unless it was already empty.
clear_search(): void {
buddy_data.set_is_searching_users(false);
$("#clear_search_people_button").toggleClass("hidden", true);
this.$input.val("");
this.$input.trigger("blur");

22
web/styles/right_sidebar.css
View File

@@ -511,28 +511,6 @@
padding-right: var(--width-simplebar-scroll-hover);
background-color: var(--color-background);
#userlist-header-search {
display: grid;
grid-template-rows: var(--line-height-sidebar-row-prominent);
grid-template-columns: minmax(0, 1fr) 30px;
align-items: center;
& .user-list-filter {
grid-area: 1 / 1 / 2 / 3;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
/* Prevent text from colliding with #clear_search_button */
padding-right: 28px;
height: var(--line-height-sidebar-row-prominent);
box-sizing: border-box;
}
.user-list-filter:placeholder-shown + #clear_search_people_button {
visibility: hidden;
}
}
#buddy-list-menu-icon {
color: var(--color-vdots-visible);
justify-content: center;

9
web/templates/right_sidebar.hbs
View File

@@ -2,12 +2,9 @@
<div class="right-sidebar-items">
<div id="user-list">
<div id="userlist-header">
<div id="userlist-header-search">
<input class="user-list-filter home-page-input filter_text_input" type="text" autocomplete="off" placeholder="{{t 'Filter users' }}" />
<button type="button" class="clear_search_button" id="clear_search_people_button">
<i class="zulip-icon zulip-icon-close" aria-hidden="true"></i>
</button>
</div>
{{#> input input_type="filter-input" id="userlist-header-search" icon="search" input_button_icon="close"}}
<input type="text" class="input-element user-list-filter home-page-input" autocomplete="off" placeholder="{{t 'Filter users' }}" />
{{/input}}
<span id="buddy-list-menu-icon" class="user-list-sidebar-menu-icon">
<i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i>
</span>

4
web/tests/user_search.test.cjs
View File

@@ -114,9 +114,9 @@ test("clear_search with button", ({override}) => {
override(fake_buddy_list, "populate", (user_ids) => {
assert.deepEqual(user_ids, {all_user_ids: ordered_user_ids});
});
$("#clear_search_people_button").trigger("click");
$("#userlist-header-search .input-button").trigger("click");
assert.equal($("input.user-list-filter").val(), "");
$("#clear_search_people_button").trigger("click");
$("#userlist-header-search .input-button").trigger("click");
});
test("clear_search", ({override}) => {