diff --git a/web/src/stream_popover.ts b/web/src/stream_popover.ts index 4f0d92b79c..4ddb271a2d 100644 --- a/web/src/stream_popover.ts +++ b/web/src/stream_popover.ts @@ -5,6 +5,7 @@ import type * as tippy from "tippy.js"; import {z} from "zod"; import render_inline_decorated_stream_name from "../templates/inline_decorated_stream_name.hbs"; +import render_inline_stream_or_topic_reference from "../templates/inline_stream_or_topic_reference.hbs"; import render_move_topic_to_stream from "../templates/move_topic_to_stream.hbs"; import render_left_sidebar_stream_actions_popover from "../templates/popovers/left_sidebar/left_sidebar_stream_actions_popover.hbs"; @@ -379,31 +380,40 @@ export async function build_move_topic_to_stream_popover( let modal_heading; if (only_topic_edit) { modal_heading = $t_html( - {defaultMessage: "Rename > {topic_name}"}, + {defaultMessage: "Rename "}, { - topic_name, - "z-stream": () => - render_inline_decorated_stream_name({stream, show_colored_icon: true}), + "z-stream-or-topic": () => + render_inline_stream_or_topic_reference({ + topic_name, + stream, + show_colored_icon: true, + }), }, ); } else { modal_heading = $t_html( - {defaultMessage: "Move > {topic_name}"}, + {defaultMessage: "Move "}, { - topic_name, - "z-stream": () => - render_inline_decorated_stream_name({stream, show_colored_icon: true}), + "z-stream-or-topic": () => + render_inline_stream_or_topic_reference({ + topic_name, + stream, + show_colored_icon: true, + }), }, ); } if (message !== undefined) { modal_heading = $t_html( - {defaultMessage: "Move messages from > {topic_name}"}, + {defaultMessage: "Move messages from "}, { - topic_name, - "z-stream": () => - render_inline_decorated_stream_name({stream, show_colored_icon: true}), + "z-stream-or-topic": () => + render_inline_stream_or_topic_reference({ + stream, + topic_name, + show_colored_icon: true, + }), }, ); // We disable topic input only for modal is opened from the message actions diff --git a/web/styles/modal.css b/web/styles/modal.css index 27c55c3d56..aef2294869 100644 --- a/web/styles/modal.css +++ b/web/styles/modal.css @@ -57,6 +57,19 @@ } } +.modal__title:has(.stream-or-topic-reference) { + /* Reduce the font weight of headings that + include stream or topic references (e.g., + topic move/rename modals). */ + font-weight: 450; + + .stream-or-topic-reference { + /* Make the stream or topic references + more prominent. */ + font-weight: 600; + } +} + .user-profile-name-heading { max-width: 80%; display: flex; diff --git a/web/templates/inline_stream_or_topic_reference.hbs b/web/templates/inline_stream_or_topic_reference.hbs new file mode 100644 index 0000000000..52722b9011 --- /dev/null +++ b/web/templates/inline_stream_or_topic_reference.hbs @@ -0,0 +1,7 @@ + + {{~#if stream~}} + {{> inline_decorated_stream_name stream=stream show_colored_icon=show_colored_icon}} + {{#if topic_name~}} > {{/if}} + {{~/if~}} + {{~ topic_name ~}} +