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"}}