paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-15 19:31:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

user_circles: Introduce circle icons to typeahead.

Browse Source
This commit is contained in:
Karl Stolley
2024-11-08 14:41:39 -06:00
committed by Tim Abbott
parent f25442bac2
commit 75a82fa8a2
3 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/styles/typeahead.css
View File

@@ -51,17 +51,15 @@
outline: 0; outline: 0;
} }
/* styles defined for user-circle here only deal with positioning of user presence circles
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 { .user-circle {
width: var(--length-user-status-circle); /* 11px at 16px/1em */
height: var(--length-user-status-circle); font-size: 0.6875em;
position: relative;
left: -2px;
flex-shrink: 0;
align-self: center; align-self: center;
/* TODO: A grid rewrite of typeahead rows
should help to obviate these kinds of
fiddly spacing hacks. */
margin-right: 2px;
margin-left: -2px;
} }
.typeahead-text-container { .typeahead-text-container {

2
web/templates/typeahead_list_item.hbs
View File

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

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

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