mirror of https://github.com/zulip/zulip.git
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.
This commit is contained in:
Brock Whittaker
Tim Abbott
parent
2d52463b61
commit
34f9ccb87c
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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' +
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}());
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -148,10 +148,6 @@
|
|||
top: 2px;
|
||||
}
|
||||
|
||||
#connection-error {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#userlist-toggle {
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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" %}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ GENERIC_KEYWORDS = [
|
|||
'first',
|
||||
'second',
|
||||
'selected',
|
||||
'fade-out',
|
||||
]
|
||||
|
||||
def raise_error(fn, i, line):
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue