Switch "invite users" to new component overlay.

Fixes #4036.

static/js/hashchange.js

@@ -236,6 +236,7 @@ var get_hash_group = (function () {
     var groups = [
         ["streams"],
         ["settings", "administration"],
+        ["invite"],
     ];
 
     return function (value) {
@@ -255,7 +256,7 @@ var get_hash_group = (function () {
 
 function should_ignore(hash) {
     // Hash changes within this list are overlaws and should not unnarrow (etc.)
-    var ignore_list = ["streams", "drafts", "settings", "administration"];
+    var ignore_list = ["streams", "drafts", "settings", "administration", "invite"];
     var main_hash = get_main_hash(hash);
 
     return (ignore_list.indexOf(main_hash) > -1);
@@ -292,6 +293,8 @@ function hashchanged(from_reload, e) {
             } else if (/settings|administration/.test(base)) {
                 settings.setup_page();
                 admin.setup_page();
+            } else if (base === "invite") {
+                invite.initialize();
             }
 
             ignore.group = get_hash_group(base);

static/js/invite.js

@@ -46,10 +46,8 @@ exports.initialize = function () {
     var invitee_emails_group = invitee_emails.closest('.control-group');
 
     $('#submit-invitation').button();
-    $('#invite-user').on('show', prepare_form_to_be_shown);
+    prepare_form_to_be_shown();
-    $('#invite-user').on('shown', function () {
+    invitee_emails.focus().autosize();
-        invitee_emails.focus().autosize();
-    });
 
     $("#invite_user_form").ajaxForm({
         dataType: 'json',
@@ -115,6 +113,10 @@ exports.initialize = function () {
         },
     });
 
+    $("#invite-user").addClass("show");
+};
+
+$(function () {
     $(document).on('click', '.invite_check_all_button', function (e) {
         $('#streams_to_add :checkbox').prop('checked', true);
         e.preventDefault();
@@ -124,7 +126,7 @@ exports.initialize = function () {
         $('#streams_to_add :checkbox').prop('checked', false);
         e.preventDefault();
     });
-};
+});
 
 return exports;
 

static/js/modals.js

@@ -23,6 +23,10 @@ var modals = (function () {
                 $(".player-container iframe").remove();
                 document.activeElement.blur();
             },
+
+            invite: function () {
+                hashchange.exit_modal();
+            },
         },
 
         close_modal: function (name) {

static/js/ui.js

@@ -577,7 +577,6 @@ $(function () {
     notifications.initialize();
     gear_menu.initialize();
     hashchange.initialize();
-    invite.initialize();
     pointer.initialize();
     unread_ui.initialize();
     activity.initialize();

static/styles/zulip.css

@@ -2140,6 +2140,23 @@ button.topic_edit_cancel {
     margin-top: 10px;
 }
 
+#invite-user .overlay-content {
+    position: relative;
+    width: 500px;
+    background-color: #fff;
+    border-radius: 4px;
+}
+
+#invite-user .modal-body {
+    margin-bottom: 58px;
+}
+
+#invite-user .modal-footer {
+    position: absolute;
+    bottom: 0px;
+    width: calc(100% - 30px);
+}
+
 #invite_status {
     display: none;
 }

templates/zerver/invite_user.html

@@ -1,40 +1,42 @@
-<div class="modal hide" id="invite-user" tabindex="-1" role="dialog"
+<div id="invite-user" class="overlay flex" tabindex="-1" role="dialog" data-overlay="invite"
     aria-labelledby="invite-user-label" aria-hidden="true">
-    <div class="modal-header">
+    <div class="overlay-content">
-        <button type="button" class="exit" data-dismiss="modal" aria-hidden="true">×</button>
+        <div class="modal-header">
-        <h3 id="invite-user-label">{% trans %}Invite users to Zulip{% endtrans %}</h3>
+            <button type="button" class="exit" aria-hidden="true">×</button>
+            <h3 id="invite-user-label">{% trans %}Invite users to Zulip{% endtrans %}</h3>
+        </div>
+        <form id="invite_user_form" class="form-horizontal"
+            action="/json/invite_users" method="POST">{{ csrf_input }}
+            <div class="modal-body">
+                <div class="control-group">
+                    <div id="invite-result"></div>
+                    <label class="control-label" for="invitee_emails">{{ _('Emails (one on each line or comma-separated)') }}</label>
+                    <div class="controls">
+                        <textarea rows="2" id="invitee_emails"
+                            name="invitee_emails"
+                            placeholder="{{ _('One or more email addresses...') }}"></textarea>
+                    </div>
+                    <label class="control-label" for="custom_body">{{ _('Custom invitation message (if you want to add one)') }}</label>
+                    <div class="controls">
+                        <textarea rows="2" class="custom_invite_body"
+                            name="custom_body"
+                            placeholder="{{ _('Custom message') }}"></textarea>
+                    </div>
+                </div>
+                <div class="alert" id="invite_status"></div>
+                {% if development_environment %}
+                <div class="alert" id="dev_env_msg"></div>
+                {% endif %}
+                <div class="control-group">
+                    <label class="control-label" for="streams_to_add">{{ _('Streams they should join') }}</label>
+                    <div class="controls" id="streams_to_add"></div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</button>
+                <button id="submit-invitation" class="btn btn-primary"
+                data-loading-text="{{ _('Inviting...') }}" type="submit">{{ _('Invite') }}</button>
+            </div>
+        </form>
     </div>
-    <form id="invite_user_form" class="form-horizontal"
-        action="/json/invite_users" method="POST">{{ csrf_input }}
-        <div class="modal-body">
-            <div class="control-group">
-                <div id="invite-result"></div>
-                <label class="control-label" for="invitee_emails">{{ _('Emails (one on each line or comma-separated)') }}</label>
-                <div class="controls">
-                    <textarea rows="2" id="invitee_emails"
-                        name="invitee_emails"
-                        placeholder="{{ _('One or more email addresses...') }}"></textarea>
-                </div>
-                <label class="control-label" for="custom_body">{{ _('Custom invitation message (if you want to add one)') }}</label>
-                <div class="controls">
-                    <textarea rows="2" class="custom_invite_body"
-                        name="custom_body"
-                        placeholder="{{ _('Custom message') }}"></textarea>
-                </div>
-            </div>
-            <div class="alert" id="invite_status"></div>
-            {% if development_environment %}
-            <div class="alert" id="dev_env_msg"></div>
-            {% endif %}
-            <div class="control-group">
-                <label class="control-label" for="streams_to_add">{{ _('Streams they should join') }}</label>
-                <div class="controls" id="streams_to_add"></div>
-            </div>
-        </div>
-        <div class="modal-footer">
-            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</button>
-            <button id="submit-invitation" class="btn btn-primary"
-            data-loading-text="{{ _('Inviting...') }}" type="submit">{{ _('Invite') }}</button>
-        </div>
-    </form>
 </div>

templates/zerver/navbar.html

@@ -111,7 +111,7 @@
                   {% endif %}
                   {% if show_invites %}
                   <li title="{% trans %}Invite more users to Zulip.{% endtrans %}}">
-                    <a href="#invite-user" role="button" data-toggle="modal">
+                    <a href="#invite" role="button">
                       <i class="icon-vector-plus-sign"></i> {{ _('Invite users') }}
                     </a>
                   </li>

templates/zerver/right_sidebar.html

@@ -48,7 +48,7 @@
             </div>
             <ul id="user_presences" class="filters scrolling_list"></ul>
             {% if show_invites %}
-            <a id="invite-user-link" href="#invite-user" data-toggle="modal"><i class="icon-vector-plus-sign"></i>{{ _('Invite more users') }}</a>
+            <a id="invite-user-link" href="#invite"><i class="icon-vector-plus-sign"></i>{{ _('Invite more users') }}</a>
             {% endif %}
         </div>
         <div id="group-pm-list">