From 1b2475e11033b601bb9a489753e73099e1bb55b6 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 12 Mar 2014 17:35:57 -0400
Subject: [PATCH] CRM-13817 - Improve mini notification styling and function
 signature

---
 css/civicrm.css                     | 33 +++++++++---------
 js/Common.js                        | 54 +++++++++++++++++------------
 js/rest.js                          |  8 +++--
 templates/CRM/Tag/Form/Tag.tpl      |  3 +-
 templates/CRM/common/Navigation.tpl |  2 +-
 5 files changed, 57 insertions(+), 43 deletions(-)

diff --git a/css/civicrm.css b/css/civicrm.css
index a6228d2bdb..f6982f96df 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -2789,10 +2789,6 @@ div.grippie {
 }
 
 /* civicrm admin menu */
-#civicrm-menu {
-  height: 27px;
-}
-
 #civicrm-menu .ui-autocomplete-input,
 .crm-container .ui-autocomplete-input,
 .crm-container .ac_input {
@@ -2816,28 +2812,33 @@ div.grippie {
   padding: 2px 16px 3px 2px;
 }
 
-/* Status message bar */
-#civicrm-menu .crm-menubar-status-container {
-  position: absolute;
-  right: 2px;
+/* Status message box */
+.crm-status-box-outer {
+  position: fixed;
+  z-index: 9999;
+  right: 0;
   top: 0;
-  border-top: 1px solid #1B1B1B;
 }
 
-#civicrm-menu .crm-menubar-status-progressbar {
+.crm-status-box-outer.status-start {
+  background: #F8FF03 url("../packages/jquery/jquery-ui/css/black-tie/images/animated-overlay.gif");
+}
+
+.crm-status-box-outer .crm-status-box-inner {
   padding: 3px 14px;
-  font-size: 14px !important;
+  font-size: 13px !important;
+  color: #eee;
   font-weight: bold;
-  background: rgba(142, 136, 0, 0.9);
   text-align: center;
+  background: rgba(94, 91, 31, 0.9);
 }
 
-#civicrm-menu .status-busy {
-  background: #F8FF03 url("../packages/jquery/jquery-ui/css/black-tie/images/animated-overlay.gif");
+.crm-status-box-outer.status-success .crm-status-box-inner {
+  background: rgba(30, 143, 36, 0.7);
 }
 
-#civicrm-menu .status-done .crm-menubar-status-progressbar {
-  background: rgba(41, 152, 32, 0.7);
+.crm-status-box-outer.status-error .crm-status-box-inner {
+  background: rgba(255, 7, 0, 0.7);
 }
 
 /* Pop-up help icon - eliminate forced line break */
diff --git a/js/Common.js b/js/Common.js
index 70b02c2c83..2d04520c30 100644
--- a/js/Common.js
+++ b/js/Common.js
@@ -547,35 +547,45 @@ CRM.validate = CRM.validate || {
     );
   };
   /**
-   * @param startMsg string
-   * @param endMsg string|function
+   * @param options object|string
    * @param deferred optional jQuery deferred object
    * @return jQuery deferred object - if not supplied a new one will be created
    */
-  var fadeOut;
-  CRM.status = function(startMsg, endMsg, deferred) {
-    var $bar = $('#civicrm-menu');
-    if (!$bar.length) {
-      console && console.log && console.log('CRM.status called on a page with no menubar');
-      return;
+  CRM.status = function(options, deferred) {
+    // For simple usage without async operations you can pass in a string. 2nd param can be 'success' or 'error'
+    if (typeof options === 'string') {
+      return CRM.status({start: options, success: options, error: options})[deferred === 'error' ? 'reject' : 'resolve']();
     }
-    $('.crm-menubar-status-container', $bar).remove();
-    fadeOut && window.clearTimeout(fadeOut);
-    $bar.append('<li class="crm-menubar-status-container status-busy"><div class="crm-menubar-status-progressbar"><div class="crm-menubar-status-msg">' + startMsg + '</div></div></li>');
-    $('.crm-menubar-status-container', $bar).css('min-width', $('.crm-menubar-status-container', $bar).width());
-    deferred || (deferred = new $.Deferred());
-    deferred.done(function(data) {
-      var msg = typeof(endMsg) === 'function' ? endMsg(data) : endMsg;
-      $('.crm-menubar-status-container', $bar).removeClass('status-busy').addClass('status-done').show().find('.crm-menubar-status-msg').html(msg);
-      if (msg) {
-        fadeOut = window.setTimeout(function() {
-          $('.crm-menubar-status-container', $bar).fadeOut('slow');
+    var opts = $.extend({
+      start: ts('Saving...'),
+      success: ts('Saved.'),
+      error: function() {
+        CRM.alert(ts('Sorry an error occurred and your information was not saved'), ts('Error'));
+      }
+    }, options || {});
+    var $msg = $('<div class="crm-status-box-outer status-start"><div class="crm-status-box-inner"><div class="crm-status-box-msg">' + opts.start + '</div></div></div>')
+      .appendTo('body');
+    $msg.css('min-width', $msg.width());
+    function handle(status, data) {
+      var endMsg = typeof(opts[status]) === 'function' ? opts[status](data) : opts[status];
+      if (endMsg) {
+        $msg.removeClass('status-start').addClass('status-' + status).find('.crm-status-box-msg').html(endMsg);
+        window.setTimeout(function() {
+          $msg.fadeOut('slow', function() {$msg.remove()});
         }, 2000);
       } else {
-        $('.crm-menubar-status-container', $bar).hide();
+        $msg.remove();
       }
-    });
-    return deferred;
+    }
+    return (deferred || new $.Deferred())
+      .done(function(data) {
+        // If the server returns an error msg call the error handler
+        var status = $.isPlainObject(data) && (data.is_error || data.status === 'error') ? 'error' : 'success';
+        handle(status, data);
+      })
+      .fail(function(data) {
+        handle('error', data);
+      });
   };
 
   /**
diff --git a/js/rest.js b/js/rest.js
index 4f4e1e7147..3b4ffe21a1 100644
--- a/js/rest.js
+++ b/js/rest.js
@@ -84,7 +84,7 @@ var CRM = CRM || {};
   /**
    * AJAX api
    */
-  CRM.api3 = function(entity, action, params) {
+  CRM.api3 = function(entity, action, params, status) {
     if (typeof(entity) === 'string') {
       params = {
         entity: entity,
@@ -98,12 +98,16 @@ var CRM = CRM || {};
         json: JSON.stringify(entity)
       }
     }
-    return $.ajax({
+    var ajax = $.ajax({
       url: CRM.url('civicrm/ajax/rest'),
       dataType: 'json',
       data: params,
       type: params.action.indexOf('get') < 0 ? 'POST' : 'GET'
     });
+    if (status) {
+      CRM.status(status === true ? {} : status, ajax);
+    }
+    return ajax;
   };
 
   /**
diff --git a/templates/CRM/Tag/Form/Tag.tpl b/templates/CRM/Tag/Form/Tag.tpl
index a3af1786ef..61c9d30efa 100644
--- a/templates/CRM/Tag/Form/Tag.tpl
+++ b/templates/CRM/Tag/Form/Tag.tpl
@@ -43,8 +43,7 @@
       $("#tagtree input").change(function(){
         var tagid = this.id.replace("check_", "");
         var op = (this.checked) ? 'create' : 'delete';
-        var api = CRM.api3('entity_tag', op, {entity_table: entityTable, entity_id: entityID, tag_id: tagid});
-        CRM.status({/literal}'{ts escape="js"}Saving...{/ts}', '{ts escape="js"}Saved{/ts}'{literal}, api);
+        var api = CRM.api3('entity_tag', op, {entity_table: entityTable, entity_id: entityID, tag_id: tagid}, true);
         $(this).closest("li").toggleClass('highlighted');
         CRM.updateContactSummaryTags();
       });
diff --git a/templates/CRM/common/Navigation.tpl b/templates/CRM/common/Navigation.tpl
index 4ed222dcfb..ee925362b6 100644
--- a/templates/CRM/common/Navigation.tpl
+++ b/templates/CRM/common/Navigation.tpl
@@ -114,7 +114,7 @@ $('#civicrm-menu').ready(function() {
       },
       create: function() {
         // Place menu in front
-        $(this).crmAutocomplete('widget').css('z-index', (1 + $('#civicrm-menu').css('z-index')));
+        $(this).crmAutocomplete('widget').css('z-index', (1 + parseInt($('#civicrm-menu').css('z-index'))));
       }
     })
     .keydown(function() {
-- 
2.25.1