From: Coleman Watts <coleman@civicrm.org>
Date: Sat, 24 Oct 2015 16:52:09 +0000 (-0400)
Subject: CRM-13823 - Use popup menu for snooze options
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=c426a98725d4e948d5b648fe55e83d002ce16206;p=civicrm-core.git

CRM-13823 - Use popup menu for snooze options
---

diff --git a/ang/crmStatusPage.css b/ang/crmStatusPage.css
index 604037e833..bc59cc2452 100644
--- a/ang/crmStatusPage.css
+++ b/ang/crmStatusPage.css
@@ -1,4 +1,14 @@
-/* Add any CSS rules for Angular module "statuspage" */
+/* CSS rules for Angular module "statuspage" */
+
+#crm-status-list h3 {
+  color: white;
+  opacity: .85;
+}
+
+#crm-status-list h3:hover,
+#crm-status-list h3.menuopen {
+  opacity: 1;
+}
 
 /* Error Severity */
 #crm-status-list .crm-severity-emergency,
@@ -6,65 +16,51 @@
 #crm-status-list .crm-severity-critical,
 #crm-status-list .crm-severity-error{
   background-color: #E43D2B;
-  color: white;
-}
-
-#crm-status-list .crm-severity-emergency:hover,
-#crm-status-list .crm-severity-alert:hover,
-#crm-status-list .crm-severity-critical:hover,
-#crm-status-list .crm-severity-error:hover {
-  background-color: #DD0000;
-  color: white;
 }
 
 /* Warning Severity */
-#crm-status-list .crm-severity-warning
-{
-  background-color: #EDA737;
-  color: white;
-}
-
-#crm-status-list .crm-severity-warning:hover
-{
-  background-color: #F09E1A;
-  color: white;
+#crm-status-list .crm-severity-warning {
+  background-color: #eba12d;
 }
 
-
 /* Not Okay - Not Warning */
-#crm-status-list .crm-severity-notice
-{
-  background-color: #4A88DF;
-  color: white;
-}
-
-#crm-status-list .crm-severity-notice :hover
-{
-  background-color: #41477E;
-  color: white;
+#crm-status-list .crm-severity-notice {
+  background-color: #4d90eb;
 }
 
 /* All OK Severity */
 #crm-status-list .crm-severity-info,
 #crm-status-list .crm-severity-debug {
   background-color: #00994D;
-  color: white;
 }
 
+#crm-status-list .crm-status-message-body {
+  margin: 1em 0;
+}
 
-#crm-status-list .crm-severity-info:hover,
-#crm-status-list .crm-severity-debug:hover {
-  background-color: #006633;
-  color: white;
+#crm-status-list .hush-menu > div {
+  position: relative;
+  width: 20em; /* determines max-width of popup menu */
+  font-size: .8em;
 }
 
-/* over-riding divs for snooze-options so that inline-block looks better */
+#crm-status-list .hush-menu button {
+  float: right;
+  cursor: pointer;
+}
+
+#crm-status-list .hush-menu ul {
+  position: absolute;
+  top: 1.5em;
+  right: 0;
+  width: auto;
+  margin: 0;
+  padding: 0;
+}
 
-.crm-container .status-snooze-options .crm-section .content,
-.crm-container .status-snooze-options .crm-section .label {
-  margin-left: inherit;
-  text-align: inherit;
-  float: inherit;
-  width: inherit;
-  display: inline-block;
+#crm-status-list .hush-menu li {
+  padding: 0.2em 0.5em;
+  background-color: rgba(255, 255, 255, 0.9);
+  z-index: 99999;
+  font-weight: normal;
 }
diff --git a/ang/crmStatusPage/SnoozeOptions.html b/ang/crmStatusPage/SnoozeOptions.html
index 7a890016a1..f503997cd9 100644
--- a/ang/crmStatusPage/SnoozeOptions.html
+++ b/ang/crmStatusPage/SnoozeOptions.html
@@ -1,7 +1,11 @@
-<span ng-form="snoozeOptions" crm-ui-id-scope style="display: inline">
-    <span crm-ui-field="{name: 'snoozeOptions.until', title: ts('Snooze until')}" style="display: inline" >
-        <input name="until" crm-ui-datepicker ng-model="status.snoozeOptions.until" style="display: inline" />
-        <a crm-icon="fa-floppy-o" ng-click="snooze(status)" class="crm-hover-button" title="{{ts('Save Preference')}}"></a>
-      <span>
-</span>
- <!-- snooze options page, creates a box for picking a date you would like to snooze a status alert until -->
+<div ng-if="!status.is_visible">
+  <button ng-click="setPref(status, '', 1)" type="button" >{{ts('Unhide')}}</button>
+</div>
+<div ng-if="status.is_visible && status.severity_id >= 3">
+  <button type="button" class="hush-menu-button">{{ts('Hide')}}</button>
+  <ul style="display:none;">
+    <li ng-click="setPref(status, 'now + 1 week', 0)">{{ts('Remind me again in a week')}}</li>
+    <li ng-click="setPref(status, 'now + 1 month', 0)">{{ts('Remind me again in a month')}}</li>
+    <li ng-click="setPref(status, '', 0)">{{ts('Never remind me again')}}</li>
+  </ul>
+</div>
diff --git a/ang/crmStatusPage/StatusPage.html b/ang/crmStatusPage/StatusPage.html
index efbe3c98d1..9ffa5d9134 100644
--- a/ang/crmStatusPage/StatusPage.html
+++ b/ang/crmStatusPage/StatusPage.html
@@ -4,46 +4,34 @@
   <form name="crm-system-status" crm-ui-id-scope>
 
     <div>
-      <h1>Status Page</h1>
+      <h1>{{ts('Status Messages')}}</h1>
     </div>
 
     <div crm-ui-tab-set>
       <div
-        ng-repeat="tab in [{is_visible: 1, name: 'visible', icon: 'fa-bell'}, {is_visible: 0, name: 'hidden', icon: 'fa-bell-slash-o'}]"
+        ng-repeat="tab in [{is_visible: 1, icon: 'fa-bell'}, {is_visible: 0, icon: 'fa-bell-slash-o'}]"
         crm-ui-tab
-        id="tab-{{tab.name}}"
+        id="tab-status-visible-{{tab.is_visible}}"
         count="{{_.where(statuses, {is_visible: tab.is_visible}).length}}"
-        crm-title="tab.is_visible ? ts('Active') : ts('Hushed/Snoozed')"
+        crm-title="tab.is_visible ? ts('Active') : ts('Hidden')"
         crm-icon="{{tab.icon}}"
         >
         <div id="crm-status-list" ng-repeat="status in statuses | filter:{is_visible: tab.is_visible}" >
           <h3 class="crm-severity-{{status.severity}}">
             <i ng-if="status.icon" class="crm-i {{status.icon}}"></i>
             {{status.title}}
-            <span class="status-snooze-options" ng-show="status.snoozeOptions.show" style="display: inline-block">
-              <div crm-snooze-options style="display: inline"></div>
-            </span>
-            <a  ng-if="status.is_visible"  ng-click="showSnoozeOptions(status)" ng-show="!status.snoozeOptions.show" class="crm-hover-button" crm-icon="fa-clock-o" title="{{ts('Snooze')}}"></a>
-            <a ng-click="showSnoozeOptions(status)" ng-show="status.snoozeOptions.show" class="crm-hover-button" crm-icon="fa-times" style="display: inline" title="{{ts('Close')}}"></a>
-            <a ng-if="status.is_visible" ng-click="hush(status)" class="crm-hover-button" crm-icon="fa-bell-slash-o" title="{{ts('Hush')}}"></a>
-            <a ng-if="!status.is_visible" ng-click="unhush(status)" class="crm-hover-button" crm-icon="fa-bell-o" title="{{ts('Unhush And Unsnooze')}}"></a>
+            <div statuspage-popup-menu class="hush-menu css_right"></div>
           </h3>
-          <h4>
-            <div class="crm-block">
-              <div class="crm-group">
-                <div class="crm-status-message-body">
-                  <span ng-bind-html="status.message | trusted"></span>
-                  <a
-                    ng-if="status.help"
-                    class="helpicon"
-                    ng-click="alert(status.help, status.title, 'info');"
-                    href="javascript:void(0)"
-                    >
-                  </a>
-                </div>
-              </div>
-            </div>
-          </h4><br/>
+          <div class="crm-block crm-status-message-body">
+            <span ng-bind-html="status.message | trusted"></span>
+            <a
+              ng-if="status.help"
+              class="helpicon"
+              ng-click="alert(status.help, status.title, 'info');"
+              href="javascript:void(0)"
+              >
+            </a>
+          </div>
         </div>
 
       </div>
diff --git a/ang/crmStatusPage/StatusPageCtrl.js b/ang/crmStatusPage/StatusPageCtrl.js
index 924e4af870..bb141a8471 100644
--- a/ang/crmStatusPage/StatusPageCtrl.js
+++ b/ang/crmStatusPage/StatusPageCtrl.js
@@ -11,52 +11,19 @@
       _.each($scope.statuses, function(status) {
         status.severity_id = status.severity;
         status.severity = statuspageSeverityList[status.severity];
-        status.snoozeOptions = {
-          show: false,
-          severity: status.severity
-        };
       });
 
-      // will "hush" a status - gets the severity level of the status that is being hushed, and hushes all alerts for that check at and below the level of the current check
-      $scope.hush = function(status) {
+      // updates a status preference
+      $scope.setPref = function(status, until, visible) {
         crmApi('StatusPreference', 'create', {
           "name": status.name,
-          "ignore_severity": status.severity,
-          "hush_until":  ""
+          "ignore_severity": visible ? 0 : status.severity,
+          "hush_until": until
         }, true)
           .then(function() {
-            status.is_visible = 0;
+            status.is_visible = visible;
           });
       };
-
-    // will reset ignore_severity to 0 to unhush the status alert.
-    $scope.unhush = function(status) {
-      crmApi('StatusPreference', 'create', {
-        "name": status.name,
-        "ignore_severity": 0,
-        "hush_until":  ""
-      }, true)
-        .then(function() {
-          status.is_visible = 1;
-        });
-    };
-
-      // will 'snooze' a status - will not show alerts at that level for that check + alerts below that level for that check until the specified date
-      $scope.snooze = function(status) {
-        $scope.showSnoozeOptions(status);
-        crmApi('StatusPreference', 'create', {
-          "name": status.name,
-          "ignore_severity": status.snoozeOptions.severity,
-          "hush_until": status.snoozeOptions.until
-        }, true)
-          .then(function() {
-            status.is_visible = 0;
-          });
-      };
-
-      $scope.showSnoozeOptions = function(status) {
-        status.snoozeOptions.show = !status.snoozeOptions.show;
-      };
     });
 
 })(angular, CRM.$, CRM._);
diff --git a/ang/crmStatusPage/StatusPageServices.js b/ang/crmStatusPage/StatusPageServices.js
index 9a0c263b96..c4e97fc516 100644
--- a/ang/crmStatusPage/StatusPageServices.js
+++ b/ang/crmStatusPage/StatusPageServices.js
@@ -1,9 +1,31 @@
 (function(angular, $, _) {
 
-  angular.module('statuspage').filter('trusted', function($sce){ return $sce.trustAsHtml; });
+  angular.module('statuspage')
+    .filter('trusted', function($sce){ return $sce.trustAsHtml; })
 
-  angular.module('statuspage').service('statuspageSeverityList', function() {
-    return ['debug', 'info', 'notice', 'warning', 'error', 'critical', 'alert', 'emergency'];
-  });
+    .service('statuspageSeverityList', function() {
+      return ['debug', 'info', 'notice', 'warning', 'error', 'critical', 'alert', 'emergency'];
+    })
+
+    // Todo: abstract this into a generic crmUi directive?
+    .directive('statuspagePopupMenu', function($timeout) {
+      return {
+        templateUrl: '~/statuspage/SnoozeOptions.html',
+        transclude: true,
+
+        link: function(scope, element, attr) {
+          element.on('click', '.hush-menu-button', function() {
+            $timeout(function() {
+              $('ul', element).show().menu();
+              element.closest('h3').addClass('menuopen');
+              $('body').one('click', function() {
+                $('ul', element).menu('destroy').hide();
+                element.closest('h3').removeClass('menuopen');
+              });
+            });
+          });
+        }
+      };
+    });
 
 })(angular, CRM.$, CRM._);
diff --git a/ang/crmStatusPage/crmSnoozeOption.js b/ang/crmStatusPage/crmSnoozeOption.js
deleted file mode 100644
index 63774bb5c6..0000000000
--- a/ang/crmStatusPage/crmSnoozeOption.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// creates a directive for the snooze options page
-
-(function(angular, $, _) {
-  angular.module('statuspage').directive('crmSnoozeOptions', function(statuspageSeverityList) {
-    return {
-      templateUrl: '~/statuspage/SnoozeOptions.html',
-      transclude: true,
-      link: function(scope, element, attr) {
-        scope.severityList = statuspageSeverityList;
-      }
-    };
-  });
-})(angular, CRM.$, CRM._);