diff --git a/awx/ui/client/src/job-templates/labels/labelsList.block.less b/awx/ui/client/src/job-templates/labels/labelsList.block.less index d851bd545e..2693ee99ee 100644 --- a/awx/ui/client/src/job-templates/labels/labelsList.block.less +++ b/awx/ui/client/src/job-templates/labels/labelsList.block.less @@ -8,7 +8,7 @@ } .LabelList-tagContainer, -.LabelList-seeMore { +.LabelList-seeMoreLess { display: flex; max-width: 100%; } @@ -27,7 +27,7 @@ overflow: hidden; } -.LabelList-seeMore { +.LabelList-seeMoreLess { color: @default-link; margin: 4px 0px; text-transform: uppercase; @@ -37,7 +37,7 @@ font-size: 11px; } -.LabelList-seeMore:hover { +.LabelList-seeMoreLess:hover { color: @default-link-hov; } diff --git a/awx/ui/client/src/job-templates/labels/labelsList.directive.js b/awx/ui/client/src/job-templates/labels/labelsList.directive.js index a5f055bb6e..ee5c1469d8 100644 --- a/awx/ui/client/src/job-templates/labels/labelsList.directive.js +++ b/awx/ui/client/src/job-templates/labels/labelsList.directive.js @@ -47,6 +47,13 @@ export default }); }; + scope.seeLess = function() { + // Trim the labels array back down to 10 items + scope.labels = scope.labels.slice(0, 10); + // Re-set the seeMoreInteractive flag so that the "See More" will be displayed + scope.seeMoreInactive = true; + }; + scope.deleteLabel = function(templateId, templateName, labelId, labelName) { var action = function () { $('#prompt-modal').modal('hide'); diff --git a/awx/ui/client/src/job-templates/labels/labelsList.partial.html b/awx/ui/client/src/job-templates/labels/labelsList.partial.html index 0bcc5f795a..b14ec6deb9 100644 --- a/awx/ui/client/src/job-templates/labels/labelsList.partial.html +++ b/awx/ui/client/src/job-templates/labels/labelsList.partial.html @@ -8,5 +8,7 @@ {{ label.name }} -