Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

stream_settings: Add loading spinner when creating a new stream. 

Add a spinner for when a stream is being created to show that
an operation is being performed, while also disallowing users to
modify the form in the meanwhile.

Commit modified by Brock Whittaker <brock@zulipchat.com>.

Fixes: #5268.
This commit is contained in:
Angelika Serwa 2017-11-04 19:19:12 +01:00 committed by Tim Abbott
parent 17f3cbbb90
commit 9930cb43cd
3 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/js/stream_create.js
View File

@ -90,6 +90,7 @@ function ajaxSubscribeForCreation(stream_name, description, principals, invite_o
$("#create_stream_name").val(""); $("#create_stream_name").val("");
$("#create_stream_description").val(""); $("#create_stream_description").val("");
$("#subscriptions-status").hide(); $("#subscriptions-status").hide();
loading.destroy_indicator($('#stream_creating_indicator'));
// The rest of the work is done via the subscribe event we will get // The rest of the work is done via the subscribe event we will get
}, },
error: function (xhr) { error: function (xhr) {
@ -104,6 +105,7 @@ function ajaxSubscribeForCreation(stream_name, description, principals, invite_o
// TODO: This next line does nothing. See #4647. // TODO: This next line does nothing. See #4647.
ui_report.error(i18n.t("Error creating stream"), xhr, ui_report.error(i18n.t("Error creating stream"), xhr,
$("#subscriptions-status"), 'subscriptions-status'); $("#subscriptions-status"), 'subscriptions-status');
loading.destroy_indicator($('#stream_creating_indicator'));
}, },
}); });
} }
@ -158,6 +160,8 @@ function create_stream() {
var announce = (!!page_params.notifications_stream && var announce = (!!page_params.notifications_stream &&
$('#announce-new-stream input').prop('checked')); $('#announce-new-stream input').prop('checked'));
loading.make_indicator($('#stream_creating_indicator'), {text: i18n.t('Creating stream...')});
ajaxSubscribeForCreation(stream_name, ajaxSubscribeForCreation(stream_name,
description, description,
principals, principals,

15
static/styles/subscriptions.css
View File

@ -768,6 +768,21 @@ form#add_new_subscription {
margin: 0px; margin: 0px;
} }
#stream_creation_form #stream_creating_indicator:not(:empty) {
position: absolute;
width: 100% !important;
height: calc(100% - 105px) !important;
display: flex !important;
justify-content: center;
align-items: center;
background: hsla(0, 0%, 100%, 0.9);
z-index: 1;
}
#stream_creation_form #stream_creating_indicator .loading_indicator_text {
font-weight: 400;
}
#subscription_overlay .inner-box { #subscription_overlay .inner-box {
margin: 20px; margin: 20px;
} }

1
static/templates/subscription_creation_form.handlebars
View File

@ -1,6 +1,7 @@
<div class="hide" id="stream-creation" tabindex="-1" role="dialog" <div class="hide" id="stream-creation" tabindex="-1" role="dialog"
aria-label="{{t 'Stream creation' }}"> aria-label="{{t 'Stream creation' }}">
<form id="stream_creation_form" class="form-inline"> <form id="stream_creation_form" class="form-inline">
<div id="stream_creating_indicator"></div>
<div class="stream-creation-body"> <div class="stream-creation-body">
<section class="block"> <section class="block">
<div class="stream-title"> <div class="stream-title">