-/* 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,
#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;
}
-<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>
<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>
_.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._);
(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._);
+++ /dev/null
-// 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._);
projects / civicrm-core.git / commitdiff