diff --git a/static/js/stream_popover.js b/static/js/stream_popover.js index 842bd2fb9a..422f3fe660 100644 --- a/static/js/stream_popover.js +++ b/static/js/stream_popover.js @@ -278,6 +278,15 @@ function build_move_topic_to_stream_popover(e, current_stream_id, topic_name) { exports.hide_topic_popover(); $("#move-a-topic-modal-holder").html(render_move_topic_to_stream(args)); + + const stream_header_colorblock = $(".topic_stream_edit_header").find(".stream_header_colorblock"); + const stream_name = stream_data.maybe_get_stream_name(current_stream_id); + ui_util.decorate_stream_bar(stream_name, stream_header_colorblock, false); + $("#select_stream_id").change(function () { + const stream_name = stream_data.maybe_get_stream_name(parseInt(this.value, 10)); + ui_util.decorate_stream_bar(stream_name, stream_header_colorblock, false); + }); + $('#move_topic_modal').modal('show'); e.stopPropagation(); } diff --git a/static/styles/popovers.scss b/static/styles/popovers.scss index be92b66f66..925fad8fe9 100644 --- a/static/styles/popovers.scss +++ b/static/styles/popovers.scss @@ -362,3 +362,19 @@ ul { background-color: hsla(0, 70%, 87%, 0.7); color: hsl(0, 100%, 50%); } + +.topic_stream_edit_header { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + + #select_stream_id { + margin-bottom: 5px !important; + border-left: 0px; + padding-left: 0px; + border-radius: 0px 3px 3px 0px; + // Extra 1px for post-selection boundry + margin: 0 5px 0 -11px; + text-indent: 10px; + } +} diff --git a/static/templates/move_topic_to_stream.hbs b/static/templates/move_topic_to_stream.hbs index dd7f742bd6..f21a4f70b1 100644 --- a/static/templates/move_topic_to_stream.hbs +++ b/static/templates/move_topic_to_stream.hbs @@ -10,15 +10,18 @@ × - - - - +