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

typeaheads: Reduce left padding for all elements.

Browse Source 
This required taking special care of typeaheads with user circle
and making sure long typeaheads wrap correctly.
This commit is contained in:
Aman Agrawal
2024-05-15 10:51:33 +00:00
committed by Tim Abbott
parent 52ac602acb
commit a8eff69fc2
4 changed files with 59 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/styles/compose.css
View File

@@ -1295,9 +1295,7 @@ textarea.new_message_textarea {
.typeahead-header { .typeahead-header {
margin: 0; margin: 0;
padding-left: 20px; padding: 4px 10px;
padding-right: 20px;
padding-top: 4px;
border-top: 1px solid hsl(0deg 0% 0% / 20%); border-top: 1px solid hsl(0deg 0% 0% / 20%);
display: flex; display: flex;
align-items: center; align-items: center;

30
web/styles/zulip.css
View File

@@ -800,9 +800,9 @@ strong {
word-break: break-word; word-break: break-word;
& a { & a {
display: block; display: flex;
padding: 3px 20px; padding: 3px 10px;
clear: both; gap: 5px;
font-weight: normal; font-weight: normal;
line-height: 20px; line-height: 20px;
color: var(--color-dropdown-item); color: var(--color-dropdown-item);
@@ -829,12 +829,18 @@ strong {
.user_circle { .user_circle {
width: var(--length-user-status-circle); width: var(--length-user-status-circle);
height: var(--length-user-status-circle); height: var(--length-user-status-circle);
margin: 0 5px 0 -6px;
position: relative; position: relative;
float: left; left: -2px;
top: 6px; flex-shrink: 0;
right: 8px; align-self: center;
display: inline-block; }
.typeahead-text-container {
align-self: center;
& > * {
margin-right: 3px;
}
} }
} }
} }
@@ -1366,11 +1372,6 @@ div.focused-message-list {
display: inline-block; display: inline-block;
height: 21px; height: 21px;
width: 21px; width: 21px;
position: relative;
margin-top: -4px;
vertical-align: middle;
top: 2px;
right: 8px;
border-radius: 4px; border-radius: 4px;
/* For FontAwesome icons and zulip icons used in place of images for some users. */ /* For FontAwesome icons and zulip icons used in place of images for some users. */
@@ -1382,8 +1383,7 @@ div.focused-message-list {
} }
&.no-presence-circle { &.no-presence-circle {
margin-left: 9px; margin-left: 14px;
top: 3px;
} }
} }

6
web/templates/typeahead_list_item.hbs
View File

@@ -4,7 +4,6 @@
{{else}} {{else}}
<span class='emoji emoji-{{ emoji_code }}'></span> <span class='emoji emoji-{{ emoji_code }}'></span>
{{/if}} {{/if}}
&nbsp;&nbsp;
{{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="{{user_circle_class}} user_circle"></span>
@@ -17,6 +16,8 @@
{{else if is_user_group}} {{else if is_user_group}}
<i class="typeahead-image zulip-icon zulip-icon-triple-users no-presence-circle" aria-hidden="true"></i> <i class="typeahead-image zulip-icon zulip-icon-triple-users no-presence-circle" aria-hidden="true"></i>
{{/if}} {{/if}}
{{!-- Separate container to ensure overflowing text remains in this container. --}}
<div class="typeahead-text-container">
<strong class="typeahead-strong-section"> <strong class="typeahead-strong-section">
{{~#if stream}} {{~#if stream}}
{{> inline_decorated_stream_name stream=stream }} {{> inline_decorated_stream_name stream=stream }}
@@ -34,13 +35,12 @@
{{> status_emoji status_emoji_info}} {{> status_emoji status_emoji_info}}
{{~/if}} {{~/if}}
{{~#if has_secondary}} {{~#if has_secondary}}
&nbsp;&nbsp;
<small class="autocomplete_secondary"> <small class="autocomplete_secondary">
{{~ secondary ~}} {{~ secondary ~}}
</small> </small>
{{#if is_unsubscribed}} {{#if is_unsubscribed}}
&nbsp;
<span class="fa fa-exclamation-triangle unsubscribed_icon" <span class="fa fa-exclamation-triangle unsubscribed_icon"
title="{{t 'You are not currently subscribed to this channel.' }}"></span> title="{{t 'You are not currently subscribed to this channel.' }}"></span>
{{/if}} {{/if}}
{{~/if}} {{~/if}}
</div>

22
web/tests/composebox_typeahead.test.js
View File

@@ -894,18 +894,24 @@ test("initialize", ({override, override_rewire, mock_template}) => {
// options.highlighter_html() // options.highlighter_html()
options.query = "Kro"; options.query = "Kro";
actual_value = options.highlighter_html("kronor"); actual_value = options.highlighter_html("kronor");
expected_value = '<strong class="typeahead-strong-section">kronor</strong>'; expected_value =
'<div class="typeahead-text-container">\n' +
' <strong class="typeahead-strong-section">kronor </strong></div>\n';
assert.equal(actual_value, expected_value); assert.equal(actual_value, expected_value);
// Highlighted content should be escaped. // Highlighted content should be escaped.
options.query = "<"; options.query = "<";
actual_value = options.highlighter_html("<&>"); actual_value = options.highlighter_html("<&>");
expected_value = '<strong class="typeahead-strong-section">&lt;&amp;&gt;</strong>'; expected_value =
'<div class="typeahead-text-container">\n' +
' <strong class="typeahead-strong-section">&lt;&amp;&gt; </strong></div>\n';
assert.equal(actual_value, expected_value); assert.equal(actual_value, expected_value);
options.query = "even m"; options.query = "even m";
actual_value = options.highlighter_html("even more ice"); actual_value = options.highlighter_html("even more ice");
expected_value = '<strong class="typeahead-strong-section">even more ice</strong>'; expected_value =
'<div class="typeahead-text-container">\n' +
' <strong class="typeahead-strong-section">even more ice </strong></div>\n';
assert.equal(actual_value, expected_value); assert.equal(actual_value, expected_value);
// options.sorter() // options.sorter()
@@ -1129,8 +1135,9 @@ test("initialize", ({override, override_rewire, mock_template}) => {
expected_value = expected_value =
` <span class="user_circle_empty user_circle"></span>\n` + ` <span class="user_circle_empty user_circle"></span>\n` +
` <img class="typeahead-image" src="http://zulip.zulipdev.com/avatar/${othello.user_id}?s&#x3D;50" />\n` + ` <img class="typeahead-image" src="http://zulip.zulipdev.com/avatar/${othello.user_id}?s&#x3D;50" />\n` +
`<strong class="typeahead-strong-section">Othello, the Moor of Venice</strong>&nbsp;&nbsp;\n` + '<div class="typeahead-text-container">\n' +
`<small class="autocomplete_secondary">othello@zulip.com</small>\n`; ' <strong class="typeahead-strong-section">Othello, the Moor of Venice </strong> <small class="autocomplete_secondary">othello@zulip.com</small>\n' +
"</div>\n";
assert.equal(actual_value, expected_value); assert.equal(actual_value, expected_value);
// Reset the email such that this does not affect further tests. // Reset the email such that this does not affect further tests.
othello.delivery_email = null; othello.delivery_email = null;
@@ -1139,7 +1146,10 @@ test("initialize", ({override, override_rewire, mock_template}) => {
ct.get_or_set_token_for_testing("hamletcharacters"); ct.get_or_set_token_for_testing("hamletcharacters");
actual_value = options.highlighter_html(hamletcharacters); actual_value = options.highlighter_html(hamletcharacters);
expected_value = expected_value =
' <i class="typeahead-image zulip-icon zulip-icon-triple-users no-presence-circle" aria-hidden="true"></i>\n<strong class="typeahead-strong-section">hamletcharacters</strong>&nbsp;&nbsp;\n<small class="autocomplete_secondary">Characters of Hamlet</small>\n'; ' <i class="typeahead-image zulip-icon zulip-icon-triple-users no-presence-circle" aria-hidden="true"></i>\n' +
'<div class="typeahead-text-container">\n' +
' <strong class="typeahead-strong-section">hamletcharacters </strong> <small class="autocomplete_secondary">Characters of Hamlet</small>\n' +
"</div>\n";
assert.equal(actual_value, expected_value); assert.equal(actual_value, expected_value);
// matching // matching