Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

buddy_list: Add span for search section of header. 

This is in preparation for adding a three-dot menu to the header,
which we don't want to be a click/hover target in the way the
search parts are.
This commit is contained in:
evykassirer 2024-09-30 16:07:24 -07:00 committed by Tim Abbott
parent 17252a70ed
commit 0dedd00112
6 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/tippyjs.ts
View File

@ -679,7 +679,7 @@ export function initialize(): void {
});
tippy.delegate("body", {
target: "#userlist-header",
target: "#userlist-header-search",
placement: "top",
appendTo: () => document.body,
onShow(instance) {

2
web/src/user_search.ts
View File

@ -25,7 +25,7 @@ export class UserSearch {
$("#clear_search_people_button").on("click", () => {
this.clear_search();
});
$("#userlist-header").on("click", () => {
$("#userlist-header-search").on("click", () => {
this.toggle_filter_displayed();
});

9
web/styles/right_sidebar.css
View File

@ -352,10 +352,17 @@ $user_status_emoji_width: 24px;
cursor: pointer;
display: grid;
grid-template-rows: var(--line-height-sidebar-row-prominent);
grid-template-columns: minmax(0, 1fr) 20px;
grid-template-columns: minmax(0, 1fr);
align-items: center;
margin-right: var(--width-simplebar-scroll-hover);
#userlist-header-search {
display: grid;
grid-template-rows: var(--line-height-sidebar-row-prominent);
grid-template-columns: minmax(0, 1fr) 20px;
align-items: center;
}
#userlist-title {
margin: 0;
}

10
web/templates/right_sidebar.hbs
View File

@ -2,10 +2,12 @@
<div class="right-sidebar-items">
<div id="user-list">
<div id="userlist-header">
<h4 class='right-sidebar-title' id='userlist-title'>
{{t 'USERS' }}
</h4>
<i id="user_filter_icon" class="fa fa-search"></i>
<span id="userlist-header-search">
<h4 class='right-sidebar-title' id='userlist-title'>
{{t 'USERS' }}
</h4>
<i id="user_filter_icon" class="fa fa-search"></i>
</span>
</div>
<div class="notdisplayed" id="user_search_section">
<input class="user-list-filter home-page-input filter_text_input" type="text" autocomplete="off" placeholder="{{t 'Search people' }}" />

2
web/tests/activity.test.js
View File

@ -374,7 +374,7 @@ test("handlers", ({override, override_rewire, mock_template}) => {
(function test_click_header_filter() {
init();
const e = {};
const handler = $("#userlist-header").get_on_handler("click");
const handler = $("#userlist-header-search").get_on_handler("click");
simulate_right_column_buddy_list();

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

@ -242,7 +242,7 @@ test("click on user header to toggle display", ({override}) => {
$user_filter.val("bla");
$("#userlist-header").trigger("click");
$("#userlist-header-search").trigger("click");
assert.ok($("#user_search_section").hasClass("notdisplayed"));
assert.equal($user_filter.val(), "");
@ -251,7 +251,7 @@ test("click on user header to toggle display", ({override}) => {
return $.create("sidebar").addClass("column-right");
};
$("#userlist-header").trigger("click");
$("#userlist-header-search").trigger("click");
assert.equal($("#user_search_section").hasClass("notdisplayed"), false);
});