From c426a98725d4e948d5b648fe55e83d002ce16206 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Sat, 24 Oct 2015 12:52:09 -0400 Subject: [PATCH] CRM-13823 - Use popup menu for snooze options --- ang/crmStatusPage.css | 84 ++++++++++++------------- ang/crmStatusPage/SnoozeOptions.html | 18 +++--- ang/crmStatusPage/StatusPage.html | 42 +++++-------- ang/crmStatusPage/StatusPageCtrl.js | 43 ++----------- ang/crmStatusPage/StatusPageServices.js | 30 +++++++-- ang/crmStatusPage/crmSnoozeOption.js | 13 ---- 6 files changed, 97 insertions(+), 133 deletions(-) delete mode 100644 ang/crmStatusPage/crmSnoozeOption.js 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 @@ - - - - - - - +
+ +
+
+ +
    +
  • {{ts('Remind me again in a week')}}
    • +
  • {{ts('Remind me again in a month')}}
    • +
  • {{ts('Never remind me again')}}
    • +
+
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 @@
-

Status Page

+

{{ts('Status Messages')}}

{{status.title}} - -
- - - - - +

-

-
-
-
- - - -
-
-
-


+
+ + + +
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._); -- 2.25.1