streams: Disable sub-btn with explanation if user not allowed to subscribe.

This commit is contained in:
Yashashvi Dave
2019-05-06 18:05:57 +05:30
committed by Tim Abbott
parent 9d21b61f99
commit ccd3b49555
4 changed files with 42 additions and 4 deletions

View File

@@ -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();

View File

@@ -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: "<div class='cant_subscribe_hint'>%s</div>".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");
}
};

View File

@@ -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;

View File

@@ -21,8 +21,10 @@
{{#if is_admin}}
<button class="button small rounded btn-danger deactivate" type="button" name="delete_button" title="{{t 'Delete stream'}}"> <i class="fa fa-trash-o" aria-hidden="true"></i></button>
{{/if}}
<button class="button small rounded subscribe-button sub_unsub_button {{#unless subscribed }}unsubscribed{{/unless}}" type="button" name="button" title="{{t 'Toggle subscription'}} (S)" {{#unless should_display_subscription_button}}style="display: none"{{/unless}}>
{{#if subscribed }}{{#tr oneself }}Unsubscribe{{/tr}}{{else}}{{#tr oneself }}Subscribe{{/tr}}{{/if}}</button>
<div class="sub_unsub_button_wrapper inline-block">
<button class="button small rounded subscribe-button sub_unsub_button {{#unless subscribed }}unsubscribed{{/unless}}" type="button" name="button" {{#if should_display_subscription_button}}title="{{t 'Toggle subscription'}} (S)" {{else}}disabled="disabled"{{/if}}>
{{#if subscribed }}{{#tr oneself }}Unsubscribe{{/tr}}{{else}}{{#tr oneself }}Subscribe{{/tr}}{{/if}}</button>
</div>
<a href="{{preview_url}}" class="button small rounded" id="preview-stream-button" role="button" title="{{t 'View stream'}} (V)" {{#unless should_display_preview_button }}style="display: none"{{/unless}}>{{t "View stream"}}</a>
</div>
</div>