Skip to content

Commit ba04849

Browse files
spadgettspadgett
committed
Add NotificationService.hideNotification
Also truncate long text in toast notifications (with a "See All" link).
1 parent eb8c216 commit ba04849

File tree

8 files changed

+101
-26
lines changed

8 files changed

+101
-26
lines changed

‎dist/origin-web-common-ui.js

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -383,7 +383,15 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
383383
" <span class=\"{{notification.type | alertIcon}}\" aria-hidden=\"true\"></span>\n" +
384384
" <span class=\"sr-only\">{{notification.type}}</span>\n" +
385385
" <span class=\"toast-notification-message\" ng-if=\"notification.message\">{{notification.message}}</span>\n" +
386-
" <span ng-if=\"notification.details\">{{notification.details}}</span>\n" +
386+
" <span ng-if=\"notification.details\">\n" +
387+
" <truncate-long-text\n" +
388+
" limit=\"200\"\n" +
389+
" content=\"notification.details\"\n" +
390+
" use-word-boundary=\"true\"\n" +
391+
" expandable=\"true\"\n" +
392+
" hide-collapse=\"true\">\n" +
393+
" </truncate-long-text>\n" +
394+
" </span>\n" +
387395
" <span ng-repeat=\"link in notification.links\">\n" +
388396
" <a ng-if=\"!link.href\" href=\"\" ng-click=\"onClick(notification, link)\" role=\"button\">{{link.label}}</a>\n" +
389397
" <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');
411419
" </span>\n" +
412420
" <span ng-if=\"toggles.expanded\">\n" +
413421
" <div ng-if=\"prettifyJson\" class=\"well\">\n" +
414-
" <span class=\"pull-right\" style=\"margin-top: -10px;\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
422+
" <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" +
415423
" <span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" +
416424
" </div>\n" +
417425
" <span ng-if=\"!prettifyJson\">\n" +
418-
" <span class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
426+
" <span ng-if=\"!hideCollapse\" class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
419427
" <span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" +
420428
" </span>\n" +
421429
" </span>\n" +
@@ -932,6 +940,8 @@ angular.module('openshiftCommonUI')
932940
newlineLimit: '=',
933941
useWordBoundary: '=',
934942
expandable: '=',
943+
// When expandable is on, optionally hide the collapse link so text can only be expanded. (Used for toast notifications.)
944+
hideCollapse: '=',
935945
keywords: '=highlightKeywords', // optional keywords to highlight using the `highlightKeywords` filter
936946
prettifyJson: '=' // prettifies JSON blobs when expanded, only used if expandable is true
937947
},
@@ -1712,6 +1722,18 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function()
17121722
notifications.push(notification);
17131723
};
17141724

1725+
var hideNotification = function (notificationID) {
1726+
if (!notificationID) {
1727+
return;
1728+
}
1729+
1730+
_.each(notifications, function(notification) {
1731+
if (notification.id === notificationID) {
1732+
notification.hidden = true;
1733+
}
1734+
});
1735+
};
1736+
17151737
var getNotifications = function () {
17161738
return notifications;
17171739
};
@@ -1746,9 +1768,7 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function()
17461768
};
17471769

17481770
var isAutoDismiss = function(notification) {
1749-
return _.find(autoDismissTypes, function(type) {
1750-
return type === notification.type;
1751-
});
1771+
return _.includes(autoDismissTypes, notification.type);
17521772
};
17531773

17541774
// Also handle `addNotification` events on $rootScope, which is used by DataService.
@@ -1758,6 +1778,7 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function()
17581778

17591779
return {
17601780
addNotification: addNotification,
1781+
hideNotification: hideNotification,
17611782
getNotifications: getNotifications,
17621783
clearNotifications: clearNotifications,
17631784
isNotificationPermanentlyHidden: isNotificationPermanentlyHidden,

‎dist/origin-web-common.js

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -554,7 +554,15 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
554554
" <span class=\"{{notification.type | alertIcon}}\" aria-hidden=\"true\"></span>\n" +
555555
" <span class=\"sr-only\">{{notification.type}}</span>\n" +
556556
" <span class=\"toast-notification-message\" ng-if=\"notification.message\">{{notification.message}}</span>\n" +
557-
" <span ng-if=\"notification.details\">{{notification.details}}</span>\n" +
557+
" <span ng-if=\"notification.details\">\n" +
558+
" <truncate-long-text\n" +
559+
" limit=\"200\"\n" +
560+
" content=\"notification.details\"\n" +
561+
" use-word-boundary=\"true\"\n" +
562+
" expandable=\"true\"\n" +
563+
" hide-collapse=\"true\">\n" +
564+
" </truncate-long-text>\n" +
565+
" </span>\n" +
558566
" <span ng-repeat=\"link in notification.links\">\n" +
559567
" <a ng-if=\"!link.href\" href=\"\" ng-click=\"onClick(notification, link)\" role=\"button\">{{link.label}}</a>\n" +
560568
" <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');
582590
" </span>\n" +
583591
" <span ng-if=\"toggles.expanded\">\n" +
584592
" <div ng-if=\"prettifyJson\" class=\"well\">\n" +
585-
" <span class=\"pull-right\" style=\"margin-top: -10px;\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
593+
" <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" +
586594
" <span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" +
587595
" </div>\n" +
588596
" <span ng-if=\"!prettifyJson\">\n" +
589-
" <span class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
597+
" <span ng-if=\"!hideCollapse\" class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
590598
" <span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" +
591599
" </span>\n" +
592600
" </span>\n" +
@@ -1103,6 +1111,8 @@ angular.module('openshiftCommonUI')
11031111
newlineLimit: '=',
11041112
useWordBoundary: '=',
11051113
expandable: '=',
1114+
// When expandable is on, optionally hide the collapse link so text can only be expanded. (Used for toast notifications.)
1115+
hideCollapse: '=',
11061116
keywords: '=highlightKeywords', // optional keywords to highlight using the `highlightKeywords` filter
11071117
prettifyJson: '=' // prettifies JSON blobs when expanded, only used if expandable is true
11081118
},
@@ -4807,6 +4817,18 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function()
48074817
notifications.push(notification);
48084818
};
48094819

4820+
var hideNotification = function (notificationID) {
4821+
if (!notificationID) {
4822+
return;
4823+
}
4824+
4825+
_.each(notifications, function(notification) {
4826+
if (notification.id === notificationID) {
4827+
notification.hidden = true;
4828+
}
4829+
});
4830+
};
4831+
48104832
var getNotifications = function () {
48114833
return notifications;
48124834
};
@@ -4841,9 +4863,7 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function()
48414863
};
48424864

48434865
var isAutoDismiss = function(notification) {
4844-
return _.find(autoDismissTypes, function(type) {
4845-
return type === notification.type;
4846-
});
4866+
return _.includes(autoDismissTypes, notification.type);
48474867
};
48484868

48494869
// Also handle `addNotification` events on $rootScope, which is used by DataService.
@@ -4853,6 +4873,7 @@ angular.module('openshiftCommonUI').provider('NotificationsService', function()
48534873

48544874
return {
48554875
addNotification: addNotification,
4876+
hideNotification: hideNotification,
48564877
getNotifications: getNotifications,
48574878
clearNotifications: clearNotifications,
48584879
isNotificationPermanentlyHidden: isNotificationPermanentlyHidden,

0 commit comments

Comments
 (0)