message_view_header: Add tooltip to stream name in top navbar.

At present, it's not obvious that clicking on the stream name in the
top navbar will take the user to stream settings. To make it more
apparent, we add a tooltip to the stream name, explicitly indicating its
functionality.

We also add a second line to the tooltip thar displays the number of
subscribers to the stream and remove the tooltip from the number of
subscribers indicator on the top navbar. These changes are in preparation
for removing the number of subscribers indicator from the top navbar.

Fixes #27360.

Co-authored-by: Sayam Samal <samal.sayam@gmail.com>
This commit is contained in:
retsambew 2023-11-04 18:39:47 +05:30 committed by Tim Abbott
parent 4740a58318
commit 9a0a7c1779
2 changed files with 13 additions and 6 deletions

View File

@ -48,11 +48,7 @@ function make_message_view_header(filter) {
message_view_header.rendered_narrow_description = current_stream.rendered_description;
const sub_count = peer_data.get_subscriber_count(current_stream.stream_id);
message_view_header.sub_count = sub_count;
// the "title" is passed as a variable and doesn't get translated (nor should it)
message_view_header.sub_count_tooltip_text = $t(
{defaultMessage: "This stream has {count} subscribers."},
{count: message_view_header.sub_count},
);
message_view_header.stream = current_stream;
message_view_header.stream_settings_link =
"#streams/" + current_stream.stream_id + "/" + current_stream.name;
}

View File

@ -1,7 +1,18 @@
{{#if stream_settings_link}}
<a class="message-header-stream-settings-button" href="{{stream_settings_link}}">
<a class="message-header-stream-settings-button tippy-zulip-tooltip" data-tooltip-template-id="stream-details-tooltip-template" data-tippy-placement="bottom" href="{{stream_settings_link}}">
{{> navbar_icon_and_title }}
</a>
<template id="stream-details-tooltip-template">
<div>
<div>
{{#tr}}
Go to <z-stream></z-stream> settings
{{#*inline "z-stream"}}{{> inline_decorated_stream_name stream=stream}}{{/inline}}
{{/tr}}
</div>
<div class="tooltip-inner-content">{{t "{sub_count, plural, =0 {No subscribers} one {# subscriber} other {# subscribers}}" }}</div>
</div>
</template>
<span class="narrow_description rendered_markdown">
{{#if rendered_narrow_description}}
{{rendered_markdown rendered_narrow_description}}