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

compose_typeahead: Show emojis in stream description typeahead. 

Uses markdown rendered version of description instead of plain description
text in stream typeahead.
This commit is contained in:
Vector73 2024-07-04 09:12:48 +05:30 committed by Tim Abbott
parent b85e41df47
commit 67d85508be
6 changed files with 27 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/typeahead_helper.ts
View File

@ -85,6 +85,7 @@ type StreamData = {
color: string;
name: string;
description: string;
rendered_description: string;
subscribed: boolean;
};
@ -94,6 +95,7 @@ export function render_typeahead_item(args: {
img_src?: string;
status_emoji_info?: UserStatusEmojiInfo | undefined;
secondary?: string | null;
secondary_html?: string | undefined;
pronouns?: string | undefined;
is_user_group?: boolean;
stream?: StreamData;
@ -103,12 +105,14 @@ export function render_typeahead_item(args: {
const has_image = args.img_src !== undefined;
const has_status = args.status_emoji_info !== undefined;
const has_secondary = args.secondary !== undefined;
const has_secondary_html = args.secondary_html !== undefined;
const has_pronouns = args.pronouns !== undefined;
return render_typeahead_list_item({
...args,
has_image,
has_status,
has_secondary,
has_secondary_html,
has_pronouns,
});
}
@ -166,15 +170,8 @@ export function render_person_or_user_group(
}
export function render_stream(stream: StreamData): string {
let desc = stream.description;
const short_desc = desc.slice(0, 35);
if (desc !== short_desc) {
desc = short_desc + "...";
}
return render_typeahead_item({
secondary: desc,
secondary_html: stream.rendered_description,
stream,
is_unsubscribed: !stream.subscribed,
});

4
web/styles/compose.css
View File

@ -151,6 +151,10 @@
.autocomplete_secondary {
opacity: 0.8;
font-size: 85%;
& code {
display: inline-block;
}
}
.active .autocomplete_secondary {

7
web/styles/zulip.css
View File

@ -805,6 +805,8 @@ strong {
padding: 3px 10px;
gap: 5px;
font-weight: normal;
/* We want to keep this `max-width` less than 320px. */
max-width: 292px;
line-height: 20px;
color: var(--color-dropdown-item);
white-space: nowrap;
@ -838,6 +840,9 @@ strong {
.typeahead-text-container {
align-self: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
& > * {
margin-right: 3px;
@ -1358,8 +1363,6 @@ div.focused-message-list {
display: block;
float: right;
margin-top: 5px;
margin-right: -12px;
font-size: 0.8em;
color: hsl(96deg 7% 73%);
}
}

8
web/templates/typeahead_list_item.hbs
View File

@ -17,7 +17,7 @@
<i class="typeahead-image zulip-icon zulip-icon-triple-users no-presence-circle" aria-hidden="true"></i>
{{/if}}
{{!-- Separate container to ensure overflowing text remains in this container. --}}
<div class="typeahead-text-container">
<div class="typeahead-text-container{{#if has_secondary_html}} has_secondary_html{{/if}}">
<strong class="typeahead-strong-section">
{{~#if stream~}}
{{~> inline_decorated_stream_name stream=stream ~}}
@ -34,13 +34,15 @@
{{~#if has_status}}
{{> status_emoji status_emoji_info}}
{{~/if}}
{{~#if has_secondary}}
{{~#if has_secondary_html}}
<small class="autocomplete_secondary rendered_markdown">{{{secondary_html}}}</small>
{{~else if has_secondary}}
<small class="autocomplete_secondary">
{{~ secondary ~}}
</small>
{{~/if}}
{{#if is_unsubscribed}}
<span class="fa fa-exclamation-triangle unsubscribed_icon"
title="{{t 'You are not currently subscribed to this channel.' }}"></span>
{{/if}}
{{~/if}}
</div>

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

@ -1136,7 +1136,7 @@ test("initialize", ({override, override_rewire, mock_template}) => {
` <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` +
'<div class="typeahead-text-container">\n' +
' <strong class="typeahead-strong-section">Othello, the Moor of Venice</strong> <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>' +
"</div>\n";
assert.equal(actual_value, expected_value);
// Reset the email such that this does not affect further tests.
@ -1148,7 +1148,7 @@ test("initialize", ({override, override_rewire, mock_template}) => {
expected_value =
' <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' +
' <strong class="typeahead-strong-section">hamletcharacters</strong> <small class="autocomplete_secondary">Characters of Hamlet</small>' +
"</div>\n";
assert.equal(actual_value, expected_value);

29
web/tests/typeahead_helper.test.js
View File

@ -834,34 +834,15 @@ test("render_stream", ({mock_template}) => {
// Test render_stream with short description
let rendered = false;
const stream = {
description: "This is a short description.",
description: "This is the description of the test stream.",
rendered_description: "This is the description of the test stream.",
stream_id: 42,
name: "Short description",
name: "test stream",
};
mock_template("typeahead_list_item.hbs", false, (args) => {
assert.equal(args.stream, stream);
assert.equal(args.secondary, stream.description);
rendered = true;
return "typeahead-item-stub";
});
assert.equal(th.render_stream(stream), "typeahead-item-stub");
assert.ok(rendered);
});
test("render_stream w/long description", ({mock_template}) => {
// Test render_stream with long description
let rendered = false;
const stream = {
description: "This is a very very very very very long description.",
stream_id: 43,
name: "Long description",
};
mock_template("typeahead_list_item.hbs", false, (args) => {
assert.equal(args.stream, stream);
const short_desc = stream.description.slice(0, 35);
assert.equal(args.secondary, short_desc + "...");
assert.equal(args.secondary_html, stream.rendered_description);
rendered = true;
return "typeahead-item-stub";
});
@ -878,6 +859,7 @@ test("render_emoji", ({mock_template}) => {
has_image: false,
has_pronouns: false,
has_secondary: false,
has_secondary_html: false,
has_status: false,
};
let rendered = false;
@ -905,6 +887,7 @@ test("render_emoji", ({mock_template}) => {
has_image: true,
has_pronouns: false,
has_secondary: false,
has_secondary_html: false,
has_status: false,
};
test_emoji = {