From 34f9ccb87cf1ece65e70937224821521e918a914 Mon Sep 17 00:00:00 2001 From: Brock Whittaker Date: Thu, 23 Mar 2017 12:37:08 -0700 Subject: [PATCH] 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 | 4 + static/js/admin.js | 2 +- static/js/click_handlers.js | 9 ++ static/js/gear_menu.js | 5 +- static/js/message_fetch.js | 4 +- static/js/server_events.js | 8 +- static/js/ui_report.js | 13 +- static/styles/alerts.css | 136 +++++++++++++++++++++ static/styles/right-sidebar.css | 4 - static/styles/zulip.css | 12 +- templates/zerver/index.html | 32 +++++ templates/zerver/right_sidebar.html | 29 ----- tools/lib/find_add_class.py | 1 + zproject/settings.py | 2 + 14 files changed, 206 insertions(+), 55 deletions(-) create mode 100644 static/styles/alerts.css diff --git a/frontend_tests/node_tests/server_events.js b/frontend_tests/node_tests/server_events.js index e73d182303..ac7da39cdb 100644 --- a/frontend_tests/node_tests/server_events.js +++ b/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'); diff --git a/static/js/admin.js b/static/js/admin.js index ae69aadbdd..fad16e96c4 100644 --- a/static/js/admin.js +++ b/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; diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js index 7f04328a14..03502c8900 100644 --- a/static/js/click_handlers.js +++ b/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 diff --git a/static/js/gear_menu.js b/static/js/gear_menu.js index e4ac72695a..db5a5c76f2 100644 --- a/static/js/gear_menu.js +++ b/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-success').hide(); - $('.alert-info').hide(); - $('.alert').hide(); + $('.alert').removeClass("show"); // Set the URL bar title to show the sub-page you're currently on. var browser_url = target_tab; diff --git a/static/js/message_fetch.js b/static/js/message_fetch.js index 1bcb265723..e9c5d265da 100644 --- a/static/js/message_fetch.js +++ b/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); diff --git a/static/js/server_events.js b/static/js/server_events.js index f9c73e115b..3fb7345828 100644 --- a/static/js/server_events.js +++ b/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' + diff --git a/static/js/ui_report.js b/static/js/ui_report.js index e2382743f8..9fdcf1126a 100644 --- a/static/js/ui_report.js +++ b/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; }()); diff --git a/static/styles/alerts.css b/static/styles/alerts.css new file mode 100644 index 0000000000..c17815e485 --- /dev/null +++ b/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; + } +} diff --git a/static/styles/right-sidebar.css b/static/styles/right-sidebar.css index 678a2d9b0c..927de6ddbf 100644 --- a/static/styles/right-sidebar.css +++ b/static/styles/right-sidebar.css @@ -148,10 +148,6 @@ top: 2px; } -#connection-error { - font-size: 13px; -} - #userlist-toggle { display: none; position: absolute; diff --git a/static/styles/zulip.css b/static/styles/zulip.css index 12e39ffd0e..1be61adf73 100644 --- a/static/styles/zulip.css +++ b/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 - a scrollbar */ + in Firefox only, for some reason; + 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 */ diff --git a/templates/zerver/index.html b/templates/zerver/index.html index d12ac8d20b..995b4a7edb 100644 --- a/templates/zerver/index.html +++ b/templates/zerver/index.html @@ -74,6 +74,38 @@ var page_params = {{ page_params }};
+
+
+
+ {% trans %}Unable to connect to Zulip. Updates may be delayed.{% endtrans %} +
{{ _('Retrying soon...') }} {{ _('Try now.') }}
+
+
+
+ {% trans %}Unable to connect to Zulip. Could not fetch messages.{% endtrans %} +
{{ _('Retrying soon...') }}
+
+
+
+ {# The below isn't tagged for translation + intentionally, because the feature is only used at + MIT. #} + Your Zephyr mirror is not working. + + We recommend that + you . If you'd prefer, you can instead + run the + Zephyr mirror script yourself in a screen + session. + + To fix + this, you'll need to use the web interface. +
+
+
+
{% include "zerver/left_sidebar.html" %} diff --git a/templates/zerver/right_sidebar.html b/templates/zerver/right_sidebar.html index 4a89d0c9fb..e1825823ca 100644 --- a/templates/zerver/right_sidebar.html +++ b/templates/zerver/right_sidebar.html @@ -1,33 +1,4 @@