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", { tippy.delegate("body", {
target: "#userlist-header", target: "#userlist-header-search",
placement: "top", placement: "top",
appendTo: () => document.body, appendTo: () => document.body,
onShow(instance) { onShow(instance) {

2
web/src/user_search.ts
View File

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

9
web/styles/right_sidebar.css
View File

@ -352,10 +352,17 @@ $user_status_emoji_width: 24px;
cursor: pointer; cursor: pointer;
display: grid; display: grid;
grid-template-rows: var(--line-height-sidebar-row-prominent); 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; align-items: center;
margin-right: var(--width-simplebar-scroll-hover); 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 { #userlist-title {
margin: 0; margin: 0;
} }

2
web/templates/right_sidebar.hbs
View File

@ -2,10 +2,12 @@
<div class="right-sidebar-items"> <div class="right-sidebar-items">
<div id="user-list"> <div id="user-list">
<div id="userlist-header"> <div id="userlist-header">
<span id="userlist-header-search">
<h4 class='right-sidebar-title' id='userlist-title'> <h4 class='right-sidebar-title' id='userlist-title'>
{{t 'USERS' }} {{t 'USERS' }}
</h4> </h4>
<i id="user_filter_icon" class="fa fa-search"></i> <i id="user_filter_icon" class="fa fa-search"></i>
</span>
</div> </div>
<div class="notdisplayed" id="user_search_section"> <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' }}" /> <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() { (function test_click_header_filter() {
init(); init();
const e = {}; const e = {};
const handler = $("#userlist-header").get_on_handler("click"); const handler = $("#userlist-header-search").get_on_handler("click");
simulate_right_column_buddy_list(); 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"); $user_filter.val("bla");
$("#userlist-header").trigger("click"); $("#userlist-header-search").trigger("click");
assert.ok($("#user_search_section").hasClass("notdisplayed")); assert.ok($("#user_search_section").hasClass("notdisplayed"));
assert.equal($user_filter.val(), ""); assert.equal($user_filter.val(), "");
@ -251,7 +251,7 @@ test("click on user header to toggle display", ({override}) => {
return $.create("sidebar").addClass("column-right"); return $.create("sidebar").addClass("column-right");
}; };
$("#userlist-header").trigger("click"); $("#userlist-header-search").trigger("click");
assert.equal($("#user_search_section").hasClass("notdisplayed"), false); assert.equal($("#user_search_section").hasClass("notdisplayed"), false);
}); });