Make subscriptions page error bar visible even when scrolled down.

Previously, the Zulip subscriptions page's error bar would always be
at the very top of the scrollable view, and thus would likely be out
of view when an error happened.  This fixes it by having the error bar
always placed below the search box (and thus visible regardless of
where in the scrollable streams view we are).

Fixes: #515.

[commit message and comments expanded by tabbott]
This commit is contained in:
Kumar
2016-03-15 22:52:20 +05:30
committed by Tim Abbott
parent 9584ae1ab8
commit 4eced69228
4 changed files with 82 additions and 19 deletions

View File

@@ -489,7 +489,8 @@ exports.setup_page = function () {
function failed_listing(xhr, error) {
loading.destroy_indicator($('#subs_page_loading_indicator'));
ui.report_error("Error listing streams or subscriptions", xhr, $("#subscriptions-status"));
ui.report_error("Error listing streams or subscriptions", xhr,
$("#subscriptions-status"), 'subscriptions-status');
}
if (should_list_all_streams()) {
@@ -558,13 +559,13 @@ function ajaxSubscribe(stream) {
// Display the canonical stream capitalization.
true_stream_name = res.already_subscribed[page_params.email][0];
ui.report_success("Already subscribed to " + true_stream_name,
$("#subscriptions-status"));
$("#subscriptions-status"), 'subscriptions-status');
}
// The rest of the work is done via the subscribe event we will get
},
error: function (xhr) {
ui.report_error("Error adding subscription", xhr, $("#subscriptions-status"));
$("#create_stream_name").focus();
ui.report_error("Error adding subscription", xhr,
$("#subscriptions-status"), 'subscriptions-status');
}
});
}
@@ -579,8 +580,8 @@ function ajaxUnsubscribe(stream) {
// The rest of the work is done via the unsubscribe event we will get
},
error: function (xhr) {
ui.report_error("Error removing subscription", xhr, $("#subscriptions-status"));
$("#create_stream_name").focus();
ui.report_error("Error removing subscription", xhr,
$("#subscriptions-status"), 'subscriptions-status');
}
});
}
@@ -601,7 +602,8 @@ function ajaxSubscribeForCreation(stream, principals, invite_only, announce) {
// The rest of the work is done via the subscribe event we will get
},
error: function (xhr) {
ui.report_error("Error creating stream", xhr, $("#subscriptions-status"));
ui.report_error("Error creating stream", xhr,
$("#subscriptions-status"), 'subscriptions-status');
$('#stream-creation').modal("hide");
}
});
@@ -762,6 +764,10 @@ $(function () {
$(e.target).removeClass("btn-danger").text("Subscribed");
});
$("#subscriptions-status").on("click", "#close-subscriptions-status", function (e) {
$("#subscriptions-status").hide();
});
$("#subscriptions_table").on("click", ".email-address", function (e) {
selectText(this);
});
@@ -922,10 +928,12 @@ $(function () {
old_name_box.text(new_name);
sub_row.find(".email-address").text(data.email_address);
ui.report_success("The stream has been renamed!", $("#subscriptions-status"));
ui.report_success("The stream has been renamed!", $("#subscriptions-status "),
'subscriptions-status');
},
error: function (xhr) {
ui.report_error("Error renaming stream", xhr, $("#subscriptions-status"));
ui.report_error("Error renaming stream", xhr,
$("#subscriptions-status"), 'subscriptions-status');
}
});
});
@@ -938,7 +946,7 @@ $(function () {
var stream_name = $sub_row.find('.subscription_name').text();
var description = $sub_row.find('input[name="description"]').val();
$('#subscription_status').hide();
$('#subscriptions-status').hide();
channel.patch({
url: '/json/streams/' + stream_name,
@@ -947,10 +955,12 @@ $(function () {
},
success: function () {
// The event from the server will update the rest of the UI
ui.report_success("The stream description has been updated!", $("#subscriptions-status"));
ui.report_success("The stream description has been updated!",
$("#subscriptions-status"), 'subscriptions-status');
},
error: function (xhr) {
ui.report_error("Error updating the stream description", xhr, $("#subscriptions-status"));
ui.report_error("Error updating the stream description", xhr,
$("#subscriptions-status"), 'subscriptions-status');
}
});
});

View File

@@ -122,28 +122,45 @@ function message_hover(message_row) {
current_message_hover = message_row;
}
exports.report_message = function (response, status_box, cls) {
/* Arguments used in the report_* functions are,
response- response that we want to display
status_box- element being used to display the response
cls- class that we want to add/remove to/from the status_box
type- used to define more complex logic for special cases (currently being
used only for subscriptions-status) */
exports.report_message = function (response, status_box, cls, type) {
if (cls === undefined) {
cls = 'alert';
}
status_box.removeClass(status_classes).addClass(cls)
if (type === undefined) {
type = ' ';
}
if (type === 'subscriptions-status') {
status_box.removeClass(status_classes).addClass(cls).children('#response')
.text(response).stop(true).fadeTo(0, 1);
} else {
status_box.removeClass(status_classes).addClass(cls)
.text(response).stop(true).fadeTo(0, 1);
}
status_box.show();
};
exports.report_error = function (response, xhr, status_box) {
exports.report_error = function (response, xhr, status_box, type) {
if (xhr && xhr.status.toString().charAt(0) === "4") {
// Only display the error response for 4XX, where we've crafted
// a nice response.
response += ": " + $.parseJSON(xhr.responseText).msg;
}
ui.report_message(response, status_box, 'alert-error');
ui.report_message(response, status_box, 'alert-error', type);
};
exports.report_success = function (response, status_box) {
ui.report_message(response, status_box, 'alert-success');
exports.report_success = function (response, status_box, type) {
ui.report_message(response, status_box, 'alert-success', type);
};
function need_skinny_mode() {

View File

@@ -2467,6 +2467,26 @@ div.floating_recipient {
text-align: center;
}
#subscriptions-status {
position: fixed;
z-index: 999;
display: block;
left: 300px;
right: 300px;
margin: 0px auto;
opacity: 0.9 !important;
top: 55px;
max-width: 800px;
}
#close-subscriptions-status {
position: absolute;
top: 8px;
cursor: pointer;
font-size: 17px;
right: 8px;
}
.subject-name {
display: block;
line-height: 1.3em;
@@ -3612,6 +3632,10 @@ div.edit_bot {
font-weight: 300;
}
#subscriptions h1 {
padding-top: 40px;
}
#administration .administration-icon,
#settings .settings-icon,
#subscriptions .streams-icon {
@@ -3896,6 +3920,11 @@ form.admin-realm .control-label {
margin-right: 7px;
}
#subscriptions-status {
left: 300px;
right: 50px;
}
}
@media (max-width: 775px) {
@@ -3982,6 +4011,10 @@ form.admin-realm .control-label {
margin-right: 81px;
}
#subscriptions-status {
left: 35px;
}
}
@media (max-width: 500px) {

View File

@@ -3,7 +3,10 @@
<div class="subscriptions">
<h1><i class="icon-vector-exchange streams-icon"></i>{% trans "Streams" %}</h1>
<div class="alert" id="subscriptions-status"></div>
<div class="alert" id="subscriptions-status">
<span id="response"></span>
<span id="close-subscriptions-status"><i class="icon-vector-remove"></i></span>
</div>
<div id="subs_page_loading_indicator"></div>
<div id="subscriptions_table">
</div>