diff --git a/static/js/compose_actions.js b/static/js/compose_actions.js index d0a100251b..be337d0224 100644 --- a/static/js/compose_actions.js +++ b/static/js/compose_actions.js @@ -17,6 +17,7 @@ import * as narrow_state from "./narrow_state"; import * as notifications from "./notifications"; import * as people from "./people"; import * as reload_state from "./reload_state"; +import * as stream_bar from "./stream_bar"; import * as stream_data from "./stream_data"; import * as ui_util from "./ui_util"; import * as unread_ops from "./unread_ops"; @@ -134,7 +135,7 @@ export function complete_starting_tasks(msg_type, opts) { maybe_scroll_up_selected_message(); ui_util.change_tab_to("#message_feed_container"); compose_fade.start_compose(msg_type); - ui_util.decorate_stream_bar(opts.stream, $("#stream-message .message_header_stream"), true); + stream_bar.decorate(opts.stream, $("#stream-message .message_header_stream"), true); $(document).trigger(new $.Event("compose_started.zulip", opts)); update_placeholder_text(); } diff --git a/static/js/message_edit.js b/static/js/message_edit.js index de08bda8f6..091533917e 100644 --- a/static/js/message_edit.js +++ b/static/js/message_edit.js @@ -17,9 +17,9 @@ import * as message_store from "./message_store"; import * as message_viewport from "./message_viewport"; import * as resize from "./resize"; import * as rows from "./rows"; +import * as stream_bar from "./stream_bar"; import * as stream_data from "./stream_data"; import * as ui_report from "./ui_report"; -import * as ui_util from "./ui_util"; import * as upload from "./upload"; const currently_editing_messages = new Map(); @@ -365,10 +365,10 @@ function edit_message(row, raw_content) { const message_edit_countdown_timer = row.find(".message_edit_countdown_timer"); const copy_message = row.find(".copy_message"); - ui_util.decorate_stream_bar(message.stream, stream_header_colorblock, false); + stream_bar.decorate(message.stream, stream_header_colorblock, false); message_edit_stream.on("change", function () { const stream_name = stream_data.maybe_get_stream_name(Number.parseInt(this.value, 10)); - ui_util.decorate_stream_bar(stream_name, stream_header_colorblock, false); + stream_bar.decorate(stream_name, stream_header_colorblock, false); }); if (editability === editability_types.NO) { diff --git a/static/js/stream_bar.js b/static/js/stream_bar.js new file mode 100644 index 0000000000..99a2e83c5e --- /dev/null +++ b/static/js/stream_bar.js @@ -0,0 +1,34 @@ +import $ from "jquery"; + +import * as stream_color from "./stream_color"; +import * as stream_data from "./stream_data"; + +function update_lock_icon_for_stream(stream_name) { + const icon = $("#compose-lock-icon"); + const streamfield = $("#stream_message_recipient_stream"); + if (stream_data.get_invite_only(stream_name)) { + icon.show(); + streamfield.addClass("lock-padding"); + } else { + icon.hide(); + streamfield.removeClass("lock-padding"); + } +} + +// In an attempt to decrease mixing, set stream bar +// color look like the stream being used. +// (In particular, if there's a color associated with it, +// have that color be reflected here too.) +export function decorate(stream_name, element, is_compose) { + if (stream_name === undefined) { + return; + } + const color = stream_data.get_color(stream_name); + if (is_compose) { + update_lock_icon_for_stream(stream_name); + } + element + .css("background-color", color) + .removeClass(stream_color.color_classes) + .addClass(stream_color.get_color_class(color)); +} diff --git a/static/js/stream_popover.js b/static/js/stream_popover.js index ab6314afbf..7f71fd688a 100644 --- a/static/js/stream_popover.js +++ b/static/js/stream_popover.js @@ -20,10 +20,10 @@ import * as narrow from "./narrow"; import * as popovers from "./popovers"; import * as resize from "./resize"; import * as starred_messages from "./starred_messages"; +import * as stream_bar from "./stream_bar"; import * as stream_color from "./stream_color"; import * as stream_data from "./stream_data"; import * as subs from "./subs"; -import * as ui_util from "./ui_util"; import * as unread_ops from "./unread_ops"; // We handle stream popovers and topic popovers in this @@ -343,10 +343,10 @@ function build_move_topic_to_stream_popover(e, current_stream_id, topic_name) { const stream_header_colorblock = $(".topic_stream_edit_header").find( ".stream_header_colorblock", ); - ui_util.decorate_stream_bar(current_stream_name, stream_header_colorblock, false); + stream_bar.decorate(current_stream_name, stream_header_colorblock, false); $("#select_stream_id").on("change", function () { const stream_name = stream_data.maybe_get_stream_name(Number.parseInt(this.value, 10)); - ui_util.decorate_stream_bar(stream_name, stream_header_colorblock, false); + stream_bar.decorate(stream_name, stream_header_colorblock, false); }); $("#move_topic_modal").modal("show"); diff --git a/static/js/ui_init.js b/static/js/ui_init.js index 45e260f8b8..ba654322b9 100644 --- a/static/js/ui_init.js +++ b/static/js/ui_init.js @@ -55,6 +55,7 @@ import * as settings_sections from "./settings_sections"; import * as settings_toggle from "./settings_toggle"; import * as spoilers from "./spoilers"; import * as starred_messages from "./starred_messages"; +import * as stream_bar from "./stream_bar"; import * as stream_color from "./stream_color"; import * as stream_data from "./stream_data"; import * as stream_edit from "./stream_edit"; @@ -66,7 +67,6 @@ import * as topic_zoom from "./topic_zoom"; import * as tutorial from "./tutorial"; import * as typing from "./typing"; import * as ui from "./ui"; -import * as ui_util from "./ui_util"; import * as unread from "./unread"; import * as unread_ui from "./unread_ui"; import * as user_groups from "./user_groups"; @@ -253,7 +253,7 @@ export function initialize_kitchen_sink_stuff() { }); $("#stream_message_recipient_stream").on("blur", function () { - ui_util.decorate_stream_bar(this.value, $("#stream-message .message_header_stream"), true); + stream_bar.decorate(this.value, $("#stream-message .message_header_stream"), true); }); $(window).on("blur", () => { diff --git a/static/js/ui_util.js b/static/js/ui_util.js index b089c82cdb..b9c282f535 100644 --- a/static/js/ui_util.js +++ b/static/js/ui_util.js @@ -1,8 +1,5 @@ import $ from "jquery"; -import * as stream_color from "./stream_color"; -import * as stream_data from "./stream_data"; - // Add functions to this that have no non-trivial // dependencies other than jQuery. @@ -33,33 +30,3 @@ export function blur_active_element() { // this blurs anything that may perhaps be actively focused on. document.activeElement.blur(); } - -function update_lock_icon_for_stream(stream_name) { - const icon = $("#compose-lock-icon"); - const streamfield = $("#stream_message_recipient_stream"); - if (stream_data.get_invite_only(stream_name)) { - icon.show(); - streamfield.addClass("lock-padding"); - } else { - icon.hide(); - streamfield.removeClass("lock-padding"); - } -} - -// In an attempt to decrease mixing, set stream bar -// color look like the stream being used. -// (In particular, if there's a color associated with it, -// have that color be reflected here too.) -export function decorate_stream_bar(stream_name, element, is_compose) { - if (stream_name === undefined) { - return; - } - const color = stream_data.get_color(stream_name); - if (is_compose) { - update_lock_icon_for_stream(stream_name); - } - element - .css("background-color", color) - .removeClass(stream_color.color_classes) - .addClass(stream_color.get_color_class(color)); -} diff --git a/tools/test-js-with-node b/tools/test-js-with-node index 091b07af08..c5c4c7da7d 100755 --- a/tools/test-js-with-node +++ b/tools/test-js-with-node @@ -132,6 +132,7 @@ EXEMPT_FILES = { "static/js/settings_users.js", "static/js/setup.js", "static/js/spoilers.js", + "static/js/stream_bar.js", "static/js/stream_color.js", "static/js/stream_create.js", "static/js/stream_edit.js",