From 7292e0015896b2a0aa027217d2fa6b3f17a7c79f Mon Sep 17 00:00:00 2001
From: kialam <digitalanime@gmail.com>
Date: Thu, 24 May 2018 17:27:03 -0400
Subject: [PATCH] create componentized tags

---
 .../features/output/search.partial.html       |  7 +--
 awx/ui/client/lib/components/_index.less      |  1 +
 awx/ui/client/lib/components/index.js         |  2 +
 awx/ui/client/lib/components/tag/_index.less  | 53 +++++++++++++++++++
 .../lib/components/tag/tag.directive.js       | 16 ++++++
 .../lib/components/tag/tag.partial.html       |  6 +++
 6 files changed, 80 insertions(+), 5 deletions(-)
 create mode 100644 awx/ui/client/lib/components/tag/_index.less
 create mode 100644 awx/ui/client/lib/components/tag/tag.directive.js
 create mode 100644 awx/ui/client/lib/components/tag/tag.partial.html

diff --git a/awx/ui/client/features/output/search.partial.html b/awx/ui/client/features/output/search.partial.html
index b3937b17ee..4ef70a4ffb 100644
--- a/awx/ui/client/features/output/search.partial.html
+++ b/awx/ui/client/features/output/search.partial.html
@@ -37,11 +37,8 @@
 </form>
 
 <div class="jobz-tagz">
-    <div class="LabelList-tagContainer" ng-repeat="tag in vm.tags track by $index">
-        <div class="LabelList-tag LabelList-tag--deletable"><span class="LabelList-name">{{ tag }}</span></div>
-        <div class="LabelList-deleteContainer" ng-click="vm.removeSearchTag($index)">
-            <i class="fa fa-times LabelList-tagDelete"></i>
-        </div>
+    <div class="TagComponentWrapper" ng-repeat="tag in vm.tags track by $index">
+        <at-tag tag="tag" remove-tag="vm.removeSearchTag($index)"></at-tag>
     </div>
     <div><a href class="jobz-searchClearAll" ng-click="vm.clearSearch()" ng-show="!(vm.tags | isEmpty)">
         {{:: vm.strings.get('search.CLEAR_ALL') }}
diff --git a/awx/ui/client/lib/components/_index.less b/awx/ui/client/lib/components/_index.less
index 72c14fe4b5..7d661e8122 100644
--- a/awx/ui/client/lib/components/_index.less
+++ b/awx/ui/client/lib/components/_index.less
@@ -8,6 +8,7 @@
 @import 'popover/_index';
 @import 'relaunchButton/_index';
 @import 'tabs/_index';
+@import 'tag/_index';
 @import 'truncate/_index';
 @import 'utility/_index';
 @import 'code-mirror/_index';
diff --git a/awx/ui/client/lib/components/index.js b/awx/ui/client/lib/components/index.js
index 35b0e0193d..bea2f38ce6 100644
--- a/awx/ui/client/lib/components/index.js
+++ b/awx/ui/client/lib/components/index.js
@@ -32,6 +32,7 @@ import sideNav from '~components/layout/side-nav.directive';
 import sideNavItem from '~components/layout/side-nav-item.directive';
 import tab from '~components/tabs/tab.directive';
 import tabGroup from '~components/tabs/group.directive';
+import tag from '~components/tag/tag.directive';
 import topNavItem from '~components/layout/top-nav-item.directive';
 import truncate from '~components/truncate/truncate.directive';
 import atCodeMirror from '~components/code-mirror';
@@ -78,6 +79,7 @@ angular
     .directive('atSideNavItem', sideNavItem)
     .directive('atTab', tab)
     .directive('atTabGroup', tabGroup)
+    .directive('atTag', tag)
     .directive('atTopNavItem', topNavItem)
     .directive('atTruncate', truncate)
     .service('BaseInputController', BaseInputController)
diff --git a/awx/ui/client/lib/components/tag/_index.less b/awx/ui/client/lib/components/tag/_index.less
new file mode 100644
index 0000000000..28ff8ecc82
--- /dev/null
+++ b/awx/ui/client/lib/components/tag/_index.less
@@ -0,0 +1,53 @@
+.TagComponentWrapper {
+    padding: 5px;
+}
+.TagComponent {
+    color: white;
+    background: #337AB7;
+    border-radius: @at-space;
+    font-size: 12px;
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    min-height: @at-space-4x;
+    overflow: hidden;
+    max-width: 200px;
+}
+
+.TagComponent-name {
+    margin: @at-space @at-space-2x;
+    align-self: center;
+    word-break: break-word;
+    text-transform: lowercase;
+}
+
+.TagComponent--cloud {
+    &:before {
+        content: '\f0c2';
+        color: white;
+        height: 20px;
+        width: @at-space-4x;
+    }
+}
+
+.TagComponent--key {
+    &:before {
+        content: '\f084';
+        color: white;
+        height: @at-space-4x;
+        width: @at-space-4x;
+    }
+}
+
+.TagComponent-button {
+    padding: 0 @at-space;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.TagComponent-button:hover {
+    cursor: pointer;
+    border-color: @default-err;
+    background-color: @default-err;
+}
diff --git a/awx/ui/client/lib/components/tag/tag.directive.js b/awx/ui/client/lib/components/tag/tag.directive.js
new file mode 100644
index 0000000000..0616bb5e0d
--- /dev/null
+++ b/awx/ui/client/lib/components/tag/tag.directive.js
@@ -0,0 +1,16 @@
+const templateUrl = require('~components/tag/tag.partial.html');
+
+function atTag () {
+    return {
+        restrict: 'E',
+        replace: true,
+        transclude: true,
+        templateUrl,
+        scope: {
+            tag: '=',
+            removeTag: '&?',
+        },
+    };
+}
+
+export default atTag;
diff --git a/awx/ui/client/lib/components/tag/tag.partial.html b/awx/ui/client/lib/components/tag/tag.partial.html
new file mode 100644
index 0000000000..ba7fbada4f
--- /dev/null
+++ b/awx/ui/client/lib/components/tag/tag.partial.html
@@ -0,0 +1,6 @@
+<div class="TagComponent" ng-transclude>
+    <div class="TagComponent-name">{{ tag }}</div>
+    <div ng-if="removeTag" class="TagComponent-button" ng-click="removeTag(index)">
+        <i class="fa fa-times TagComponent-button__delete"></i>
+    </div>
+</div>
\ No newline at end of file