diff options
| -rw-r--r-- | templates/web/fixmybarangay/report/_message_manager.html | 5 | ||||
| -rw-r--r-- | web/cobrands/fixmybarangay/message_manager.scss | 14 | ||||
| -rw-r--r-- | web/cobrands/fixmybarangay/message_manager_client.js | 24 |
3 files changed, 32 insertions, 11 deletions
diff --git a/templates/web/fixmybarangay/report/_message_manager.html b/templates/web/fixmybarangay/report/_message_manager.html index 04ffb0f42..e7f6d3ca9 100644 --- a/templates/web/fixmybarangay/report/_message_manager.html +++ b/templates/web/fixmybarangay/report/_message_manager.html @@ -12,7 +12,8 @@ </div> <div id="mm-username-container">username: <span id="mm-received-username"></span></div> <div id="mm-status-message-container"> - <div id="mm-status-message"></div> + <img id="mm-spinner" src="/cobrands/fixmybarangay/images/fmb-spinner-16x16.gif" alt=""/> + <p id="mm-status-message"></p> </div> <div id="mm-login-container"> <div> @@ -55,7 +56,7 @@ $(document).ready(function() { } var mm_populate_list = function(data) { - $('#mm-status-message-container').text("Accessed Message Manager as " + data['username']); + $('#mm-status-message-container').find('p').text("Accessed Message Manager as " + data['username']); $('input[name=mm_text]').prop('checked', false); // uncheck all $('#mm-link-to-refresh').delay(2000).fadeIn(); if (refresh_period && can_refresh) { diff --git a/web/cobrands/fixmybarangay/message_manager.scss b/web/cobrands/fixmybarangay/message_manager.scss index 9d9555640..a58e44509 100644 --- a/web/cobrands/fixmybarangay/message_manager.scss +++ b/web/cobrands/fixmybarangay/message_manager.scss @@ -30,11 +30,22 @@ $weak_text_color: #666; } } #mm-status-message-container { + position: relative; min-height: 1.4em; margin: 0 0 8px 0.5em; - padding: 8px 4px; + padding: 8px 4px 8px 24px; color: $mm_status_message_color; font-style: italic; + p { + margin:0; + padding:0; + } + #mm-spinner { + position: absolute; + left: 4px; + top: 10px; + display: none; + } } #mm-login-container { display: none; // only shown on/after a 403 @@ -97,6 +108,7 @@ $weak_text_color: #666; &.msg-is-active { background-color: $contrast1; color:#fff; p:hover { background-color: $contrast1; color:#fff; } // fix for mouseover on p + p.mm-reply:hover {background-color: #eef; color:#000;} // fix for mouseover on p } span.msg-tag { width: 3em; diff --git a/web/cobrands/fixmybarangay/message_manager_client.js b/web/cobrands/fixmybarangay/message_manager_client.js index ba7383933..94b624bcd 100644 --- a/web/cobrands/fixmybarangay/message_manager_client.js +++ b/web/cobrands/fixmybarangay/message_manager_client.js @@ -197,12 +197,18 @@ var message_manager = (function() { if ($htauth_username.size() && ! $htauth_username.val()) { $htauth_username.val(suggest_username); } - $login_element.stop().slideDown(); + $login_element.stop(true,true).slideDown(); }; - var say_status = function (msg) { + var say_status = function (msg, show_spinner) { if ($status_element) { - $status_element.stop().show().text(msg); + if (show_spinner) { + // slow fade in so that spinner only appears if there's a long delay + $status_element.find('#mm-spinner').stop(true,true).fadeIn(1200); + } else { + $status_element.find('#mm-spinner').stop(true,true).hide(); + } + $status_element.stop(true,true).show().find('p').text(msg); } }; @@ -270,7 +276,7 @@ var message_manager = (function() { _username = data.username; var $output = $message_list_element; if (anim_duration > 0) { - $output.stop().fadeOut(anim_duration, function(){ + $output.stop(true,true).fadeOut(anim_duration, function(){ render_available_messages(data, anim_duration); }); } else { @@ -310,11 +316,11 @@ var message_manager = (function() { var $li = $(this).closest('li'); var id = $li.attr('id').replace(_msg_prefix, ''); if ($li.hasClass('msg-is-locked')) { - say_status(get_msg(msg_trying_for_lock)); + say_status(get_msg(msg_trying_for_lock), true); } else if ($li.hasClass('msg-is-owned')) { - say_status(get_msg(msg_checking_lock)); + say_status(get_msg(msg_checking_lock), true); } else { - say_status(get_msg(msg_claiming_lock)); + say_status(get_msg(msg_claiming_lock), true); } request_lock(id, options); }); @@ -355,10 +361,11 @@ var message_manager = (function() { show_login_form(suggest_username); return; } - $login_element.stop().hide(); + $login_element.stop(true,true).hide(); if (_url_root.length === 0) { say_status(msg_no_config_err); } else { + say_status("Fetching messages...", true); $.ajax({ dataType: "json", type: "post", @@ -369,6 +376,7 @@ var message_manager = (function() { }, success: function(data, textStatus) { show_available_messages(data, anim_duration); + say_status("Fetching messages... done, OK", false); // loaded OK if (typeof(callback) === "function") { callback.call($(this), data); // execute callback } |