subscriptions: Add tooltip, only subscribers can add user in private stream.

Add explanation in popover on disabled add-subscriptions input elements,
admin can't add subscribers to non subscribed private streams, only
subscribed users can.

Fixes #10593
This commit is contained in:
Yashashvi Dave
2018-10-31 20:05:34 +05:30
committed by Tim Abbott
parent 7f3724dc5d
commit e8fbd855e6
5 changed files with 53 additions and 6 deletions

View File

@@ -243,6 +243,7 @@ exports.update_calculated_fields = function (sub) {
sub.can_access_subscribers = page_params.is_admin || sub.subscribed || !page_params.is_guest &&
!sub.invite_only;
sub.preview_url = hash_util.by_stream_uri(sub.stream_id);
sub.can_add_subscribers = !page_params.is_guest && (!sub.invite_only || sub.subscribed);
exports.render_stream_description(sub);
exports.update_subscribers_count(sub);
};

View File

@@ -187,6 +187,7 @@ function show_subscription_settings(sub_row) {
var colorpicker = sub_settings.find('.colorpicker');
var color = stream_data.get_color(sub.name);
stream_color.set_colorpicker_color(colorpicker, color);
subs.update_add_subscriptions_elements(sub.can_add_subscribers);
if (!sub.render_subscribers) {
return;

View File

@@ -248,7 +248,7 @@ exports.remove_stream = function (stream_id) {
exports.update_settings_for_subscribed = function (sub) {
var button = check_button_for_sub(sub);
var settings_button = settings_button_for_sub(sub).removeClass("unsubscribed").show();
$('.add_subscribers_container').show();
exports.update_add_subscriptions_elements(sub.can_add_subscribers);
$(".subscription_settings[data-stream-id='" + sub.stream_id + "'] #preview-stream-button").show();
if (button.length !== 0) {
@@ -289,6 +289,42 @@ exports.add_tooltips_to_left_panel = function () {
});
};
exports.update_add_subscriptions_elements = function (allow_user_to_add_subs) {
var input_element = $('.add_subscribers_container').find('input[name="principal"]').expectOne();
var button_element = $('.add_subscribers_container').find('button[name="add_subscriber"]').expectOne();
if (allow_user_to_add_subs) {
input_element.removeAttr("disabled");
button_element.removeAttr("disabled");
button_element.css('pointer-events', "");
$('.add_subscriber_btn_wrapper').popover('destroy');
} else {
input_element.attr("disabled", "disabled");
button_element.attr("disabled", "disabled");
// 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.
button_element.css("pointer-events", "none");
$('.add_subscribers_container input').popover({
placement: "bottom",
content: "<div class='cant_add_subs_hint'>%s</div>".replace(
'%s', i18n.t('Only stream subscribers can add users to a private stream.')),
trigger: "manual",
html: true,
animation: false});
$('.add_subscribers_container').on('mouseover', function (e) {
$('.add_subscribers_container input').popover('show');
e.stopPropagation();
});
$('.add_subscribers_container').on('mouseout', function (e) {
$('.add_subscribers_container input').popover('hide');
e.stopPropagation();
});
}
};
exports.update_settings_for_unsubscribed = function (sub) {
var button = check_button_for_sub(sub);
var settings_button = settings_button_for_sub(sub).addClass("unsubscribed").show();
@@ -304,7 +340,7 @@ exports.update_settings_for_unsubscribed = function (sub) {
// stream without invitation and cannot add subscribers to stream.
if (!sub.should_display_subscription_button) {
settings_button.hide();
$('.add_subscribers_container').hide();
exports.update_add_subscriptions_elements(sub.can_add_subscribers);
}
}

View File

@@ -327,3 +327,10 @@ ul.remind_me_popover .remind_icon {
position: relative;
top: 1px;
}
.popover .cant_add_subs_hint {
padding-left: 5px;
padding-right: 5px;
font-size: small;
text-align: justify;
}

View File

@@ -8,11 +8,13 @@
<div class="subscriber_list_add float-right">
<form class="form-inline">
<input type="text" class="search" placeholder="{{t 'Search subscribers' }}" />
<div class="add_subscribers_container" {{#if invite_only}}{{#unless subscribed}}style="display: none"{{/unless}}{{/if}}>
<div class="add_subscribers_container">
<input type="text" name="principal" placeholder="{{t 'Name or email' }}" value="" class="input-block" autocomplete="off" tabindex="-1" />
<button type="submit" name="add_subscriber" class="button add-subscriber-button small rounded" tabindex="-1">
{{t 'Add' }}
</button>
<div class="add_subscriber_btn_wrapper inline-block">
<button type="submit" name="add_subscriber" class="button add-subscriber-button small rounded" tabindex="-1">
{{t 'Add' }}
</button>
</div>
</div>
</form>
</div>