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

user_circles: Introduce icon to user typeahead.

This commit is contained in:
Karl Stolley 2024-11-08 14:41:39 -06:00 committed by Tim Abbott
parent 6c07e64842
commit 4620e5bf0c
3 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/styles/typeahead.css
View File

@ -51,17 +51,14 @@
outline: 0;
}
/* styles defined for user_circle here only deal with positioning of user_presence_circle
in typeahead list in order to ensure they are rendered correctly in in all screen sizes.
Most of the style rules related to color, gradient etc. which are generally common throughout
the app are defined in user_circles.css and are not overridden here. */
.user_circle {
width: var(--length-user-status-circle);
height: var(--length-user-status-circle);
position: relative;
left: -2px;
flex-shrink: 0;
/* 8px at 16px/1em */
font-size: 0.5em;
align-self: center;
/* TODO: Revisit the use of flebox on these
typeahead lines to make this fiddly adjustment
unnecessary. */
margin-right: 1px;
}
.typeahead-text-container {

2
web/templates/typeahead_list_item.hbs
View File

@ -6,7 +6,7 @@
{{/if}}
{{else if is_person}}
{{#if user_circle_class}}
<span class="{{user_circle_class}} user_circle"></span>
<span class="zulip-icon zulip-icon-user-status-tight {{user_circle_class}} user_circle"></span>
{{/if}}
{{#if has_image}}
<img class="typeahead-image" src="{{ img_src }}" />

2
web/tests/composebox_typeahead.test.cjs
View File

@ -1169,7 +1169,7 @@ test("initialize", ({override, override_rewire, mock_template}) => {
ct.get_or_set_token_for_testing("othello");
actual_value = options.highlighter_html(othello_item);
expected_value =
` <span class="user_circle_empty user_circle"></span>\n` +
` <span class="zulip-icon zulip-icon-user-status-tight user_circle_empty user_circle"></span>\n` +
` <img class="typeahead-image" src="/avatar/${othello.user_id}" />\n` +
'<div class="typeahead-text-container">\n' +
' <strong class="typeahead-strong-section">Othello, the Moor of Venice</strong> <span class="autocomplete_secondary">othello@zulip.com</span>' +