Skip to content

O
origin-web-common
Commit 8d28993d by Sam Padgett Committed by GitHub
Options

Merge pull request #214 from sg00dwin/truncate-long-service-description-issue2072 

Using truncate-long-text directive to truncate with see all link for long service descriptions.
parents 63afba8b 2d76f243
Showing with 57 additions and 37 deletions
dist/origin-web-common-ui.js
...@@ -458,8 +458,14 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -458,8 +458,14 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" Do not remove class `truncated-content` (here or below) even though it's not\n" + " Do not remove class `truncated-content` (here or below) even though it's not\n" +
" styled directly in origin-web-common. `truncated-content` is used by\n" + " styled directly in origin-web-common. `truncated-content` is used by\n" +
" origin-web-console in certain contexts.\n" + " origin-web-console in certain contexts.\n" +
"\n" +
" highlightKeywords and linkify are mutually exclusive options\n" +
"-->\n" + "-->\n" +
"<span ng-if=\"!truncated\" ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" + "<span ng-if=\"!truncated\">\n" +
" <span ng-if=\"!linkify || (highlightKeywords | size)\" ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" +
" <span ng-if=\"linkify && !(highlightKeywords | size)\" ng-bind-html=\"content | linkify : '_blank'\" class=\"truncated-content\"></span>\n" +
"</span>\n" +
"<!-- To avoid truncating in middle of a link, we only optionally apply linkify to expanded content -->\n" +
"<span ng-if=\"truncated\">\n" + "<span ng-if=\"truncated\">\n" +
" <span ng-if=\"!toggles.expanded\">\n" + " <span ng-if=\"!toggles.expanded\">\n" +
" <span ng-attr-title=\"{{content}}\" class=\"truncation-block\">\n" + " <span ng-attr-title=\"{{content}}\" class=\"truncation-block\">\n" +
...@@ -468,14 +474,13 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -468,14 +474,13 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" <a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" class=\"truncation-expand-link\">See All</a>\n" + " <a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" class=\"truncation-expand-link\">See All</a>\n" +
" </span>\n" + " </span>\n" +
" <span ng-if=\"toggles.expanded\">\n" + " <span ng-if=\"toggles.expanded\">\n" +
" <div ng-if=\"prettifyJson\" class=\"well\">\n" +
" <a href=\"\" ng-if=\"!hideCollapse\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a>\n" +
" <span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" +
" </div>\n" +
" <span ng-if=\"!prettifyJson\">\n" +
" <a href=\"\" ng-if=\"!hideCollapse\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a>\n" + " <a href=\"\" ng-if=\"!hideCollapse\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a>\n" +
" <span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" + " <span ng-if=\"!linkify || (highlightKeywords | size)\"\n" +
" </span>\n" + " ng-bind-html=\"content | highlightKeywords : keywords\"\n" +
" class=\"truncated-content\"></span>\n" +
" <span ng-if=\"linkify && !(highlightKeywords | size)\"\n" +
" ng-bind-html=\"content | linkify : '_blank'\"\n" +
" class=\"truncated-content\"></span>\n" +
" </span>\n" + " </span>\n" +
"</span>\n" "</span>\n"
); );
...@@ -1236,7 +1241,7 @@ angular.module('openshiftCommonUI') ...@@ -1236,7 +1241,7 @@ angular.module('openshiftCommonUI')
// When expandable is on, optionally hide the collapse link so text can only be expanded. (Used for toast notifications.) // When expandable is on, optionally hide the collapse link so text can only be expanded. (Used for toast notifications.)
hideCollapse: '=', 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 linkify: '=?'
}, },
templateUrl: 'src/components/truncate-long-text/truncateLongText.html', templateUrl: 'src/components/truncate-long-text/truncateLongText.html',
link: function(scope) { link: function(scope) {
......
dist/origin-web-common.js
...@@ -629,8 +629,14 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -629,8 +629,14 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" Do not remove class `truncated-content` (here or below) even though it's not\n" + " Do not remove class `truncated-content` (here or below) even though it's not\n" +
" styled directly in origin-web-common. `truncated-content` is used by\n" + " styled directly in origin-web-common. `truncated-content` is used by\n" +
" origin-web-console in certain contexts.\n" + " origin-web-console in certain contexts.\n" +
"\n" +
" highlightKeywords and linkify are mutually exclusive options\n" +
"-->\n" + "-->\n" +
"<span ng-if=\"!truncated\" ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" + "<span ng-if=\"!truncated\">\n" +
" <span ng-if=\"!linkify || (highlightKeywords | size)\" ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" +
" <span ng-if=\"linkify && !(highlightKeywords | size)\" ng-bind-html=\"content | linkify : '_blank'\" class=\"truncated-content\"></span>\n" +
"</span>\n" +
"<!-- To avoid truncating in middle of a link, we only optionally apply linkify to expanded content -->\n" +
"<span ng-if=\"truncated\">\n" + "<span ng-if=\"truncated\">\n" +
" <span ng-if=\"!toggles.expanded\">\n" + " <span ng-if=\"!toggles.expanded\">\n" +
" <span ng-attr-title=\"{{content}}\" class=\"truncation-block\">\n" + " <span ng-attr-title=\"{{content}}\" class=\"truncation-block\">\n" +
...@@ -639,14 +645,13 @@ hawtioPluginLoader.addModule('openshiftCommonUI'); ...@@ -639,14 +645,13 @@ hawtioPluginLoader.addModule('openshiftCommonUI');
" <a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" class=\"truncation-expand-link\">See All</a>\n" + " <a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" class=\"truncation-expand-link\">See All</a>\n" +
" </span>\n" + " </span>\n" +
" <span ng-if=\"toggles.expanded\">\n" + " <span ng-if=\"toggles.expanded\">\n" +
" <div ng-if=\"prettifyJson\" class=\"well\">\n" +
" <a href=\"\" ng-if=\"!hideCollapse\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a>\n" +
" <span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" +
" </div>\n" +
" <span ng-if=\"!prettifyJson\">\n" +
" <a href=\"\" ng-if=\"!hideCollapse\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a>\n" + " <a href=\"\" ng-if=\"!hideCollapse\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a>\n" +
" <span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" + " <span ng-if=\"!linkify || (highlightKeywords | size)\"\n" +
" </span>\n" + " ng-bind-html=\"content | highlightKeywords : keywords\"\n" +
" class=\"truncated-content\"></span>\n" +
" <span ng-if=\"linkify && !(highlightKeywords | size)\"\n" +
" ng-bind-html=\"content | linkify : '_blank'\"\n" +
" class=\"truncated-content\"></span>\n" +
" </span>\n" + " </span>\n" +
"</span>\n" "</span>\n"
); );
...@@ -1407,7 +1412,7 @@ angular.module('openshiftCommonUI') ...@@ -1407,7 +1412,7 @@ angular.module('openshiftCommonUI')
// When expandable is on, optionally hide the collapse link so text can only be expanded. (Used for toast notifications.) // When expandable is on, optionally hide the collapse link so text can only be expanded. (Used for toast notifications.)
hideCollapse: '=', 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 linkify: '=?'
}, },
templateUrl: 'src/components/truncate-long-text/truncateLongText.html', templateUrl: 'src/components/truncate-long-text/truncateLongText.html',
link: function(scope) { link: function(scope) {
......
dist/origin-web-common.min.js
...@@ -92,7 +92,7 @@ $templateCache.put("src/components/create-project/createProject.html", '<form na ...@@ -92,7 +92,7 @@ $templateCache.put("src/components/create-project/createProject.html", '<form na
$templateCache.put("src/components/delete-project/delete-project-button.html", '<div class="actions">\n <!-- Avoid whitespace inside the link -->\n <a href=""\n ng-click="$event.stopPropagation(); openDeleteModal()"\n role="button"\n class="action-button"\n ng-attr-aria-disabled="{{disableDelete ? \'true\' : undefined}}"\n ng-class="{ \'disabled-link\': disableDelete }"\n ><i class="fa fa-trash-o" aria-hidden="true"\n ></i><span class="sr-only">Delete Project {{projectName}}</span></a>\n</div>\n'), $templateCache.put("src/components/delete-project/delete-project-modal.html", '<div class="delete-resource-modal">\n <!-- Use a form so that the enter key submits when typing a project name to confirm. -->\n <form>\n <div class="modal-body">\n <h1>Are you sure you want to delete the project \'<strong>{{project | displayName}}</strong>\'?</h1>\n <p>\n This will <strong>delete all resources</strong> associated with\n the project {{project | displayName}} and <strong>cannot be\n undone</strong>. Make sure this is something you really want to do!\n </p>\n <div ng-show="typeNameToConfirm">\n <p>Type the name of the project to confirm.</p>\n <p>\n <label class="sr-only" for="resource-to-delete">project to delete</label>\n <input\n ng-model="confirmName"\n id="resource-to-delete"\n type="text"\n class="form-control input-lg"\n autocorrect="off"\n autocapitalize="off"\n spellcheck="false"\n autofocus>\n </p>\n </div>\n </div>\n <div class="modal-footer">\n <button ng-disabled="typeNameToConfirm && confirmName !== project.metadata.name && confirmName !== (project | displayName : false)" class="btn btn-lg btn-danger" type="submit" ng-click="delete()">Delete</button>\n <button class="btn btn-lg btn-default" type="button" ng-click="cancel()">Cancel</button>\n </div>\n </form>\n</div>\n'), $templateCache.put("src/components/delete-project/delete-project-button.html", '<div class="actions">\n <!-- Avoid whitespace inside the link -->\n <a href=""\n ng-click="$event.stopPropagation(); openDeleteModal()"\n role="button"\n class="action-button"\n ng-attr-aria-disabled="{{disableDelete ? \'true\' : undefined}}"\n ng-class="{ \'disabled-link\': disableDelete }"\n ><i class="fa fa-trash-o" aria-hidden="true"\n ></i><span class="sr-only">Delete Project {{projectName}}</span></a>\n</div>\n'), $templateCache.put("src/components/delete-project/delete-project-modal.html", '<div class="delete-resource-modal">\n <!-- Use a form so that the enter key submits when typing a project name to confirm. -->\n <form>\n <div class="modal-body">\n <h1>Are you sure you want to delete the project \'<strong>{{project | displayName}}</strong>\'?</h1>\n <p>\n This will <strong>delete all resources</strong> associated with\n the project {{project | displayName}} and <strong>cannot be\n undone</strong>. Make sure this is something you really want to do!\n </p>\n <div ng-show="typeNameToConfirm">\n <p>Type the name of the project to confirm.</p>\n <p>\n <label class="sr-only" for="resource-to-delete">project to delete</label>\n <input\n ng-model="confirmName"\n id="resource-to-delete"\n type="text"\n class="form-control input-lg"\n autocorrect="off"\n autocapitalize="off"\n spellcheck="false"\n autofocus>\n </p>\n </div>\n </div>\n <div class="modal-footer">\n <button ng-disabled="typeNameToConfirm && confirmName !== project.metadata.name && confirmName !== (project | displayName : false)" class="btn btn-lg btn-danger" type="submit" ng-click="delete()">Delete</button>\n <button class="btn btn-lg btn-default" type="button" ng-click="cancel()">Cancel</button>\n </div>\n </form>\n</div>\n'),
$templateCache.put("src/components/delete-project/delete-project.html", '<a href="javascript:void(0)"\n ng-click="openDeleteModal()"\n role="button"\n ng-attr-aria-disabled="{{disableDelete ? \'true\' : undefined}}"\n ng-class="{ \'disabled-link\': disableDelete }"\n>{{label || \'Delete\'}}</a>\n'), $templateCache.put("src/components/edit-project/editProject.html", '<form name="editProjectForm">\n <fieldset ng-disabled="disableInputs">\n <div class="form-group">\n <label for="displayName">Display Name</label>\n <input class="form-control"\n name="displayName"\n id="displayName"\n placeholder="My Project"\n type="text"\n ng-model="editableFields.displayName">\n </div>\n\n <div class="form-group">\n <label for="description">Description</label>\n <textarea class="form-control"\n name="description"\n id="description"\n placeholder="A short description."\n ng-model="editableFields.description"></textarea>\n </div>\n\n <div class="button-group">\n <button type="submit"\n class="btn btn-primary"\n ng-class="{\'dialog-btn\': isDialog}"\n ng-click="update()"\n ng-disabled="editProjectForm.$invalid || disableInputs"\n value="">{{submitButtonLabel}}</button>\n <button\n class="btn btn-default"\n ng-class="{\'dialog-btn\': isDialog}"\n ng-click="cancelEditProject()">\n Cancel\n </button>\n </div>\n </fieldset>\n</form>\n'), $templateCache.put("src/components/delete-project/delete-project.html", '<a href="javascript:void(0)"\n ng-click="openDeleteModal()"\n role="button"\n ng-attr-aria-disabled="{{disableDelete ? \'true\' : undefined}}"\n ng-class="{ \'disabled-link\': disableDelete }"\n>{{label || \'Delete\'}}</a>\n'), $templateCache.put("src/components/edit-project/editProject.html", '<form name="editProjectForm">\n <fieldset ng-disabled="disableInputs">\n <div class="form-group">\n <label for="displayName">Display Name</label>\n <input class="form-control"\n name="displayName"\n id="displayName"\n placeholder="My Project"\n type="text"\n ng-model="editableFields.displayName">\n </div>\n\n <div class="form-group">\n <label for="description">Description</label>\n <textarea class="form-control"\n name="description"\n id="description"\n placeholder="A short description."\n ng-model="editableFields.description"></textarea>\n </div>\n\n <div class="button-group">\n <button type="submit"\n class="btn btn-primary"\n ng-class="{\'dialog-btn\': isDialog}"\n ng-click="update()"\n ng-disabled="editProjectForm.$invalid || disableInputs"\n value="">{{submitButtonLabel}}</button>\n <button\n class="btn btn-default"\n ng-class="{\'dialog-btn\': isDialog}"\n ng-click="cancelEditProject()">\n Cancel\n </button>\n </div>\n </fieldset>\n</form>\n'),
$templateCache.put("src/components/origin-modal-popup/origin-modal-popup.html", '<div class="origin-modal-popup tile-click-prevent" ng-if="$ctrl.shown" ng-style="$ctrl.positionStyle"\n ng-class="{\'position-above\': $ctrl.showAbove, \'position-left\': $ctrl.showLeft}">\n <h4 class="origin-modal-popup-title">\n {{$ctrl.modalTitle}}\n </h4>\n <div ng-transclude></div>\n <a href="" class="origin-modal-popup-close" ng-click="$ctrl.onClose()">\n <span class="pficon pficon-close"></span>\n </a>\n</div>\n'), $templateCache.put("src/components/toast-notifications/toast-notifications.html", '<div class="toast-notifications-list-pf">\n <div\n ng-repeat="(notificationID, notification) in notifications track by notification.trackByID"\n ng-if="!notification.hidden || notification.isHover"\n ng-mouseenter="setHover(notification, true)" ng-mouseleave="setHover(notification, false)">\n <div class="toast-pf alert {{notification.type | alertStatus}}" ng-class="{\'alert-dismissable\': !hideCloseButton}">\n <button ng-if="!hideCloseButton" type="button" class="close" ng-click="close(notification)">\n <span class="pficon pficon-close" aria-hidden="true"></span>\n <span class="sr-only">Close</span>\n </button>\n <span class="{{notification.type | alertIcon}}" aria-hidden="true"></span>\n <span class="sr-only">{{notification.type}}</span>\n <span class="toast-notification-message" ng-if="notification.message">{{notification.message}}</span>\n <div ng-if="notification.details" class="toast-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 </div>\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" ng-href="{{link.href}}" ng-attr-target="{{link.target}}">{{link.label}}</a>\n <span ng-if="!$last" class="toast-action-divider">|</span>\n </span>\n </div>\n </div>\n</div>\n'), $templateCache.put("src/components/origin-modal-popup/origin-modal-popup.html", '<div class="origin-modal-popup tile-click-prevent" ng-if="$ctrl.shown" ng-style="$ctrl.positionStyle"\n ng-class="{\'position-above\': $ctrl.showAbove, \'position-left\': $ctrl.showLeft}">\n <h4 class="origin-modal-popup-title">\n {{$ctrl.modalTitle}}\n </h4>\n <div ng-transclude></div>\n <a href="" class="origin-modal-popup-close" ng-click="$ctrl.onClose()">\n <span class="pficon pficon-close"></span>\n </a>\n</div>\n'), $templateCache.put("src/components/toast-notifications/toast-notifications.html", '<div class="toast-notifications-list-pf">\n <div\n ng-repeat="(notificationID, notification) in notifications track by notification.trackByID"\n ng-if="!notification.hidden || notification.isHover"\n ng-mouseenter="setHover(notification, true)" ng-mouseleave="setHover(notification, false)">\n <div class="toast-pf alert {{notification.type | alertStatus}}" ng-class="{\'alert-dismissable\': !hideCloseButton}">\n <button ng-if="!hideCloseButton" type="button" class="close" ng-click="close(notification)">\n <span class="pficon pficon-close" aria-hidden="true"></span>\n <span class="sr-only">Close</span>\n </button>\n <span class="{{notification.type | alertIcon}}" aria-hidden="true"></span>\n <span class="sr-only">{{notification.type}}</span>\n <span class="toast-notification-message" ng-if="notification.message">{{notification.message}}</span>\n <div ng-if="notification.details" class="toast-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 </div>\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" ng-href="{{link.href}}" ng-attr-target="{{link.target}}">{{link.label}}</a>\n <span ng-if="!$last" class="toast-action-divider">|</span>\n </span>\n </div>\n </div>\n</div>\n'),
$templateCache.put("src/components/truncate-long-text/truncateLongText.html", '<!--\n Do not remove class `truncated-content` (here or below) even though it\'s not\n styled directly in origin-web-common. `truncated-content` is used by\n origin-web-console in certain contexts.\n-->\n<span ng-if="!truncated" ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>\n<span ng-if="truncated">\n <span ng-if="!toggles.expanded">\n <span ng-attr-title="{{content}}" class="truncation-block">\n <span ng-bind-html="truncatedContent | highlightKeywords : keywords" class="truncated-content"></span>&hellip;\n </span>\n <a ng-if="expandable" href="" ng-click="toggles.expanded = true" class="truncation-expand-link">See All</a>\n </span>\n <span ng-if="toggles.expanded">\n <div ng-if="prettifyJson" class="well">\n <a href="" ng-if="!hideCollapse" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a>\n <span ng-bind-html="content | prettifyJSON | highlightKeywords : keywords" class="pretty-json truncated-content"></span>\n </div>\n <span ng-if="!prettifyJson">\n <a href="" ng-if="!hideCollapse" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a>\n <span ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>\n </span>\n </span>\n</span>\n'); $templateCache.put("src/components/truncate-long-text/truncateLongText.html", '<!--\n Do not remove class `truncated-content` (here or below) even though it\'s not\n styled directly in origin-web-common. `truncated-content` is used by\n origin-web-console in certain contexts.\n\n highlightKeywords and linkify are mutually exclusive options\n-->\n<span ng-if="!truncated">\n <span ng-if="!linkify || (highlightKeywords | size)" ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>\n <span ng-if="linkify && !(highlightKeywords | size)" ng-bind-html="content | linkify : \'_blank\'" class="truncated-content"></span>\n</span>\n<!-- To avoid truncating in middle of a link, we only optionally apply linkify to expanded content -->\n<span ng-if="truncated">\n <span ng-if="!toggles.expanded">\n <span ng-attr-title="{{content}}" class="truncation-block">\n <span ng-bind-html="truncatedContent | highlightKeywords : keywords" class="truncated-content"></span>&hellip;\n </span>\n <a ng-if="expandable" href="" ng-click="toggles.expanded = true" class="truncation-expand-link">See All</a>\n </span>\n <span ng-if="toggles.expanded">\n <a href="" ng-if="!hideCollapse" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a>\n <span ng-if="!linkify || (highlightKeywords | size)"\n ng-bind-html="content | highlightKeywords : keywords"\n class="truncated-content"></span>\n <span ng-if="linkify && !(highlightKeywords | size)"\n ng-bind-html="content | linkify : \'_blank\'"\n class="truncated-content"></span>\n </span>\n</span>\n');
} ]), angular.module("openshiftCommonUI").component("bindApplicationForm", { } ]), angular.module("openshiftCommonUI").component("bindApplicationForm", {
controllerAs:"ctrl", controllerAs:"ctrl",
bindings:{ bindings:{
...@@ -470,7 +470,7 @@ useWordBoundary:"=", ...@@ -470,7 +470,7 @@ useWordBoundary:"=",
expandable:"=", expandable:"=",
hideCollapse:"=", hideCollapse:"=",
keywords:"=highlightKeywords", keywords:"=highlightKeywords",
prettifyJson:"=" linkify:"=?"
}, },
templateUrl:"src/components/truncate-long-text/truncateLongText.html", templateUrl:"src/components/truncate-long-text/truncateLongText.html",
link:function(scope) { link:function(scope) {
......
dist/scripts/templates.js
...@@ -429,8 +429,14 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac ...@@ -429,8 +429,14 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
" Do not remove class `truncated-content` (here or below) even though it's not\n" + " Do not remove class `truncated-content` (here or below) even though it's not\n" +
" styled directly in origin-web-common. `truncated-content` is used by\n" + " styled directly in origin-web-common. `truncated-content` is used by\n" +
" origin-web-console in certain contexts.\n" + " origin-web-console in certain contexts.\n" +
"\n" +
" highlightKeywords and linkify are mutually exclusive options\n" +
"-->\n" + "-->\n" +
"<span ng-if=\"!truncated\" ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" + "<span ng-if=\"!truncated\">\n" +
" <span ng-if=\"!linkify || (highlightKeywords | size)\" ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" +
" <span ng-if=\"linkify && !(highlightKeywords | size)\" ng-bind-html=\"content | linkify : '_blank'\" class=\"truncated-content\"></span>\n" +
"</span>\n" +
"<!-- To avoid truncating in middle of a link, we only optionally apply linkify to expanded content -->\n" +
"<span ng-if=\"truncated\">\n" + "<span ng-if=\"truncated\">\n" +
" <span ng-if=\"!toggles.expanded\">\n" + " <span ng-if=\"!toggles.expanded\">\n" +
" <span ng-attr-title=\"{{content}}\" class=\"truncation-block\">\n" + " <span ng-attr-title=\"{{content}}\" class=\"truncation-block\">\n" +
...@@ -439,14 +445,13 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac ...@@ -439,14 +445,13 @@ angular.module('openshiftCommonUI').run(['$templateCache', function($templateCac
" <a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" class=\"truncation-expand-link\">See All</a>\n" + " <a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" class=\"truncation-expand-link\">See All</a>\n" +
" </span>\n" + " </span>\n" +
" <span ng-if=\"toggles.expanded\">\n" + " <span ng-if=\"toggles.expanded\">\n" +
" <div ng-if=\"prettifyJson\" class=\"well\">\n" +
" <a href=\"\" ng-if=\"!hideCollapse\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a>\n" +
" <span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" +
" </div>\n" +
" <span ng-if=\"!prettifyJson\">\n" +
" <a href=\"\" ng-if=\"!hideCollapse\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a>\n" + " <a href=\"\" ng-if=\"!hideCollapse\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a>\n" +
" <span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" + " <span ng-if=\"!linkify || (highlightKeywords | size)\"\n" +
" </span>\n" + " ng-bind-html=\"content | highlightKeywords : keywords\"\n" +
" class=\"truncated-content\"></span>\n" +
" <span ng-if=\"linkify && !(highlightKeywords | size)\"\n" +
" ng-bind-html=\"content | linkify : '_blank'\"\n" +
" class=\"truncated-content\"></span>\n" +
" </span>\n" + " </span>\n" +
"</span>\n" "</span>\n"
); );
......
src/components/truncate-long-text/truncateLongText.html
...@@ -2,8 +2,14 @@ ...@@ -2,8 +2,14 @@
Do not remove class `truncated-content` (here or below) even though it's not Do not remove class `truncated-content` (here or below) even though it's not
styled directly in origin-web-common. `truncated-content` is used by styled directly in origin-web-common. `truncated-content` is used by
origin-web-console in certain contexts. origin-web-console in certain contexts.
highlightKeywords and linkify are mutually exclusive options
--> -->
<span ng-if="!truncated" ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span> <span ng-if="!truncated">
<span ng-if="!linkify || (highlightKeywords | size)" ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>
<span ng-if="linkify && !(highlightKeywords | size)" ng-bind-html="content | linkify : '_blank'" class="truncated-content"></span>
</span>
<!-- To avoid truncating in middle of a link, we only optionally apply linkify to expanded content -->
<span ng-if="truncated"> <span ng-if="truncated">
<span ng-if="!toggles.expanded"> <span ng-if="!toggles.expanded">
<span ng-attr-title="{{content}}" class="truncation-block"> <span ng-attr-title="{{content}}" class="truncation-block">
...@@ -12,13 +18,12 @@ ...@@ -12,13 +18,12 @@
<a ng-if="expandable" href="" ng-click="toggles.expanded = true" class="truncation-expand-link">See All</a> <a ng-if="expandable" href="" ng-click="toggles.expanded = true" class="truncation-expand-link">See All</a>
</span> </span>
<span ng-if="toggles.expanded"> <span ng-if="toggles.expanded">
<div ng-if="prettifyJson" class="well">
<a href="" ng-if="!hideCollapse" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a>
<span ng-bind-html="content | prettifyJSON | highlightKeywords : keywords" class="pretty-json truncated-content"></span>
</div>
<span ng-if="!prettifyJson">
<a href="" ng-if="!hideCollapse" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a> <a href="" ng-if="!hideCollapse" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a>
<span ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span> <span ng-if="!linkify || (highlightKeywords | size)"
</span> ng-bind-html="content | highlightKeywords : keywords"
class="truncated-content"></span>
<span ng-if="linkify && !(highlightKeywords | size)"
ng-bind-html="content | linkify : '_blank'"
class="truncated-content"></span>
</span> </span>
</span> </span>
src/components/truncate-long-text/truncateLongText.js
...@@ -15,7 +15,7 @@ angular.module('openshiftCommonUI') ...@@ -15,7 +15,7 @@ angular.module('openshiftCommonUI')
// When expandable is on, optionally hide the collapse link so text can only be expanded. (Used for toast notifications.) // When expandable is on, optionally hide the collapse link so text can only be expanded. (Used for toast notifications.)
hideCollapse: '=', 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 linkify: '=?'
}, },
templateUrl: 'src/components/truncate-long-text/truncateLongText.html', templateUrl: 'src/components/truncate-long-text/truncateLongText.html',
link: function(scope) { link: function(scope) {
......
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