search: Remove background suggestion highlight for text search.

This commit removes the background suggestion highlight in the
search suggestion for text search suggestion.
This commit is contained in:
Pratik Chanda
2025-07-18 01:14:34 +05:30
committed by Tim Abbott
parent fe8853bcc9
commit e04e281413
3 changed files with 17 additions and 15 deletions

View File

@@ -391,6 +391,10 @@
align-items: center;
}
.search_list_item .description {
margin: 2px 0;
}
.search_list_item .pill-container {
margin: 2px 0;
/* This contains only one pill, which handles its own border */

View File

@@ -1,14 +1,12 @@
<div class="search_list_item">
{{#each pills}}
<span class="pill-container">
{{#if (eq this.type "search_user")}}
{{> search_user_pill this}}
{{else if (eq this.operator "search")}}
{{{this.description_html}}}
{{else}}
{{> input_pill this}}
{{/if}}
</span>
{{#if (eq this.operator "search")}}
<div class="description">{{{this.description_html}}}</div>
{{else if (eq this.type "search_user")}}
<span class="pill-container">{{> search_user_pill this}}</span>
{{else}}
<span class="pill-container">{{> input_pill this}}</span>
{{/if}}
{{/each}}
{{#if description_html}}<div class="description">{{{description_html}}}</div>{{/if}}
</div>

View File

@@ -115,12 +115,12 @@ run_test("initialize", ({override, override_rewire, mock_template}) => {
/* Test highlighter */
let description_html = "Search for ver";
let expected_value = `<div class="search_list_item">\n <span class="pill-container">\n ${description_html}\n </span>\n \n</div>\n`;
let expected_value = `<div class="search_list_item">\n <div class="description">Search for ver</div>\n \n</div>\n`;
assert.equal(opts.item_html(source[0]), expected_value);
const search_string = "channel: Verona";
description_html = "Stream Verona";
expected_value = `<div class="search_list_item">\n <span class="pill-container">\n <div class='pill ' tabindex=0>\n <span class="pill-label">\n <span class="pill-value">\n ${search_string}\n </span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n</div>\n </span>\n <div class="description">${description_html}</div>\n</div>\n`;
expected_value = `<div class="search_list_item">\n <span class="pill-container"><div class='pill ' tabindex=0>\n <span class="pill-label">\n <span class="pill-value">\n ${search_string}\n </span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n</div>\n</span>\n <div class="description">${description_html}</div>\n</div>\n`;
assert.equal(opts.item_html(source[1]), expected_value);
/* Test sorter */
@@ -170,7 +170,7 @@ run_test("initialize", ({override, override_rewire, mock_template}) => {
/* Test highlighter */
const description_html = "Search for zo";
let expected_value = `<div class="search_list_item">\n <span class="pill-container">\n ${description_html}\n </span>\n \n</div>\n`;
let expected_value = `<div class="search_list_item">\n <div class="description">${description_html}</div>\n \n</div>\n`;
assert.equal(opts.item_html(source[0]), expected_value);
people.add_active_user({
@@ -179,13 +179,13 @@ run_test("initialize", ({override, override_rewire, mock_template}) => {
full_name: "Zoe",
});
override(realm, "realm_enable_guest_user_indicator", true);
expected_value = `<div class="search_list_item">\n <span class="pill-container">\n <div class="user-pill-container pill" tabindex=0>\n <span class="pill-label">sender:\n </span>\n <div class="pill" data-user-id="3">\n <img class="pill-image" src="/avatar/3" />\n <div class="pill-image-border"></div>\n <span class="pill-label">\n <span class="pill-value">Zoe</span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n </div>\n</div>\n </span>\n \n</div>\n`;
expected_value = `<div class="search_list_item">\n <span class="pill-container"><div class="user-pill-container pill" tabindex=0>\n <span class="pill-label">sender:\n </span>\n <div class="pill" data-user-id="3">\n <img class="pill-image" src="/avatar/3" />\n <div class="pill-image-border"></div>\n <span class="pill-label">\n <span class="pill-value">Zoe</span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n </div>\n</div>\n</span>\n \n</div>\n`;
assert.equal(opts.item_html(source[1]), expected_value);
expected_value = `<div class="search_list_item">\n <span class="pill-container">\n <div class="user-pill-container pill" tabindex=0>\n <span class="pill-label">dm:\n </span>\n <div class="pill" data-user-id="3">\n <img class="pill-image" src="/avatar/3" />\n <div class="pill-image-border"></div>\n <span class="pill-label">\n <span class="pill-value">Zoe</span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n </div>\n</div>\n </span>\n \n</div>\n`;
expected_value = `<div class="search_list_item">\n <span class="pill-container"><div class="user-pill-container pill" tabindex=0>\n <span class="pill-label">dm:\n </span>\n <div class="pill" data-user-id="3">\n <img class="pill-image" src="/avatar/3" />\n <div class="pill-image-border"></div>\n <span class="pill-label">\n <span class="pill-value">Zoe</span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n </div>\n</div>\n</span>\n \n</div>\n`;
assert.equal(opts.item_html(source[2]), expected_value);
expected_value = `<div class="search_list_item">\n <span class="pill-container">\n <div class="user-pill-container pill" tabindex=0>\n <span class="pill-label">dm-including:\n </span>\n <div class="pill" data-user-id="3">\n <img class="pill-image" src="/avatar/3" />\n <div class="pill-image-border"></div>\n <span class="pill-label">\n <span class="pill-value">Zoe</span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n </div>\n</div>\n </span>\n \n</div>\n`;
expected_value = `<div class="search_list_item">\n <span class="pill-container"><div class="user-pill-container pill" tabindex=0>\n <span class="pill-label">dm-including:\n </span>\n <div class="pill" data-user-id="3">\n <img class="pill-image" src="/avatar/3" />\n <div class="pill-image-border"></div>\n <span class="pill-label">\n <span class="pill-value">Zoe</span></span>\n <div class="exit">\n <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n </div>\n </div>\n</div>\n</span>\n \n</div>\n`;
assert.equal(opts.item_html(source[3]), expected_value);
/* Test sorter */