diff --git a/zephyr/static/js/zephyr.js b/zephyr/static/js/zephyr.js index f5c2eefb86..df671bece7 100644 --- a/zephyr/static/js/zephyr.js +++ b/zephyr/static/js/zephyr.js @@ -46,6 +46,7 @@ $(function() { var status_classes = 'alert-error alert-success alert-info'; var send_status = $('#send-status'); var buttons = $('#class-message, #personal-message').find('input[type="submit"]'); + var options = { beforeSubmit: function (form, _options) { send_status.removeClass(status_classes) @@ -65,11 +66,16 @@ $(function() { error: function() { send_status.removeClass(status_classes) .addClass('alert-error') - .text('Error sending message') + .html('Error sending message ') + .append($('') + .addClass('send-status-close').html('×') + .click(function () { send_status.stop(true).fadeOut(500); })) .stop(true).fadeTo(0,1); + buttons.removeAttr('disabled'); } }; + send_status.hide(); $("#class-message form").ajaxForm(options); $("#personal-message form").ajaxForm(options); diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css index 24d8f1a32a..46f6109db8 100644 --- a/zephyr/static/styles/zephyr.css +++ b/zephyr/static/styles/zephyr.css @@ -61,3 +61,22 @@ form.zephyr textarea { padding: 8px 14px 8px 14px; line-height: 20px; } + +/* Like .alert .close */ +.send-status-close { + font-size: 17px; + font-weight: bold; + color: black; + text-shadow: 0 1px 0 white; + opacity: .2; + filter: alpha(opacity=20); + margin-left: 5px; + position: relative; + top: 1px; +} + +.send-status-close:hover { + cursor: pointer; + opacity: .4; + filter: alpha(opacity=40); +}