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

emoji: Display status emoji as flexboxes in pills.

This commit is contained in:
Karl Stolley 2023-09-18 12:13:09 -05:00 committed by Tim Abbott
parent cbb0cb9a73
commit b147440c43
3 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/styles/input_pill.css
View File

@ -37,8 +37,18 @@
border-radius: 4px 0 0 4px;
}
.pill-value {
.pill-label {
/* Treat as flex container to better position status
emoji and control ellipsis on the pill value. */
display: flex;
/* Allow label to collapse for ellipsis effect. */
min-width: 0;
align-items: center;
margin: 0 5px;
}
.pill-value {
flex: 0 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

3
web/templates/input_pill.hbs
View File

@ -2,7 +2,8 @@
{{#if has_image}}
<img class="pill-image" src="{{img_src}}" />
{{/if}}
<span class="pill-value">{{ display_value }}
<span class="pill-label">
<span class="pill-value">{{ display_value }}</span>
{{~#if has_status~}}
{{~> status_emoji status_emoji_info~}}
{{~/if~}}

6
web/tests/search.test.js
View File

@ -158,13 +158,13 @@ run_test("initialize", ({mock_template}) => {
let expected_value = `<div class="search_list_item">\n <span>Search for zo</span>\n</div>\n`;
assert.equal(opts.highlighter(source[0]), expected_value);
expected_value = `<div class="search_list_item">\n <span>sent by</span>\n <span class="pill-container pill-container-btn">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1&amp;s&#x3D;50" />\n <span class="pill-value">&lt;strong&gt;Zo&lt;/strong&gt;e</span>\n <div class="exit">\n <span aria-hidden="true">&times;</span>\n </div>\n</div>\n </span>\n</div>\n`;
expected_value = `<div class="search_list_item">\n <span>sent by</span>\n <span class="pill-container pill-container-btn">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1&amp;s&#x3D;50" />\n <span class="pill-label">\n <span class="pill-value">&lt;strong&gt;Zo&lt;/strong&gt;e</span></span>\n <div class="exit">\n <span aria-hidden="true">&times;</span>\n </div>\n</div>\n </span>\n</div>\n`;
assert.equal(opts.highlighter(source[1]), expected_value);
expected_value = `<div class="search_list_item">\n <span>direct messages with</span>\n <span class="pill-container pill-container-btn">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1&amp;s&#x3D;50" />\n <span class="pill-value">&lt;strong&gt;Zo&lt;/strong&gt;e</span>\n <div class="exit">\n <span aria-hidden="true">&times;</span>\n </div>\n</div>\n </span>\n</div>\n`;
expected_value = `<div class="search_list_item">\n <span>direct messages with</span>\n <span class="pill-container pill-container-btn">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1&amp;s&#x3D;50" />\n <span class="pill-label">\n <span class="pill-value">&lt;strong&gt;Zo&lt;/strong&gt;e</span></span>\n <div class="exit">\n <span aria-hidden="true">&times;</span>\n </div>\n</div>\n </span>\n</div>\n`;
assert.equal(opts.highlighter(source[2]), expected_value);
expected_value = `<div class="search_list_item">\n <span>group direct messages including</span>\n <span class="pill-container pill-container-btn">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1&amp;s&#x3D;50" />\n <span class="pill-value">&lt;strong&gt;Zo&lt;/strong&gt;e</span>\n <div class="exit">\n <span aria-hidden="true">&times;</span>\n </div>\n</div>\n </span>\n</div>\n`;
expected_value = `<div class="search_list_item">\n <span>group direct messages including</span>\n <span class="pill-container pill-container-btn">\n <div class='pill ' tabindex=0>\n <img class="pill-image" src="https://secure.gravatar.com/avatar/0f030c97ab51312c7bbffd3966198ced?d&#x3D;identicon&amp;version&#x3D;1&amp;s&#x3D;50" />\n <span class="pill-label">\n <span class="pill-value">&lt;strong&gt;Zo&lt;/strong&gt;e</span></span>\n <div class="exit">\n <span aria-hidden="true">&times;</span>\n </div>\n</div>\n </span>\n</div>\n`;
assert.equal(opts.highlighter(source[3]), expected_value);
/* Test sorter */