Skip to content

O
origin-web-common
Commit ba048498 by Samuel Padgett
Options

Add NotificationService.hideNotification 

Also truncate long text in toast notifications (with a "See All" link).
parent eb8c2167
Showing with 92 additions and 21 deletions
dist/origin-web-common-ui.js
...@@ -383,7 +383,15 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -383,7 +383,15 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" <span class=\"{{notification.type | alertIcon}}\" aria-hidden=\"true\"></span>\n" + " <span class=\"{{notification.type | alertIcon}}\" aria-hidden=\"true\"></span>\n" +
" <span class=\"sr-only\">{{notification.type}}</span>\n" + " <span class=\"sr-only\">{{notification.type}}</span>\n" +
" <span class=\"toast-notification-message\" ng-if=\"notification.message\">{{notification.message}}</span>\n" + " <span class=\"toast-notification-message\" ng-if=\"notification.message\">{{notification.message}}</span>\n" +
" <span ng-if=\"notification.details\">{{notification.details}}</span>\n" + " <span ng-if=\"notification.details\">\n" +
" <truncate-long-text\n" +
" limit=\"200\"\n" +
" content=\"notification.details\"\n" +
" use-word-boundary=\"true\"\n" +
" expandable=\"true\"\n" +
" hide-collapse=\"true\">\n" +
" </truncate-long-text>\n" +
" </span>\n" +
" <span ng-repeat=\"link in notification.links\">\n" + " <span ng-repeat=\"link in notification.links\">\n" +
" <a ng-if=\"!link.href\" href=\"\" ng-click=\"onClick(notification, link)\" role=\"button\">{{link.label}}</a>\n" + " <a ng-if=\"!link.href\" href=\"\" ng-click=\"onClick(notification, link)\" role=\"button\">{{link.label}}</a>\n" +
" <a ng-if=\"link.href\" ng-href=\"{{link.href}}\" ng-attr-target=\"{{link.target}}\">{{link.label}}</a>\n" + " <a ng-if=\"link.href\" ng-href=\"{{link.href}}\" ng-attr-target=\"{{link.target}}\">{{link.label}}</a>\n" +
...@@ -411,11 +419,11 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -411,11 +419,11 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" </span>\n" + " </span>\n" +
" <span ng-if=\"toggles.expanded\">\n" + " <span ng-if=\"toggles.expanded\">\n" +
" <div ng-if=\"prettifyJson\" class=\"well\">\n" + " <div ng-if=\"prettifyJson\" class=\"well\">\n" +
" <span class=\"pull-right\" style=\"margin-top: -10px;\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" + " <span ng-if=\"!hideCollapse\" class=\"pull-right\" style=\"margin-top: -10px;\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
" <span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" + " <span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" +
" </div>\n" + " </div>\n" +
" <span ng-if=\"!prettifyJson\">\n" + " <span ng-if=\"!prettifyJson\">\n" +
" <span class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" + " <span ng-if=\"!hideCollapse\" class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
" <span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" + " <span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" +
" </span>\n" + " </span>\n" +
" </span>\n" + " </span>\n" +
...@@ -932,6 +940,8 @@ angular.module('openshiftCommonUI') ...@@ -932,6 +940,8 @@ angular.module('openshiftCommonUI')
newlineLimit: '=', newlineLimit: '=',
useWordBoundary: '=', useWordBoundary: '=',
expandable: '=', expandable: '=',
// When expandable is on, optionally hide the collapse link so text can only be expanded. (Used for toast notifications.)
hideCollapse: '=',
keywords: '=highlightKeywords', // optional keywords to highlight using the `highlightKeywords` filter keywords: '=highlightKeywords', // optional keywords to highlight using the `highlightKeywords` filter
prettifyJson: '=' // prettifies JSON blobs when expanded, only used if expandable is true prettifyJson: '=' // prettifies JSON blobs when expanded, only used if expandable is true
}, },
...@@ -1712,6 +1722,18 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function() ...@@ -1712,6 +1722,18 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function()
notifications.push(notification); notifications.push(notification);
}; };
var hideNotification = function (notificationID) {
if (!notificationID) {
return;
}
_.each(notifications, function(notification) {
if (notification.id === notificationID) {
notification.hidden = true;
}
});
};
var getNotifications = function () { var getNotifications = function () {
return notifications; return notifications;
}; };
...@@ -1746,9 +1768,7 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function() ...@@ -1746,9 +1768,7 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function()
}; };
var isAutoDismiss = function(notification) { var isAutoDismiss = function(notification) {
return _.find(autoDismissTypes, function(type) { return _.includes(autoDismissTypes, notification.type);
return type === notification.type;
});
}; };
// Also handle `addNotification` events on $rootScope, which is used by DataService. // Also handle `addNotification` events on $rootScope, which is used by DataService.
...@@ -1758,6 +1778,7 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function() ...@@ -1758,6 +1778,7 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function()
return { return {
addNotification: addNotification, addNotification: addNotification,
hideNotification: hideNotification,
getNotifications: getNotifications, getNotifications: getNotifications,
clearNotifications: clearNotifications, clearNotifications: clearNotifications,
isNotificationPermanentlyHidden: isNotificationPermanentlyHidden, isNotificationPermanentlyHidden: isNotificationPermanentlyHidden,
......
dist/origin-web-common.js
...@@ -554,7 +554,15 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -554,7 +554,15 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" <span class=\"{{notification.type | alertIcon}}\" aria-hidden=\"true\"></span>\n" + " <span class=\"{{notification.type | alertIcon}}\" aria-hidden=\"true\"></span>\n" +
" <span class=\"sr-only\">{{notification.type}}</span>\n" + " <span class=\"sr-only\">{{notification.type}}</span>\n" +
" <span class=\"toast-notification-message\" ng-if=\"notification.message\">{{notification.message}}</span>\n" + " <span class=\"toast-notification-message\" ng-if=\"notification.message\">{{notification.message}}</span>\n" +
" <span ng-if=\"notification.details\">{{notification.details}}</span>\n" + " <span ng-if=\"notification.details\">\n" +
" <truncate-long-text\n" +
" limit=\"200\"\n" +
" content=\"notification.details\"\n" +
" use-word-boundary=\"true\"\n" +
" expandable=\"true\"\n" +
" hide-collapse=\"true\">\n" +
" </truncate-long-text>\n" +
" </span>\n" +
" <span ng-repeat=\"link in notification.links\">\n" + " <span ng-repeat=\"link in notification.links\">\n" +
" <a ng-if=\"!link.href\" href=\"\" ng-click=\"onClick(notification, link)\" role=\"button\">{{link.label}}</a>\n" + " <a ng-if=\"!link.href\" href=\"\" ng-click=\"onClick(notification, link)\" role=\"button\">{{link.label}}</a>\n" +
" <a ng-if=\"link.href\" ng-href=\"{{link.href}}\" ng-attr-target=\"{{link.target}}\">{{link.label}}</a>\n" + " <a ng-if=\"link.href\" ng-href=\"{{link.href}}\" ng-attr-target=\"{{link.target}}\">{{link.label}}</a>\n" +
...@@ -582,11 +590,11 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -582,11 +590,11 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" </span>\n" + " </span>\n" +
" <span ng-if=\"toggles.expanded\">\n" + " <span ng-if=\"toggles.expanded\">\n" +
" <div ng-if=\"prettifyJson\" class=\"well\">\n" + " <div ng-if=\"prettifyJson\" class=\"well\">\n" +
" <span class=\"pull-right\" style=\"margin-top: -10px;\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" + " <span ng-if=\"!hideCollapse\" class=\"pull-right\" style=\"margin-top: -10px;\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
" <span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" + " <span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" +
" </div>\n" + " </div>\n" +
" <span ng-if=\"!prettifyJson\">\n" + " <span ng-if=\"!prettifyJson\">\n" +
" <span class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" + " <span ng-if=\"!hideCollapse\" class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
" <span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" + " <span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" +
" </span>\n" + " </span>\n" +
" </span>\n" + " </span>\n" +
...@@ -1103,6 +1111,8 @@ angular.module('openshiftCommonUI') ...@@ -1103,6 +1111,8 @@ angular.module('openshiftCommonUI')
newlineLimit: '=', newlineLimit: '=',
useWordBoundary: '=', useWordBoundary: '=',
expandable: '=', expandable: '=',
// When expandable is on, optionally hide the collapse link so text can only be expanded. (Used for toast notifications.)
hideCollapse: '=',
keywords: '=highlightKeywords', // optional keywords to highlight using the `highlightKeywords` filter keywords: '=highlightKeywords', // optional keywords to highlight using the `highlightKeywords` filter
prettifyJson: '=' // prettifies JSON blobs when expanded, only used if expandable is true prettifyJson: '=' // prettifies JSON blobs when expanded, only used if expandable is true
}, },
...@@ -4807,6 +4817,18 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function() ...@@ -4807,6 +4817,18 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function()
notifications.push(notification); notifications.push(notification);
}; };
var hideNotification = function (notificationID) {
if (!notificationID) {
return;
}
_.each(notifications, function(notification) {
if (notification.id === notificationID) {
notification.hidden = true;
}
});
};
var getNotifications = function () { var getNotifications = function () {
return notifications; return notifications;
}; };
...@@ -4841,9 +4863,7 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function() ...@@ -4841,9 +4863,7 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function()
}; };
var isAutoDismiss = function(notification) { var isAutoDismiss = function(notification) {
return _.find(autoDismissTypes, function(type) { return _.includes(autoDismissTypes, notification.type);
return type === notification.type;
});
}; };
// Also handle `addNotification` events on $rootScope, which is used by DataService. // Also handle `addNotification` events on $rootScope, which is used by DataService.
...@@ -4853,6 +4873,7 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function() ...@@ -4853,6 +4873,7 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function()
return { return {
addNotification: addNotification, addNotification: addNotification,
hideNotification: hideNotification,
getNotifications: getNotifications, getNotifications: getNotifications,
clearNotifications: clearNotifications, clearNotifications: clearNotifications,
isNotificationPermanentlyHidden: isNotificationPermanentlyHidden, isNotificationPermanentlyHidden: isNotificationPermanentlyHidden,
......
dist/scripts/templates.js
...@@ -365,7 +365,15 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac ...@@ -365,7 +365,15 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
" <span class=\"{{notification.type | alertIcon}}\" aria-hidden=\"true\"></span>\n" + " <span class=\"{{notification.type | alertIcon}}\" aria-hidden=\"true\"></span>\n" +
" <span class=\"sr-only\">{{notification.type}}</span>\n" + " <span class=\"sr-only\">{{notification.type}}</span>\n" +
" <span class=\"toast-notification-message\" ng-if=\"notification.message\">{{notification.message}}</span>\n" + " <span class=\"toast-notification-message\" ng-if=\"notification.message\">{{notification.message}}</span>\n" +
" <span ng-if=\"notification.details\">{{notification.details}}</span>\n" + " <span ng-if=\"notification.details\">\n" +
" <truncate-long-text\n" +
" limit=\"200\"\n" +
" content=\"notification.details\"\n" +
" use-word-boundary=\"true\"\n" +
" expandable=\"true\"\n" +
" hide-collapse=\"true\">\n" +
" </truncate-long-text>\n" +
" </span>\n" +
" <span ng-repeat=\"link in notification.links\">\n" + " <span ng-repeat=\"link in notification.links\">\n" +
" <a ng-if=\"!link.href\" href=\"\" ng-click=\"onClick(notification, link)\" role=\"button\">{{link.label}}</a>\n" + " <a ng-if=\"!link.href\" href=\"\" ng-click=\"onClick(notification, link)\" role=\"button\">{{link.label}}</a>\n" +
" <a ng-if=\"link.href\" ng-href=\"{{link.href}}\" ng-attr-target=\"{{link.target}}\">{{link.label}}</a>\n" + " <a ng-if=\"link.href\" ng-href=\"{{link.href}}\" ng-attr-target=\"{{link.target}}\">{{link.label}}</a>\n" +
...@@ -393,11 +401,11 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac ...@@ -393,11 +401,11 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
" </span>\n" + " </span>\n" +
" <span ng-if=\"toggles.expanded\">\n" + " <span ng-if=\"toggles.expanded\">\n" +
" <div ng-if=\"prettifyJson\" class=\"well\">\n" + " <div ng-if=\"prettifyJson\" class=\"well\">\n" +
" <span class=\"pull-right\" style=\"margin-top: -10px;\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" + " <span ng-if=\"!hideCollapse\" class=\"pull-right\" style=\"margin-top: -10px;\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
" <span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" + " <span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" +
" </div>\n" + " </div>\n" +
" <span ng-if=\"!prettifyJson\">\n" + " <span ng-if=\"!prettifyJson\">\n" +
" <span class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" + " <span ng-if=\"!hideCollapse\" class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
" <span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" + " <span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" +
" </span>\n" + " </span>\n" +
" </span>\n" + " </span>\n" +
......
src/components/toast-notifications/toast-notifications.html
...@@ -9,7 +9,15 @@ ...@@ -9,7 +9,15 @@
<span class="{{notification.type | alertIcon}}" aria-hidden="true"></span> <span class="{{notification.type | alertIcon}}" aria-hidden="true"></span>
<span class="sr-only">{{notification.type}}</span> <span class="sr-only">{{notification.type}}</span>
<span class="toast-notification-message" ng-if="notification.message">{{notification.message}}</span> <span class="toast-notification-message" ng-if="notification.message">{{notification.message}}</span>
<span ng-if="notification.details">{{notification.details}}</span> <span ng-if="notification.details">
<truncate-long-text
limit="200"
content="notification.details"
use-word-boundary="true"
expandable="true"
hide-collapse="true">
</truncate-long-text>
</span>
<span ng-repeat="link in notification.links"> <span ng-repeat="link in notification.links">
<a ng-if="!link.href" href="" ng-click="onClick(notification, link)" role="button">{{link.label}}</a> <a ng-if="!link.href" href="" ng-click="onClick(notification, link)" role="button">{{link.label}}</a>
<a ng-if="link.href" ng-href="{{link.href}}" ng-attr-target="{{link.target}}">{{link.label}}</a> <a ng-if="link.href" ng-href="{{link.href}}" ng-attr-target="{{link.target}}">{{link.label}}</a>
......
src/components/truncate-long-text/truncateLongText.html
...@@ -13,11 +13,11 @@ ...@@ -13,11 +13,11 @@
</span> </span>
<span ng-if="toggles.expanded"> <span ng-if="toggles.expanded">
<div ng-if="prettifyJson" class="well"> <div ng-if="prettifyJson" class="well">
<span class="pull-right" style="margin-top: -10px;"><a href="" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a></span> <span ng-if="!hideCollapse" class="pull-right" style="margin-top: -10px;"><a href="" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a></span>
<span ng-bind-html="content | prettifyJSON | highlightKeywords : keywords" class="pretty-json truncated-content"></span> <span ng-bind-html="content | prettifyJSON | highlightKeywords : keywords" class="pretty-json truncated-content"></span>
</div> </div>
<span ng-if="!prettifyJson"> <span ng-if="!prettifyJson">
<span class="pull-right"><a href="" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a></span> <span ng-if="!hideCollapse" class="pull-right"><a href="" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a></span>
<span ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span> <span ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>
</span> </span>
</span> </span>
......
src/components/truncate-long-text/truncateLongText.js
...@@ -12,6 +12,8 @@ angular.module('openshiftCommonUI') ...@@ -12,6 +12,8 @@ angular.module('openshiftCommonUI')
newlineLimit: '=', newlineLimit: '=',
useWordBoundary: '=', useWordBoundary: '=',
expandable: '=', expandable: '=',
// When expandable is on, optionally hide the collapse link so text can only be expanded. (Used for toast notifications.)
hideCollapse: '=',
keywords: '=highlightKeywords', // optional keywords to highlight using the `highlightKeywords` filter keywords: '=highlightKeywords', // optional keywords to highlight using the `highlightKeywords` filter
prettifyJson: '=' // prettifies JSON blobs when expanded, only used if expandable is true prettifyJson: '=' // prettifies JSON blobs when expanded, only used if expandable is true
}, },
......
src/ui-services/notificationsService.js
...@@ -25,6 +25,18 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function() ...@@ -25,6 +25,18 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function()
notifications.push(notification); notifications.push(notification);
}; };
var hideNotification = function (notificationID) {
if (!notificationID) {
return;
}
_.each(notifications, function(notification) {
if (notification.id === notificationID) {
notification.hidden = true;
}
});
};
var getNotifications = function () { var getNotifications = function () {
return notifications; return notifications;
}; };
...@@ -59,9 +71,7 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function() ...@@ -59,9 +71,7 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function()
}; };
var isAutoDismiss = function(notification) { var isAutoDismiss = function(notification) {
return _.find(autoDismissTypes, function(type) { return _.includes(autoDismissTypes, notification.type);
return type === notification.type;
});
}; };
// Also handle `addNotification` events on $rootScope, which is used by DataService. // Also handle `addNotification` events on $rootScope, which is used by DataService.
...@@ -71,6 +81,7 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function() ...@@ -71,6 +81,7 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function()
return { return {
addNotification: addNotification, addNotification: addNotification,
hideNotification: hideNotification,
getNotifications: getNotifications, getNotifications: getNotifications,
clearNotifications: clearNotifications, clearNotifications: clearNotifications,
isNotificationPermanentlyHidden: isNotificationPermanentlyHidden, isNotificationPermanentlyHidden: isNotificationPermanentlyHidden,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment