alerts: Change sidebar alerts to be at top of the screen.

This changes the alerts to be individual boxes that slide down from
the top of the screen for a better UI experience.

frontend_tests/node_tests/server_events.js

@@ -31,6 +31,10 @@ set_global('echo', {
     },
     set_realm_filters: noop,
 });
+set_global('ui_report', {
+    hide_error: function () { return false; },
+    show_error: function () { return false; },
+});
 
 var server_events = require('js/server_events.js');
 

static/js/admin.js

@@ -417,7 +417,7 @@ function _setup_page() {
 
     var admin_tab = templates.render('admin_tab', options);
     $("#settings_content .administration-box").html(admin_tab);
-    $("#settings_content .alert").hide();
+    $("#settings_content .alert").removeClass("show");
 
     var tab = (function () {
         var tab = false;

static/js/click_handlers.js

@@ -310,6 +310,15 @@ $(function () {
         server_events.restart_get_events({dont_block: true});
     });
 
+    // this will hide the alerts that you click "x" on.
+    $("body").on("click", ".alert .exit", function () {
+        var $alert = $(this).closest(".alert");
+        $alert.addClass("fade-out");
+        setTimeout(function () {
+            $alert.removeClass("fade-out show");
+        }, 300);
+    });
+
 
     // COMPOSE
 

static/js/gear_menu.js

@@ -20,10 +20,7 @@ exports.initialize = function () {
         var target_tab = $(e.target).attr('href');
         resize.resize_bottom_whitespace();
         // Hide all our error messages when switching tabs
-        $('.alert-error').hide();
+        $('.alert').removeClass("show");
-        $('.alert-success').hide();
-        $('.alert-info').hide();
-        $('.alert').hide();
 
         // Set the URL bar title to show the sub-page you're currently on.
         var browser_url = target_tab;

static/js/message_fetch.js

@@ -14,7 +14,7 @@ exports.reset_load_more_status = function reset_load_more_status() {
 };
 
 function process_result(messages, opts) {
-    $('#get_old_messages_error').hide();
+    $('#get_old_messages_error').removeClass("show");
 
     if ((messages.length === 0) && (current_msg_list === message_list.narrowed) &&
         message_list.narrowed.empty()) {
@@ -120,7 +120,7 @@ exports.load_old_messages = function load_old_messages(opts) {
             }
 
             // We might want to be more clever here
-            $('#get_old_messages_error').show();
+            $('#get_old_messages_error').addClass("show");
             setTimeout(function () {
                 exports.load_old_messages(opts);
             }, 5000);

static/js/server_events.js

@@ -465,7 +465,7 @@ function get_events(options) {
             try {
                 get_events_xhr = undefined;
                 get_events_failures = 0;
-                $('#connection-error').hide();
+                ui_report.hide_error($("#connection-error"));
 
                 get_events_success(data.events);
             } catch (ex) {
@@ -496,15 +496,15 @@ function get_events(options) {
                 } else if (error_type === 'timeout') {
                     // Retry indefinitely on timeout.
                     get_events_failures = 0;
-                    $('#connection-error').hide();
+                    ui_report.hide_error($("#connection-error"));
                 } else {
                     get_events_failures += 1;
                 }
 
                 if (get_events_failures >= 5) {
-                    $('#connection-error').show();
+                    ui_report.show_error($("#connection-error"));
                 } else {
-                    $('#connection-error').hide();
+                    ui_report.hide_error($("#connection-error"));
                 }
             } catch (ex) {
                 blueslip.error('Failed to handle get_events error\n' +

static/js/ui_report.js

@@ -26,7 +26,7 @@ exports.message = function (response, status_box, cls, type) {
               .text(response).stop(true).fadeTo(0, 1);
     }
 
-    status_box.show();
+    status_box.addClass("show");
 };
 
 exports.error = function (response, xhr, status_box, type) {
@@ -43,6 +43,17 @@ exports.success = function (response, status_box, type) {
     exports.message(response, status_box, 'alert-success', type);
 };
 
+exports.hide_error = function ($target) {
+    $target.addClass("fade-out");
+    setTimeout(function () {
+        $target.removeClass("show fade-out");
+    }, 300);
+};
+
+exports.show_error = function ($target) {
+    $target.addClass("show");
+};
+
 return exports;
 }());
 

static/styles/alerts.css

@@ -0,0 +1,136 @@
+/* general alert styling changes */
+.alert {
+    display: none;
+}
+
+.alert.show {
+    display: block;
+}
+
+.alert#administration-status {
+    margin: 20px;
+}
+
+/* alert box compoent changes */
+.alert-box {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 900px;
+    margin-left: calc(50% - 450px);
+    z-index: 102;
+
+    -webkit-font-smoothing: antialiased;
+}
+
+.alert-box .alert.show {
+    animation-name: fadeIn;
+    animation-duration: 0.3s;
+    animation-fill-mode: forwards;
+}
+
+.alert-box .alert.fade-out {
+    animation-name: fadeOut;
+    animation-duration: 0.3s;
+    animation-fill-mode: forwards;
+}
+
+.alert-box .alert {
+    font-size: 1rem;
+
+    box-shadow: 0px 0px 30px rgba(220, 78, 78, 0.3);
+    border-radius: 0px;
+    border: none;
+}
+
+.alert-box .alert a {
+    color: #90deff;
+}
+
+.alert-box .alert .faded {
+    opacity: 0.7;
+}
+
+.alert-box .alert .restart_get_updates_button {
+    color: #89dcff;
+}
+
+.alert-box .alert .restart_get_updates_button:hover {
+    color: #89dcff;
+}
+
+.alert-box .alert.alert-error::before {
+    position: absolute;
+    top: 15px;
+    left: 10px;
+
+    font-family: "FontAwesome";
+    font-size: 1.5em;
+    content: "\f071";
+
+    color: #fff;
+}
+
+.alert-box .alert.alert-error {
+    position: relative;
+
+    /* gives room for the error icon. */
+    padding-left: 50px;
+    padding-top: 15px;
+
+    background-color: #bd6767;
+    color: #fff;
+    text-shadow: none;
+}
+
+.alert-box .alert .exit {
+    position: absolute;
+    top: 15px;
+    right: 0px;
+
+    font-size: 2.5em;
+    font-weight: 300;
+
+    cursor: pointer;
+}
+
+.alert-box .alert .exit::after {
+    padding: 10px;
+    content: "×";
+}
+
+/* animation section */
+@keyframes fadeIn {
+    0% {
+        display: block;
+        opacity: 0;
+        transform: translateY(-100px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0px);
+    }
+}
+
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+        transform: translateY(0px);
+    }
+
+    100% {
+        display: none;
+        opacity: 0;
+        transform: translateY(-100px);
+    }
+}
+
+/* @media queries */
+@media (max-width: 900px) {
+    .alert-box {
+        width: 80%;
+        left: 10%;
+        margin-left: 0px;
+    }
+}

static/styles/right-sidebar.css

@@ -148,10 +148,6 @@
     top: 2px;
 }
 
-#connection-error {
-    font-size: 13px;
-}
-
 #userlist-toggle {
     display: none;
     position: absolute;

static/styles/zulip.css

@@ -506,8 +506,8 @@ li.actual-dropdown-menu i {
     /* The height of the header and the tabbar plus a small gap */
     margin-top: 100px;
     /* This is needed for the floating recipient bar
-       in Firefox only, for some reason; otherwise it gets
+       in Firefox only, for some reason;
-       a scrollbar */
+       otherwise it gets a scrollbar */
     overflow: visible;
 }
 
@@ -1388,10 +1388,6 @@ blockquote p {
     font-weight: bold;
 }
 
-.alert {
-    display: none;
-}
-
 .home-error-bar .alert {
     margin-bottom: auto;
 }
@@ -1860,10 +1856,6 @@ div.floating_recipient {
     user-select: none;
 }
 
-#home-error {
-    display: none;
-}
-
 .loading_indicator_spinner {
     /* If you change these, make sure to adjust the constants in
        loading.make_indicator as well */

templates/zerver/index.html

@@ -74,6 +74,38 @@ var page_params = {{ page_params }};
 </div>
 
 <div class="app">
+<div class="alert-box">
+    <div class="alert alert_sidebar alert-error home-error-bar" id="connection-error">
+        <div class="exit"></div>
+        {% trans %}<strong class="message">Unable to connect to Zulip.</strong>  Updates may be delayed.{% endtrans %}
+        <div class="faded">{{ _('Retrying soon...') }} <a class="restart_get_updates_button">{{ _('Try now.') }}</a></div>
+    </div>
+    <div class="alert alert_sidebar alert-error home-error-bar" id="get_old_messages_error">
+        <div class="exit"></div>
+        {% trans %}<strong class="message">Unable to connect to Zulip.</strong>  Could not fetch messages.{% endtrans %}
+        <div class="faded">{{ _('Retrying soon...') }}</div>
+    </div>
+    <div class="alert alert_sidebar alert-error home-error-bar" id="zephyr-mirror-error">
+        <div class="exit"></div>
+        {# The below isn't tagged for translation
+        intentionally, because the feature is only used at
+        MIT. #}
+        <strong>Your Zephyr mirror is not working.</strong>
+        <span id="normal-zephyr-mirror-error-text">
+            We recommend that
+            you <a class="webathena_login">give Zulip the
+                    ability to mirror the messages for you via
+            WebAthena</a>.  If you'd prefer, you can instead
+            <a href="/zephyr-mirror" target="_blank">run the
+            Zephyr mirror script yourself</a> in a screen
+            session.
+        </span>
+        <span id="desktop-zephyr-mirror-error-text" class="notdisplayed">To fix
+          this, you'll need to use the web interface.</span>
+    </div>
+    <div class="alert alert_sidebar alert-error home-error-bar" id="home-error"></div>
+    <div class="alert alert_sidebar alert-error home-error-bar" id="reloading-application"></div>
+</div>
 <div class="app-main">
     <div class="column-left">
           {% include "zerver/left_sidebar.html" %}

templates/zerver/right_sidebar.html

@@ -1,33 +1,4 @@
 <div class="right-sidebar" id="right-sidebar">
-    <div class="alert-box">
-        <div class="alert alert_sidebar alert-error home-error-bar" id="connection-error">
-            {% trans %}<strong>Unable to connect to Zulip.</strong>  Updates may be delayed.{% endtrans %}
-            <br /><br /> {{ _('Retrying soon...') }} <br /><br /> <a class="restart_get_updates_button">{{ _('Try now.') }}</a>
-        </div>
-        <div class="alert alert_sidebar alert-error home-error-bar" id="get_old_messages_error">
-            {% trans %}<strong>Unable to connect to Zulip.</strong>  Could not fetch messages.{% endtrans %}
-            <br /><br /> {{ _('Retrying soon...') }} <br /><br />
-        </div>
-        <div class="alert alert_sidebar alert-error home-error-bar" id="zephyr-mirror-error">
-            {# The below isn't tagged for translation
-            intentionally, because the feature is only used at
-            MIT. #}
-            <strong>Your Zephyr mirror is not working.</strong>
-            <span id="normal-zephyr-mirror-error-text">
-                We recommend that
-                you <a class="webathena_login">give Zulip the
-                        ability to mirror the messages for you via
-                WebAthena</a>.  If you'd prefer, you can instead
-                <a href="/zephyr-mirror" target="_blank">run the
-                Zephyr mirror script yourself</a> in a screen
-                session.
-            </span>
-            <span id="desktop-zephyr-mirror-error-text" class="notdisplayed">To fix
-              this, you'll need to use the web interface.</span>
-        </div>
-        <div class="alert alert_sidebar alert-error home-error-bar" id="home-error"></div>
-        <div class="alert alert_sidebar alert-error home-error-bar" id="reloading-application"></div>
-    </div>
     <div class="sidebar-items">
         {% if enable_feedback %}
         <div id="feedback_section">

tools/lib/find_add_class.py

@@ -27,6 +27,7 @@ GENERIC_KEYWORDS = [
     'first',
     'second',
     'selected',
+    'fade-out',
 ]
 
 def raise_error(fn, i, line):

zproject/settings.py

@@ -697,6 +697,7 @@ PIPELINE = {
                 'third/thirdparty-fonts.css',
                 'styles/components.css',
                 'styles/zulip.css',
+                'styles/alerts.css',
                 'styles/settings.css',
                 'styles/subscriptions.css',
                 'styles/drafts.css',
@@ -723,6 +724,7 @@ PIPELINE = {
                 'node_modules/katex/dist/katex.css',
                 'styles/components.css',
                 'styles/zulip.css',
+                'styles/alerts.css',
                 'styles/settings.css',
                 'styles/subscriptions.css',
                 'styles/drafts.css',