From 8d7d933519c4246a04e3e36ee75fb1eeec42d404 Mon Sep 17 00:00:00 2001
From: Michael Abashian <mabashian@ansible.com>
Date: Fri, 15 Jul 2016 16:02:51 -0400
Subject: [PATCH] Added the ability to "See Less" labels on the job template
 list

---
 .../client/src/job-templates/labels/labelsList.block.less  | 6 +++---
 .../src/job-templates/labels/labelsList.directive.js       | 7 +++++++
 .../src/job-templates/labels/labelsList.partial.html       | 4 +++-
 3 files changed, 13 insertions(+), 4 deletions(-)

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 @@
         <span class="LabelList-name">{{ label.name }}</span>
     </div>
 </div>
-<div class="LabelList-seeMore" ng-show="count > 10 && seeMoreInactive"
+<div class="LabelList-seeMoreLess" ng-show="count > 10 && seeMoreInactive"
     ng-click="seeMore()">View More</div>
+<div class="LabelList-seeMoreLess" ng-show="count > 10 && !seeMoreInactive"
+    ng-click="seeLess()">View Less</div>