diff --git a/static/js/stream_edit.js b/static/js/stream_edit.js index 354756088b..26da5b33ea 100644 --- a/static/js/stream_edit.js +++ b/static/js/stream_edit.js @@ -164,6 +164,9 @@ function show_subscription_settings(sub_row) { if (!sub.render_subscribers) { return; } + if (!sub.should_display_subscription_button) { + stream_ui_updates.initialize_cant_subscribe_popover(sub); + } // fetch subscriber list from memory. var list = get_subscriber_list(sub_settings); list.empty(); diff --git a/static/js/stream_ui_updates.js b/static/js/stream_ui_updates.js index 647b1a5ecc..a6287bba6d 100644 --- a/static/js/stream_ui_updates.js +++ b/static/js/stream_ui_updates.js @@ -16,6 +16,34 @@ exports.update_check_button_for_sub = function (sub) { } }; +exports.initialize_cant_subscribe_popover = function (sub) { + var button_wrapper = stream_edit.settings_for_sub(sub).find('.sub_unsub_button_wrapper'); + var settings_button = subs.settings_button_for_sub(sub); + + // Disabled button blocks mouse events(hover) from reaching + // to it's parent div element, so popover don't get triggered. + // Add css to prevent this. + settings_button.css("pointer-events", "none"); + settings_button.popover({ + placement: "bottom", + content: "
%s
".replace( + '%s', i18n.t('Only existing subscribers can add users to private streams.')), + trigger: "manual", + html: true, + animation: false, + }); + + button_wrapper.on('mouseover', function (e) { + settings_button.popover('show'); + e.stopPropagation(); + }); + + button_wrapper.on('mouseout', function (e) { + settings_button.popover('hide'); + e.stopPropagation(); + }); +}; + exports.update_settings_button_for_sub = function (sub) { var settings_button = subs.settings_button_for_sub(sub); if (sub.subscribed) { @@ -24,9 +52,13 @@ exports.update_settings_button_for_sub = function (sub) { settings_button.text(i18n.t("Subscribe")).addClass("unsubscribed"); } if (sub.should_display_subscription_button) { - settings_button.show(); + settings_button.prop("disabled", false); + settings_button.popover('destroy'); + settings_button.css("pointer-events", ""); } else { - settings_button.hide(); + settings_button.attr("title", ""); + exports.initialize_cant_subscribe_popover(sub); + settings_button.attr("disabled", "disabled"); } }; diff --git a/static/styles/popovers.scss b/static/styles/popovers.scss index 9458ee4833..8843275301 100644 --- a/static/styles/popovers.scss +++ b/static/styles/popovers.scss @@ -337,6 +337,7 @@ ul.remind_me_popover .remind_icon { top: 1px; } +.popover .cant_subscribe_hint, .popover .cant_add_subs_hint { padding-left: 5px; padding-right: 5px; diff --git a/static/templates/subscription_settings.handlebars b/static/templates/subscription_settings.handlebars index aa38e78207..3dffe21577 100644 --- a/static/templates/subscription_settings.handlebars +++ b/static/templates/subscription_settings.handlebars @@ -21,8 +21,10 @@ {{#if is_admin}} {{/if}} - +
+ +
{{t "View stream"}}